@charset "UTF-8";
/* ==========================================================================
   Blitzmoon – Remote WP-Agentur
   Ein System für die ganze Seite:
   · eine Schrift (Manrope, normale Breite – lokal eingebunden, keine Verbindung zu Google)
   · ein Raster (Inhalt max. 72rem breit)
   · ein Kartenstil, ein Buttonstil, eine Art Überschrift
   · Violett aus dem Logo (#753CB6) auf fast schwarzem Grund
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b0a10;
  --bg-2: #0f0d16;
  --surface: #15121e;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --text: #f3f1f8;
  --muted: #aaa5ba;
  --dim: #858096;
  --brand: #753cb6;
  --brand-hi: #8a50d0;
  --accent: #b594f2;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --hd: 4.5rem;
  --r: 1.125rem;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hd) + 1rem);
  scrollbar-gutter: stable;
  background: var(--bg);
  overflow-x: clip;
}
html.is-locked { overflow: hidden; }
/* sehr große Bildschirme: alles wächst gemeinsam mit, statt in der Mitte zu schrumpfen */
@media (min-width: 1800px) { html { font-size: 106.25%; } }
@media (min-width: 2200px) { html { font-size: 112.5%; } }
@media (min-width: 2800px) { html { font-size: 125%; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
em { font-style: normal; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; }
.i { width: 1.1em; height: 1.1em; flex: none; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  padding: .7rem 1rem; border-radius: .6rem;
  background: #fff; color: #0b0a10; font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap, .hd__in, .hero__in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ------------------------------------------------------------------ Typografie */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.85rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
h1 em, h2 em {
  background: linear-gradient(100deg, #cdb4f7 0%, #a273e6 55%, #8450cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: currentColor; opacity: .65; }
.eyebrow__no { color: var(--dim); }

.lead { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.lead p + p { margin-top: .9em; }

/* Kopf jedes Abschnitts: immer gleich aufgebaut */
.head { display: grid; gap: 1rem; max-width: 43rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

/* ------------------------------------------------------------------ Buttons & Kleinteile */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s, border-color .3s, transform .45s var(--ease), box-shadow .4s;
}
.btn .i { transition: transform .45s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 .8rem 1.8rem -.8rem rgba(117, 60, 182, .95), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn--ghost { border-color: var(--line-2); background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--sm { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .875rem; }
.btn--lg { min-height: 3.35rem; padding: .85rem 1.55rem; font-size: 1rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }
@media (hover: hover) {
  .btn:hover .i { transform: translateX(.25rem); }
  .btn--primary:hover { background: var(--brand-hi); transform: translateY(-2px); box-shadow: 0 1.1rem 2.2rem -.8rem rgba(138, 80, 208, 1), inset 0 1px 0 rgba(255, 255, 255, .24); }
  .btn--ghost:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
}

.round {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
  font-size: 1.1rem;
  transition: background-color .3s, border-color .3s, transform .45s var(--ease);
}
@media (hover: hover) { .round:hover { background: var(--brand); border-color: var(--brand); } }
.round:active { transform: scale(.94); background: var(--brand); border-color: var(--brand); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { padding: .22rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .875rem; font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------------ Header */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd); }
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 10, 16, .95);     /* fast deckend: auch ohne Weichzeichner scheint kein Text durch */
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .35s;
}
.hd.is-stuck::before, .hd--page::before { opacity: 1; }
/* ohne JavaScript kann die Kopfzeile nicht aufs Scrollen reagieren – dann ist sie von Anfang an hinterlegt */
@media (scripting: none) { .hd::before { opacity: 1; } }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.hd__logo { flex: none; display: block; width: 8.25rem; }
.hd__logo svg, .hd__logo img { width: 100%; height: auto; }
.hd__nav { display: none; }
.hd__nav a {
  position: relative; padding: .4rem 0;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  color: rgba(243, 241, 248, .76); transition: color .3s;
}
.hd__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.hd__nav a:hover, .hd__nav a[aria-current] { color: #fff; }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd__side { display: flex; align-items: center; gap: .6rem; }
.hd__cta { display: none; }

.burger {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 2.6rem; padding: 0 .35rem 0 .95rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .875rem; font-weight: 700;
  transition: border-color .3s, background-color .3s;
}
/* Menü-Knopf erscheint erst, wenn main.js ihn bedienen kann (ohne JavaScript bleibt die Fußzeilen-Navigation) */
.hd .burger:not(.is-ready) { visibility: hidden; }
.burger__icon {
  display: grid; place-content: center; gap: .27rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: #fff; color: #0b0a10;
}
.burger__icon i { display: block; width: .85rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.burger__icon svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) {
  .burger:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
  .burger:hover .burger__icon i:first-child { transform: translateX(.13rem); }
  .burger:hover .burger__icon i:last-child { transform: translateX(-.13rem); }
}
@media (min-width: 620px) { .hd__cta { display: inline-flex; } }
@media (min-width: 1000px) { .hd .burger { display: none; } }
@media (min-width: 1000px) { .hd__nav { display: flex; gap: clamp(1.4rem, 2.4vw, 2.25rem); } }

/* ------------------------------------------------------------------ Großes Menü */
.menu:not([open]) { display: none; }
.menu {
  position: fixed; inset: 0; z-index: 70;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--text);
  overflow: hidden;
}
.menu::backdrop { background: transparent; }
.menu__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background:
    radial-gradient(60% 55% at 92% 0%, rgba(117, 60, 182, .5), transparent 65%),
    radial-gradient(45% 45% at 0% 100%, rgba(117, 60, 182, .2), transparent 70%),
    var(--bg);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io);
}
.menu.is-open .menu__inner { clip-path: inset(0); }
.menu__top, .menu__nav, .menu__foot { width: min(100%, var(--wrap)); margin-inline: auto; }
.menu__top { flex: none; height: var(--hd); display: flex; align-items: center; justify-content: space-between; }
.menu__logo { width: 8.25rem; height: auto; aspect-ratio: 3688.5 / 1062.5; }
.menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(.15rem, 1.2vh, .6rem); padding-block: 1.5rem; }
.menu__nav a {
  display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.75rem);
  width: fit-content; max-width: 100%;
  padding-block: .08em; overflow: hidden;
  font-size: clamp(2.1rem, min(7.4vw, 9.5vh), 4rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.12; text-decoration: none;
  transition: color .3s, opacity .3s;
}
.menu__no { flex: none; width: 1.75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); opacity: 0; transition: opacity .5s .45s; }
.menu.is-open .menu__no { opacity: 1; }
.menu__label { display: block; transform: translateY(115%); transition: transform .9s var(--ease); }
.menu.is-open .menu__label { transform: none; }
.menu.is-open .menu__nav a:nth-child(1) .menu__label { transition-delay: .16s; }
.menu.is-open .menu__nav a:nth-child(2) .menu__label { transition-delay: .22s; }
.menu.is-open .menu__nav a:nth-child(3) .menu__label { transition-delay: .28s; }
.menu.is-open .menu__nav a:nth-child(4) .menu__label { transition-delay: .34s; }
@media (hover: hover) {
  .menu__nav:hover a { opacity: .38; }
  .menu__nav a:hover { opacity: 1; color: var(--accent); }
}
.menu__foot {
  flex: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .9375rem;
  opacity: 0; transition: opacity .5s;
}
.menu.is-open .menu__foot { opacity: 1; transition-delay: .5s; }
.menu__foot a { text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .3s, color .3s; }
.menu__foot a:hover { color: var(--accent); border-color: currentColor; }
.menu__k { display: block; margin-bottom: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ------------------------------------------------------------------ Hero
   Jede Ebene liegt in einem eigenen Element. main.js verschiebt die äußeren Elemente (Parallax),
   die Einblend- und Schwebe-Animationen laufen auf den inneren – so kommen sich beide nicht in die Quere.

   Handy / Hochformat: Team oben (Gesichter sofort sichtbar, darüber das Büro), darunter Text, dann die Zahlen.
   Breite Bildschirme:  Text links, Team rechts, die Zahlen schweben frei davor. */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: minmax(1.25rem, 1fr) auto auto minmax(1.25rem, 1fr) auto;
  min-height: 80vh; padding-top: var(--hd);   /* Handy: fast bildschirmhoch – Text oben vor dem Büro, Team unten */
  min-height: 80svh;
  container-type: inline-size;        /* 100cqw = Breite des Hero ohne Bildlaufleiste */
  overflow: hidden;
  overflow: clip;
  /* frei verschobene Ebenen taugen nicht als Scroll-Anker: sonst springt die Seite beim Neuladen */
  overflow-anchor: none;
}

.hero__bg { position: absolute; inset: -2% -5% -6%; z-index: -5; animation: fadeIn 1.4s ease both; will-change: transform; }
.hero__bg picture, .hero__bg img { width: 100%; height: 100%; max-width: none; }
.hero__bg img {
  object-fit: cover; object-position: 50% 0;
  transform-origin: 50% 25%;
  animation: kenburns 18s var(--ease-io) infinite alternate;
}
/* wie in der Vorlage: der Hintergrund zoomt langsam von 112 % auf 100 % – hier in Dauerschleife */
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

.hero__glow {
  --d: min(125vw, 60rem);
  position: absolute; z-index: -4; left: 50%; bottom: 8%;
  width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(117, 60, 182, .46), rgba(117, 60, 182, .15) 55%, rgba(117, 60, 182, 0));
  pointer-events: none;
}
.hero__dust { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 10, 16, .5) 0%, rgba(11, 10, 16, 0) 16%, rgba(11, 10, 16, 0) 70%, var(--bg) 100%);
}

/* Bühne: auf dem Handy nur eine Klammer – Team und Zahlen ordnen sich direkt ins Raster des Hero ein */
.hero__stage { display: contents; }
.hero__team {
  position: relative; grid-row: 5; grid-column: 1 / -1; justify-self: center; align-self: end;
  width: min(116vw, 38rem); aspect-ratio: 2.3;
  will-change: transform;
}
.hero__team picture { position: absolute; inset: 0 0 auto 0; animation: rise 1.5s var(--ease) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(6%) scale(1.03); } to { opacity: 1; transform: none; } }
.hero__team img {
  width: 100%; height: auto; max-width: none;
  filter: saturate(.94) contrast(1.03) brightness(.97);
  /* seitlich und nach unten weich auslaufen lassen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 30%, transparent 52%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 30%, transparent 52%);
  mask-composite: intersect;
}

.hero__in { position: relative; z-index: 2; grid-row: 2; grid-column: 1 / -1; }
/* dunkler Verlauf hinter dem Text – sorgt unabhängig von der Bildschirmhöhe für Lesbarkeit */
.hero__in::before {
  content: ""; position: absolute; z-index: -1; inset: -9rem -50vw -7rem;
  background: linear-gradient(180deg, rgba(11, 10, 16, .72) 0, rgba(11, 10, 16, .6) 62%, rgba(11, 10, 16, 0));
  pointer-events: none;
}
.hero__copy { max-width: 34rem; will-change: transform; }
.hero__copy > * { animation: fadeUp .9s var(--ease) both; }
.hero__copy > :nth-child(1) { animation-delay: .15s; }
.hero__copy > :nth-child(2) { animation-delay: .25s; }
.hero__copy > :nth-child(3) { animation-delay: .35s; }
.hero__copy > :nth-child(4) { animation-delay: .45s; }
.hero h1 { margin-top: .8rem; font-size: clamp(2.3rem, 1.3rem + 4.9vw, 4.25rem); letter-spacing: -.04em; line-height: 1.02; }
.hero__sub { margin-top: 1rem; max-width: 31rem; font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.6; color: rgba(243, 241, 248, .86); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }

.chip { position: relative; z-index: 3; grid-row: 3; margin: 1.3rem 0 0; will-change: transform; }
.chip--a { grid-column: 1; margin-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
@supports (width: 1cqw) { .chip--a { margin-left: max(var(--gutter), calc((100cqw - var(--wrap)) / 2)); } }
.chip--b { grid-column: 2; margin-left: .6rem; }
.chip__in {
  display: flex; align-items: center; gap: .6rem;
  height: 100%; padding: .65rem .85rem .65rem .8rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: .9rem;
  background: rgba(19, 16, 28, .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1.25rem 2.5rem -1rem rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: chipIn .9s var(--ease) .8s both, float 7s ease-in-out 1.8s infinite alternate;
}
.chip--b .chip__in { animation-delay: 1s, 2.1s; animation-duration: .9s, 8.5s; }
.chip strong { display: flex; font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.chip__plus { color: var(--accent); }
.chip__label { max-width: 6.75rem; font-size: .75rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
@keyframes chipIn { from { opacity: 0; transform: translateY(1rem) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float { from { transform: none; } to { transform: translateY(-.5rem); } }
/* schmale Handys: Kurzform der Beschriftung, zweiter Button entfällt */
@media (max-width: 479px) {
  .chip__more { display: none; }
  .hero__cta .btn--ghost { display: none; }
}
@media (max-width: 419px) {
  .hero .eyebrow { font-size: .75rem; letter-spacing: .06em; }
  .hero .eyebrow::before { display: none; }
}
@media (max-width: 345px) {
  .chip__in { gap: .45rem; padding: .55rem .65rem; }
  .chip strong { font-size: 1.3rem; }
}

/* Breite Bildschirme: Text links, Team rechts – beides auf einer Bildschirmhöhe */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero { display: block; height: 100vh; min-height: 38rem; padding-top: 0; }
  @supports (height: 1svh) { .hero { height: 100svh; } }
  .hero__in { display: flex; align-items: center; height: 100%; margin-top: 0; padding-top: var(--hd); padding-bottom: clamp(1.5rem, 6vh, 4rem); }
  .hero__in::before { display: none; }
  .hero__copy { max-width: min(34rem, 43vw); }
  .hero h1 { margin-top: .9rem; font-size: min(4.25rem, 6.3vw); }
  .hero__sub { margin-top: 1.1rem; }
  .hero__cta { margin-top: 1.6rem; }
  .hero__stage {
    display: block; position: absolute; left: calc(50% - 5rem); bottom: 0;
    width: min(55vw, 90vh); aspect-ratio: 1952 / 1620;
  }
  @supports (height: 1svh) { .hero__stage { width: min(55vw, 90svh); } }
  .hero__team { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
  .hero__team picture { position: static; }
  .hero__team img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-composite: add;
  }
  .hero__glow { --d: min(72vw, 62rem); left: 74%; bottom: -32%; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(11, 10, 16, .74) 0%, rgba(11, 10, 16, .5) 28%, rgba(11, 10, 16, .08) 54%, rgba(11, 10, 16, 0) 68%),
      linear-gradient(180deg, rgba(11, 10, 16, .5) 0%, rgba(11, 10, 16, 0) 16%, rgba(11, 10, 16, 0) 68%, var(--bg) 100%);
  }
  .chip, .chip--a, .chip--b { position: absolute; margin: 0; }
  .chip--a { left: -8%; top: 61%; }
  .chip--b { right: 12%; top: -9%; }
  .chip__in { gap: .7rem; padding: .75rem 1rem .75rem .9rem; }
  .chip strong { font-size: 1.75rem; }
  .chip__label { font-size: .8125rem; }
}
/* schmale Laptops und Tablets im Querformat: Textspalte schmaler, Team etwas weiter rechts – nichts überlappt die Gesichter */
@media (min-width: 900px) and (max-width: 1199px) and (min-aspect-ratio: 5/4) {
  .hero__copy { max-width: 38vw; }
  .hero h1 { font-size: 5.4vw; }
  .hero__stage { left: 47%; width: min(52vw, 90vh); }
  @supports (height: 1svh) { .hero__stage { width: min(52vw, 90svh); } }
  .chip--a { left: -6%; top: 66%; }
  .chip--b { right: 12%; top: -13%; }
  .chip__in { gap: .55rem; padding: .6rem .8rem .6rem .75rem; }
  .chip strong { font-size: 1.4rem; }
  .chip__label { font-size: .75rem; }
}

/* ------------------------------------------------------------------ Werkzeug-Leiste */
.tools {
  --gap: clamp(1.4rem, 2.6vw, 2.25rem);
  position: relative; z-index: 1;
  display: flex; gap: var(--gap);
  padding: 1.05rem 0;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tools__track {
  flex: none; display: flex; align-items: center; justify-content: space-around; gap: var(--gap);
  min-width: 100%;
  animation: marquee 50s linear infinite;
}
.tools li { display: flex; align-items: center; gap: var(--gap); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; line-height: 1; color: var(--muted); }
.tools li::after { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--brand-hi); }
@keyframes marquee { to { transform: translate3d(calc(-100% - var(--gap)), 0, 0); } }
@media (hover: hover) { .tools:hover .tools__track { animation-play-state: paused; } }

/* ------------------------------------------------------------------ Abschnitte */
.sec { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.sec--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

/* Einblenden beim Scrollen (Klassen setzt main.js; ohne JavaScript bleibt alles sichtbar) */
.rv.is-pre { opacity: 0; transform: translateY(1.25rem); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }

/* ------------------------------------------------------------------ Leistungen: Liste + Bühne
   Ohne JavaScript: sechs einfache Karten mit Text.
   Mit JavaScript (.is-ready): links wählt man eine Leistung, rechts zeigt die Bühne dazu eine eigene Szene.
   Alle paar Sekunden geht es von selbst weiter – der Balken an der aktiven Zeile ist zugleich die Uhr. */
.svx { display: grid; gap: 1rem; }
.svx__text h3 { font-size: 1.25rem; }
.svx__text p { margin-top: .5rem; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* --- Grundzustand ohne JavaScript */
.svx:not(.is-ready) .svx__tabs, .svx:not(.is-ready) .svx__pause, .svx:not(.is-ready) .scene, .svx:not(.is-ready) .svx__ghost { display: none; }
.svx:not(.is-ready) .svx__stage { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.svx:not(.is-ready) .svx__panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 62%); }

/* --- Auswahl. Handy und Tablet: sechs nummerierte Segmente über der Bühne */
.svx__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.svx__tab {
  position: relative; display: grid; place-items: center;
  min-height: 2.9rem; padding: .45rem 0 .8rem;
  color: var(--dim); text-align: left;
  transition: color .3s, padding .5s var(--ease), background-color .4s;
}
.svx__no { font-size: .875rem; font-weight: 700; letter-spacing: .04em; transition: color .3s; }
.svx__arrow { display: none; }
.svx__bar { position: absolute; inset: auto 0 0 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.svx__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-hi), var(--accent)); transform: scaleX(0); transform-origin: 0 50%; }
.svx__tab[aria-selected="true"] { color: var(--text); }
.svx__tab[aria-selected="true"] .svx__no { color: var(--accent); }
.svx__tab[aria-selected="true"] .svx__bar i { animation: svxProgress 9s linear forwards; }
.svx.is-paused .svx__tab[aria-selected="true"] .svx__bar i { animation-play-state: paused; }
.svx.is-stopped .svx__tab[aria-selected="true"] .svx__bar i { animation: none; transform: none; }
@keyframes svxProgress { to { transform: scaleX(1); } }
@media (hover: hover) { .svx__tab:hover { color: var(--text); } }
@media (max-width: 959px) { .svx__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* --- Bühne */
.svx.is-ready .svx__stage {
  --scene-h: clamp(15rem, 62vw, 17.5rem);
  position: relative; isolation: isolate;
  display: grid; min-width: 0;
  container-type: inline-size;
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + .25rem);
  background:
    radial-gradient(75% 85% at 88% -5%, rgba(117, 60, 182, .5), transparent 68%),
    radial-gradient(60% 70% at 0% 60%, rgba(117, 60, 182, .16), transparent 70%),
    linear-gradient(165deg, #1b1629, #100d18 72%);
  box-shadow: 0 2.5rem 5rem -3rem rgba(0, 0, 0, .95);
  overflow: hidden;
  touch-action: pan-y;
}
/* feines Punktraster, läuft nach unten aus */
.svx.is-ready .svx__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px);
  background-size: 1.4rem 1.4rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 64%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 64%);
}
/* Lichtkegel, der der Maus folgt */
.svx.is-ready .svx__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(17rem circle at calc(50% + var(--px, 0) * 50%) calc(50% + var(--py, 0) * 50%), rgba(154, 104, 220, .3), transparent 70%);
  opacity: 0; transition: opacity .5s;
}
@media (hover: hover) { .svx.is-ready .svx__stage:hover::after { opacity: 1; } }
.svx.is-ready .svx__panel {
  grid-area: 1 / 1; display: grid; grid-template-rows: var(--scene-h) auto; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
}
.svx.is-ready .svx__panel.is-active { opacity: 1; visibility: visible; transition: opacity .5s .08s, visibility 0s; }
.svx.is-ready .svx__text { position: relative; padding: 1.2rem 3.9rem 1.5rem 1.35rem; border-top: 1px solid var(--line); background: rgba(11, 10, 16, .42); overflow: hidden; }
.svx.is-ready .svx__text h3 { font-size: 1.3125rem; }
.svx.is-ready .svx__panel.is-active .svx__text > h3 { animation: svxUp .7s var(--ease) .12s both; }
.svx.is-ready .svx__panel.is-active .svx__text > p { animation: svxUp .7s var(--ease) .2s both; }
@keyframes svxUp { from { opacity: 0; transform: translateY(.9rem); } }
/* große Ziffer als Wasserzeichen */
.svx__ghost {
  position: absolute; right: 1.1rem; bottom: -.2em; z-index: -1;
  font-size: clamp(5rem, 17cqw, 7.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  pointer-events: none; user-select: none;
}
.svx__pause {
  position: absolute; z-index: 4; top: calc(var(--scene-h) + .95rem); right: .95rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); color: var(--muted);
  font-size: .9rem;
  transition: color .3s, border-color .3s, background-color .3s;
}
.svx__pause .i--play, .svx.is-stopped .svx__pause .i--pause { display: none; }
.svx.is-stopped .svx__pause .i--play { display: block; }
@media (hover: hover) { .svx__pause:hover { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); } }

/* --- Breite Bildschirme: Liste links, Bühne rechts */
@media (min-width: 960px) {
  .svx.is-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 3.4vw, 3rem); align-items: stretch; }
  .svx__tabs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .svx__tab {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto; justify-items: start; gap: .5rem;
    min-height: 4.3rem; padding: .9rem .9rem .9rem .35rem;
    border-bottom: 1px solid var(--line);
  }
  .svx__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
  .svx__arrow { display: block; color: var(--accent); opacity: 0; transform: translateX(-.6rem); transition: opacity .35s, transform .5s var(--ease); }
  .svx__bar { bottom: -1px; height: 2px; border-radius: 0; background: transparent; }
  .svx__tab[aria-selected="true"] { padding-left: .95rem; background: linear-gradient(90deg, rgba(117, 60, 182, .26), rgba(117, 60, 182, 0) 78%); }
  .svx__tab[aria-selected="true"] .svx__arrow { opacity: 1; transform: none; }
  .svx.is-ready .svx__stage { --scene-h: 18.5rem; }
  .svx.is-ready .svx__text { padding: 1.3rem 9.5rem 1.6rem 1.6rem; min-height: 9.25rem; }
  .svx__pause { top: calc(var(--scene-h) + 1.1rem); right: 1.15rem; }
}
@media (hover: hover) and (min-width: 960px) { .svx__tab:not([aria-selected="true"]):hover { padding-left: .7rem; } }

/* ------------------------------------------------------------------ Szenen auf der Bühne
   Rein dekorativ (aria-hidden) – der Text darunter trägt den Inhalt. Die Einblend-Animationen starten,
   sobald eine Szene aktiv wird. Elemente mit --z verschieben sich leicht mit der Maus (Tiefe). */
.scene { position: relative; display: grid; place-items: center; min-width: 0; padding: 1.5rem 1.6rem; overflow: hidden; }
.az__l, .fl li, .fr__word, .fr__list, .cl__tiles, .tl { translate: calc(var(--px, 0) * var(--z, 0) * 1px) calc(var(--py, 0) * var(--z, 0) * 1px); transition: translate .6s var(--ease); }

/* 01 – von A bis Z: die Linie zeichnet sich, die vier Stationen leuchten nacheinander auf */
.scene--az { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(.8rem, 4cqw, 1.75rem); padding-inline: clamp(1rem, 6.5cqw, 3rem); }
.az__l { font-size: clamp(3.6rem, 16cqw, 6.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .8; }
.az__l--a { --z: -9; background: linear-gradient(160deg, #e0d0fc, #8a50d0 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.az__l--z { --z: 9; color: var(--text); }
.az__rail { position: relative; place-self: stretch; min-height: 9rem; }
.az__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-hi), rgba(255, 255, 255, .8)); transform-origin: 0 50%; }
.az__spark { position: absolute; left: 0; right: 0; top: 50%; height: 0; opacity: 0; }
.az__spark::before { content: ""; position: absolute; left: -.3rem; top: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; box-shadow: 0 0 1rem .3rem rgba(181, 148, 242, .95); }
.az__steps { position: absolute; inset: 0; display: flex; }
.az__steps li { position: relative; flex: 1; display: grid; place-items: center; }
.az__steps b { position: relative; z-index: 1; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--accent); background: #17131f; }
/* Stationen abwechselnd über und unter der Linie, mit kurzem Verbindungsstrich */
.az__steps li::before { content: ""; position: absolute; left: 50%; bottom: calc(50% + .4rem); width: 1px; height: .8rem; background: var(--line-2); }
.az__chip {
  position: absolute; left: 50%; bottom: calc(50% + 1.25rem); transform: translateX(-50%);
  padding: .36rem .75rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(23, 19, 33, .92);
  box-shadow: 0 .8rem 1.6rem -1rem rgba(0, 0, 0, .95);
  font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.az__steps li:nth-child(even)::before { bottom: auto; top: calc(50% + .4rem); }
.az__steps li:nth-child(even) .az__chip { bottom: auto; top: calc(50% + 1.25rem); }
.az__steps li:last-child .az__chip { border-color: transparent; background: var(--brand); box-shadow: 0 .7rem 1.5rem -.6rem rgba(117, 60, 182, 1); }
.is-active .az__line { animation: azLine 2s var(--ease-io) .25s both; }
.is-active .az__steps b, .is-active .az__steps li::before { animation: azPop .5s var(--ease) both; }
.is-active .az__chip { animation: azChip .65s var(--ease) both; }
.is-active .az__steps li:nth-child(even) .az__chip { animation-name: azChipDown; }
.is-active .az__steps li:nth-child(1) b, .is-active .az__steps li:nth-child(1)::before { animation-delay: .5s; }
.is-active .az__steps li:nth-child(2) b, .is-active .az__steps li:nth-child(2)::before { animation-delay: .95s; }
.is-active .az__steps li:nth-child(3) b, .is-active .az__steps li:nth-child(3)::before { animation-delay: 1.4s; }
.is-active .az__steps li:nth-child(4) b, .is-active .az__steps li:nth-child(4)::before { animation-delay: 1.85s; }
.is-active .az__steps li:nth-child(1) .az__chip { animation-delay: .6s; }
.is-active .az__steps li:nth-child(2) .az__chip { animation-delay: 1.05s; }
.is-active .az__steps li:nth-child(3) .az__chip { animation-delay: 1.5s; }
.is-active .az__steps li:nth-child(4) .az__chip { animation-delay: 1.95s; }
.is-active .az__l--a { animation: azIn .8s var(--ease) both; }
.is-active .az__l--z { animation: azZ .9s var(--ease) 2.2s both; }
.is-active .az__spark { animation: azSpark 3.4s linear 2.6s infinite; }
@keyframes azLine { from { transform: scaleX(0); } }
@keyframes azPop { from { opacity: 0; transform: scale(.3); } }
@keyframes azChip { from { opacity: 0; transform: translate(-50%, .7rem); } }
@keyframes azChipDown { from { opacity: 0; transform: translate(-50%, -.7rem); } }
@keyframes azIn { from { opacity: 0; transform: translateX(-1rem); } }
@keyframes azZ { from { opacity: .22; transform: scale(.92); } }
@keyframes azSpark { 0% { transform: translateX(0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* 02 – Pagebuilder und Plugins */
.tl { --z: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; width: 100%; }
.tl li {
  --i: 0;
  display: grid; place-items: center; min-height: clamp(2.35rem, 8.6cqw, 3.55rem); padding: 0 .3rem;
  border: 1px solid var(--line-2); border-radius: .75rem; background: rgba(255, 255, 255, .05);
  font-size: clamp(.75rem, 2.45cqw, 1rem); font-weight: 600; white-space: nowrap; color: var(--muted);
}
.tl .is-hot { color: #fff; border-color: rgba(154, 104, 220, .8); background: rgba(117, 60, 182, .34); }
.tl .is-more { grid-column: span 2; border-style: dashed; color: var(--accent); }
.tl li:nth-child(2) { --i: 1; } .tl li:nth-child(3) { --i: 2; } .tl li:nth-child(4) { --i: 3; } .tl li:nth-child(5) { --i: 4; } .tl li:nth-child(6) { --i: 5; }
.tl li:nth-child(7) { --i: 6; } .tl li:nth-child(8) { --i: 7; } .tl li:nth-child(9) { --i: 8; } .tl li:nth-child(10) { --i: 9; } .tl li:nth-child(11) { --i: 10; }
.is-active .tl li { animation: tlIn .55s var(--ease) both, tlGlow 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * 65ms), calc(1.5s + var(--i) * 150ms); }
@keyframes tlIn { from { opacity: 0; transform: translateY(.7rem) scale(.94); } }
@keyframes tlGlow { 0%, 14%, 100% { box-shadow: 0 0 0 0 rgba(181, 148, 242, 0); } 7% { box-shadow: 0 0 0 1px rgba(181, 148, 242, .95), 0 0 1.4rem rgba(117, 60, 182, .7); } }

/* 03 – dein Workflow, deine Tools */
.fl { display: grid; gap: .5rem; width: min(100%, 32rem); }
.fl li {
  --z: 7;
  display: flex; align-items: center; gap: .65rem; min-width: 0; min-height: 2.95rem;
  padding: .5rem .85rem .5rem .55rem;
  border: 1px solid var(--line-2); border-radius: .8rem; background: rgba(23, 19, 33, .86);
  box-shadow: 0 1rem 2rem -1.25rem rgba(0, 0, 0, .95);
  font-size: .875rem; color: var(--muted);
}
.fl li:nth-child(1) { margin-right: 1.75rem; }
.fl li:nth-child(2) { --z: -6; margin-left: 1.75rem; }
.fl li:nth-child(3) { margin-right: .9rem; margin-left: .85rem; }
.fl li:nth-child(4) { --z: -6; margin-left: 1.75rem; }
.fl__app { flex: none; padding: .26rem .55rem; border-radius: .45rem; background: rgba(117, 60, 182, .42); color: #e9defc; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.fl picture { flex: none; }
.fl__av { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #3a2a5c; }
.fl__txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl__txt b { font-weight: 700; color: var(--text); }
.fl__ok { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 700; color: var(--accent); }
.fl__meta { flex: none; font-size: .8125rem; font-weight: 700; color: var(--text); }
.is-active .fl li { animation: flIn .75s var(--ease) both, flFloat 5s ease-in-out infinite alternate; }
.is-active .fl li:nth-child(1) { animation-delay: .15s, 2.3s; }
.is-active .fl li:nth-child(2) { animation-delay: .55s, 3.1s; }
.is-active .fl li:nth-child(3) { animation-delay: .95s, 2.7s; }
.is-active .fl li:nth-child(4) { animation-delay: 1.35s, 3.5s; }
.is-active .fl__ok { animation: flPop .5s var(--ease) both; }
.is-active .fl li:nth-child(1) .fl__ok { animation-delay: .9s; }
.is-active .fl li:nth-child(4) .fl__ok { animation-delay: 2.1s; }
@keyframes flIn { from { opacity: 0; transform: translateX(2.5rem); } }
@keyframes flPop { from { opacity: 0; transform: scale(.5); } }
@keyframes flFloat { from { transform: none; } to { transform: translateY(-.3rem); } }

/* 04 – Deadlines */
.scene--deadline { align-content: center; gap: 1rem; }
.dl { position: relative; width: 100%; }
.dl::after { content: ""; position: absolute; right: 0; top: 1.5rem; bottom: -.35rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px); }
.dl__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dl__days li { padding: 0 0 .55rem .5rem; font-size: .75rem; font-weight: 700; color: var(--dim); }
.dl__rows {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem 0; padding-block: .5rem;
  border-top: 1px solid var(--line);
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 20% 100%;
}
.dl__bar { display: flex; align-items: center; min-height: 2.3rem; margin-right: .4rem; padding: 0 .75rem; border-radius: .6rem; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.dl__bar--1 { grid-area: 1 / 1 / 2 / 2; background: rgba(255, 255, 255, .12); }
.dl__bar--2 { grid-area: 2 / 2 / 3 / 5; background: linear-gradient(90deg, #56298c, var(--brand-hi)); }
.dl__bar--3 { grid-area: 3 / 5 / 4 / 6; margin-right: .55rem; background: #fff; color: #0b0a10; }
.dl__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; }
.dl__note { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.dl__note b { font-weight: inherit; }
.dl__note i { position: relative; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.dl__note i::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: 1px solid var(--accent); animation: dlPing 2.2s var(--ease) infinite; }
.dl__flag { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem .35rem .5rem; border-radius: 999px; background: var(--brand); font-size: .8125rem; font-weight: 700; white-space: nowrap; box-shadow: 0 .6rem 1.4rem -.6rem rgba(117, 60, 182, 1); }
.is-active .dl__bar { animation: dlGrow .55s var(--ease-io) both; }
.is-active .dl__bar--1 { animation-delay: .25s; }
.is-active .dl__bar--2 { animation-delay: .75s; animation-duration: 1.4s; }
.is-active .dl__bar--3 { animation-delay: 2.1s; }
.is-active .dl__flag { animation: flPop .6s var(--ease) 2.65s both; }
@keyframes dlGrow { from { clip-path: inset(0 100% 0 0 round .6rem); } to { clip-path: inset(0 0 0 0 round .6rem); } }
@keyframes dlPing { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* 05 – unsichtbar oder mit am Tisch: der Schalter pendelt zwischen beiden Modi */
.scene--call { align-content: center; gap: .8rem; }
.cl__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 19.5rem); padding: .25rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(11, 10, 16, .65); font-size: .8125rem; font-weight: 700; }
.cl__opt { position: relative; z-index: 1; padding: .42rem .5rem; text-align: center; white-space: nowrap; color: var(--muted); }
.cl__opt--b { color: #fff; }
.cl__switch i { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); border-radius: 999px; background: var(--brand); box-shadow: 0 .5rem 1.2rem -.4rem rgba(117, 60, 182, 1); transform: translateX(100%); }
.cl__tiles { --z: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; width: 100%; }
.cl__tile { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border: 1px solid var(--line-2); border-radius: .8rem; background: linear-gradient(160deg, #261f38, #17131f); overflow: hidden; }
.cl__av { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-bottom: .8rem; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: .9375rem; font-weight: 800; }
.cl__name { position: absolute; left: .45rem; bottom: .4rem; padding: .16rem .45rem; border-radius: .4rem; background: rgba(11, 10, 16, .74); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.cl__tile--bm { border-color: rgba(154, 104, 220, .85); background: radial-gradient(90% 90% at 50% 100%, rgba(117, 60, 182, .75), #1c1530 75%); box-shadow: 0 0 0 1px rgba(154, 104, 220, .7), 0 0 2rem rgba(117, 60, 182, .55); }
.cl__tile--bm picture { position: absolute; inset: 0; max-width: none; }
.cl__tile--bm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cl__name--a, .cl__cap--a { opacity: 0; }
.cl__cap { display: grid; font-size: .8125rem; font-weight: 600; color: var(--muted); text-align: center; }
.cl__cap span { grid-area: 1 / 1; }
.is-active .cl__switch i { animation: clThumb 7s var(--ease-io) infinite; }
.is-active .cl__opt--a { animation: clOptA 7s infinite; }
.is-active .cl__opt--b { animation: clOptB 7s infinite; }
.is-active .cl__tile--bm { animation: clTile 7s infinite; }
.is-active .cl__name--a, .is-active .cl__cap--a { animation: clA 7s infinite; }
.is-active .cl__name--b, .is-active .cl__cap--b { animation: clB 7s infinite; }
@keyframes clThumb { 0%, 43% { transform: translateX(0); } 50%, 93% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes clOptA { 0%, 43% { color: #fff; } 50%, 93% { color: var(--muted); } 100% { color: #fff; } }
@keyframes clOptB { 0%, 43% { color: var(--muted); } 50%, 93% { color: #fff; } 100% { color: var(--muted); } }
@keyframes clTile {
  0%, 43% { opacity: .3; filter: grayscale(1); box-shadow: 0 0 0 0 rgba(154, 104, 220, 0); }
  50%, 93% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 1px rgba(154, 104, 220, .7), 0 0 2rem rgba(117, 60, 182, .55); }
  100% { opacity: .3; filter: grayscale(1); box-shadow: 0 0 0 0 rgba(154, 104, 220, 0); }
}
@keyframes clA { 0%, 43% { opacity: 1; } 50%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes clB { 0%, 43% { opacity: 0; } 50%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* 06 – faire Preise */
.scene--fair { grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 5cqw, 2.5rem); padding-inline: clamp(1.25rem, 6cqw, 3rem); }
.fr__word { --z: -9; font-size: clamp(3.6rem, 19cqw, 7.25rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 57%) 100% 0 / 280% 100% no-repeat, linear-gradient(180deg, #e7dafd, #8a50d0 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr__list { --z: 7; display: grid; gap: .55rem; min-width: 0; }
.fr__list li { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .6rem .85rem .6rem .6rem; border: 1px solid var(--line-2); border-radius: .75rem; background: rgba(255, 255, 255, .055); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.fr__list .i { flex: none; width: 1.3rem; height: 1.3rem; padding: .22rem; border-radius: 50%; background: var(--brand); color: #fff; }
.is-active .fr__word { animation: frWord 1s var(--ease) .1s both, frShine 4.5s var(--ease-io) 1.2s infinite; }
.is-active .fr__list li { animation: flIn .7s var(--ease) both; }
.is-active .fr__list li:nth-child(1) { animation-delay: .5s; }
.is-active .fr__list li:nth-child(2) { animation-delay: .75s; }
.is-active .fr__list li:nth-child(3) { animation-delay: 1s; }
@keyframes frWord { from { opacity: 0; transform: translateY(1.5rem) scale(.9); } }
@keyframes frShine { 0%, 35% { background-position: 100% 0, 0 0; } 85%, 100% { background-position: 0% 0, 0 0; } }

/* schmale Bühne (Handy): Szenen rücken zusammen */
@container (max-width: 500px) {
  .scene { padding: 1rem 1rem; }
  .az__chip { padding: .28rem .55rem; font-size: .6875rem; }
  .tl { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
  .tl li { min-height: 2.2rem; padding: 0 .7rem; border-radius: .6rem; }
  .fl { gap: .4rem; }
  .fl li { min-height: 2.45rem; gap: .5rem; padding: .35rem .6rem .35rem .4rem; font-size: .75rem; }
  .fl li:nth-child(1) { margin-right: .9rem; }
  .fl li:nth-child(2), .fl li:nth-child(4) { margin-left: .9rem; }
  .fl li:nth-child(3) { margin-inline: .45rem; }
  .fl__app { font-size: .6875rem; padding: .2rem .4rem; }
  .fl__av { width: 1.5rem; height: 1.5rem; }
  .fl__ok, .fl__meta { font-size: .6875rem; }
  .scene--deadline { gap: .55rem; }
  .dl__rows { gap: .35rem 0; padding-block: .4rem; }
  .dl__bar { min-height: 1.9rem; padding: 0 .5rem; font-size: .6875rem; }
  .dl__bar--1 { grid-column: 1 / 3; justify-self: start; }
  .dl__bar--3 { grid-column: 4 / 6; justify-self: end; }
  .dl__note, .dl__flag { font-size: .6875rem; white-space: nowrap; }
  .dl__note b { display: none; }
  .scene--call { gap: .6rem; }
  .cl__switch { font-size: .75rem; }
  .cl__opt { padding-block: .34rem; }
  .cl__av { width: 2rem; height: 2rem; margin-bottom: .9rem; font-size: .75rem; }
  .cl__name { left: .3rem; bottom: .3rem; font-size: .625rem; }
  .cl__cap { font-size: .75rem; }
  .scene--fair { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .7rem; }
  .fr__word { font-size: 3.4rem; }
  .fr__list { gap: .35rem; justify-items: center; }
  .fr__list li { padding: .34rem .7rem .34rem .4rem; font-size: .75rem; }
  .fr__list .i { width: 1.1rem; height: 1.1rem; }
  .svx__ghost { display: none; }
}
/* sehr schmale Handys */
@container (max-width: 300px) {
  .dl__note { display: none; }
  .dl__foot { justify-content: flex-end; }
  .tl li { min-height: 2.05rem; padding: 0 .6rem; }
}

/* Ablauf */
.flow { margin-top: clamp(3rem, 6vw, 4.5rem); }
.steps { display: grid; gap: 0; margin-top: 1.6rem; }
.step { position: relative; padding: 0 0 1.6rem 3rem; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: .95rem; top: 2.1rem; bottom: .1rem; width: 1px; background: var(--line-2); }
.step:last-child::before { display: none; }
.step__no {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid rgba(154, 104, 220, .6); background: rgba(117, 60, 182, .2);
  font-size: .8125rem; font-weight: 700;
}
/* beim Einblenden zeichnet sich die Verbindungslinie, die Ziffer leuchtet kurz auf */
.step::before { transform-origin: 50% 0; }
.step.is-pre::before { transform: scaleY(0); }
.step.is-in::before { transition: transform 1s var(--ease-io) .3s; }
.step.is-in .step__no { animation: stepOn .8s var(--ease) both; }
@keyframes stepOn { from { transform: scale(.55); background: var(--brand-hi); } }
.step h4 { padding-top: .25rem; }
.step p { margin-top: .35rem; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .step { padding: 2.9rem 0 0; }
  .step::before { left: 2.6rem; right: -2rem; top: 1rem; bottom: auto; width: auto; height: 1px; }
  .step::before { transform-origin: 0 50%; }
  .step.is-pre::before { transform: scaleX(0); }
  .step:last-child::before { display: block; right: 0; background: linear-gradient(90deg, var(--line-2), transparent); }
}

/* Aufruf am Ende der Leistungen */
.cta {
  display: grid; gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.4rem, 3.2vw, 2.5rem);
  border: 1px solid rgba(154, 104, 220, .42); border-radius: var(--r);
  background: radial-gradient(60% 150% at 100% 50%, rgba(117, 60, 182, .45), transparent 70%), linear-gradient(160deg, rgba(117, 60, 182, .2), rgba(255, 255, 255, .02) 70%);
}
.cta__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; }
.cta p { margin-top: .4rem; max-width: 44ch; color: rgba(243, 241, 248, .82); }
.cta .btn { justify-self: start; }
@media (min-width: 820px) { .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; } .cta .btn { justify-self: end; } }

/* ------------------------------------------------------------------ Portfolio: Karten stapeln sich beim Scrollen
   Jede Karte bleibt unter der Kopfzeile stehen, die nächste schiebt sich darüber. Im Browserfenster der
   obersten Karte fährt der lange Screenshot langsam ab (main.js setzt .is-live und .is-covered). */
.work { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.work__item { --i: 0; min-width: 0; }
.work__item:nth-child(2) { --i: 1; }
.work__item:nth-child(3) { --i: 2; }
.work__item:nth-child(4) { --i: 3; }
.work__item:nth-child(5) { --i: 4; }

.proj {
  position: relative;
  display: grid; gap: 1.4rem;
  padding: clamp(1rem, 2.4vw, 2.25rem);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + .25rem);
  background: linear-gradient(150deg, #1d182a, #13101c 65%);
  box-shadow: 0 -1.25rem 3rem -1.5rem rgba(0, 0, 0, .8);
  transform-origin: 50% 0;
  transition: transform .7s var(--ease);
}
/* Karten, die schon überdeckt sind, treten zurück: etwas kleiner und abgedunkelt */
.proj::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--bg-2); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); }
.work__item.is-covered .proj { transform: scale(.955); }
.work__item.is-covered .proj::after { opacity: .62; }

.proj__info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; order: 2; }
.proj__no { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--dim); }
.proj__no b { font-weight: 700; color: var(--accent); }
.proj__title { margin-top: .6rem; font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; }
.proj__kind { margin-top: .55rem; font-size: .875rem; font-weight: 600; color: var(--accent); }
.proj__desc { margin-top: .9rem; max-width: 38ch; color: var(--muted); text-wrap: pretty; }
.proj .tags { margin-top: 1.05rem; }
.more {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .25rem 0;
  font-size: .9375rem; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--brand-hi); transition: color .3s, border-color .3s;
}
.more .i { color: var(--accent); transition: transform .45s var(--ease); }
@media (hover: hover) {
  .more:hover { color: var(--accent); border-color: currentColor; }
  .more:hover .i { transform: translate(.18rem, -.18rem); }
}

.browser {
  display: block; min-width: 0; order: 1;
  border: 1px solid var(--line-2); border-radius: .85rem; overflow: hidden;
  background: #231d31; text-decoration: none;
  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, .9);
}
.browser__bar { display: flex; align-items: center; gap: .38rem; height: 2.1rem; padding: 0 .8rem; border-bottom: 1px solid var(--line); }
.browser__bar i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.browser__url {
  display: flex; align-items: center; flex: 0 1 16rem; height: 1.3rem; margin-left: .5rem; padding: 0 .7rem;
  border-radius: 999px; background: rgba(255, 255, 255, .07);
  font-size: .6875rem; color: var(--muted); overflow: hidden; white-space: nowrap;
}
.browser__view { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.browser__view img { width: 100%; }
.work__item.is-live .browser__view img { animation: pan 18s var(--ease-io) 1.2s infinite alternate; will-change: transform; }
@keyframes pan { 0%, 6% { transform: translate3d(0, 0, 0); } 94%, 100% { transform: translate3d(0, -75%, 0); } }
@media (hover: hover) { .browser:hover .browser__view img { animation-play-state: paused; } }

@media (min-width: 1000px) {
  .proj {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.6vw, 2.5rem) clamp(2rem, 3.2vw, 3rem);
  }
  .proj__info, .browser { order: 0; }
}
/* gestapelt wird nur, wenn eine Karte sicher auf den Bildschirm passt */
@media (min-width: 1000px) and (min-height: 700px) {
  .work__item { position: sticky; top: calc(var(--hd) + 1rem + var(--i) * .9rem); }
}

/* ------------------------------------------------------------------ Team */
.team { position: relative; display: grid; gap: 1.25rem; }
/* ohne JavaScript: drei einfache Karten nebeneinander */
.member { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.member__photo { position: relative; }
.member__photo img { width: 100%; -webkit-user-drag: none; user-select: none; }
.team:not(.is-slider) .team__deco, .team:not(.is-slider) .team__ctrl, .team:not(.is-slider) .team__hint { display: none; }
.team:not(.is-slider) .member__photo { max-width: 19rem; margin-inline: auto; }
@media (min-width: 800px) { .team:not(.is-slider) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.member__data {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018) 65%);
}
.member__count { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--dim); }
.member__count b { font-weight: 700; color: var(--accent); }
.member__name { margin: .45rem 0 1.1rem; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.member__facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.member__facts dt { font-size: .8125rem; font-weight: 600; color: var(--dim); }
.member__facts dd { font-size: 1.0625rem; font-weight: 600; }

/* mit JavaScript: überlappender Slider */
.team.is-slider { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "ctrl" "hint" "info"; }
.team.is-slider .member { display: contents; }
.team__deco {
  grid-area: stage; position: relative; justify-self: center; align-self: end;
  width: min(86%, 25rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(117, 60, 182, .5), rgba(117, 60, 182, .12) 62%, rgba(117, 60, 182, 0));
  pointer-events: none;
}
.team__deco::before { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 82%); mask-image: linear-gradient(to bottom, #000 45%, transparent 82%); }
.team.is-slider .member__photo {
  grid-area: stage; justify-self: center; align-self: end;
  width: min(56%, 18rem);
  transform-origin: 50% 100%;
  transition: transform .8s var(--ease), filter .8s var(--ease);
  touch-action: pan-y; cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99.5%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 99.5%);
}
.team.is-slider .member:not(.is-active) .member__photo { z-index: 1; transform: translate3d(calc(-52% + var(--drag, 0px) * .35), 0, 0) scale(.8); filter: brightness(.42) saturate(.6); }
.team.is-slider .member.is-next .member__photo { z-index: 2; transform: translate3d(calc(52% + var(--drag, 0px) * .35), 0, 0) scale(.8); }
.team.is-slider .member.is-active .member__photo { z-index: 3; cursor: grab; transform: translate3d(var(--drag, 0px), 0, 0); filter: none; }
.team.is-dragging .member__photo { transition: none !important; cursor: grabbing !important; }
@media (hover: hover) { .team.is-slider .member:not(.is-active) .member__photo:hover { filter: brightness(.64) saturate(.8); } }

.team.is-slider .member__data {
  grid-area: info; align-self: center;
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: opacity .3s, transform .45s var(--ease), visibility 0s .3s;
}
.team.is-slider .member.is-active .member__data { opacity: 1; visibility: visible; transform: none; transition: opacity .55s .2s, transform .8s var(--ease) .2s, visibility 0s; }

.team__ctrl { grid-area: ctrl; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.team__dots { display: flex; gap: .4rem; }
.team__dots button { position: relative; width: 1.75rem; height: 1.75rem; }
.team__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: background-color .4s; }
.team__dots button[aria-current]::before { background: var(--accent); }
.team__hint { grid-area: hint; display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: .8125rem; font-weight: 600; color: var(--muted); transition: opacity .6s; }
.team__hint .i { width: 2.4rem; height: 1.2rem; color: var(--accent); animation: swipe 1.8s var(--ease-io) infinite alternate; }
.team.is-swiped .team__hint { opacity: .4; }
.team.is-swiped .team__hint .i { animation: none; }
@keyframes swipe { from { transform: translateX(-.3rem); } to { transform: translateX(.3rem); } }
.team.is-nudge .member.is-active .member__photo { animation: nudge 1.5s var(--ease-io) .3s 1; }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translate3d(-1.75rem, 0, 0); } 65% { transform: translate3d(1rem, 0, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 900px) {
  .team.is-slider { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "stage info" "ctrl info"; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .team__hint { display: none; }
}

/* ------------------------------------------------------------------ Kontakt */
.sec--contact { overflow: hidden; overflow: clip; border-top: 1px solid var(--line); background: radial-gradient(60% 55% at 100% 0%, rgba(117, 60, 182, .28), transparent 65%), radial-gradient(45% 45% at 0% 100%, rgba(117, 60, 182, .14), transparent 70%), var(--bg-2); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.contact__intro { display: grid; gap: 1rem; align-content: start; }
.contact__list { display: grid; margin-top: .75rem; border-top: 1px solid var(--line-2); }
.contact__list li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.contact__list span { font-size: .8125rem; font-weight: 600; color: var(--dim); }
.contact__list a { justify-self: start; min-width: 0; text-decoration: none; border-bottom: 1px solid var(--accent); transition: color .3s; }
.contact__list a:hover { color: var(--accent); }
@media (max-width: 400px) { .contact__list li { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
@media (min-width: 940px) { .contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5rem); align-items: start; } }

.form { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 2.6vw, 2rem); border: 1px solid var(--line-2); border-radius: var(--r); background: rgba(17, 14, 25, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2.25rem 4.5rem -2.5rem rgba(0, 0, 0, .8); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--line-2); border-radius: .75rem;
  background: rgba(255, 255, 255, .045);
  font-size: 1rem; line-height: 1.5;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .32); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 4px rgba(117, 60, 182, .38); }
.field [aria-invalid="true"] { border-color: #ff9d9d; }
.field__err { font-size: .875rem; color: #ffb8b8; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 100px #1b1628 inset; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: .9rem; margin-top: .25rem; }
.form__foot .btn { justify-self: start; }
.form__note { font-size: .875rem; line-height: 1.55; color: var(--muted); }
.form__note a { color: var(--text); }
.form__status { padding: .9rem 1.05rem; border: 1px solid var(--line-2); border-radius: .75rem; font-size: .9375rem; line-height: 1.5; }
.form__status.is-ok { border-color: rgba(154, 104, 220, .8); background: rgba(117, 60, 182, .24); }
.form__status.is-err { border-color: rgba(255, 157, 157, .7); background: rgba(255, 120, 120, .1); }
.form__status a { color: #fff; }
.form.is-sending .btn .i { animation: spin .9s linear infinite; }

/* ------------------------------------------------------------------ Footer */
.ft { padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); font-size: .9375rem; color: var(--muted); }
.ft__in { display: grid; gap: 1.5rem; }
.ft__logo { width: 8.25rem; height: auto; aspect-ratio: 3688.5 / 1062.5; }
.ft__brand p { margin-top: .6rem; }
.ft__nav, .ft__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ft a, .ft button { color: var(--muted); text-decoration: none; transition: color .3s; }
.ft a:hover, .ft button:hover { color: #fff; }
.ft__nav a { font-weight: 600; }
.ft__copy { color: var(--dim); }
@media (min-width: 860px) {
  .ft__in { grid-template-columns: 1fr auto; align-items: end; }
  .ft__nav, .ft__legal { justify-content: flex-end; }
}

/* ------------------------------------------------------------------ Cookie-Hinweis */
.consent {
  position: fixed; z-index: 80;
  left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: 36rem; margin-inline: auto; padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid var(--line-2); border-radius: 1rem;
  background: rgba(24, 20, 35, .95);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .65);
  font-size: .875rem; line-height: 1.55; color: var(--muted);
  transform: translateY(calc(100% + 2rem)); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s .7s;
}
.consent.is-on { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.consent__title { margin-bottom: .3rem; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .9rem; }
.consent__links { font-size: .8125rem; white-space: nowrap; }
.consent__actions a { color: var(--text); font-weight: 600; }
/* ab Tablet: flache Leiste unten in der Mitte – verdeckt weder Buttons noch Zahlen */
@media (min-width: 700px) {
  .consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1rem 1.15rem 1rem 1.4rem; }
  .consent__actions { flex-direction: column; align-items: stretch; gap: .45rem; margin: 0; text-align: center; }
}

/* ------------------------------------------------------------------ Rechtstexte & Rückmeldeseite */
.legal { padding: calc(var(--hd) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(4rem, 8vw, 6.5rem); }
.legal__in { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.legal h1 { margin: 1rem 0 clamp(1.75rem, 4vw, 2.75rem); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -.035em; overflow-wrap: anywhere; hyphens: auto; }
.legal h2 { margin: 2.5rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.legal h3 { margin: 1.6rem 0 .5rem; font-size: 1.0625rem; }
.legal p, .legal li, .legal address { color: #c6c1d3; font-style: normal; }
.legal .eyebrow { color: var(--accent); }
.legal p + p, .legal address + p, .legal p + address, .legal ul + p, .legal p + ul { margin-top: 1rem; }
.legal ul { display: grid; gap: .5rem; padding-left: 1.2rem; list-style: disc; }
.legal ul ::marker { color: var(--accent); }
.legal a { color: #fff; text-decoration-color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
.legal strong { color: var(--text); font-weight: 700; }
.legal__back { display: inline-flex; margin-top: 3rem; }

/* ------------------------------------------------------------------ Weniger Bewegung gewünscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .tools { display: block; padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; }
  .tools__track { flex-wrap: wrap; justify-content: center; row-gap: .6rem; min-width: 0; }
  .tools__track[aria-hidden] { display: none; }
  .tools li:last-child::after { display: none; }
  .hero__dust { display: none; }
  .svx__pause { display: none; }
}

@media print {
  .hd, .menu, .consent, .tools, .hero__dust, .hero__scrim { display: none !important; }
  body { background: #fff; color: #000; }
}