/* =====================================================================
   Alvaneo Digital — Aussehen der ganzen Seite.
   Dunkel, ruhig, ein Akzent. Bewegung nur über transform und opacity.
   ===================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}

:root {
  --grund: #0A0A0D;
  --grund-2: #101015;
  --flaeche: #16161D;
  --linie: #26262F;
  --text: #F2F2F5;
  --text-2: #A5A5B2;
  --text-3: #6E6E7C;
  /* Leuchtendes Türkis — wie im Portal (dort #4ECDC4 / #2EE6A8), hier eine
     Spur heller, damit es auf dem dunklen Grund wirklich leuchtet. */
  --akzent: #2FE6CF;
  --akzent-hell: #8CF5E8;
  --akzent-dunkel: #0FB5A3;
  --gruen: #4ADE80;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo Black", var(--sans);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --schale: min(1200px, 100% - 3rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.schale { width: var(--schale); margin-inline: auto; }

.marker {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 1rem;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .98; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.15; }
p { margin: 0 0 1rem; color: var(--text-2); }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }

/* ---------- Kopfzeile ---------- */
/* Schwebende Leiste statt durchgehendem Balken: eine abgesetzte Pille,
   die beim Scrollen dichter und dunkler wird. Kein backdrop-filter. */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-top: calc(env(safe-area-inset-top, 0px) + .6rem);
  pointer-events: none;
}
.kopf__innen {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1rem; height: 3.9rem;
  padding-inline: 1.1rem;
  border: 1px solid color-mix(in oklab, var(--linie) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--grund-2) 86%, transparent);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.kopf--fest .kopf__innen {
  background: color-mix(in oklab, var(--grund-2) 97%, transparent);
  border-color: color-mix(in oklab, var(--akzent) 22%, var(--linie));
  box-shadow: 0 14px 36px -18px rgba(0,0,0,.9);
}
.wortmarke {
  font-family: var(--display); font-size: 1.05rem; letter-spacing: -.01em;
  text-decoration: none; display: flex; align-items: center; gap: .55rem;
}
.wortmarke span { color: var(--akzent-hell); }
/* Der Markenpunkt: ein großer Punkt, um den zwei kleine kreisen. */
.wortmarke__punkt {
  position: relative; width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
  display: grid; place-items: center;
}
.wortmarke__punkt::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 10px color-mix(in oklab, var(--akzent) 70%, transparent);
}
.wortmarke__orbit {
  position: absolute; inset: 0; animation: orbit 6s linear infinite;
}
.wortmarke__orbit i {
  position: absolute; border-radius: 50%; background: var(--akzent-hell);
}
.wortmarke__orbit i:first-child { width: .22rem; height: .22rem; top: -.02rem; left: 50%; margin-left: -.11rem; }
.wortmarke__orbit i:last-child { width: .16rem; height: .16rem; bottom: .02rem; left: 12%; opacity: .8; }
.wortmarke__orbit--zurueck { animation-duration: 9s; animation-direction: reverse; }
.wortmarke__orbit--zurueck i:first-child { top: auto; bottom: -.02rem; left: 30%; }
.wortmarke__orbit--zurueck i:last-child { display: none; }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wortmarke__orbit { animation: none; } }

.nav { display: none; margin-left: auto; gap: 1.6rem; }
.nav a {
  position: relative; text-decoration: none; font-size: .92rem; color: var(--text-2);
  padding: .25rem 0; transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--akzent); transition: width .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="true"]::after { width: 100%; }

/* Auf dem Handy sitzt der Knopf unten in der festen Leiste — oben wäre er
   nur im Weg und würde den Namen zerquetschen. */
.kopf__tat { display: none; margin-left: auto; align-items: center; gap: .6rem; }
.nav + .kopf__tat { margin-left: 0; }

.menu-knopf {
  position: relative; z-index: 61;
  margin-left: auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 1px solid var(--linie); border-radius: .7rem; color: var(--text); cursor: pointer;
}
.menu-knopf span { display: block; width: 1.1rem; height: 1px; background: currentColor; position: relative; }
.menu-knopf span::before, .menu-knopf span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform .25s var(--ease);
}
.menu-knopf span::before { top: -.34rem; }
.menu-knopf span::after { top: .34rem; }
.menu-knopf[aria-expanded="true"] span { background: transparent; }
.menu-knopf[aria-expanded="true"] span::before { transform: translateY(.34rem) rotate(45deg); }
.menu-knopf[aria-expanded="true"] span::after { transform: translateY(-.34rem) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: color-mix(in oklab, var(--grund) 97%, transparent);
  padding: calc(env(safe-area-inset-top, 0px) + 6rem) 0 2rem;
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; text-decoration: none;
  font-family: var(--display); font-size: 1.5rem; letter-spacing: -.01em;
  border-bottom: 1px solid var(--linie);
  animation: menu-rein .45s var(--ease) both;
}
.menu a::after { content: "→"; font-family: var(--sans); font-size: 1rem; color: var(--akzent); }
.menu a:nth-child(2) { animation-delay: .04s; }
.menu a:nth-child(3) { animation-delay: .08s; }
.menu a:nth-child(4) { animation-delay: .12s; }
.menu a:nth-child(5) { animation-delay: .16s; }
.menu a:nth-child(6) { animation-delay: .2s; }
@keyframes menu-rein { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .menu a { animation: none; } }
.menu a:last-of-type { border-bottom: none; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .8rem 1.5rem; border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .3s;
}
.btn--voll { background: var(--akzent); color: #04211D; }
.btn--voll:hover { background: var(--akzent-hell); transform: translateY(-2px); box-shadow: 0 14px 34px -14px var(--akzent); }
.btn--rand { border-color: var(--linie); color: var(--text); background: color-mix(in oklab, var(--flaeche) 60%, transparent); }
.btn--rand:hover { border-color: var(--akzent); transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn__pfeil { transition: transform .25s var(--ease); }
.btn:hover .btn__pfeil { transform: translateX(4px); }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transform: scale(.4);
}
.btn.welle::after { animation: welle .55s var(--ease); }
@keyframes welle { from { opacity: .6; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }

:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

/* ---------- Startbereich ---------- */
.hero { position: relative; }
.hero-pin { position: relative; }

.hero-sticky {
  position: relative; display: flex; align-items: center;
  min-height: 34rem; padding: 7rem 0 4rem; overflow: clip;
}

/* Bühne im Hintergrund: Video, darunter Verlauf und Raster */
.hero-buehne { position: absolute; inset: 0; z-index: 0; overflow: clip; background: var(--grund); }
.hero-buehne::before { content: ""; position: absolute; inset: 0;
  background: url("hero-poster.jpg") center 45% / cover no-repeat; opacity: .5; }
.hero-buehne::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 34%, color-mix(in oklab, var(--grund) 62%, transparent),
                    transparent 78%),
    linear-gradient(to bottom, color-mix(in oklab, var(--grund) 45%, transparent) 0%,
                    transparent 45%, var(--grund) 96%);
}
/* Der Clip ist Atmosphäre, nicht Hauptdarsteller: er bleibt gedämpft, damit
   die Überschrift auf jedem Untergrund lesbar ist. Auf dem Handy wird er
   stark beschnitten, deshalb dort noch ruhiger. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 45%;
  opacity: .5; transform: scale(calc(1.05 - var(--hp, 0) * .05));
}
@media (min-width: 768px) { .hero-video { opacity: .6; } }
.hero-raster {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(to right, var(--linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linie) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 75%);
  transform: translate3d(0, calc(var(--hp, 0) * -60px), 0);
}

.hero-copy { position: relative; z-index: 2; text-align: center; width: var(--schale); margin-inline: auto; }
.hero-title { font-size: clamp(2.05rem, 8.6vw, 5.4rem); letter-spacing: -.02em; text-align: center; }
.hero-line { display: block; white-space: normal; }
.hero-line em { font-style: normal; color: var(--akzent-hell); }
.hero-subline {
  max-width: 40rem; margin: 1.6rem auto 0; font-size: clamp(1rem, 1.9vw, 1.2rem); color: var(--text-2);
}
.hero-fakten {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.hero-fakten li {
  padding: .4rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
  border: 1px solid var(--linie); background: color-mix(in oklab, var(--flaeche) 70%, transparent);
  color: var(--text-2);
}
.hero-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.9rem; }
.hero-hinweis { margin-top: 1.6rem; font-size: .8rem; color: var(--text-3); }

/* Startzustände nur mit JavaScript, damit ohne JS alles sichtbar ist */
.js .motion-ready .hero-line[data-from] { will-change: transform, opacity; }
.motion-ready .hero-line[data-from] { --q: calc(1 - var(--lp, 1)); opacity: var(--lp, 1); }
.motion-ready .hero-line[data-from="rechts"] { transform: translate3d(calc(var(--q) * 42vw), 0, 0); }
.motion-ready .hero-line[data-from="links"] { transform: translate3d(calc(var(--q) * -42vw), 0, 0); }
.motion-ready .hero-line[data-from="unten"] {
  transform: translate3d(0, calc(var(--q) * .85em), 0) scale(calc(1 - var(--q) * .1));
  transform-origin: center bottom;
}
.motion-ready .hero-rest { opacity: var(--rp, 1); transform: translateY(calc((1 - var(--rp, 1)) * 30px)); }

.hero-scroll {
  position: absolute; left: 50%;
  bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: calc(1 - var(--hp, 0) * 3);
}
.hero-scroll::after { content: ""; width: 1px; height: 2.2rem; background: linear-gradient(var(--text-3), transparent); }

/* Die Bühne läuft auf JEDEM Gerät — kein min-width-Riegel. */
@media (prefers-reduced-motion: no-preference) {
  .hero-pin { height: 300vh; }
  .hero-sticky { position: sticky; top: 0; height: 100svh; }
}
@media (min-width: 768px) {
  .hero-scroll { bottom: 1.5rem; }
  .hero-pin { height: 420vh; }
  .hero-sticky { height: 100vh; min-height: 38rem; padding-top: 6rem; }
  .hero-line { white-space: nowrap; }
  .nav { display: flex; }
  .kopf__tat { display: flex; }
  .menu-knopf { display: none; }
}

/* ---------- Abschnitte ---------- */
.block { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }
.block--flaeche { background: var(--grund-2); }
.trenner { height: 1px; background: var(--linie); transform: scaleX(var(--dp, 1)); transform-origin: left; }

.block__kopf { max-width: 44rem; }
.block__kopf p { margin-top: 1rem; font-size: clamp(1rem, 1.7vw, 1.1rem); }

/* Prinzip: drei Schritte */
.schritte { display: grid; gap: 1.5rem; margin-top: 3rem; counter-reset: s; }
.schritt {
  position: relative; padding: 1.75rem; border: 1px solid var(--linie); border-radius: 1.1rem;
  background: var(--flaeche);
  translate: 0 0; scale: 1;
  transition: translate .3s var(--ease), scale .3s var(--ease),
              border-color .3s, background .3s, box-shadow .3s;
}
.schritt:hover, .schritt:active {
  translate: 0 -6px; scale: 1.03;
  border-color: color-mix(in oklab, var(--akzent) 55%, var(--linie));
  background: color-mix(in oklab, var(--akzent) 9%, var(--flaeche));
  box-shadow: 0 22px 44px -24px color-mix(in oklab, var(--akzent) 55%, transparent);
}
.schritt__zahl {
  font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--akzent);
  display: block; margin-bottom: .9rem; transform: scale(var(--zoom, 1)); transform-origin: left center;
}
.schritt h3 { margin-bottom: .6rem; }
.schritt p { font-size: .95rem; margin: 0; }
@media (min-width: 820px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* Leistungen: abwechselnd Text und Bild */
.reihen { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5.5rem); margin-top: 3.5rem; }
.reihe { display: grid; gap: 1.75rem; align-items: center; }
.reihe__text h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .9rem; }
.reihe__nr { font-family: var(--display); font-size: .8rem; color: var(--akzent); letter-spacing: .1em; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: .78rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text-3);
}
.reihe__bild {
  position: relative; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--linie);
  background: linear-gradient(140deg, var(--flaeche), var(--grund));
  aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.reihe__bild > * { transform: scale(var(--bz, 1)); transition: transform .5s var(--ease); }
.reihe__bild:hover > * { --bz: 1.05; }
@media (min-width: 900px) {
  .reihe { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .reihe:nth-child(even) .reihe__text { order: 2; }
}

/* Platzhalter-Grafik in den Bildkästen */
.mockup {
  width: 82%; border-radius: .7rem; overflow: hidden; border: 1px solid var(--linie);
  background: var(--grund-2); box-shadow: 0 30px 60px -30px #000;
}
.mockup__leiste { display: flex; gap: .3rem; padding: .55rem .7rem; border-bottom: 1px solid var(--linie); }
.mockup__leiste i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--linie); }
.mockup__inhalt { padding: 1.1rem; display: grid; gap: .5rem; }
.mockup__zeile { height: .5rem; border-radius: 999px; background: var(--linie); }
.mockup__zeile--breit { width: 100%; }
.mockup__zeile--halb { width: 60%; }
.mockup__zeile--akzent { width: 35%; background: var(--akzent); height: 1.5rem; }

/* Arbeiten */
.arbeiten { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 760px) { .arbeiten { grid-template-columns: repeat(3, 1fr); } }
.arbeit {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 1.1rem; background: var(--flaeche);
  translate: 0 0; scale: 1;
  transition: translate .3s var(--ease), scale .3s var(--ease),
              border-color .3s, background .3s, box-shadow .3s;
}
.arbeit:hover, .arbeit:active {
  translate: 0 -5px; scale: 1.025;
  border-color: color-mix(in oklab, var(--akzent) 55%, var(--linie));
  background: color-mix(in oklab, var(--akzent) 8%, var(--flaeche));
  box-shadow: 0 22px 44px -24px color-mix(in oklab, var(--akzent) 50%, transparent);
}
.arbeit__fahne {
  align-self: flex-start; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: .4rem; border: 1px solid var(--linie); color: var(--text-3);
  margin-bottom: .8rem;
}
.arbeit h3 { font-size: 1.15rem; }
.arbeit span { font-size: .88rem; color: var(--text-2); }
.arbeit__link { margin-top: .7rem; font-size: .85rem; color: var(--akzent-hell); }

/* Preise */
.preise { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 820px) { .preise { grid-template-columns: 1fr 1fr; } }
.preis {
  padding: 2rem; border: 1px solid var(--linie); border-radius: 1.25rem; background: var(--flaeche);
  display: flex; flex-direction: column;
  translate: 0 0; scale: 1;
  transition: translate .3s var(--ease), scale .3s var(--ease), border-color .3s, box-shadow .3s;
}
.preis:hover {
  translate: 0 -5px; scale: 1.015;
  border-color: color-mix(in oklab, var(--akzent) 45%, var(--linie));
  box-shadow: 0 22px 44px -26px color-mix(in oklab, var(--akzent) 45%, transparent);
}
.preis--hell { border-color: color-mix(in oklab, var(--akzent) 55%, var(--linie)); background: linear-gradient(160deg, color-mix(in oklab, var(--akzent) 12%, var(--flaeche)), var(--flaeche)); }
.preis__wert { font-family: var(--display); font-size: clamp(2.2rem, 5.5vw, 3rem); line-height: 1; margin: .4rem 0 1rem;
  color: var(--text);
  background: linear-gradient(120deg, #FFFFFF 20%, var(--akzent-hell) 75%, var(--akzent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.preis__wert small { -webkit-text-fill-color: var(--text-3); }
.preis__wert small { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--text-3); display: block; margin-top: .5rem; }
.liste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.liste li { position: relative; padding-left: 1.5rem; font-size: .93rem; color: var(--text-2); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--akzent);
}
.preis .btn { margin-top: auto; align-self: flex-start; }
.preis__fuss { margin-top: 1.5rem; font-size: .85rem; color: var(--text-3); }

/* Fragen */
.fragen { margin-top: 2.5rem; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-size: 1.02rem; font-weight: 600; color: var(--text);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: .25rem; top: 1rem; font-size: 1.3rem;
  color: var(--akzent); transition: transform .3s var(--ease);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { padding: 0 0 1.25rem; font-size: .95rem; max-width: 46rem; }

/* Abschluss-Band */
.band { position: relative; overflow: clip; padding: clamp(3.5rem, 8vw, 7rem) 0;
  background: linear-gradient(150deg, #0E5A50, #093B36 55%, var(--grund)); }
.band__video { position: absolute; inset: 0; z-index: 0; }
.band__video video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.band__video::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, color-mix(in oklab, #0E5A50 72%, transparent),
              color-mix(in oklab, #093B36 55%, transparent) 55%,
              color-mix(in oklab, var(--grund) 80%, transparent)); }
.band .schale { position: relative; z-index: 1; }
.band h2 { max-width: 30rem; }
.band p { color: rgba(255,255,255,.8); max-width: 34rem; margin-top: 1rem; }
.band .hero-knoepfe { justify-content: flex-start; }
.band .btn--voll { background: #fff; color: #093B36; }
.band .btn--voll:hover { background: #F0ECFF; }
.band .btn--rand { border-color: rgba(255,255,255,.35); color: #fff; }

/* Fußzeile */
.fuss { padding: 3.5rem 0 calc(6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 720px) { .fuss__raster { grid-template-columns: 2fr 1fr 1fr; } }
.fuss a { color: var(--text-2); text-decoration: none; font-size: .92rem; display: block; padding: .3rem 0; }
.fuss a:hover { color: var(--text); }
.fuss__klein { margin-top: 2.5rem; font-size: .8rem; color: var(--text-3); }

/* Handy-Leiste */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: .6rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--grund) 92%, transparent);
  border-top: 1px solid var(--linie);
}
.leiste .btn { flex: 1; min-height: 3rem; font-size: .9rem; padding-inline: .9rem; white-space: nowrap; }
@media (min-width: 768px) { .leiste { display: none; } .fuss { padding-bottom: 3.5rem; } }

/* ---------- Reveals ---------- */
.js .rv { opacity: 0; transform: translateY(42px); }
.js .rv.rv--an { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv--1 { transition-delay: .1s; }
.js .rv--2 { transition-delay: .2s; }
.js .rv--3 { transition-delay: .3s; }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.1rem; margin-top: 2.5rem; max-width: 34rem; }
.feld { position: relative; }
.feld input, .feld textarea {
  width: 100%; padding: 1.4rem .95rem .6rem; font-size: 1rem; font-family: var(--sans);
  color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: .7rem;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld label {
  position: absolute; left: .95rem; top: 1rem; font-size: 1rem; color: var(--text-3);
  pointer-events: none; transition: transform .2s var(--ease), font-size .2s var(--ease);
}
.feld input:focus + label, .feld textarea:focus + label,
.feld input:not(:placeholder-shown) + label, .feld textarea:not(:placeholder-shown) + label {
  transform: translateY(-.7rem); font-size: .72rem; color: var(--akzent-hell);
}
.feld input:focus, .feld textarea:focus { border-color: var(--akzent); }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--text-2); }
.haken input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--akzent); flex: 0 0 auto; }
.meldung {
  margin-top: 1rem; padding: 1rem 1.15rem; border-radius: .8rem; font-size: .9rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2);
}
.meldung[hidden] { display: none; }

/* Entwurfs-Kasten */
.entwurf-kasten {
  border: 1px solid #C9A227; border-radius: .9rem; padding: 1.15rem 1.3rem; margin: 0 0 2rem;
  background: color-mix(in oklab, #C9A227 12%, var(--grund-2)); color: #F4E7B8; font-size: .9rem;
}
.entwurf-kasten strong { color: #FFF3CC; }

/* Textseiten */
.text-seite { padding: 8rem 0 4rem; }
.text-seite h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 2rem; }
.text-seite h2 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 2.5rem 0 .8rem; }
.text-seite p, .text-seite li { max-width: 46rem; font-size: .97rem; }
.text-seite ul { padding-left: 1.2rem; color: var(--text-2); }

/* ---------- Rücksichtnahme ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-sticky { position: relative; height: auto; }
  .hero-pin { height: auto; }
  .hero-line, .hero-rest { opacity: 1 !important; transform: none !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .hero-video { display: none; }
  .btn, .schritt, .arbeit { transition: none; }
}
.motion-lite .hero-raster, .motion-lite .hero-video { transform: none !important; }
.motion-lite .reihe__bild:not(.szene) > * { transform: none !important; }

/* =====================================================================
   Szenen in den Leistungsreihen — kleine Animationen statt grauer Kästen.
   Nur transform und opacity, bei reduzierter Bewegung steht das Endbild.
   ===================================================================== */
.szene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }

/* Zeiger, der in den Szenen klickt */
.sz-zeiger { position: absolute; z-index: 5; width: 18px; height: 18px; pointer-events: none; }
.sz-zeiger svg { width: 100%; height: 100%; fill: #fff; stroke: #000; stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* ---------- 01: Türkises Handy, das sich dreht ---------- */
.szene--handy { perspective: 900px; }
.szene--handy::before {
  content: ""; position: absolute; width: clamp(9rem, 36%, 11.5rem); aspect-ratio: 9 / 18.5;
  border-radius: 1.8rem; border: 2px solid color-mix(in oklab, var(--akzent) 70%, transparent);
  box-shadow: 0 0 44px color-mix(in oklab, var(--akzent) 50%, transparent),
              inset 0 0 24px color-mix(in oklab, var(--akzent) 22%, transparent);
  animation: sz-handy-puls 2.8s ease-in-out infinite;
}
@keyframes sz-handy-puls {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .szene--handy::before { animation: none; opacity: .4; } }
.sz-handy {
  position: relative; width: clamp(7.5rem, 30%, 9.5rem); aspect-ratio: 9 / 18.5;
}
.sz-handy__seite {
  position: absolute; inset: 0; border-radius: 1.3rem; backface-visibility: hidden;
  border: 2px solid var(--akzent);
  box-shadow: 0 0 34px color-mix(in oklab, var(--akzent) 45%, transparent),
              inset 0 0 18px color-mix(in oklab, var(--akzent) 18%, transparent);
}
.sz-handy__seite--vorn { background: linear-gradient(165deg, #10201E, #0A0A0D);
  display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem .8rem .8rem; }
.sz-handy__seite--hinten { display: none; }
.sz-handy__kerbe { width: 36%; height: .3rem; border-radius: 999px; background: var(--linie); margin: 0 auto .3rem; }
.sz-handy__zeile { height: .45rem; border-radius: 999px; background: color-mix(in oklab, var(--akzent) 35%, var(--linie)); }
.sz-handy__zeile:nth-child(3) { width: 70%; }
.sz-handy__zeile:nth-child(4) { width: 85%; }
.sz-handy__knopf { margin-top: auto; height: 2.1rem; border-radius: 999px; background: var(--akzent);
  display: grid; place-items: center; color: #04211D; font-size: .75rem; font-weight: 700; }
.sz-handy__logo { width: 1rem; height: 1rem; border-radius: 50%; background: var(--akzent);
  box-shadow: 0 0 16px var(--akzent); }

/* ---------- 02: Suche — tippen, Ergebnisse, Kreis ---------- */
.szene--suche { padding: 1.25rem; }
.sz-suche { width: min(85%, 21rem); display: grid; gap: .8rem; }
.sz-suchfeld { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: color-mix(in oklab, var(--flaeche) 92%, transparent);
  animation: sz-feld 8s var(--ease) infinite; }
@keyframes sz-feld { 0%, 8% { border-color: var(--linie) } 12%, 100% { border-color: color-mix(in oklab, var(--akzent) 60%, var(--linie)) } }
.sz-suchfeld svg { width: .95rem; height: .95rem; stroke: var(--text-3); fill: none; stroke-width: 2; flex: 0 0 auto; }
.sz-tipptext { font-family: var(--mono, monospace); font-size: .82rem; color: var(--text);
  white-space: nowrap; overflow: hidden; width: 0;
  border-right: 2px solid var(--akzent);
  animation: sz-tippen 8s steps(16, end) infinite; }
@keyframes sz-tippen { 0%, 12% { width: 0 } 38%, 96% { width: 9.5em } 100% { width: 9.5em } }
.sz-treffer { position: relative; display: grid; gap: .5rem; }
.sz-treffer__zeile { padding: .55rem .8rem; border-radius: .6rem;
  border: 1px solid var(--linie); background: color-mix(in oklab, var(--flaeche) 88%, transparent);
  display: grid; gap: .3rem; opacity: 0; animation: sz-treffer-rein 8s var(--ease) infinite; }
.sz-treffer__zeile:nth-child(2) { animation-name: sz-treffer-rein2; }
.sz-treffer__zeile:nth-child(3) { animation-name: sz-treffer-rein3; }
@keyframes sz-treffer-rein  { 0%, 40% { opacity: 0; transform: translateY(8px) } 46%, 100% { opacity: 1; transform: none } }
@keyframes sz-treffer-rein2 { 0%, 45% { opacity: 0; transform: translateY(8px) } 51%, 100% { opacity: .7; transform: none } }
@keyframes sz-treffer-rein3 { 0%, 50% { opacity: 0; transform: translateY(8px) } 56%, 100% { opacity: .45; transform: none } }
.sz-treffer__zeile i { display: block; height: .38rem; border-radius: 999px; background: var(--linie); }
.sz-treffer__zeile:first-child i:first-child { width: 55%; background: color-mix(in oklab, var(--akzent) 55%, var(--linie)); }
.sz-treffer__zeile i:last-child { width: 82%; }
.sz-kreis { position: absolute; inset: -6px -8px auto; height: calc(2.4rem + 12px); pointer-events: none; }
.sz-kreis ellipse { fill: none; stroke: var(--akzent); stroke-width: 2.5;
  stroke-dasharray: 320; stroke-dashoffset: 320; stroke-linecap: round;
  animation: sz-kreis-malen 8s var(--ease) infinite;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--akzent) 60%, transparent)); }
@keyframes sz-kreis-malen { 0%, 62% { stroke-dashoffset: 320 } 78%, 94% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0 } }
.szene--suche .sz-zeiger { animation: sz-suche-zeiger 8s var(--ease) infinite; }
@keyframes sz-suche-zeiger {
  0%   { transform: translate(120px, 130px) scale(1); opacity: 0 }
  6%   { opacity: 1 }
  10%  { transform: translate(30px, -78px) scale(1) }
  12%  { transform: translate(30px, -78px) scale(.82) }
  14%  { transform: translate(30px, -78px) scale(1) }
  58%  { transform: translate(-40px, -8px) scale(1) }
  62%  { transform: translate(-40px, -8px) scale(.82) }
  66%, 100% { transform: translate(-40px, -8px) scale(1); opacity: 1 }
}

/* ---------- 03: Klick auf die Nummer → neuer Kunde ---------- */
.szene--anruf { padding: 1.25rem; }
.sz-anruf { position: relative; width: min(85%, 20rem); display: grid; gap: .8rem; justify-items: center; }
.sz-nummer { position: relative; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.3rem; border-radius: 999px; background: var(--akzent); color: #04211D;
  font-weight: 700; font-size: clamp(.95rem, 2vw, 1.1rem);
  animation: sz-nummer-druck 7s var(--ease) infinite;
  box-shadow: 0 0 30px color-mix(in oklab, var(--akzent) 40%, transparent); }
@keyframes sz-nummer-druck { 0%, 34% { transform: scale(1) } 37% { transform: scale(.94) } 40%, 100% { transform: scale(1) } }
.sz-nummer::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--akzent); opacity: 0; animation: sz-welle 7s var(--ease) infinite; }
@keyframes sz-welle { 0%, 36% { opacity: 0; transform: scale(1) } 40% { opacity: .8; transform: scale(1) }
  55%, 100% { opacity: 0; transform: scale(1.55) } }
.sz-nummer svg { width: 1rem; height: 1rem; fill: #04211D;
  transform-origin: 70% 30%; animation: sz-klingeln 7s ease-in-out infinite; }
@keyframes sz-klingeln { 0%, 40% { transform: rotate(0) } 44% { transform: rotate(-14deg) }
  48% { transform: rotate(12deg) } 52% { transform: rotate(-8deg) } 56%, 100% { transform: rotate(0) } }
.sz-kunde { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--akzent) 55%, var(--linie));
  background: color-mix(in oklab, var(--akzent) 12%, var(--flaeche));
  font-size: .85rem; font-weight: 600; color: var(--text);
  opacity: 0; animation: sz-kunde-rein 7s var(--ease) infinite; }
@keyframes sz-kunde-rein { 0%, 52% { opacity: 0; transform: translateY(10px) scale(.9) }
  60%, 92% { opacity: 1; transform: none } 100% { opacity: 0 } }
.sz-kunde b { color: var(--akzent-hell); }
.szene--anruf .sz-zeiger { animation: sz-anruf-zeiger 7s var(--ease) infinite; }
@keyframes sz-anruf-zeiger {
  0%   { transform: translate(-110px, 90px) scale(1); opacity: 0 }
  10%  { opacity: 1 }
  30%  { transform: translate(34px, -14px) scale(1) }
  36%  { transform: translate(34px, -14px) scale(.8) }
  42%, 100% { transform: translate(34px, -14px) scale(1); opacity: 1 }
}

/* ---------- 04: Cookie-Banner fliegt raus, Schild bleibt ---------- */
.szene--schutz { padding: 1.25rem; }
.sz-schutz { position: relative; width: min(85%, 19rem); display: grid; justify-items: center; gap: 1rem; }
.sz-schild { width: clamp(4.2rem, 9vw, 5.4rem); }
.sz-schild path.sz-schild__form { fill: color-mix(in oklab, var(--akzent) 12%, var(--flaeche));
  stroke: var(--akzent); stroke-width: 2; }
.sz-schild path.sz-schild__haken { fill: none; stroke: var(--akzent); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: sz-haken 8s var(--ease) infinite;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--akzent) 65%, transparent)); }
@keyframes sz-haken { 0%, 48% { stroke-dashoffset: 60 } 62%, 100% { stroke-dashoffset: 0 } }
.sz-banner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem;
  width: 100%; padding: .65rem .8rem; border-radius: .7rem;
  border: 1px solid var(--linie); background: color-mix(in oklab, var(--flaeche) 94%, transparent);
  animation: sz-banner-weg 8s var(--ease) infinite; }
@keyframes sz-banner-weg { 0%, 8% { opacity: 0; transform: translateY(16px) }
  14%, 34% { opacity: 1; transform: none }
  44%, 100% { opacity: 0; transform: translateY(26px) rotate(2.5deg) } }
.sz-banner i { display: block; height: .38rem; border-radius: 999px; background: var(--linie); width: 90%; }
.sz-banner span { font-size: .62rem; padding: .3rem .55rem; border-radius: .4rem;
  border: 1px solid var(--linie); color: var(--text-3); white-space: nowrap; }
.sz-frei { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  opacity: 0; animation: sz-frei-rein 8s var(--ease) infinite; }
@keyframes sz-frei-rein { 0%, 55% { opacity: 0 } 66%, 100% { opacity: 1 } }

/* Reduzierte Bewegung: Endbild statt Ablauf */
@media (prefers-reduced-motion: reduce) {
  .sz-handy, .sz-suchfeld, .sz-tipptext, .sz-treffer__zeile, .sz-kreis ellipse,
  .sz-zeiger, .sz-nummer, .sz-nummer::after, .sz-nummer svg, .sz-kunde,
  .sz-schild path.sz-schild__haken, .sz-banner, .sz-frei { animation: none !important; }
  .sz-tipptext { width: 9.5em; border-right: none; }
  .sz-treffer__zeile { opacity: 1; }
  .sz-kreis ellipse, .sz-schild path.sz-schild__haken { stroke-dashoffset: 0; }
  .sz-kunde, .sz-frei { opacity: 1; }
  .sz-banner { opacity: 0; }
  .sz-zeiger { display: none; }
}


/* =====================================================================
   Scroll-Rail links (wie auf der ai.citel-Seite) und die leuchtende
   Ablauf-Spur bei den drei Schritten.
   ===================================================================== */
.rail { position: fixed; left: 1.5rem; top: 50%; translate: 0 -50%; z-index: 40;
  display: none; align-items: stretch; gap: .85rem; }
@media (min-width: 1440px) { .rail { display: flex; } }
.rail__linie { position: relative; width: 2px; height: 13rem; border-radius: 999px;
  background: var(--linie); overflow: hidden; }
.rail__linie i { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(var(--akzent-hell), var(--akzent));
  transform-origin: top; transform: scaleY(var(--sf, 0));
  box-shadow: 0 0 12px var(--akzent); }
.rail__punkte { display: flex; flex-direction: column; justify-content: space-between; }
.rail__nr { font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  color: var(--text-3); text-decoration: none; padding: .1rem .2rem;
  transition: color .3s, text-shadow .3s; }
.rail__nr:hover { color: var(--text); }
.rail__nr[aria-current="true"] { color: var(--akzent-hell);
  text-shadow: 0 0 12px color-mix(in oklab, var(--akzent) 80%, transparent); }

/* Ablauf-Spur: füllt sich beim Scrollen, die Schritte leuchten nacheinander */
.ablauf-spur { position: relative; height: 3px; border-radius: 999px;
  background: var(--linie); margin: 2.75rem 0 2.1rem; }
.ablauf-spur i { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--akzent-hell), var(--akzent));
  transform-origin: left; transform: scaleX(var(--sp, 0));
  box-shadow: 0 0 14px var(--akzent); }
.ablauf-spur b { position: absolute; top: 50%; width: .95rem; height: .95rem;
  translate: -50% -50%; border-radius: 50%; background: var(--flaeche);
  border: 2px solid var(--linie); transition: background .35s, border-color .35s, box-shadow .35s; }
.ablauf-spur b:nth-of-type(1) { left: 16.66%; }
.ablauf-spur b:nth-of-type(2) { left: 50%; }
.ablauf-spur b:nth-of-type(3) { left: 83.33%; }
.ablauf-spur b.an { background: var(--akzent); border-color: var(--akzent-hell);
  box-shadow: 0 0 16px var(--akzent); }
@media (max-width: 819px) {
  /* Auf dem Handy läuft die Spur senkrecht links neben den Karten. */
  .schritte { position: relative; padding-left: 1.5rem; }
  .ablauf-spur { position: absolute; left: .3rem; top: .5rem; bottom: .5rem;
    width: 3px; height: auto; margin: 0; }
  .ablauf-spur i { transform-origin: top; transform: scaleY(var(--sp, 0)); }
  .ablauf-spur b { left: 50% !important; }
  .ablauf-spur b:nth-of-type(1) { top: 16.66%; }
  .ablauf-spur b:nth-of-type(2) { top: 50%; }
  .ablauf-spur b:nth-of-type(3) { top: 83.33%; }
}

/* Erreichte Schritte leuchten türkis auf */
.schritt--an { border-color: color-mix(in oklab, var(--akzent) 55%, var(--linie));
  box-shadow: 0 18px 40px -26px color-mix(in oklab, var(--akzent) 60%, transparent); }
.schritt--an .schritt__zahl { color: var(--akzent-hell);
  text-shadow: 0 0 18px color-mix(in oklab, var(--akzent) 75%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ablauf-spur i { transform: none; }
  .ablauf-spur b, .schritt { transition: none; }
}