@font-face { font-family: 'FontHead'; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'FontBody'; src: url('../fonts/sora-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FontMono'; src: url('../fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FontSerif'; src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
:root {
  --bg: #05070d; --text: #e6e9f0; --muted: #8b93a7;
  --a: #4fd8eb; --b: #e3a455; --hair: rgba(230,233,240,0.14);
  --panel: rgba(11,16,28,0.62);
  --head: 'FontHead', sans-serif; --body: 'FontBody', system-ui, sans-serif; --mono: 'FontMono', monospace;
  --pad: clamp(1.2rem, 4vw, 4rem); --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis { height: auto; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 1rem; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--a); color: var(--bg); }
body::after { content: ''; position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-5%,4%); } 50% { transform: translate(4%,-5%); } 75% { transform: translate(-4%,-4%); } }
#loader { position: fixed; inset: 0; z-index: 1500; background: var(--bg); display: grid; place-items: center; transition: opacity 0.8s ease, visibility 0.8s; animation: loader-hide 0.7s ease 5s forwards; }
#loader.done { opacity: 0; visibility: hidden; }
@keyframes loader-hide { to { opacity: 0; visibility: hidden; } }
.loader-light { width: 10px; height: 10px; border-radius: 50%; background: var(--a); box-shadow: 0 0 30px 6px var(--a); }
.loader-count { position: absolute; bottom: 12vh; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.3em; color: var(--muted); }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2000; display: none; }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { display: block; }
.cursor-dot { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--a); }
.cursor-ring { width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 1px solid var(--a); opacity: 0.6; transition: width 0.3s, height 0.3s, margin 0.3s, opacity 0.3s; }
.cursor-ring.big { width: 56px; height: 56px; margin: -28px; opacity: 1; }
.progress { position: fixed; right: clamp(0.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); z-index: 800; width: 2px; height: 30vh; background: var(--hair); border-radius: 2px; }
.progress-fill { width: 100%; height: 0%; background: linear-gradient(var(--a), var(--b)); border-radius: 2px; }
.progress-label { position: absolute; top: calc(100% + 10px); right: -8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--muted); }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem var(--pad); transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.nav-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--head); font-size: 1.05rem; }
.logo-mark { width: 30px; height: 30px; }
.lg-a { stroke: var(--a); } .lg-b { stroke: var(--b); }
.nav-links { display: flex; gap: 1.1rem; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.nav-links a:hover { color: var(--a); }
@media (min-width: 1560px) { .nav-links { gap: 1.5rem; font-size: 0.7rem; letter-spacing: 0.12em; } }
@media (max-width: 1300px) { .nav-links { gap: 0.85rem; font-size: 0.6rem; letter-spacing: 0.05em; } }
/* rechte Nav-Gruppe: Sprachumschalter + CTA */
.nav-end { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.nav-end .btn { white-space: nowrap; padding: 0.7rem 1.3rem; }
/* Burger (nur Mobile): rundes Badge im Stil des Sprachumschalters */
.nav-burger { display: none; position: relative; z-index: 1002; width: 38px; height: 38px; flex: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--hair); border-radius: 50%; background: color-mix(in srgb, var(--bg) 55%, transparent);
  padding: 0; cursor: pointer; }
.nav-burger span { display: block; width: 15px; height: 1.5px; background: var(--text); transition: transform 0.35s var(--ease); }
.nav-burger.open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
/* Mobile-Menü: Vollbild-Overlay unterhalb des Headers, Links mit Sektionsnummern */
.mmenu { position: fixed; inset: 0; z-index: 995; display: flex; flex-direction: column; justify-content: center;
  gap: 1.8rem; padding: 5.5rem var(--pad) 2.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
.mmenu.open { opacity: 1; visibility: visible; }
.mmenu-links { display: flex; flex-direction: column; gap: 0.85rem; }
.mmenu-links a { font-family: var(--head); font-size: clamp(1.35rem, 5.2vw, 1.9rem); line-height: 1.1;
  display: flex; align-items: baseline; gap: 0.85rem;
  opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.mmenu-links a span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--b); }
.mmenu.open .mmenu-links a { opacity: 1; transform: none; }
.mmenu.open .mmenu-links a:nth-child(1) { transition-delay: 0.04s; }
.mmenu.open .mmenu-links a:nth-child(2) { transition-delay: 0.08s; }
.mmenu.open .mmenu-links a:nth-child(3) { transition-delay: 0.12s; }
.mmenu.open .mmenu-links a:nth-child(4) { transition-delay: 0.16s; }
.mmenu.open .mmenu-links a:nth-child(5) { transition-delay: 0.2s; }
.mmenu.open .mmenu-links a:nth-child(6) { transition-delay: 0.24s; }
.mmenu.open .mmenu-links a:nth-child(7) { transition-delay: 0.28s; }
.mmenu.open .mmenu-links a:nth-child(8) { transition-delay: 0.32s; }
.mmenu.open .mmenu-links a:nth-child(9) { transition-delay: 0.36s; }
.mmenu.open .mmenu-links a:nth-child(10) { transition-delay: 0.4s; }
.mmenu-cta { align-self: flex-start; flex: none; opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease 0.48s, transform 0.5s var(--ease) 0.48s; }
.mmenu.open .mmenu-cta { opacity: 1; transform: none; }
@media (min-width: 1201px) { .mmenu { display: none; } }
/* Burger-Bereich: unterhalb von 1200px ersetzt das Overlay die Linkleiste */
@media (max-width: 1200px) {
  .nav-links, .nav-end > .btn { display: none; }
  .nav-burger { display: flex; }
}
/* Sprachumschalter: Text-Badges im gleichen runden Icon-Badge-Stil */
.lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; }
.lang { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; line-height: 1;
  color: var(--muted); flex: none;
  background: color-mix(in srgb, var(--a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 30%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--a) 8%, transparent);
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.lang:hover { color: var(--a); border-color: color-mix(in srgb, var(--a) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--a) 18%, transparent); }
.lang.is-active { color: var(--b); border-color: color-mix(in srgb, var(--b) 50%, transparent);
  background: color-mix(in srgb, var(--b) 12%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--b) 22%, transparent); cursor: default; }
.btn { display: inline-block; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.8rem 1.7rem; border: 1px solid var(--hair); border-radius: 999px; transition: border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.btn:hover { border-color: var(--a); color: var(--a); box-shadow: 0 0 24px color-mix(in srgb, var(--a) 30%, transparent); }
.btn-primary { border-color: color-mix(in srgb, var(--a) 60%, transparent); color: var(--a); }
.btn-big { font-size: 0.95rem; padding: 1.1rem 2.4rem; }
.hero { min-height: 100svh; position: relative; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.hero-inner { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6rem var(--pad) 4rem; z-index: 2; }
.hero-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.8rem; opacity: 0; transform: translateY(20px); }
.hero-title { font-family: var(--head); font-weight: 300; font-size: clamp(2.4rem, 7vw, 6.4rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; margin-bottom: 1.6rem; }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .char { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(24px); animation: char-in 0.9s var(--ease) 5.2s forwards; }
@keyframes char-in { to { opacity: 1; filter: blur(0); transform: none; } }
.hero-sub { max-width: 34rem; color: var(--muted); margin-bottom: 2.4rem; opacity: 0; transform: translateY(20px); animation: char-in 0.9s ease 5.4s forwards; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(20px); animation: char-in 0.9s ease 5.6s forwards; }
.hero-kicker { animation: char-in 0.9s ease 5.1s forwards; }
.scrollcue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.scrollcue span { display: block; width: 1px; height: 52px; background: linear-gradient(var(--a), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 50% { opacity: 0.25; } }
main { position: relative; z-index: 2; }
.sec { padding: clamp(4rem, 11vh, 8rem) var(--pad); position: relative; }
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: clamp(1.8rem, 4vw, 3.4rem); }
.panel-wide { max-width: 1160px; margin: 0 auto; }
.panel-center { max-width: 900px; margin: 0 auto; text-align: center; }
.sec-head-free { max-width: 1160px; margin: 0 auto 2.4rem; }
.eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; display: flex; gap: 0.7rem; align-items: center; }
.eyebrow span { color: var(--b); }
.sec-title { font-family: var(--head); font-weight: 300; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.lead { max-width: 36rem; color: var(--muted); margin-bottom: 2rem; }
.statement { font-family: var(--head); font-weight: 300; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.32; letter-spacing: -0.01em; max-width: 56rem; margin-bottom: 1.8rem; }
.split-words .w { display: inline-block; opacity: 0.13; }
.usp { max-width: 42rem; color: var(--muted); border-left: 2px solid var(--b); padding-left: 1.2rem; margin-bottom: 2.4rem; }
.usp strong { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.4rem; }
.stat strong { font-family: var(--head); font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; display: block; background: linear-gradient(120deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-num { display: flex; align-items: baseline; gap: 0.5rem; }
.stat-pre { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.stat span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 0.6rem; }
.ticker { position: relative; z-index: 2; border-block: 1px solid var(--hair); overflow: hidden; padding: 0.85rem 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); }
.ticker-track { display: flex; gap: 2.4rem; width: max-content; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; align-items: center; }
.ticker-track i { color: var(--a); font-style: normal; font-size: 0.6rem; }
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mod { border: 1px solid var(--hair); border-radius: 16px; padding: 1.5rem 1.4rem; position: relative; background: color-mix(in srgb, var(--bg) 40%, transparent); transition: border-color 0.3s, box-shadow 0.3s; }
.mod:hover { border-color: var(--a); box-shadow: 0 0 34px color-mix(in srgb, var(--a) 14%, transparent); }
.mod .idx { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
.mod h3 { font-family: var(--head); font-size: 1.4rem; }
.mod .tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b); margin: 0.15rem 0 0.8rem; }
.mod p { font-size: 0.88rem; color: var(--muted); }
.gallery { position: relative; z-index: 2; }
.gal-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 4rem; }
.gal-head { padding: 0 var(--pad); margin-bottom: 2.4rem; }
.gal-track { display: flex; gap: clamp(1.5rem, 4vw, 3rem); width: max-content; padding-left: max(4vw, calc((100vw - 1160px) / 2)); padding-right: 8vw; will-change: transform; }
.gal-item { width: clamp(320px, 44vw, 640px); flex-shrink: 0; }
.gal-imgwrap { border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; background: var(--panel); backdrop-filter: blur(4px); }
.gal-item figcaption { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin-top: 1rem; color: var(--muted); font-size: 0.85rem; }
.gal-num { font-family: var(--mono); font-size: 0.7rem; color: var(--b); grid-row: span 2; padding-top: 0.25rem; }
.gal-item strong { font-family: var(--head); color: var(--text); font-size: 1.05rem; }
body.gal-stack .gal-track { flex-wrap: wrap; width: auto; padding-inline: var(--pad); }
body.gal-stack .gal-item { width: 100%; }
body.gal-stack .gal-pin { min-height: 0; }
body.gal-stack .gal-imgwrap { clip-path: none !important; }
.log-entry { display: grid; grid-template-columns: 70px 1fr; gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--hair); }
.log-entry:last-child { border-bottom: 0; }
.log-no { font-family: var(--mono); font-size: 0.75rem; color: var(--b); padding-top: 0.4rem; }
.log-entry h3 { font-family: var(--head); font-size: 1.3rem; margin-bottom: 0.4rem; }
.log-entry p { font-size: 0.92rem; color: var(--muted); max-width: 44rem; }
.offers, .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1160px; margin: 0 auto; }
.offer, .case { display: flex; flex-direction: column; gap: 0.9rem; }
.offer .badge { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b); border: 1px solid color-mix(in srgb, var(--b) 40%, transparent); border-radius: 999px; padding: 0.28rem 0.8rem; align-self: flex-start; }
.offer h3, .case h3 { font-family: var(--head); font-size: 1.35rem; line-height: 1.2; }
.offer p, .case p { font-size: 0.88rem; color: var(--muted); flex: 1; }
.case p { flex: 0 1 auto; }
.case em { font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.2rem; }
.offer-hl { border-color: color-mix(in srgb, var(--a) 50%, transparent); }
.offer-cta { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); background: linear-gradient(120deg, color-mix(in srgb, var(--a) 26%, transparent), color-mix(in srgb, var(--b) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); border-radius: 999px; padding: 0.6rem 1.25rem; transition: box-shadow 0.3s, border-color 0.3s; }
.offer-cta:hover { border-color: var(--a); box-shadow: 0 0 22px color-mix(in srgb, var(--a) 35%, transparent); }
.case figure { margin: calc(clamp(1.8rem, 4vw, 3.4rem) * -1) calc(clamp(1.8rem, 4vw, 3.4rem) * -1) 0.4rem; border-bottom: 1px solid var(--hair); border-radius: 22px 22px 0 0; overflow: hidden; }
.case-br { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b); }
.steps { max-width: 46rem; }
.step { display: grid; grid-template-columns: 76px 1fr; gap: 1.5rem; padding: 1.7rem 0; border-bottom: 1px solid var(--hair); }
.step:last-child { border-bottom: 0; }
.step-no { font-family: 'FontSerif', Georgia, serif; font-style: italic; font-size: 2rem; color: var(--b); }
.step h3 { font-family: var(--head); font-size: 1.25rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.9rem; color: var(--muted); }
.contact-title { font-family: var(--head); font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
/* Extra Platz unten: der schwebende „Nach oben"-Button (fixed, bottom-right)
   soll am Seitenende sichtbar bleiben, aber nie den Copyright-Text überdecken. */
.footer { position: relative; z-index: 2; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--hair); padding: 3rem var(--pad) calc(clamp(1rem, 3vw, 2rem) + 68px); display: grid; grid-template-columns: 1fr auto auto; gap: 2.5rem; }
.footer p { color: var(--muted); font-size: 0.85rem; margin-top: 0.7rem; }
.footer nav, .footer-legal { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--a); }
.anim { opacity: 0; transform: translateY(26px); filter: blur(5px); transition: opacity 0.9s ease, transform 0.9s var(--ease), filter 0.9s ease; }
.anim.in { opacity: 1; transform: none; filter: none; }
@media (max-width: 900px) {
  .mods, .offers, .cases { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; gap: 1.5rem; }
  .progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  #loader { display: none; }
  .hero { min-height: 100svh; }
  #scene { display: none; }
  .char, .hero-kicker, .hero-sub, .hero-cta { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .anim { opacity: 1; transform: none; filter: none; transition: none; }
  .split-words .w { opacity: 1; }
  .mmenu, .mmenu-links a, .mmenu-cta, .nav-burger span { transition: none; }
}
.story { position: relative; z-index: 2; }
.story-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 5.5rem var(--pad) 2.5rem; overflow: hidden; }
.story-eyebrow { max-width: 1160px; margin: 0 auto 1.6rem; width: 100%; }
.story-stage { position: relative; max-width: 1160px; margin: 0 auto; width: 100%; min-height: min(60vh, 560px); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; will-change: transform, opacity; }
.slide + .slide { visibility: hidden; }
.slide-media { border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; background: var(--panel); backdrop-filter: blur(6px); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.slide-kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b); }
.slide-copy h3 { font-family: var(--head); font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0.7rem 0 1rem; }
.slide-copy p { color: var(--muted); max-width: 30rem; margin-bottom: 1.3rem; }
.slide-fact { display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a); border: 1px solid var(--hair); border-radius: 999px; padding: 0.45rem 1rem; }
.story-dots { display: flex; gap: 0.55rem; justify-content: center; margin-top: 2.2rem; }
.story-dots span { width: 30px; height: 2px; background: var(--hair); border-radius: 2px; transition: background 0.3s; }
.story-dots span.on { background: linear-gradient(90deg, var(--a), var(--b)); }
body.story-stack .story-stage { min-height: 0; }
body.story-stack .slide { position: static; visibility: visible; margin-bottom: 3rem; }
body.story-stack .story-dots { display: none; }
@media (max-width: 900px) { .slide { grid-template-columns: 1fr; } }
.upgrade-cta-row { margin-top: 2.2rem; }
.vline { position: relative; margin: 2.6rem 0 2.2rem; }
.vline-rail { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--hair); border-radius: 2px; }
.vline-fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, transparent, var(--a) 55%, var(--b)); border-radius: 2px; }
.vline-nodes { position: relative; display: flex; justify-content: space-between; gap: 0.5rem; }
.vnode { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; min-width: 0; }
.vnode i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; display: block; }
.vnode b { font-family: var(--head); font-size: clamp(1rem, 2vw, 1.5rem); }
.vnode span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vnode .vdate { font-family: var(--mono); font-style: normal; font-size: 0.56rem; letter-spacing: 0.06em; color: color-mix(in srgb, var(--muted) 78%, transparent); margin-top: 0.05rem; }
.vnode-dead .vdate { color: color-mix(in srgb, var(--a) 62%, var(--muted)); }
.vnode-live .vdate { color: color-mix(in srgb, var(--a) 80%, transparent); }
.vnode-dead b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--a); }
.vnode-warm i { border-color: var(--b); }
.vnode-live i { border-color: var(--a); background: var(--a); box-shadow: 0 0 18px var(--a); }
.vnode-live b { color: var(--a); }
.vnode-live span { color: var(--a); }
.upoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.upoint { border-top: 2px solid var(--hair); padding-top: 0.9rem; }
.upoint strong { display: block; font-family: var(--head); font-size: 1.05rem; margin-bottom: 0.3rem; }
.upoint span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) {
  .upoints { grid-template-columns: 1fr; }
  .vnode span, .vnode .vdate { display: none; }
}
.plat { position: relative; z-index: 2; }
.plat-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 5.5rem 0 3rem; }
.plat-head { padding: 0 var(--pad); max-width: 1160px; margin: 0 auto 2.4rem; width: 100%; }
.plat-track { display: flex; gap: 1.2rem; width: max-content; padding-left: max(4vw, calc((100vw - 1160px) / 2)); padding-right: 8vw; will-change: transform; }
.plat-track .mod { width: clamp(290px, 30vw, 380px); flex-shrink: 0; background: var(--panel); backdrop-filter: blur(8px); }
.mod-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; border-color: color-mix(in srgb, var(--a) 45%, transparent) !important; }
body.plat-stack .plat-track { flex-wrap: wrap; width: auto; padding-inline: var(--pad); }
body.plat-stack .plat-track .mod { width: 100%; }
body.plat-stack .plat-pin { min-height: 0; }
.delta { position: relative; z-index: 2; padding: clamp(4rem, 11vh, 8rem) var(--pad); }
.deltas { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.2rem; }
.delta-row { display: grid; grid-template-columns: 220px 1fr 54px 1fr; gap: 1.3rem; align-items: center; }
.delta-art { border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--panel); backdrop-filter: blur(5px); }
.delta-card { border-radius: 18px; padding: 1.5rem 1.5rem 1.6rem; }
.delta-card p { font-size: 0.93rem; margin-top: 0.6rem; }
.delta-before { border: 1px dashed color-mix(in srgb, var(--muted) 72%, transparent); color: #aeb7c9; background: rgba(19, 27, 43, 0.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.delta-before .delta-tag { color: #93a0b8; }
.delta-after { border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); background: var(--panel); backdrop-filter: blur(8px); box-shadow: 0 0 34px color-mix(in srgb, var(--a) 12%, transparent); }
.delta-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.delta-after .delta-tag { color: var(--a); }
.delta-arrow { color: var(--a); font-size: 1.7rem; text-align: center; text-shadow: 0 0 16px color-mix(in srgb, var(--a) 60%, transparent); }
.delta-metric { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); border: 1px solid color-mix(in srgb, var(--b) 45%, transparent); border-radius: 999px; padding: 0.4rem 0.95rem; background: linear-gradient(120deg, color-mix(in srgb, var(--a) 18%, transparent), color-mix(in srgb, var(--b) 14%, transparent)); }
.delta-row .delta-before, .delta-row .delta-arrow, .delta-row .delta-after { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.delta-row.in .delta-before { opacity: 1; transform: none; }
.delta-row.in .delta-arrow { opacity: 1; transform: none; transition-delay: 0.3s; }
.delta-row.in .delta-after { opacity: 1; transform: none; transition-delay: 0.5s; }
@media (max-width: 900px) {
  .delta-row { grid-template-columns: 1fr; }
  .delta-art { max-width: 320px; }
  .delta-arrow { transform: rotate(90deg) translateY(-18px); text-align: left; }
  .delta-row.in .delta-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .delta-row .delta-before, .delta-row .delta-arrow, .delta-row .delta-after { opacity: 1; transform: none; transition: none; }
}
.sec-head-free, .plat-head { position: relative; z-index: 1; }
.sec-head-free::before, .plat-head::before {
  content: ''; position: absolute; inset: -1.6rem -1.8rem; z-index: -1; border-radius: 26px;
  background: radial-gradient(130% 130% at 28% 18%, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 45%, transparent) 68%, transparent);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.delta-art { background: #0c1322; border-color: color-mix(in srgb, var(--muted) 42%, transparent); }
.delta-art img { filter: brightness(1.18) saturate(1.05); }
.log-entry { border-left: 2px solid transparent; padding-left: 1.1rem; margin-left: -1.1rem; transition: border-color 0.35s, background 0.35s; }
.log-entry.log-active { border-left-color: var(--a); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 9%, transparent), transparent 62%); }
.log-entry.log-active .log-no { color: var(--a); text-shadow: 0 0 12px color-mix(in srgb, var(--a) 60%, transparent); }
.log-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.log-tags span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 0.2rem 0.6rem; transition: color 0.35s, border-color 0.35s; }
.log-entry.log-active .log-tags span { color: var(--text); border-color: color-mix(in srgb, var(--a) 45%, transparent); }
.case { position: relative; overflow: hidden; transition: opacity 1.15s ease, transform 1.15s var(--ease), filter 1.15s ease, border-color 0.35s, box-shadow 0.35s; }
.case:hover { transition: opacity 1.15s ease, transform 0.35s var(--ease), filter 1.15s ease, border-color 0.35s, box-shadow 0.35s; }
.case::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--a), var(--b)); opacity: 0.65; }
.case:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--a) 45%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 30px color-mix(in srgb, var(--a) 12%, transparent); }
.cases .case.anim { transform: translateX(-52px); }
.cases .case.anim:nth-child(even) { transform: translateX(52px); }
.cases .case.anim.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .cases .case.anim, .cases .case.anim:nth-child(even) { transform: none; } }
.log-entry { grid-template-columns: 90px 1fr; }
.log-no { font-family: 'FontSerif', Georgia, serif; font-style: italic; font-size: 2.1rem; line-height: 1; color: var(--b); padding-top: 0; }
.log-entry.log-active .log-no { color: var(--a); text-shadow: 0 0 16px color-mix(in srgb, var(--a) 55%, transparent); }
.log-entry .log-no, .log-entry > div { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.log-entry.in .log-no { opacity: 1; transform: none; }
.log-entry.in > div { opacity: 1; transform: none; transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .log-entry .log-no, .log-entry > div { opacity: 1; transform: none; transition: none; }
}
/* Handy: feste 90px-Nummernspalte fraß bis zu 40 % der Breite. Auf Inhalts-
   breite schrumpfen, kleinere Ziffer + Lücke -> mehr Platz für den Text. */
@media (max-width: 600px) {
  .log-entry { grid-template-columns: 1.9rem 1fr; gap: 0.9rem; }
  .log-no { font-size: 1.6rem; }
}
.offer { transition: opacity 0.9s ease, transform 0.45s var(--ease), filter 0.9s ease, border-color 0.3s, box-shadow 0.3s; }
.offer:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 55%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 26px color-mix(in srgb, var(--a) 12%, transparent); }
.delta-row .delta-before, .delta-row .delta-after { transition: opacity 0.7s ease, transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.delta-row.in .delta-before:hover, .delta-row.in .delta-after:hover, .delta-art:hover { transition-delay: 0s; }
.delta-before:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--muted) 95%, transparent); }
.delta-after:hover { transform: translateY(-3px); border-color: var(--a); box-shadow: 0 0 40px color-mix(in srgb, var(--a) 22%, transparent); }
.delta-art { transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.delta-art:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a) 45%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--a) 14%, transparent); }
.log-entry:hover { border-left-color: var(--a); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 9%, transparent), transparent 62%); }
.log-entry:hover .log-no { color: var(--a); text-shadow: 0 0 16px color-mix(in srgb, var(--a) 55%, transparent); }
.log-entry:hover .log-tags span { color: var(--text); border-color: color-mix(in srgb, var(--a) 45%, transparent); }
.upoint { transition: border-color 0.3s, transform 0.35s var(--ease); }
.upoint:hover { border-top-color: var(--a); transform: translateY(-3px); }
.stat { transition: transform 0.35s var(--ease); }
.stat:hover { transform: translateY(-3px); }
.stat:hover strong { text-shadow: 0 0 26px color-mix(in srgb, var(--a) 35%, transparent); }
.vnode { transition: transform 0.3s var(--ease); }
.vnode:hover { transform: translateY(-4px); }
.step { transition: background 0.3s, padding-left 0.3s var(--ease); }
.step:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--a) 7%, transparent), transparent 60%); padding-left: 0.6rem; }
.step:hover .step-no { text-shadow: 0 0 14px color-mix(in srgb, var(--b) 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .offer:hover, .delta-before:hover, .delta-after:hover, .delta-art:hover, .upoint:hover, .stat:hover, .vnode:hover { transform: none; }
}
.btn { border-color: color-mix(in srgb, var(--text) 38%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn:hover { border-color: var(--a); color: var(--a); }
.btn-primary { background: linear-gradient(120deg, var(--a), var(--b)); border: 0; color: #071019; font-weight: 700; }
.btn-primary:hover { color: #071019; box-shadow: 0 10px 36px color-mix(in srgb, var(--a) 45%, transparent); transform: translateY(-1px); }
.delta-metric { border: 0; border-left: 3px solid var(--b); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--b) 10%, transparent); color: var(--text); padding: 0.45rem 0.95rem; cursor: default; }
.delta-row { grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.delta-row:nth-child(even) .delta-art { order: 2; }
.delta-art { border-radius: 20px; }
.delta-art img { width: 100%; display: block; }
.delta-card { border: 1px solid var(--hair); background: var(--panel); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); padding: 1.7rem 1.7rem 1.8rem; }
.delta-old { color: var(--muted); font-size: 0.92rem; padding-left: 1rem; border-left: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent); }
.delta-new { color: var(--text); font-size: 1rem; padding-left: 1rem; border-left: 2px solid var(--a); margin-top: 1.1rem !important; }
.delta-card p { margin-top: 0; }
.delta-row .delta-old, .delta-row .delta-new, .delta-row .delta-metric { opacity: 0; transform: translateY(16px); transition: opacity 0.65s ease, transform 0.65s var(--ease); }
.delta-row.in .delta-old { opacity: 1; transform: none; }
.delta-row.in .delta-new { opacity: 1; transform: none; transition-delay: 0.25s; }
.delta-row.in .delta-metric { opacity: 1; transform: none; transition-delay: 0.45s; }
.delta-card:hover { border-color: color-mix(in srgb, var(--a) 50%, transparent); box-shadow: 0 0 36px color-mix(in srgb, var(--a) 14%, transparent); }
@media (max-width: 900px) {
  .delta-row { grid-template-columns: 1fr; }
  .delta-row:nth-child(even) .delta-art { order: 0; }
  .delta-art { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .delta-row .delta-old, .delta-row .delta-new, .delta-row .delta-metric { opacity: 1; transform: none; transition: none; }
}
.btn-big { font-family: var(--body); text-transform: none; letter-spacing: 0.02em; font-size: 1.1rem; font-weight: 600; padding: 1.1rem 2.4rem; }
.mod-icon { width: 40px; height: 40px; color: var(--a); margin-bottom: 0.9rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--a) 45%, transparent)); }
.mod-icon svg { width: 100%; height: 100%; display: block; }
.mod:hover .mod-icon { color: var(--b); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--b) 50%, transparent)); }
.ico { display: inline-flex; width: 21px; height: 21px; color: var(--b); margin-right: 0.55rem; vertical-align: -4px; }
.ico svg { width: 100%; height: 100%; }
.log-entry h3, .offer h3 { display: flex; align-items: center; }
.log-entry.log-active .ico, .log-entry:hover .ico, .offer:hover .ico { color: var(--a); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--a) 55%, transparent)); }
.upoint strong { display: flex; align-items: center; }
.ico-up { color: var(--a); }
.upoint:hover .ico-up { color: var(--b); }
.mod-icon, .ico {
  border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--a) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
  color: var(--a); filter: none;
  box-shadow: 0 0 16px color-mix(in srgb, var(--a) 10%, transparent);
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.mod-icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.mod-icon svg { width: 22px; height: 22px; }
.ico { width: 38px; height: 38px; margin-right: 0.8rem; vertical-align: middle; }
.ico svg { width: 18px; height: 18px; }
.ico-up { width: 34px; height: 34px; margin-right: 0.65rem; }
.ico-up svg { width: 16px; height: 16px; }
/* Copyright als Stroke-Icon im Icon-Stil, aber randlos (kein Badge-Ring) */
.copyright { display: flex; align-items: center; }
.ico-c { display: inline-flex; width: 19px; height: 19px; margin-right: 0.55rem; color: var(--a); flex: none;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--a) 45%, transparent)); transition: color 0.35s, filter 0.35s, transform 0.5s var(--ease); }
.ico-c svg { width: 100%; height: 100%; display: block; }
.footer-legal:hover .ico-c { color: var(--b); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--b) 55%, transparent)); transform: rotate(360deg); }
.mod:hover .mod-icon,
.log-entry.log-active .ico, .log-entry:hover .ico, .offer:hover .ico, .upoint:hover .ico-up {
  color: var(--b);
  border-color: color-mix(in srgb, var(--b) 45%, transparent);
  background: color-mix(in srgb, var(--b) 10%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--b) 22%, transparent);
}
.log-entry h3, .offer h3, .upoint strong { display: flex; align-items: center; }
.log-entry { transition: border-color 0.35s, background 0.35s, transform 0.3s var(--ease); }
.log-entry:hover { transform: translateX(8px); }
.log-entry:hover h3 { color: var(--a); }
.log-entry h3 { transition: color 0.3s; }
@media (prefers-reduced-motion: reduce) { .log-entry:hover { transform: none; } }
html.modal-lock { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity 0.35s ease, visibility 0.35s; }
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-panel { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--hair); border-radius: 22px; padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 60px color-mix(in srgb, var(--a) 10%, transparent); transform: translateY(18px) scale(0.97); transition: transform 0.4s var(--ease); }
.modal.open .modal-panel { transform: none; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--muted); font-size: 1.3rem; cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.modal-close:hover { color: var(--a); border-color: var(--a); }
.modal-panel h3 { font-family: var(--head); font-size: 1.55rem; margin: 0.4rem 0 0.6rem; }
.modal-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
#cm-context { color: var(--b); }
#cm-form { display: flex; flex-direction: column; gap: 1rem; }
#cm-form label { display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#cm-form input, #cm-form textarea { background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--hair); border-radius: 12px; padding: 0.85rem 1rem; color: var(--text); font-family: var(--body); font-size: 0.98rem; resize: vertical; transition: border-color 0.25s; }
#cm-form input:focus, #cm-form textarea:focus { outline: none; border-color: var(--a); }
#cm-form .btn { align-self: flex-start; cursor: pointer; }
.modal-hint { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--muted); line-height: 1.6; }
.modal-hint a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.modal-hint a:hover { color: var(--a); }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-status { font-size: 0.9rem; margin: 0; min-height: 1.2em; transition: color 0.25s; }
.cm-status.ok { color: var(--b); }
.cm-status.err { color: #ff8a7a; }
#cm-form.sending .btn { opacity: 0.6; pointer-events: none; }
.totop { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 1200; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--hair); color: var(--a); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop svg { width: 20px; height: 20px; }
/* reCAPTCHA-Badge ausblenden — der Hinweis im Kontakt-Overlay (mit Links zu
   Googles Datenschutz/Nutzungsbedingungen) erfüllt Googles Anzeigepflicht. */
.grecaptcha-badge { visibility: hidden !important; }
.totop:hover { border-color: var(--a); box-shadow: 0 0 22px color-mix(in srgb, var(--a) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .modal, .modal-panel, .totop { transition: none; } }

/* ---------- Consent-Banner (Google Analytics erst nach Opt-in) ---------- */
.consent { position: fixed; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 1400; width: min(520px, 100%); margin-inline: auto; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hair); border-radius: 18px; padding: 1.25rem 1.4rem; box-shadow: 0 30px 80px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s var(--ease), visibility 0.4s; }
.consent.show { opacity: 1; visibility: visible; transform: none; }
.consent p { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin-bottom: 1rem; }
.consent p a { color: var(--a); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-actions .btn { cursor: pointer; font-size: 0.7rem; padding: 0.7rem 1.4rem; }
#consent-decline { border-color: color-mix(in srgb, var(--text) 55%, transparent); color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
#consent-decline:hover { border-color: var(--a); color: var(--a); background: color-mix(in srgb, var(--a) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

.steps { max-width: none; }
.step { grid-template-columns: 90px 1fr; padding: 1.7rem 0 1.7rem 1.1rem; margin-left: -1.1rem; border-left: 2px solid transparent; transition: border-color 0.35s, background 0.35s, transform 0.3s var(--ease); }
.step-no { font-size: 2.1rem; }
.step h3 { display: flex; align-items: center; font-size: 1.3rem; transition: color 0.3s; }
.step:hover { transform: translateX(8px); border-left-color: var(--a); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 9%, transparent), transparent 62%); padding-left: 1.1rem; }
.step:hover h3 { color: var(--a); }
.step:hover .ico { color: var(--b); border-color: color-mix(in srgb, var(--b) 45%, transparent); background: color-mix(in srgb, var(--b) 10%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--b) 22%, transparent); }
.step:hover .step-no { color: var(--a); text-shadow: 0 0 16px color-mix(in srgb, var(--a) 55%, transparent); }
.step .step-no, .step > div { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.step.in .step-no { opacity: 1; transform: none; }
.step.in > div { opacity: 1; transform: none; transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .step .step-no, .step > div { opacity: 1; transform: none; transition: none; }
  .step:hover { transform: none; }
}
/* Handy: schmalere Nummernspalte (wie bei .log-entry) — 90px fraßen zu viel
   Breite; auf 1.9rem + kleinere Ziffer/Lücke -> mehr Platz für den Text. */
@media (max-width: 600px) {
  .step { grid-template-columns: 1.9rem 1fr; gap: 0.9rem; }
  .step-no { font-size: 1.6rem; }
}
.delta-row:nth-child(even) { grid-template-columns: 0.85fr 1.15fr; }
/* Auf Mobile/Tablet auch gerade Zeilen einspaltig — sonst überschreibt die
   Spezifität von :nth-child(even) die Einspaltigkeit und Bild/Text zerfallen
   in zwei gequetschte Spalten. Muss NACH der Regel oben stehen. */
@media (max-width: 900px) { .delta-row:nth-child(even) { grid-template-columns: 1fr; } }
.delta-old, .delta-new { display: flex; gap: 0.7rem; align-items: flex-start; }
.dmark { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; margin-top: 2px; }
.dmark svg { width: 12px; height: 12px; }
.dmark-x { color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); background: color-mix(in srgb, var(--muted) 8%, transparent); }
.dmark-ok { color: var(--a); border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); background: color-mix(in srgb, var(--a) 10%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--a) 18%, transparent); }
.dtrend { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 0.45rem; vertical-align: -2px; color: var(--b); }
.dtrend svg { width: 100%; height: 100%; }

/* Unternehmen / Gründer */
.founder { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; margin-top: 2.4rem; }
.founder-photo { margin: 0; position: relative; }
.founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; filter: grayscale(1) contrast(1.05) brightness(0.96); }
.founder-photo::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--a) 35%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--a) 12%, transparent) inset; pointer-events: none; }
.founder-name { font-family: var(--head); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 0.2rem; }
.founder-role { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b); margin: 0 0 1.1rem; }
.founder-body .lead { margin-bottom: 1.1rem; max-width: 40rem; }
.founder-body p:not(.lead):not(.founder-role) { color: var(--muted); max-width: 40rem; }
.founder-body .log-tags { margin-top: 1.2rem; }
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder-photo { max-width: 260px; }
}
/* „Aufbau"-Auftritt der Gründer-Sektion (Choreografie in site.js).
   Startzustände hier per CSS -> kein Aufblitzen des Inhalts vor dem JS (FOUC).
   Lichtscan fährt beim Enthüllen übers Porträt. */
.founder-fx .founder-photo { overflow: hidden; }
.founder-fx .founder-photo .scan { position: absolute; left: 0; right: 0; height: 2px; z-index: 3; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--a), transparent);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--a) 70%, transparent); }
.founder-fx .eyebrow,
.founder-fx .sec-title,
.founder-fx .founder-body > *:not(.log-tags),
.founder-fx .log-tags span { opacity: 0; }
.founder-fx .founder-photo img { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  .founder-fx .founder-photo .scan { display: none; }
  .founder-fx .eyebrow, .founder-fx .sec-title,
  .founder-fx .founder-body > *, .founder-fx .log-tags span { opacity: 1; }
  .founder-fx .founder-photo img { clip-path: none; }
}

/* A11y: sichtbarer Tastatur-Fokus + Skip-Link */
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 2000; background: var(--bg); color: var(--text); border: 1px solid var(--a); border-radius: 999px; padding: 0.6rem 1.2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; transition: top 0.2s; }
.skip-link:focus { top: 1rem; }

/* FAQ — dezente Liste mit Haarlinien statt Karten */
.faq-group { max-width: 820px; margin: 0 auto 2rem; }
.faq-group:last-child { margin-bottom: 0; }
.faq-cat { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b); margin: 0 0 0.7rem 0.3rem; }
#faq .sec-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
#faq .sec-head-free { max-width: 820px; margin: 0 auto 3rem; }
.faq-list { max-width: 820px; margin: 0 auto; background: var(--panel); border: 1px solid var(--hair); border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.5rem 1.6rem; }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: 1.05rem 0.2rem; font-size: 0.98rem; font-weight: 500; line-height: 1.45; transition: color 0.25s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 auto; font-family: var(--mono); font-size: 0.95rem; color: var(--muted); transition: transform 0.35s var(--ease), color 0.25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--b); }
.faq-item summary:hover { color: var(--a); }
.faq-item p { padding: 0 0.2rem 1.15rem; color: var(--muted); font-size: 0.94rem; max-width: 68ch; }
body.has-cursor .faq-item summary { cursor: none; }