/* Schriften lokal eingebunden, keine Verbindung zu Google */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-variable.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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dmmono-400.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dmmono-500.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; }

/* Avynto Webseite. Tokens und Komponenten folgen AVYNTO-DESIGN-SYSTEM.md */

:root {
  --surface-0: #060a0c;
  --surface-1: #0b1013;
  --surface-2: #121a1e;
  --surface-3: #1a262b;
  --border: #2a373c;
  --border-strong: #6a8089;
  --ink: #edf2f3;
  --ink-muted: #aab7bb;
  --paper: #dfe4e5;
  --on-paper: #0f1416;
  --on-paper-muted: #4a5a60;
  --volt: #00f4fc;
  --volt-subtle: #04282e;
  --on-volt: #00141a;
  --warning: #ffb020;
  --danger: #ff6b4a;
  --focus-ring: #00f4fc;
  --glass: #060a0c99;
  --glass-edge: #ffffff1f;
  --shadow-float: 0 24px 64px #00000099;
  --shadow-dot: 0 0 12px #00f4fc99;
  --glow: 0 0 32px #00f4fc40;

  --font-sans: "Manrope", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--volt); color: var(--on-volt); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--surface-0); padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.8125rem; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 900px) { .wrap { padding: 0 var(--space-6); } }
.section { padding: var(--space-8) 0; }
@media (min-width: 900px) { .section { padding: var(--space-9) 0; } }
.muted { color: var(--ink-muted); }
.volt { color: var(--volt); text-shadow: 0 0 28px #00f4fc55; }
.mono { font-family: var(--font-mono); }

/* Typografie */
.display {
  font-size: clamp(2.9rem, 9.2vw, 6rem);
  line-height: 0.93;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2.25rem, 5.6vw, 3.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.h2 span { display: block; }
.h3 { font-size: 1.75rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.04em; }
.h4 { font-size: 1.375rem; line-height: 1.625rem; font-weight: 700; letter-spacing: -0.03em; }
.lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--ink-muted); max-width: 34rem; text-wrap: pretty; }
.label { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Button */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1rem; font-weight: 700;
  min-height: 44px; padding: 14px 22px; border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.vt-btn:active { transform: scale(0.97); transition-duration: 0.1s; }
.vt-btn__arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.vt-btn:hover .vt-btn__arrow { transform: translateX(3px); }
.vt-btn--primary { background: var(--ink); color: var(--surface-0); }
.vt-btn--primary:hover { background: var(--volt); color: var(--on-volt); box-shadow: var(--glow); }
.vt-btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.vt-btn--secondary:hover { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt) inset, var(--glow); }
.vt-btn--ghost { background: transparent; color: var(--ink); padding: 4px 0; min-height: 0; border-radius: 0; }
.vt-btn--ghost:hover { color: var(--volt); }
.vt-btn--ghost:hover .vt-btn__arrow { transform: translate(2px, -2px); }

.vt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--volt); box-shadow: var(--shadow-dot); flex: none; animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse { 50% { opacity: 0.45; } }

/* Badge */
.vt-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--ink-muted); }
.vt-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vt-badge--volt { color: var(--volt); }
.vt-badge--volt .vt-badge__dot { box-shadow: var(--shadow-dot); animation: dotPulse 2.4s ease-in-out infinite; }
.vt-badge--warning { color: var(--warning); }

/* Battery */
.vt-battery { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; }
.vt-battery__body { display: flex; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); overflow: hidden; width: 96px; height: 24px; }
.vt-battery__fill { height: 100%; width: 0; background: var(--volt); transition: width 1.2s var(--ease), background 0.4s; box-shadow: 0 0 16px #00f4fc88; }
.vt-battery__fill--warning { background: var(--warning); box-shadow: none; }
.vt-battery__fill--danger { background: var(--danger); box-shadow: none; }
.vt-battery__label { color: var(--ink); min-width: 3ch; }

/* Nav (Glas) */
.nav { position: sticky; top: 0; z-index: 20; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-edge); letter-spacing: 0.01em; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--space-5); background: linear-gradient(to bottom, var(--glass), transparent); pointer-events: none; }
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-4); min-height: var(--nav-h); }
@media (min-width: 900px) { .nav__inner { padding: var(--space-3) var(--space-6); } }
.nav__brand { display: inline-flex; width: max-content; }
.nav__brand img, .footer img { height: 26px; width: auto; }
.nav__cta { display: flex; gap: var(--space-2); justify-content: center; }
.nav__cta .vt-btn { padding: 12px 20px; min-height: 44px; }
.nav__side { justify-self: end; display: none; }
@media (min-width: 900px) { .nav__side { display: block; } .nav__side a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; padding: 12px 0; border-bottom: 1px solid transparent; } .nav__side a:hover { border-bottom-color: var(--border-strong); } }
@media (max-width: 560px) {
  .nav__inner { grid-template-columns: 1fr; }
  .nav__brand { display: none; }
  .nav__cta .vt-btn { padding: 12px 14px; font-size: 0.75rem; }
}
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--surface-0); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav::after { display: none; } }
@media (prefers-contrast: more) { .nav { background: var(--surface-0); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border-strong); } .nav::after { display: none; } }

/* Hero */
.hero { position: relative; min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; text-align: center; overflow: hidden; padding: var(--space-8) 0 var(--space-9); isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.orb { position: absolute; z-index: -1; left: 50%; top: 42%; width: min(900px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #00f4fc29 0%, #00f4fc0d 40%, transparent 68%); filter: blur(40px); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.hero__vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 40%, var(--surface-0) 100%); pointer-events: none; }
.hero .display { margin: 0 auto var(--space-5); }
.hero .display span { display: block; }
.hero .display { font-weight: 800; letter-spacing: -0.045em; line-height: 1; background: linear-gradient(180deg, #ffffff 30%, #bfe3e5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .display .volt { font-style: normal; -webkit-text-fill-color: var(--volt); text-shadow: none; filter: drop-shadow(0 0 22px #00f4fc66); }
.hero .lead { margin: 0 auto; font-size: 1.25rem; color: #cfe3e5; max-width: 36rem; }
.hero__status { display: inline-flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: #0b1013b3; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__status .vt-battery__body { background: var(--surface-0); }
.scrollcue { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); color: var(--ink-muted); text-decoration: none; display: grid; justify-items: center; gap: var(--space-2); }
.scrollcue > i { width: 1px; height: 36px; background: linear-gradient(var(--volt), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-height: 640px) { .scrollcue { display: none; } }

/* Ticker */
.vt-ticker { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; font-family: var(--font-mono); color: var(--ink-muted); }
.vt-ticker__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.vt-ticker__run { display: flex; align-items: center; gap: var(--space-7); padding-right: var(--space-7); flex: none; }
.vt-ticker__item { font-size: 1.125rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.vt-ticker__star { color: var(--volt); font-size: 0.875rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Invertiertes Band */
.band { background: var(--paper); color: var(--on-paper); position: relative; overflow: hidden; }
.band .wrap { display: grid; gap: var(--space-7); padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (min-width: 900px) { .band .wrap { grid-template-columns: 1.4fr 1fr; align-items: center; padding-top: var(--space-9); padding-bottom: var(--space-9); } }
.band__text { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; font-weight: 700; letter-spacing: -0.05em; text-wrap: balance; }
.band__text span { color: var(--on-paper-muted); }
.drain { display: grid; gap: var(--space-4); }
.drain__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); }
.drain__pct { font-size: 3rem; line-height: 3.25rem; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.drain__state { color: var(--on-paper-muted); }
.drain__bar { display: flex; gap: 5px; height: 64px; }
.drain__bar i { flex: 1; border-radius: var(--radius-sm); border: 1.5px solid var(--on-paper-muted); transition: background 0.25s, border-color 0.25s; }
.drain__bar i.on { background: var(--on-paper); border-color: var(--on-paper); }
.drain[data-tone="warning"] .drain__bar i.on { background: #b27300; border-color: #b27300; }
.drain[data-tone="danger"] .drain__bar i.on { background: #c2381c; border-color: #c2381c; }
.drain[data-tone="danger"] .drain__pct { color: #c2381c; }
.drain[data-tone="danger"] .drain__bar { animation: shake 0.5s linear infinite; }
@keyframes shake { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }

/* Schritte + Station */
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); } .split--flip > :first-child { order: 2; } }
.split__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .steps { grid-template-columns: 1fr 1fr; } }
.vt-step { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; overflow: hidden; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.3s var(--ease); }
.vt-step:active { transform: scale(0.98); transition-duration: 0.1s; }
.vt-step__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; color: var(--ink-muted); margin-bottom: var(--space-4); display: flex; justify-content: space-between; transition: color 0.4s; }
.vt-step__title { font-size: 1.5rem; line-height: 1.6rem; font-weight: 700; letter-spacing: -0.035em; }
.vt-step__text { font-size: 0.875rem; line-height: 1.4375rem; color: var(--ink-muted); }
.vt-step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--volt); box-shadow: var(--glow); transform: scaleX(0); transform-origin: left; }
.vt-step--active { border-color: var(--ink); background: var(--surface-2); }
.vt-step--active .vt-step__num { color: var(--volt); }
.vt-step--active::after { animation: fillbar var(--cycle, 3.6s) linear forwards; }
@keyframes fillbar { to { transform: scaleX(1); } }

.stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; border-radius: var(--radius-lg); background: radial-gradient(ellipse 80% 55% at 50% 92%, #00f4fc22, transparent 70%), var(--surface-1); overflow: hidden; border: 1px solid var(--border); transform-style: preserve-3d; will-change: transform; }
.stage__img { position: absolute; inset: 0; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 30px 40px #000000aa); }
.stage__mask { position: absolute; left: 0; top: 0; width: 28%; height: 9%; background: #e1e7e8; }
.stage__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, #0b101326 100%); pointer-events: none; }
.stage__grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); pointer-events: none; }
.scan { position: absolute; left: 0; right: 0; height: 90px; top: -90px; background: linear-gradient(to bottom, transparent, #00f4fc14 85%, #00f4fc55 100%); border-bottom: 1px solid #00f4fc88; animation: scan 6s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0% { top: -90px; } 70%, 100% { top: 100%; } }
.corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--border-strong); opacity: 0.7; }
.corner--tl { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.corner--tr { right: 14px; top: 14px; border-left: 0; border-bottom: 0; }
.corner--bl { left: 14px; bottom: 14px; border-right: 0; border-top: 0; }
.corner--br { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.slot { position: absolute; width: 3.4%; height: 0.55%; margin: -0.27% 0 0 -1.7%; background: var(--volt); box-shadow: 0 0 10px 2px #00f4fcaa; border-radius: 2px; opacity: 0; animation: slotLoad 4.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes slotLoad { 0%, 100% { opacity: 0.15; } 40%, 60% { opacity: 1; } }
.chip { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius-pill); background: #060a0ce6; color: var(--ink); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip--status { left: 3.5%; top: 2.5%; }
.chip--msg { right: 4%; bottom: 4.5%; animation: bob 6s ease-in-out infinite; transition: none; }
.chip--bat { left: 4%; bottom: 4.5%; animation: bob 7s ease-in-out -2s infinite; }
.chip--msg b { font-weight: 400; color: var(--volt); }
@keyframes bob { 50% { transform: translateY(-6px); } }
.chip--msg.swap { animation: swapIn 0.5s var(--ease), bob 6s ease-in-out 0.5s infinite; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } }
.chip .vt-battery__body { width: 64px; height: 16px; background: var(--surface-0); }
@media (max-width: 480px) { .chip--bat { left: 3%; bottom: 3%; } .chip--msg { right: 3%; bottom: 3%; max-width: 48%; } .chip--bat .vt-battery__body { display: none; } .chip { font-size: 0.5625rem; padding: 6px 9px; } .chip .vt-battery__body { width: 44px; } }

/* Kompatibilität */
.head { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.devices { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .devices { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; padding: var(--space-5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #00f4fc1f, transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.ico { width: 44px; height: 44px; color: var(--ink); margin-bottom: var(--space-6); transition: color 0.4s, filter 0.4s; }
.card:hover .ico { color: var(--volt); filter: drop-shadow(0 0 10px #00f4fc88); }
.devices .card { aspect-ratio: 1 / 0.92; display: flex; flex-direction: column; justify-content: space-between; }
.devices .card .ico { margin-bottom: 0; width: 52px; height: 52px; }
.connectors { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.pill { display: inline-flex; align-items: center; gap: var(--space-3); padding: 12px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pill svg { width: 18px; height: 18px; color: var(--volt); }
.pill--on { border-color: var(--volt); background: var(--volt-subtle); box-shadow: var(--glow); }

/* App */
.app-note { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }
.phone-wrap { perspective: 1400px; display: grid; place-items: center; min-height: 520px; position: relative; }
.phone-wrap::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, #00f4fc26, transparent 65%); filter: blur(30px); }
.phone { position: relative; width: 272px; height: 540px; border: 1.5px solid var(--border-strong); border-radius: 40px; background: var(--surface-0); box-shadow: var(--shadow-float), 0 0 0 6px var(--surface-1); padding: 18px 16px; transform: rotateY(-14deg) rotateX(5deg) rotateZ(3deg); animation: phoneFloat 8s ease-in-out infinite; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); overflow: hidden; }
@keyframes phoneFloat { 50% { transform: rotateY(-8deg) rotateX(3deg) rotateZ(2deg) translateY(-12px); } }
.phone__notch { width: 84px; height: 22px; border-radius: var(--radius-pill); background: var(--surface-2); margin: 0 auto; }
.phone__title { font-size: 1.375rem; line-height: 1.4rem; font-weight: 700; letter-spacing: -0.06em; margin-top: var(--space-2); }
.phone__title span { display: block; color: var(--ink-muted); }
.phone__list { display: grid; gap: var(--space-3); align-content: start; }
.mini { border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; gap: 4px; }
.mini--on { border-color: var(--ink); }
.mini__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.09em; color: var(--ink-muted); text-transform: uppercase; }
.mini__name { font-weight: 700; font-size: 1rem; letter-spacing: -0.04em; }
.mini__meta { font-size: 0.75rem; color: var(--ink-muted); }
.mini__segs { display: flex; gap: 3px; margin-top: 6px; }
.mini__segs i { width: 9px; height: 14px; border: 1px solid var(--border-strong); border-radius: 3px; }
.mini__segs i.on { background: var(--ink); border-color: var(--ink); }
.phone__btn { text-align: center; padding: 13px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface-0); font-weight: 700; font-size: 0.75rem; }
.phone-wrap .vt-badge { position: absolute; right: 4%; top: 6%; background: var(--surface-0); z-index: 2; }

/* Vorteile */
.adv { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .adv { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .adv { grid-template-columns: repeat(4, 1fr); } }
.adv .card { display: grid; gap: var(--space-3); align-content: start; min-height: 220px; }
.adv .ico { width: 36px; height: 36px; margin-bottom: var(--space-5); }
.adv .card p { font-size: 0.875rem; line-height: 1.4375rem; letter-spacing: 0.005em; color: var(--ink-muted); }
.adv .card--cta { background: var(--volt-subtle); border-color: #00f4fc55; align-content: space-between; }
.adv .card--cta .h4 { font-size: 1.75rem; line-height: 1.75rem; }

/* Karte */
.mapbox { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; }
.mapbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.maptag { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); }
.maptag--de { right: 5%; top: 5%; }
.maptag--es { left: 5%; bottom: 5%; }
.legend { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.legend li { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.legend li:last-child { border-bottom: 1px solid var(--border); }
.legend strong { font-size: 1.25rem; letter-spacing: -0.04em; flex: 1; }
.swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.swatch--on { background: var(--volt); box-shadow: var(--shadow-dot); }
.swatch--soon { border: 1.5px solid var(--border-strong); }

/* Partner */
.partner { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); padding: var(--space-5); display: grid; gap: var(--space-7); position: relative; overflow: hidden; }
@media (min-width: 640px) { .partner { padding: var(--space-7); } }
@media (min-width: 960px) { .partner { grid-template-columns: 1fr 1.1fr; align-items: start; padding: var(--space-8) var(--space-7); } }
.partner::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, #00f4fc1f, transparent 65%); filter: blur(30px); pointer-events: none; }
.partner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.form { display: grid; gap: var(--space-4); position: relative; }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px 16px; min-height: 48px; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7c8d93; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px #00f4fc33; }
.field input:user-invalid { border-color: var(--danger); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-muted); }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--volt); flex: none; }
.check a { color: var(--ink); }
.form__msg { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; min-height: 1rem; }
.form__msg.ok { color: var(--volt); }
.form__msg.err { color: var(--danger); }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: var(--space-7) 0 var(--space-6); }
.footer__inner { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1fr auto; align-items: center; } }
.footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer nav a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; }
.footer nav a:hover { border-bottom-color: var(--volt); }
.footer small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; }

/* Rechtstexte */
.legal { padding: var(--space-8) 0 var(--space-9); }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.075em; margin-bottom: var(--space-7); }
.legal h2 { font-size: 1.375rem; line-height: 1.625rem; font-weight: 700; letter-spacing: -0.05em; margin: var(--space-7) 0 var(--space-3); }
.legal p, .legal li { color: var(--ink-muted); margin-bottom: var(--space-3); }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal a:hover { color: var(--volt); }
.todo { background: var(--volt-subtle); color: var(--volt); padding: 1px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.875em; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vt-ticker__track, .orb, .scan, .slot, .chip, .phone, .vt-dot, .scrollcue i, .vt-badge__dot { animation: none !important; }
  .vt-btn, .vt-btn__arrow, .card, .stage { transition: none; }
  .vt-btn:active { transform: none; }
  .js .reveal { transform: none; filter: none; transition: opacity 0.4s ease; transition-delay: 0s; }
  .drain[data-tone="danger"] .drain__bar { animation: none; }
  .vt-step--active::after { animation: none; transform: scaleX(1); }
  .slot { opacity: 0.8; }
}

/* Hero Erweiterung */
.vt-btn--glow { background: var(--volt); color: var(--on-volt); box-shadow: 0 0 28px #00f4fc66; }
.vt-btn--glow:hover { background: #5ffbff; box-shadow: 0 0 44px #00f4fcaa; }
.nav--main .nav__inner { grid-template-columns: 1fr auto 1fr; }
.nav__links { display: none; gap: var(--space-6); }
.nav__links a { font-size: 0.875rem; font-weight: 500; color: var(--ink-muted); text-decoration: none; padding: 12px 0; transition: color 0.3s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__right { justify-self: end; }
@media (min-width: 900px) { .nav__links { display: flex; } }
@media (max-width: 899px) { .nav--main .nav__inner { grid-template-columns: 1fr auto; } }
@media (max-width: 560px) { .nav--main .nav__inner { grid-template-columns: 1fr auto; } .nav--main .nav__brand { display: inline-flex; } .nav--main .nav__right .vt-btn { padding: 12px 16px; font-size: 0.75rem; } }
.hero__content { position: relative; }
.hero__line { width: min(1000px, 100%); height: 1px; margin: var(--space-6) auto; background: linear-gradient(90deg, transparent, #00f4fc66, transparent); }
.hero__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hero__cta .vt-btn { padding: 18px 32px; font-size: 0.9375rem; min-height: 56px; }
.hero__cta .vt-btn--secondary { background: #0b101399; border-color: #2a373c; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__rings { position: absolute; left: 50%; top: 46%; width: min(1100px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed #00f4fc22; z-index: -1; pointer-events: none; }
.hero__rings::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid #00f4fc14; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ghost { position: absolute; z-index: -1; top: 16%; width: 240px; height: 440px; border-radius: 40px; border: 2px solid #00f4fc66; background: linear-gradient(160deg, #00f4fc33, #00f4fc0d); box-shadow: 0 0 60px #00f4fc22, inset 0 0 40px #00f4fc14; filter: blur(3px); pointer-events: none; animation: ghostFloat 9s ease-in-out infinite; }
.ghost::before { content: ""; position: absolute; left: 50%; top: 52%; width: 90px; height: 90px; margin: -45px; border-radius: 50%; border: 2px solid #00f4fc55; }
.ghost--l { left: 3%; transform: rotate(-9deg); }
.ghost--r { right: 3%; transform: rotate(9deg); animation-delay: -4s; }
@keyframes ghostFloat { 50% { translate: 0 -16px; } }
@media (max-width: 860px) { .ghost { opacity: 0.5; width: 160px; height: 300px; } .ghost--l { left: -40px; } .ghost--r { right: -40px; } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, #00f4fc2e); overflow: hidden; }
.floor::before { content: ""; position: absolute; left: -30%; right: -30%; bottom: 0; height: 160%; background-image: linear-gradient(#00f4fc66 1px, transparent 1px), linear-gradient(90deg, #00f4fc66 1px, transparent 1px); background-size: 64px 64px; transform: perspective(420px) rotateX(64deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 75%); mask-image: linear-gradient(to top, #000 5%, transparent 75%);  }
@keyframes floorMove { to { background-position: 0 64px; } }
.scrollcue { bottom: var(--space-6); }
.mouse { width: 26px; height: 42px; border: 2px solid #00f4fc77; border-radius: 14px; display: block; position: relative; box-shadow: 0 0 18px #00f4fc33; }
.mouse i { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--volt); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 80%, 100% { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .hero__rings, .ghost, .floor::before, .mouse i { animation: none !important; } }

/* Maus Effekte */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
.cursor-ring, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 61; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.has-cursor .cursor-ring, .has-cursor .cursor-dot { opacity: 1; }
.cursor-ring.is-hidden, .cursor-dot.is-hidden { opacity: 0 !important; }
.cursor-ring { width: 38px; height: 38px; margin: 0; border-radius: 50%; border: 1.5px solid #00f4fc99; box-shadow: 0 0 18px #00f4fc40, inset 0 0 12px #00f4fc22; transition: opacity 0.3s, width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s, border-color 0.35s; }
.cursor-ring.is-link { width: 64px; height: 64px; background: #00f4fc14; border-color: var(--volt); }
.cursor-ring.is-down { width: 26px; height: 26px; background: #00f4fc33; }
.cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 12px var(--volt); }
.hero { --px: 0; --py: 0; }
.hero .orb { margin-left: calc(var(--px) * -40px); margin-top: calc(var(--py) * -30px); }
.hero .hero__rings { margin-left: calc(var(--px) * 22px); margin-top: calc(var(--py) * 18px); }
.hero .ghost--l { margin-left: calc(var(--px) * -34px); margin-top: calc(var(--py) * -24px); }
.hero .ghost--r { margin-left: calc(var(--px) * -48px); margin-top: calc(var(--py) * -30px); }
.hero .hero__content { transform: translate(calc(var(--px) * 7px), calc(var(--py) * 5px)); }
.floor { transform: translateX(calc(var(--px) * -18px)); }
.vt-btn { transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease), translate 0.25s var(--ease); }

/* Apple Design Durchgang */
.card:active { transform: scale(0.985); transition-duration: 0.1s; }
.footer nav a, .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
.nav { transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.nav.is-scrolled { background: #060a0cb3; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.nav.is-scrolled::after { height: var(--space-6); }
.phone-tilt { transform-style: preserve-3d; will-change: transform; }
.chip, .hero__cta .vt-btn--secondary { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
@media (prefers-reduced-transparency: reduce) {
  .chip, .hero__cta .vt-btn--secondary, .nav.is-scrolled { background: var(--surface-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .chip, .hero__cta .vt-btn--secondary { background: var(--surface-0); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--border-strong); }
  .ink-muted, .muted, .lead { color: var(--ink); }
}

/* Station: Powerbank poppt aus dem Slot */
.stage__glow { position: absolute; left: 20%; right: 20%; bottom: 4%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse, #00f4fc66, transparent 70%); filter: blur(14px); }
.popring { position: absolute; left: 72.6%; top: 67.5%; width: 12%; aspect-ratio: 1; margin: -6%; border-radius: 50%; border: 2px solid var(--volt); opacity: 0; pointer-events: none; }
.stage[data-step="2"] .popring { animation: popring 1s var(--ease); }
@keyframes popring { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }
.pb { position: absolute; left: 72.6%; top: 67.5%; width: 9%; aspect-ratio: 1 / 2.05; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); opacity: 0; z-index: 3; pointer-events: none;
  transition: left 0.9s cubic-bezier(0.34, 1.45, 0.64, 1), top 0.9s cubic-bezier(0.34, 1.45, 0.64, 1), transform 0.9s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.35s var(--ease); }
.stage[data-step="2"] .pb, .stage[data-step="3"] .pb { left: 90%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-9deg); }
.pb__body { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, #34454c, #0b1013 65%); border: 1px solid #4a5d65; box-shadow: 0 0 36px #00f4fc55, 0 18px 30px #000000aa, inset 0 1px 0 #ffffff26; display: grid; place-items: center; color: var(--volt); animation: bob 4.5s ease-in-out infinite; }
.pb__body svg { width: 46%; filter: drop-shadow(0 0 8px #00f4fc); }
.pb__led { position: absolute; top: 8%; left: 24%; right: 24%; height: 3px; border-radius: 2px; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.pb__port { position: absolute; bottom: 6%; left: 34%; right: 34%; height: 4px; border-radius: 2px; background: #02050640; border: 1px solid #4a5d65; }
.stage[data-step="3"] .pb__led { animation: ledPulse 1.2s ease-in-out infinite; }
@keyframes ledPulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .pb { transition: opacity 0.4s ease; transform: translate(-50%, -50%) rotate(-9deg); left: 90%; top: 50%; }
  .stage[data-step="1"] .pb, .stage[data-step="4"] .pb { opacity: 0; }
  .pb__body, .stage[data-step="3"] .pb__led, .stage[data-step="2"] .popring { animation: none; }
}

/* Ablauf: Szene mit Animation */
.flow { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .flow { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); } }
.flow__num { font-size: clamp(6rem, 15vw, 10rem); line-height: 0.85; font-weight: 800; letter-spacing: -0.06em; background: linear-gradient(180deg, #19c9c2 10%, #0a3a3c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--space-5); font-variant-numeric: tabular-nums; }
.flow__title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance; margin-bottom: var(--space-4); }
.flow__desc { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.7rem; max-width: 28rem; text-wrap: pretty; min-height: 5.2rem; }
.flow__text.swap .flow__num, .flow__text.swap .flow__title, .flow__text.swap .flow__desc { animation: textIn 0.6s var(--ease) both; }
.flow__text.swap .flow__title { animation-delay: 0.04s; } .flow__text.swap .flow__desc { animation-delay: 0.08s; }
@keyframes textIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.flow__bars { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.bar { width: 76px; padding: 20px 0; background: none; border: 0; cursor: pointer; }
.bar i { display: block; height: 3px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0; background: var(--volt); box-shadow: 0 0 10px var(--volt); transform: scaleX(0); transform-origin: left; }
.bar.is-done i::after { transform: scaleX(1); }
.bar.is-active i::after { animation: barFill var(--cycle, 5s) linear forwards; }
.bar:hover i { background: var(--border-strong); }
@keyframes barFill { to { transform: scaleX(1); } }
.flow__scene svg { width: 100%; max-width: 640px; margin: 0 auto; overflow: visible; }
#scene .t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; fill: #aab7bb; text-anchor: middle; }
#scene .big { font-family: var(--font-sans); font-weight: 700; font-size: 34px; fill: #edf2f3; text-anchor: middle; letter-spacing: -0.03em; }
#scene .l { opacity: 0; transition: opacity 0.5s var(--ease); }
#flow[data-step="1"] .l.on1, #flow[data-step="2"] .l.on2, #flow[data-step="3"] .l.on3, #flow[data-step="4"] .l.on4 { opacity: 1; }
#scene .spb, #scene .phone3 { transform-box: view-box; transition: transform 1s var(--ease); }
#scene .spb { transform: translate(244px, 313px) scale(0.95); }
#scene .spb__in { filter: drop-shadow(0 0 8px #00f4fc55); }
#flow[data-step="2"] .spb { transform: translate(332px, 376px) scale(1.25) rotate(-8deg); transition-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); }
#flow[data-step="3"] .spb { transform: translate(566px, 376px) scale(1.15) rotate(90deg); }
#flow[data-step="4"] .spb { transform: translate(244px, 313px) scale(0.95); }
#scene .phone3 { transform-origin: 442px 308px; transform-box: view-box; }
#flow[data-step="4"] .phone3 { transform: translate(16px, 0) rotate(3deg); }
#scene .slotglow { filter: drop-shadow(0 0 8px #00f4fc); }
#scene .beam { animation: beam 1.8s ease-in-out infinite; }
@keyframes beam { 50% { opacity: 0.35; } }
#scene .scanline { animation: scanMove 1.8s ease-in-out infinite alternate; }
@keyframes scanMove { from { transform: translateY(-26px); } to { transform: translateY(26px); } }
#scene .cable-flow { animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) {
  #scene .spb, #scene .phone3 { transition: none; }
  #scene .beam, #scene .scanline, #scene .cable-flow, .bar.is-active i::after { animation: none; }
  .bar.is-active i::after { transform: scaleX(1); }
  .flow__text.swap .flow__num, .flow__text.swap .flow__title, .flow__text.swap .flow__desc { animation: none; }
}

/* Maus: ruhige Variante */
#fx { display: none; }
.cursor-dot { display: none; }
.cursor-ring { width: 30px; height: 30px; border: 1px solid #edf2f355; box-shadow: none; background: transparent; mix-blend-mode: normal; }
.cursor-ring.is-link { width: 46px; height: 46px; background: #00f4fc12; border-color: #00f4fc99; }
.cursor-ring.is-down { width: 24px; height: 24px; background: #00f4fc1f; }
.hero .orb { margin-left: calc(var(--px) * -16px); margin-top: calc(var(--py) * -12px); }
.hero .hero__rings { margin-left: calc(var(--px) * 8px); margin-top: calc(var(--py) * 6px); }
.hero .hero__content { transform: translate(calc(var(--px) * 3px), calc(var(--py) * 2px)); }
.floor { transform: translateX(calc(var(--px) * -8px)); }

/* iPhone Mockup mit Karte */
.phone-wrap { min-height: 660px; }
.phone-tilt { transform-style: preserve-3d; will-change: transform; }
.iphone { position: relative; width: 290px; height: 600px; border-radius: 54px; padding: 3px; background: linear-gradient(145deg, #d3d6d8 0%, #7a8084 14%, #2b2f32 40%, #8d9296 66%, #33373a 100%); box-shadow: 0 40px 80px #000000b3, 0 0 0 1px #00000066, inset 0 0 0 1px #ffffff40, 0 0 70px #00f4fc1a; transform: rotateY(-24deg) rotateX(8deg) rotateZ(3deg); transform-style: preserve-3d; animation: phoneBob 8s ease-in-out infinite; }
@keyframes phoneBob { 50% { translate: 0 -10px; } }
.iphone__bezel { width: 100%; height: 100%; border-radius: 51px; background: #000; padding: 9px; }
.iphone__screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #0b1317; isolation: isolate; }
.iphone__btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5d6266, #a9aeb1 60%, #4a4e51); }
.iphone__btn--action { left: -3px; top: 96px; height: 24px; }
.iphone__btn--vup { left: -3px; top: 140px; height: 46px; }
.iphone__btn--vdown { left: -3px; top: 196px; height: 46px; }
.iphone__btn--power { right: -3px; top: 160px; height: 74px; background: linear-gradient(270deg, #5d6266, #a9aeb1 60%, #4a4e51); }
.iphone__island { position: absolute; z-index: 6; left: 50%; top: 10px; width: 88px; height: 26px; margin-left: -44px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px #ffffff10; }
.iphone__island::after { content: ""; position: absolute; right: 12px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1b2a4a, #05070d 70%); }
.iphone__status { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 46px; padding: 14px 26px 0 28px; display: flex; justify-content: space-between; align-items: flex-start; color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; }
.iphone__icons { display: inline-flex; gap: 5px; align-items: center; margin-top: 2px; }
.iphone__home { position: absolute; z-index: 7; left: 50%; bottom: 7px; width: 100px; height: 4px; margin-left: -50px; border-radius: 2px; background: #ffffffcc; }
.iphone__glare { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, #ffffff1f 0%, #ffffff05 28%, transparent 40%); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pan { animation: mapDrift 18s ease-in-out infinite alternate; }
@keyframes mapDrift { from { transform: translate(-6px, -4px) scale(1.02); } to { transform: translate(8px, 6px) scale(1.02); } }
.me__ring { transform-box: fill-box; transform-origin: center; animation: meRing 2.4s ease-out infinite; }
@keyframes meRing { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.pin { cursor: pointer; }
.pin__shape { fill: #00f4fc; stroke: #04282e; stroke-width: 1.5; filter: drop-shadow(0 4px 6px #000000aa); }
.pin__bolt { fill: #00141a; }
.pin.is-off .pin__shape { fill: #2a8f94; }
.pin.is-on .pin__shape { filter: drop-shadow(0 0 10px #00f4fc) drop-shadow(0 6px 8px #000000aa); }
.pin__pulse { fill: #00f4fc; fill-opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin.is-on .pin__pulse { animation: pinPulse 1.8s ease-out infinite; }
@keyframes pinPulse { from { transform: scale(0.4); fill-opacity: 0.4; } to { transform: scale(2.6); fill-opacity: 0; } }
.pin.drop { animation: pinDrop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: var(--pd, 0s); }
@keyframes pinDrop { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
.appui { position: absolute; z-index: 4; left: 12px; right: 12px; top: 48px; display: grid; gap: 8px; }
.appui__search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #0b1013d9; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid #ffffff1f; color: #aab7bb; font-size: 0.8125rem; }
.appui__search span { flex: 1; }
.appui__me { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #00f4fc, #04282e); }
.appui__chips { display: flex; gap: 6px; }
.appui__chips span { padding: 6px 12px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; background: #0b1013d9; border: 1px solid #ffffff1a; color: #edf2f3; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.appui__chips span.on { background: #edf2f3; color: #0b1013; }
.appui__sheet { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 22px; padding: 14px 14px 12px; border-radius: 24px; background: #0b1013ee; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid #ffffff1f; display: grid; gap: 4px; }
.sheet__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.09em; color: #aab7bb; }
.sheet__badge { display: inline-flex; align-items: center; gap: 5px; color: var(--volt); text-transform: uppercase; }
.sheet__badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 8px var(--volt); }
.sheet__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3rem; margin-top: 2px; }
.sheet__meta { font-size: 0.75rem; color: #aab7bb; }
.sheet__slots { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 6px; padding-top: 8px; border-top: 1px solid #ffffff14; font-family: var(--font-mono); font-size: 0.6875rem; }
.sheet__slots .segs { display: flex; gap: 3px; }
.sheet__slots .segs i { width: 9px; height: 15px; border: 1px solid #6a8089; border-radius: 3px; transition: background 0.4s, border-color 0.4s; }
.sheet__slots .segs i.on { background: #edf2f3; border-color: #edf2f3; }
.sheet__btn { text-align: center; padding: 11px; border-radius: 999px; background: #edf2f3; color: #0b1013; font-weight: 700; font-size: 0.75rem; }
.appui__sheet.swap > * { animation: sheetIn 0.5s var(--ease) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 400px) { .phone-wrap { min-height: 620px; } .iphone { transform: rotateY(-8deg) rotateX(3deg) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .iphone, .map__pan, .me__ring, .pin.is-on .pin__pulse, .pin.drop { animation: none !important; } .appui__sheet.swap > * { animation: none; } }

/* Mehr Tiefe */
.phone-wrap { perspective: 1100px; }
.phone-tilt, .iphone { transform-style: preserve-3d; }
.iphone { box-shadow: 0 0 0 1px #00000066, inset 0 0 0 1px #ffffff40; }
.iphone__bezel { position: relative; transform: translateZ(0.5px); }
.iphone__layer { position: absolute; inset: 0; border-radius: 54px; pointer-events: none; }
.iphone__btn { transform: translateZ(-4px); }
.iphone__btn--action, .iphone__btn--vup, .iphone__btn--vdown { transform: translateZ(-4px); }
.iphone__glare { background: linear-gradient(calc(115deg + var(--ry, 0) * 3deg), #ffffff30 0%, #ffffff08 30%, transparent 46%); }
.phone-wrap::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: 220px; height: 36px; margin-left: -110px; border-radius: 50%; background: radial-gradient(ellipse, #000000cc, transparent 70%); filter: blur(10px); transform: translateX(calc(var(--sx, 0) * 1px)); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .phone-wrap::after { transform: none; } }

/* Noch mehr Tiefe: UI Ebenen schweben vor dem Display */
.iphone { transform: rotateY(-28deg) rotateX(9deg) rotateZ(3deg); }
.iphone__screen { overflow: visible; isolation: auto; transform-style: preserve-3d; }
.iphone__bezel { transform-style: preserve-3d; }
.map { border-radius: 42px; overflow: hidden; }
.iphone__glare { border-radius: 42px; }
.iphone__island { transform: translateZ(4px); }
.iphone__status { transform: translateZ(8px); }
.appui { transform: translateZ(12px); }
.appui__sheet { transform: translateZ(22px); box-shadow: 0 18px 30px #000000aa; }
.iphone__home { transform: translateZ(10px); }
.iphone__glare { transform: translateZ(40px); }
@media (max-width: 400px) { .iphone { transform: rotateY(-20deg) rotateX(7deg) scale(0.9); } }

/* Zurueck zur vorherigen Pose, realistischere Ecken, kein Schatten oben links */
.iphone { border-radius: 44px; transform: rotateY(-24deg) rotateX(8deg) rotateZ(3deg); background: linear-gradient(145deg, #d3d6d8 0%, #7a8084 14%, #3a3f43 40%, #8d9296 66%, #4a4f53 100%); box-shadow: inset 0 0 0 1px #ffffff55; }
.iphone__bezel { border-radius: 41px; padding: 9px; }
.iphone__screen, .map, .iphone__glare { border-radius: 33px; }
.iphone__layer { border-radius: 44px; }
.iphone__island { transform: translateZ(3px); }
.iphone__status { transform: translateZ(5px); }
.appui { transform: translateZ(8px); }
.appui__sheet { transform: translateZ(16px); border-radius: 22px; box-shadow: 0 14px 24px #000000aa; }
.iphone__glare { transform: translateZ(20px); background: linear-gradient(calc(115deg + var(--ry, 0) * 3deg), #ffffff1c 0%, #ffffff05 26%, transparent 42%); }
.phone-wrap::before { display: none; }
@media (max-width: 400px) { .iphone { transform: rotateY(-18deg) rotateX(6deg) scale(0.92); } }

/* Header minimal */
.hero { min-height: calc(100svh - var(--nav-h)); }
.hero .orb { background: radial-gradient(circle, #00f4fc1f 0%, #00f4fc08 42%, transparent 68%); }
.hero__line { opacity: 0.6; }

/* Header: dezent, leicht dreidimensional */
.floor { opacity: 0.4; height: 42%; }
.hero .orb { background: radial-gradient(circle, #00f4fc1f 0%, #00f4fc0a 42%, transparent 68%); }

.floor { display: none; }

/* Lichtstrahlen dezent */
.hero canvas { opacity: 0.5; }

.hero canvas { opacity: 1; }



/* Menue: abgesetzte Leiste mit Trennlinien */
.nav__links { gap: 0; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #0b1013a6; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 #ffffff12; }
.nav__links a { position: relative; padding: 0 18px; min-height: 36px; border-radius: var(--radius-pill); color: var(--ink-muted); transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.nav__links a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: var(--border); transition: opacity 0.3s; }
.nav__links a:hover { background: var(--surface-2); color: var(--ink); }
.nav__links a:hover::before, .nav__links a:hover + a::before { opacity: 0; }
@media (prefers-reduced-transparency: reduce) { .nav__links { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Logo minimal groesser */
.nav__brand img { height: 32px; }
@media (max-width: 560px) { .nav__brand img { height: 28px; } }

/* Abschnitt unter dem Header: dunkel, Akku leer, Avynto rettet */
.band--dark { background: #000; color: var(--ink); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band--dark .band__text { color: var(--ink); }
.band--dark .band__text span { color: var(--ink-muted); }
.band--dark .wrap { gap: var(--space-8); }
@media (min-width: 900px) { .band--dark .wrap { grid-template-columns: 1fr 1.05fr; } }
.band--dark .drain { display: grid; gap: var(--space-5); }
.drain__stage { display: flex; align-items: center; gap: 0; min-height: 150px; }
.drain__pb { flex: 0 0 74px; height: 140px; display: grid; place-items: center; transform: scale(0) translateX(40px); opacity: 0; transition: transform 0.7s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.35s var(--ease); transform-origin: 50% 50%; z-index: 2; }
.drain__pbbody { position: relative; width: 70px; height: 134px; border-radius: 18px; background: linear-gradient(160deg, #3b4e56, #0b1013 65%); border: 1px solid #5b7079; box-shadow: 0 0 34px #00f4fc55, inset 0 1px 0 #ffffff30; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--volt); }
.drain__pbbody svg { width: 24px; filter: drop-shadow(0 0 8px #00f4fc); }
.drain__logo { width: 52px; height: auto; }
.drain__led { position: absolute; top: 10px; left: 22px; right: 22px; height: 3px; border-radius: 2px; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.drain__port { position: absolute; right: -4px; top: 50%; width: 6px; height: 16px; margin-top: -8px; border-radius: 2px; background: #05090b; border: 1px solid #5b7079; }
.drain__cable { flex: 0 0 64px; height: 40px; opacity: 0; transition: opacity 0.4s var(--ease); overflow: visible; }
.drain__cable path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.drain__cable .cable-base { stroke: #3b4d54; stroke-width: 4; }
.drain__cable .cable-flow { stroke: var(--volt); stroke-width: 2.5; stroke-dasharray: 6 12; filter: drop-shadow(0 0 5px var(--volt)); opacity: 0; }
.drain__battery { flex: 1; display: grid; gap: var(--space-3); min-width: 0; }
.drain__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); }
.drain__pct { font-size: 3rem; line-height: 3.25rem; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.drain__state { color: var(--ink-muted); }
.drain__bar { display: flex; gap: 5px; height: 64px; padding-right: 8px; position: relative; }
.drain__bar::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 24px; margin-top: -12px; border-radius: 0 3px 3px 0; background: var(--border-strong); }
.drain__bar i { flex: 1; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.drain__bar i.on { background: var(--ink); border-color: var(--ink); }
.drain[data-tone="warning"] .drain__bar i.on { background: var(--warning); border-color: var(--warning); }
.drain[data-tone="danger"] .drain__bar i.on { background: var(--danger); border-color: var(--danger); }
.drain[data-tone="danger"] .drain__pct { color: var(--danger); }
.drain[data-tone="warning"] .drain__pct { color: var(--warning); }
.drain[data-tone="charge"] .drain__bar i.on { background: var(--volt); border-color: var(--volt); box-shadow: 0 0 14px #00f4fc77; }
.drain[data-tone="charge"] .drain__pct, .drain[data-tone="charge"] .drain__state { color: var(--volt); }
.drain[data-phase="low"] .drain__bar { animation: shake 0.5s linear infinite; }
.drain__claim { font-size: clamp(1.75rem, 4.6vw, 2.75rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.045em; color: var(--volt); opacity: 0; transform: translateY(14px); filter: blur(5px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); min-height: 3rem; text-shadow: 0 0 30px #00f4fc44; }
.drain__claim span { color: var(--ink); text-shadow: none; }
.drain[data-phase="rescue"] .drain__pb, .drain[data-phase="charge"] .drain__pb, .drain[data-phase="full"] .drain__pb { transform: scale(1) translateX(0); opacity: 1; }
.drain[data-phase="rescue"] .drain__cable, .drain[data-phase="charge"] .drain__cable, .drain[data-phase="full"] .drain__cable { opacity: 1; }
.drain[data-phase="charge"] .cable-flow, .drain[data-phase="rescue"] .cable-flow { opacity: 1; animation: dash 0.9s linear infinite; }
.drain[data-phase="rescue"] .drain__claim, .drain[data-phase="charge"] .drain__claim, .drain[data-phase="full"] .drain__claim { opacity: 1; transform: none; filter: none; }
@media (max-width: 480px) { .drain__pb { flex-basis: 58px; } .drain__pbbody { width: 56px; height: 112px; } .drain__logo { width: 42px; } .drain__cable { flex-basis: 34px; } .drain__pct { font-size: 2.25rem; } .drain__bar { height: 52px; gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .drain__pb { transition: opacity 0.4s ease; transform: none; } .drain[data-phase="low"] .drain__bar, .drain[data-phase="charge"] .cable-flow { animation: none; } .drain__claim { transition: opacity 0.4s ease; transform: none; filter: none; } }

/* Akku neu gestaltet, dunkelgrauer Hintergrund */
.band--dark { background: linear-gradient(180deg, #161c1f 0%, #101518 100%); border-top: 1px solid #263137; border-bottom: 1px solid #263137; box-shadow: inset 0 1px 0 #ffffff0a; }
.drain__bar { height: 76px; padding-right: 0; gap: 4px; align-items: center; }
.drain__bar::after { display: none; }
.drain__bar .cell { position: relative; flex: 1; height: 100%; border-radius: 26px; border: 2px solid #55696f; background: linear-gradient(180deg, #070b0d, #0c1114); padding: 7px; overflow: hidden; box-shadow: inset 0 3px 10px #000000cc, 0 0 0 1px #00000088, 0 10px 30px #00000066; }
.drain__bar .fill { position: relative; height: 100%; width: 100%; border-radius: 19px; background: linear-gradient(180deg, #f6fafb 0%, #cfd8db 100%); transition: background 0.4s, box-shadow 0.4s; overflow: hidden; }
.drain__bar .fill::after { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 34%; border-radius: 12px; background: linear-gradient(180deg, #ffffff99, #ffffff00); }
.drain__bar .fill::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(100deg, transparent, #ffffff88, transparent); opacity: 0; }
.drain__bar .ticks { position: absolute; inset: 7px; border-radius: 19px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), #05090b99 calc(10% - 2px), #05090b99 10%); }
.drain__bar .nub { flex: 0 0 9px; height: 30px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #44555b, #6e848c); }
.drain[data-tone="warning"] .fill { background: linear-gradient(180deg, #ffd27a, #e8920c); }
.drain[data-tone="danger"] .fill { background: linear-gradient(180deg, #ff9a7e, #d8412a); box-shadow: 0 0 22px #ff6b4a66; }
.drain[data-tone="charge"] .fill { background: linear-gradient(180deg, #98fcff, #00c9d1); box-shadow: 0 0 30px #00f4fc88; }
.drain[data-tone="charge"] .fill::before { opacity: 1; animation: sweep 1.6s ease-in-out infinite; }
@keyframes sweep { from { left: -60%; } to { left: 120%; } }
.drain[data-tone="charge"] .nub { background: linear-gradient(90deg, #0a8f96, var(--volt)); box-shadow: 0 0 14px #00f4fc88; }
.drain[data-phase="low"] .cell { animation: shake 0.5s linear infinite; border-color: #8a4638; }
.drain[data-phase="low"] .drain__bar { animation: none; }
@media (max-width: 480px) { .drain__bar { height: 60px; } .drain__bar .cell { border-radius: 22px; padding: 6px; } .drain__bar .fill { border-radius: 15px; } }
@media (prefers-reduced-motion: reduce) { .drain[data-tone="charge"] .fill::before, .drain[data-phase="low"] .cell { animation: none; } }

/* Powerbank eckig und raeumlich, Kabel unten, Akku schlicht */
.drain__stage { margin-bottom: 44px; }
.drain__pb { flex: 0 0 86px; justify-content: start; place-items: center start; }
.drain__pbbody { margin-right: 12px; width: 70px; height: 134px; border-radius: 6px; background: linear-gradient(160deg, #3a4a51 0%, #1a2429 55%, #0e1417 100%); border: 1px solid #62767e; box-shadow: 0 0 26px #00f4fc33; }
.drain__pbbody::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: 10px; transform-origin: left bottom; transform: skewX(-50deg); background: linear-gradient(90deg, #7d939b, #51656d); border: 1px solid #62767e; border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box; }
.drain__pbbody::after { content: ""; position: absolute; left: 100%; top: 0; width: 12px; height: 100%; transform-origin: left top; transform: skewY(-40deg); background: linear-gradient(90deg, #1b262b, #0a0f12); border: 1px solid #4a5d65; border-left: 0; border-radius: 0 3px 3px 0; box-sizing: border-box; }
.drain__port { right: auto; left: 50%; top: auto; bottom: -1px; width: 18px; height: 6px; margin: 0 0 0 -9px; border-radius: 1px 1px 0 0; background: #05090b; border: 1px solid #62767e; border-bottom: 0; }
.drain__led { border-radius: 1px; }
.drain__cable { flex: 0 0 64px; height: 140px; }
.drain__cable .cable-base { stroke: #4a5d65; stroke-width: 4; }
.drain__cable .cable-flow { stroke-width: 2.5; filter: none; }
@media (max-width: 480px) { .drain__pb { flex-basis: 70px; } .drain__pbbody { width: 56px; height: 112px; margin-right: 10px; } .drain__cable { flex-basis: 64px; height: 140px; } .drain__cable path { transform: translateX(9px); } .drain__stage { margin-bottom: 36px; } }
/* Akku: schlicht, eckiger, ohne Schatten */
.drain__bar .cell { border-radius: 8px; border: 2px solid #55696f; background: #0a0e10; box-shadow: none; padding: 6px; }
.drain__bar .fill { border-radius: 4px; background: #eef2f3; box-shadow: none !important; }
.drain__bar .fill::after, .drain__bar .fill::before, .drain__bar .ticks { display: none; }
.drain__bar .nub { flex: 0 0 8px; height: 26px; border-radius: 0 3px 3px 0; background: #55696f; box-shadow: none !important; }
.drain[data-tone="warning"] .fill { background: var(--warning); }
.drain[data-tone="danger"] .fill { background: var(--danger); }
.drain[data-tone="charge"] .fill { background: var(--volt); }
.drain[data-tone="charge"] .nub { background: var(--volt); }
.drain[data-phase="low"] .cell { border-color: var(--danger); }
@media (max-width: 480px) { .drain__bar .cell { border-radius: 6px; } }

/* Powerbank schlanker und schlichter, passend zum Akku */
.drain__pb { flex: 0 0 70px; }
.drain__pbbody { width: 58px; height: 122px; margin-right: 7px; border-radius: 8px; background: #172026; border: 2px solid #55696f; box-shadow: none; gap: 0; }
.drain__pbbody::before { height: 5px; transform: skewX(-45deg); background: #3d4e55; border: 1px solid #55696f; border-bottom: 0; border-radius: 2px 2px 0 0; }
.drain__pbbody::after { width: 7px; transform: skewY(-35deg); background: #0f171b; border: 1px solid #55696f; border-left: 0; border-radius: 0 2px 2px 0; }
.drain__led { top: 12px; left: 18px; right: 18px; height: 2px; box-shadow: none; }
.drain__logo { width: 42px; }
.drain__port { width: 14px; height: 5px; margin-left: -7px; border: 1px solid #55696f; border-bottom: 0; background: #0a0e10; }
@media (max-width: 480px) { .drain__pb { flex-basis: 60px; } .drain__pbbody { width: 48px; height: 100px; margin-right: 6px; } .drain__logo { width: 34px; } .drain__cable path { transform: translate(5px, -7px); } }

/* Powerbank prominenter und flach, Akku kuerzer */
.drain__stage { min-height: 170px; margin-bottom: 52px; }
.drain__pb { flex: 0 0 92px; height: 170px; }
.drain__pbbody { width: 74px; height: 150px; margin-right: 8px; border-radius: 16px; border: 2px solid #55696f; background: #172026; }
.drain__pbbody::before, .drain__pbbody::after { display: none; }
.drain__led { top: 16px; left: 22px; right: 22px; border-radius: 2px; }
.drain__logo { width: 54px; }
.drain__port { width: 18px; height: 6px; margin-left: -9px; bottom: -2px; border-radius: 2px 2px 0 0; }
.drain__cable { flex: 0 0 64px; height: 170px; }
.drain__battery { flex: 0 1 330px; }
.drain__bar .cell { border-radius: 12px; }
.drain__bar .fill { border-radius: 7px; }
@media (max-width: 480px) {
  .drain__stage { zoom: 0.78; }
  .drain__pb { flex-basis: 92px; } .drain__pbbody { width: 74px; height: 150px; margin-right: 8px; } .drain__logo { width: 54px; }
  .drain__cable { flex-basis: 64px; height: 170px; } .drain__cable path { transform: none; }
  .drain__bar .cell { border-radius: 10px; } .drain__bar { height: 76px; }
  .drain__pct { font-size: 3rem; }
}

/* Schritt 1: kontaktlos bezahlen */
#scene .nfcarc { animation: nfc 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.22s); }
@keyframes nfc { 0%, 100% { opacity: 0.25; } 45% { opacity: 1; } }
#scene .tapwaves circle { transform-box: fill-box; transform-origin: center; animation: tapring 1.8s ease-out infinite; animation-delay: calc(var(--i) * 0.6s); opacity: 0; }
@keyframes tapring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #scene .nfcarc, #scene .tapwaves circle { animation: none; } #scene .tapwaves circle { opacity: 0.35; } }

/* Zahlkarte statt Handy bei Schritt 1 */
#scene .card3 { transform: translate(470px, 340px) rotate(16deg); opacity: 0; transition: transform 1s var(--ease), opacity 0.5s var(--ease); }
#flow[data-step="1"] .card3 { transform: translate(316px, 266px) rotate(-9deg); opacity: 1; }
#flow[data-step="1"] .card3__in { animation: cardTap 1.8s ease-in-out infinite; }
@keyframes cardTap { 0%, 100% { translate: 0 0; } 40% { translate: -9px 0; } }
#scene .lowpct { fill: #ff6b4a; }
#scene .lowtxt { fill: #ff6b4a; }
@media (prefers-reduced-motion: reduce) { #scene .card3 { transition: opacity 0.4s ease; } #flow[data-step="1"] .card3__in { animation: none; } }

/* Schritt 1: nur die Karte, Handy noch nicht sichtbar */
#scene .phone3 { transition: transform 1s var(--ease), opacity 0.6s var(--ease); }
#flow[data-step="1"] .phone3 { opacity: 0; }

/* Schritt 2: Powerbank fliegt nach rechts, danach erscheint das Handy und das Kabel verbindet */
#flow[data-step="2"] .spb { transform: translate(566px, 376px) scale(1.15) rotate(90deg); transition: transform 1.25s cubic-bezier(0.22, 1.18, 0.36, 1); }
#flow[data-step="3"] .spb { transition: transform 1.25s cubic-bezier(0.22, 1.18, 0.36, 1); }
#flow[data-step="4"] .spb { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
#flow[data-step="1"] .phone3, #flow[data-step="2"] .phone3 { opacity: 0; transform: translate(34px, 8px); }
#scene .phone3 { transition: transform 1.1s var(--ease), opacity 0.7s var(--ease); }
#scene .cable-base { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease) 0.5s, opacity 0.4s var(--ease); }
#flow[data-step="3"] .cable-base { stroke-dashoffset: 0; }
#scene .cable-flow { transition: opacity 0.5s var(--ease) 1.2s; }
#flow[data-step="3"] .cable-flow { opacity: 1; }
#scene .l { transition: opacity 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) { #scene .cable-base { transition: none; } }

/* Schritt 2 straffer */
#scene .phone3 { transition: transform 0.8s var(--ease), opacity 0.45s var(--ease); }
#scene .cable-base { transition: stroke-dashoffset 0.7s var(--ease) 0.15s, opacity 0.3s var(--ease); }
#scene .cable-flow { transition: opacity 0.4s var(--ease) 0.6s; }

/* Schritt 2 noch zuegiger */
#flow[data-step="2"] .spb, #flow[data-step="3"] .spb { transition-duration: 0.95s; }
#scene .phone3 { transition: transform 0.65s var(--ease), opacity 0.35s var(--ease); }
#scene .cable-base { transition: stroke-dashoffset 0.55s var(--ease) 0.08s, opacity 0.3s var(--ease); }
#scene .cable-flow { transition: opacity 0.3s var(--ease) 0.4s; }

/* Premium Abschnitt */
.premium { background: linear-gradient(180deg, #161c1f 0%, #101518 100%); border-top: 1px solid #263137; border-bottom: 1px solid #263137; box-shadow: inset 0 1px 0 #ffffff0a; padding: var(--space-8) 0; overflow: hidden; }
@media (min-width: 900px) { .premium { padding: var(--space-9) 0; } }
.premium__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .premium__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); } }
.premium__text .lead { margin-top: var(--space-5); }
.premium__facts { display: grid; margin-top: var(--space-7); border-top: 1px solid #263137; }
.premium__facts li { display: grid; gap: 2px; padding: var(--space-4) 0; border-bottom: 1px solid #263137; }
@media (min-width: 640px) { .premium__facts { grid-template-columns: repeat(3, 1fr); border-top: 0; } .premium__facts li { border-bottom: 0; border-top: 1px solid #263137; padding-right: var(--space-4); } }
.premium__facts strong { font-size: 1.0625rem; letter-spacing: -0.02em; }
.premium__facts span { font-size: 0.875rem; line-height: 1.4375rem; color: var(--ink-muted); }
.premium__visual { position: relative; display: grid; place-items: center; min-height: 360px; }
.premium__visual img { position: relative; z-index: 1; width: min(100%, 520px); height: auto; filter: drop-shadow(0 30px 40px #000000b3); animation: premiumBob 9s ease-in-out infinite; }
@keyframes premiumBob { 50% { translate: 0 -8px; } }
.premium__glow { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #00f4fc26, transparent 65%); filter: blur(24px); }
.premium__floor { position: absolute; bottom: 6%; width: 56%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, #00f4fc4d, transparent 70%); filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { .premium__visual img { animation: none; } }

.premium__visual img { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 96%); mask-image: linear-gradient(to bottom, #000 80%, transparent 96%); }

.premium__visual img { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 0 0.6px #6a808999) drop-shadow(0 30px 40px #000000b3); }

.premium__visual img { width: min(100%, 430px); }
.premium__visual { min-height: 420px; }

/* Kompatibilitaet: hochwertige Geraete-Illustrationen */
.devices .card.dev-card { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-5); padding: var(--space-5); min-height: 300px; background: linear-gradient(180deg, #0d1316 0%, #0a0f12 100%); }
.dev-art { position: relative; flex: 1; display: grid; place-items: center; min-height: 150px; }
.dev-art::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #00f4fc1f, transparent 68%); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); opacity: 0.55; }
.dev-art svg { position: relative; width: 138px; height: 138px; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); filter: drop-shadow(0 14px 18px #000000aa); }
.dev-card:hover .dev-art svg { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 18px 22px #000000aa) drop-shadow(0 0 14px #00f4fc33); }
.dev-card:hover .dev-art::before { opacity: 1; transform: scale(1.15); }
.dev-text h3 { margin-bottom: 4px; }
.dev-text p { font-size: 0.875rem; line-height: 1.4375rem; color: var(--ink-muted); }
.dev-art .chg { transform-box: fill-box; transform-origin: left center; animation: chgFill 4.2s ease-in-out infinite; }
@keyframes chgFill { 0% { transform: scaleX(0.12); } 70%, 100% { transform: scaleX(1); } }
.dev-art .led { animation: dotPulse 2.2s ease-in-out infinite; filter: drop-shadow(0 0 4px #00f4fc); }
@media (prefers-reduced-motion: reduce) { .dev-art .chg, .dev-art .led { animation: none; } }

/* iPhone steht gerade, neigt sich nur bei Mausbewegung */
.iphone { transform: none; }
@media (max-width: 400px) { .iphone { transform: scale(0.92); } }

/* Karte: Hauptpins */
.legend li { align-items: center; }
.legend__t { flex: 1; display: grid; gap: 2px; }
.legend__t strong { flex: none; }
.legend__t small { font-size: 0.8125rem; color: var(--ink-muted); }
.mappin { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.mappin svg { width: 30px; height: 34px; overflow: visible; filter: drop-shadow(0 4px 6px #000000aa); }
.mappin--on svg path:first-child { fill: var(--volt); stroke: #04282e; stroke-width: 1.5; }
.mappin--on svg { filter: drop-shadow(0 0 10px #00f4fc99) drop-shadow(0 4px 6px #000000aa); animation: pinBob 3.4s ease-in-out infinite; }
.mappin--on svg .b { fill: #00141a; }
.mappin--soon svg path:first-child { fill: #0b1013; stroke: #aab7bb; stroke-width: 1.5; stroke-dasharray: 3 3; }
.mappin--soon svg .b { fill: #aab7bb; }
@keyframes pinBob { 50% { transform: translateY(-3px); } }
.mappin__l { position: absolute; left: 34px; bottom: 8px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: #060a0ccc; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 10px; display: inline-flex; gap: 8px; align-items: center; }
.mappin--soon .mappin__l { color: var(--ink-muted); }
.mappin__l em { font-style: normal; color: var(--warning); }
#pinFra .mappin__l { left: auto; right: 34px; }
@media (prefers-reduced-motion: reduce) { .mappin--on svg { animation: none; } }
@media (max-width: 480px) { .mappin__l { font-size: 0.5625rem; padding: 4px 8px; } .mappin__l em { display: none; } }

/* Logo ohne CSS Maske, damit die Seite auch per Doppelklick (file://) funktioniert */
.nav__brand img, .footer img, .drain__logo { -webkit-mask-image: none; mask-image: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* FAQ */
.faq { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); } .faq__head { position: sticky; top: calc(var(--nav-h) + var(--space-5)); } }
.faq__head .lead { margin-top: var(--space-5); }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; cursor: pointer; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.02em; min-height: 44px; transition: color 0.3s var(--ease); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--volt); }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--ink); border-radius: 1px; transition: transform 0.4s var(--ease), background 0.3s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--volt-subtle); border-color: var(--volt); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--volt); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 var(--space-7) var(--space-5) 0; max-width: 40rem; }
.faq__a p { color: var(--ink-muted); line-height: 1.7rem; text-wrap: pretty; }
.faq__item[open] .faq__a { animation: faqIn 0.5s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__a { animation: none; } }

/* Mobile Menue */
.nav__right { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: #0b1013a6; cursor: pointer; position: relative; padding: 0; flex: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform 0.4s var(--ease), top 0.4s var(--ease), opacity 0.3s; }
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav--open .nav__toggle { border-color: var(--volt); background: var(--volt-subtle); }
.nav--open .nav__toggle span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.nav__panel { display: none; }
@media (max-width: 899px) {
  .nav--main .nav__inner { grid-template-columns: 1fr auto; }
  .nav--main .nav__brand { display: inline-flex; }
  .nav__toggle { display: block; }
  .nav--main .nav__right .vt-btn { padding: 11px 16px; font-size: 0.75rem; min-height: 44px; }
  .nav__panel { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - var(--nav-h)); overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-6); background: #060a0c; border-bottom: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s; }
  .nav--open .nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__panel nav { display: grid; }
  .nav__panel nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--border); font-size: 1.625rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.04em; text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.3s; }
  .nav__panel nav a::after { content: "↗"; font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-muted); }
  .nav__panel nav a:active { color: var(--volt); }
  .nav--open .nav__panel nav a { opacity: 1; transform: none; }
  .nav--open .nav__panel nav a:nth-child(1) { transition-delay: 0.04s; } .nav--open .nav__panel nav a:nth-child(2) { transition-delay: 0.08s; } .nav--open .nav__panel nav a:nth-child(3) { transition-delay: 0.12s; } .nav--open .nav__panel nav a:nth-child(4) { transition-delay: 0.16s; } .nav--open .nav__panel nav a:nth-child(5) { transition-delay: 0.2s; } .nav--open .nav__panel nav a:nth-child(6) { transition-delay: 0.24s; }
  .nav__panel-cta { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
  .nav__panel-cta .vt-btn { width: 100%; min-height: 52px; }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 380px) { .nav--main .nav__brand img { height: 24px; } .nav--main .nav__right .vt-btn { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .nav__panel, .nav__panel nav a { transition: opacity 0.2s ease; transform: none; } }

/* Mobile Feinschliff */
@media (max-width: 639px) {
  .adv { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adv .card { min-height: 0; padding: 16px; }
  .adv .card .ico { width: 30px; height: 30px; margin-bottom: var(--space-4); }
  .adv .card h3 { font-size: 1.0625rem; line-height: 1.3rem; }
  .adv .card p { font-size: 0.8125rem; line-height: 1.3rem; }
  .adv .card--cta { grid-column: 1 / -1; min-height: 110px; }
  .adv .card--cta .h4 { font-size: 1.375rem; line-height: 1.5rem; }
  .devices { gap: 10px; }
  .devices .card.dev-card { min-height: 250px; padding: 16px; }
  .dev-art { min-height: 120px; }
  .dev-art svg { width: 112px; height: 112px; }
  .dev-text p { font-size: 0.8125rem; line-height: 1.3rem; }
  .section { padding: var(--space-8) 0; }
  .head { margin-bottom: var(--space-6); }
  .mappin__l { font-size: 0.5625rem; padding: 4px 8px; }
  #pinMuc .mappin__l { left: 50%; bottom: -26px; transform: translateX(-50%); }
  .premium__visual { min-height: 340px; }
  .partner { padding: var(--space-5) var(--space-4); }
  .footer__inner small { display: block; }
}
@media (max-width: 359px) { .adv { grid-template-columns: 1fr; } }

@media (max-width: 639px) {
  .devices .card.dev-card { justify-content: flex-start; gap: var(--space-4); min-height: 0; }
  .dev-art { flex: none; height: 126px; min-height: 0; }
  .dev-text { min-height: 88px; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Neue Texte: Hero und Akku Abschnitt */
.hero .display { font-size: clamp(2.5rem, 7.4vw, 5.25rem); }
.band--dark .band__text--long { font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.04em; }
.band--dark .band__text--long span { color: var(--ink-muted); }

.flow__title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.flow__desc { min-height: 7.5rem; }

/* Geraete-Karten: Titel und Text immer auf gleicher Hoehe */
.devices .card.dev-card { justify-content: flex-start; min-height: 0; }
.dev-art { flex: none; height: 160px; min-height: 0; }
.dev-text { min-height: 100px; }
@media (max-width: 639px) { .dev-art { height: 126px; } .dev-text { min-height: 112px; } }

/* Drei Punkte: immer gleicher Aufbau, Titel zweizeilig, Text dreizeilig */
.premium__facts li { align-content: start; gap: 6px; }
.premium__facts strong { display: block; font-size: 1.0625rem; line-height: 1.375rem; min-height: 2.75rem; }
.premium__facts span { display: block; font-size: 0.875rem; line-height: 1.4375rem; min-height: 4.3125rem; }

/* Die drei Punkte als gleich aufgebaute Zeilen */
.premium__facts { grid-template-columns: 1fr; border-top: 1px solid #263137; }
.premium__facts li { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; padding: var(--space-4) 0; border-top: 0; border-bottom: 1px solid #263137; }
@media (min-width: 640px) {
  .premium__facts { grid-template-columns: 1fr; border-top: 1px solid #263137; }
  .premium__facts li { grid-template-columns: 190px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; padding-right: 0; border-top: 0; }
}

/* Vorteile: Titel zweizeilig reserviert, damit alle Texte auf gleicher Hoehe starten */
.adv .card h3 { min-height: 2.75rem; }
@media (max-width: 639px) { .adv .card h3 { min-height: 2.6rem; } .adv .card--cta h3 { min-height: 0; } }
.adv .card--cta h3 { min-height: 0; }

/* Datenschutz Hinweis */
.privacy-note { display: none; }
.js .privacy-note { display: flex; position: fixed; z-index: 30; left: var(--space-4); bottom: var(--space-4); max-width: 440px; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #0b1013f2; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 40px #000000aa; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.privacy-note.is-in { opacity: 1; transform: none; pointer-events: auto; }
.privacy-note p { font-size: 0.8125rem; line-height: 1.3rem; color: var(--ink-muted); margin: 0; }
.privacy-note a { color: var(--ink); text-underline-offset: 3px; }
.privacy-note .vt-btn { min-height: 40px; padding: 10px 16px; flex: none; }
@media (max-width: 560px) { .js .privacy-note { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; flex-direction: column; align-items: stretch; } .privacy-note .vt-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .js .privacy-note { transition: opacity 0.3s ease; transform: none; } }
.legend__t small { text-wrap: balance; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { min-height: calc(100svh - var(--nav-h) - 180px); display: grid; place-items: center; text-align: center; padding: var(--space-8) 0; }
.thanks__in { max-width: 34rem; display: grid; gap: var(--space-5); justify-items: center; }
.thanks__check { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--volt); background: var(--volt-subtle); display: grid; place-items: center; box-shadow: 0 0 40px #00f4fc44; }
.thanks__check svg { width: 34px; height: 34px; stroke: var(--volt); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: checkDraw 0.7s 0.2s var(--ease) forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .thanks__check svg { animation: none; stroke-dashoffset: 0; } }