/* 4ELEMENTS – Stylesheet. Farben und Abstände zentral in :root anpassbar. */

/* Schriften (lokal, SIL Open Font License): Geist, Geist Mono, Instrument Serif (kursiv, für Akzentwörter) */
@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }

:root {
  --bg: #ffffff;
  --bg-alt: #f5f6f7;
  --text: #1c1f23;
  --text-muted: #525961;
  --border: #e2e5e8;
  --accent: #3ddc97;
  --accent-hover: #2fc985;
  --accent-ink: #0b1f16;
  --accent-text: #0b7a4b;
  --dark-bg: #16191c;
  --dark-surface: #1f2327;
  --dark-border: #30363c;
  --dark-text: #f2f4f5;
  --dark-muted: #a8b0b8;

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  --container: 72rem;
  --gutter: 1.25rem;
  --radius: 12px;
  --header-h: 4.25rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- Basis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-text); }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible { outline-color: var(--accent); }

#main:focus { outline: none; }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--text);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 46rem; }

@media (min-width: 48em) {
  :root { --gutter: 2rem; }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button--outline { background: transparent; color: inherit; }
.button--outline:hover { background: var(--accent); color: var(--accent-ink); }
.button--large { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.0625rem; }

/* ---------- Kopfzeile / Navigation ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); }
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.logo:hover { color: var(--text); }
.logo__name { font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.06em; }
.logo__tagline { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.01em; margin-top: 0.2rem; }

.menu-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.375rem; height: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav__list, .lang-switch { list-style: none; display: flex; align-items: center; }
.site-nav__list { gap: 1.75rem; }
.site-nav a { text-decoration: none; font-size: 0.9375rem; font-weight: 400; }
.site-nav__list a:hover, .site-nav__list a[aria-current] { color: var(--accent-text); }

.lang-switch { gap: 0.4rem; font-family: var(--mono); font-size: 0.8125rem; }
.lang-switch a { color: var(--text-muted); padding: 0.35rem 0.25rem; font-size: 0.8125rem; }
.lang-switch a[aria-current] { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.lang-switch__sep { color: var(--border); }

/* Mobiles Menü (Fallback ohne JavaScript: assets/css/nojs.css) */
@media (max-width: 55.99em) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(28, 31, 35, 0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a { display: block; padding: 0.9rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--border); }
  .lang-switch { padding-top: 1rem; }
  .lang-switch a { font-size: 0.9375rem; padding: 0.5rem; }
}

main { padding-top: var(--header-h); }

/* ---------- Abschnitte ---------- */

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--dark-bg); color: var(--dark-text); }
.section--dark a:hover { color: var(--accent); }

.section__title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: 1rem; }
.section__lead { font-size: 1.125rem; color: var(--text-muted); max-width: 40rem; margin-bottom: 3rem; }
.section--dark .section__lead { color: var(--dark-muted); }
.section__title + .cards, .section__title + .steps { margin-top: 2.5rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.25rem;
}

.page-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; }

/* ---------- Kopfbereich ---------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.hero__inner { display: grid; gap: 3.5rem; align-items: center; }
.hero__title { font-size: clamp(2.5rem, 7vw, 4.25rem); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 1.5rem; }
.hero__subline { font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--text-muted); max-width: 34rem; margin-bottom: 2rem; }

@media (min-width: 56em) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; }
  .hero__title { font-size: clamp(2.5rem, 4.6vw, 3.5rem); }
}

/* ---------- Ablauf-Grafik ---------- */

.flow { margin: 0; }
.flow__list { list-style: none; position: relative; }
.flow__step { position: relative; display: flex; align-items: center; gap: 1.25rem; }
.flow__node {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.flow__step:first-child .flow__node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.flow__step:last-child .flow__node { border-color: var(--accent-text); color: var(--accent-text); }
.flow__label { font-family: var(--mono); font-size: 0.9375rem; }

/* Gepunktete Verbindungslinie zwischen den Kreisen */
.flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  background-image: radial-gradient(circle, var(--text-muted) 1.4px, transparent 1.6px);
}

/* Senkrecht (Kopfbereich) */
.flow--vertical {
  padding: 2.25rem 2rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
}
.flow--vertical .flow__step + .flow__step { margin-top: 2.25rem; }
.flow--vertical .flow__step:not(:last-child)::after {
  left: calc(1.75rem - 2px);
  top: 3.5rem;
  width: 4px;
  height: 2.25rem;
  background-size: 4px 9px;
  background-repeat: repeat-y;
  background-position: center 3px;
}
.flow--vertical .flow__node { background: var(--bg); }
.flow--vertical .flow__step:first-child .flow__node { background: var(--accent); }

@media (min-width: 56em) {
  .flow--vertical { padding: 3rem 2.75rem; }
}

/* Responsiv (Anwendungsfall-Seiten): senkrecht auf dem Smartphone, waagrecht ab Tablet */
.flow--responsive { margin: 1.5rem 0 2rem; }
.flow--responsive .flow__step + .flow__step { margin-top: 1.75rem; }
.flow--responsive .flow__step:not(:last-child)::after {
  left: calc(1.75rem - 2px);
  top: 3.5rem;
  width: 4px;
  height: 1.75rem;
  background-size: 4px 9px;
  background-repeat: repeat-y;
  background-position: center 3px;
}
@media (min-width: 40em) {
  .flow--responsive .flow__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .flow--responsive .flow__step { flex-direction: column; text-align: center; gap: 0.75rem; }
  .flow--responsive .flow__step + .flow__step { margin-top: 0; }
  .flow--responsive .flow__label { font-size: 0.8125rem; }
  .flow--responsive .flow__step:not(:last-child)::after {
    left: calc(50% + 2.25rem);
    right: calc(-50% + 2.25rem);
    top: calc(1.75rem - 2px);
    width: auto;
    height: 4px;
    background-size: 9px 4px;
    background-repeat: repeat-x;
    background-position: 3px center;
  }
}

/* ---------- Kopfbereich: 3D-Workflow-Szene ----------
   Endzustand = Grundzustand. Die Animationen (nur ohne „Bewegung reduzieren“)
   spielen den Weg dorthin ab: Module fliegen aus allen Richtungen heran,
   Verbindungen entstehen, ein Impuls läuft durch, danach schwebt die Szene sanft. */

.hero__visual {
  container-type: inline-size;
  perspective: 1100px;
  perspective-origin: 50% 35%;
}

.scene {
  --tilt: none;   /* Kette steht gerade, ohne Kippen */
  position: relative;
  height: 25em;
  display: grid;
  place-items: center;
  font-size: clamp(12px, 2.55cqi, 17px);
  transform-style: preserve-3d;
  transform: var(--tilt);
}

.scene__grid {
  position: absolute;
  inset: -8% -12%;
  background: radial-gradient(circle, #c9ced4 0.075em, transparent 0.09em) 0 0 / 1.5em 1.5em;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
  transform: translateZ(-2em);
}


/* Workflow-Kette */
.chain {
  position: relative;
  display: flex;
  align-items: flex-start;
  transform-style: preserve-3d;
}

.module {
  display: grid;
  justify-items: center;
  width: 7em;
  text-align: center;
  backface-visibility: visible;
}
.module__body {
  position: relative;
  isolation: isolate;
  width: 4.75em;
  height: 4.75em;
  margin-bottom: 1em;
}
/* Weicher Farbschein unter dem Modul */
.module__glow {
  position: absolute;
  left: 10%;
  top: 32%;
  z-index: 0;
  width: 80%;
  height: 86%;
  filter: blur(0.7em);
  opacity: 0.45;
}
/* Weicher Schatten auf dem Boden, leicht nach rechts versetzt (Licht von oben links) */
.module__body::before {
  content: '';
  position: absolute;
  left: 4%;
  right: -14%;
  bottom: -0.62em;
  z-index: 0;
  height: 0.9em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 30, 40, 0.26), rgba(20, 30, 40, 0.1) 55%, rgba(20, 30, 40, 0));
}
/* Halbmond-Anschlüsse links und rechts wie im Make-Editor */
.module__ports {
  position: absolute;
  left: -0.89em;
  top: 0;
  z-index: 1;
  width: calc(100% + 1.78em);
  height: 100%;
  overflow: visible;
}
.module__icon { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
/* Wölbung wie bei einer Kugel: Licht und Glanzpunkt oben links, Eigenschatten unten rechts */
.module__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.18) 16%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}
/* Fortschrittsring: läuft im Uhrzeigersinn, während das Modul arbeitet */
.module__progress {
  position: absolute;
  inset: -0.66em;
  z-index: 4;
  width: calc(100% + 1.32em);
  height: calc(100% + 1.32em);
  overflow: visible;
  transform: rotate(-90deg);
}
.module__track, .module__arc { fill: none; stroke-width: 3.4; }
.module__track { stroke: rgba(61, 220, 151, 0.22); opacity: 0; }
.module__arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
/* Abschluss-Welle */
.module__ring {
  position: absolute;
  inset: -0.34em;
  z-index: 1;
  border-radius: 50%;
  border: 0.14em solid var(--accent);
  opacity: 0;
}
.module__trigger {
  position: absolute;
  left: -0.45em;
  bottom: -0.25em;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, #fff 35%, #e3e7eb 100%);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(28, 31, 35, 0.08), 0.12em 0.25em 0.5em rgba(28, 31, 35, 0.2);
}
.module__trigger svg { width: 1.05em; height: 1.05em; }
.module__count {
  position: absolute;
  top: -0.45em;
  right: -0.55em;
  z-index: 5;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.4em;
  border-radius: 1em;
  background: radial-gradient(circle at 35% 28%, #a6f3cf 0, var(--accent) 45%, #25b87a 100%);
  color: var(--accent-ink);
  font: 600 0.8em/1.75em var(--font);
  box-shadow: 0 0 0 0.18em #fff, 0.1em 0.3em 0.6em rgba(11, 122, 75, 0.32);
}
.module__app { font-weight: 600; font-size: 0.95em; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; }
.module__action { font-size: 0.76em; line-height: 1.35; color: var(--text-muted); margin-top: 0.2em; white-space: nowrap; }

/* Verbindungen wie im Make-Editor: gepunktete Linie von Modul zu Modul */
.chain .module { position: relative; z-index: 1; }
.link {
  position: relative;
  z-index: 0;
  flex: none;
  width: 4.2em;
  height: 0.5em;
  margin: 2.125em -1.05em 0;
  transform-origin: left center;
}
.link__dots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.link__dots--v { display: none; }
.link__pulse {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75em;
  height: 0.75em;
  margin: -0.375em 0 0 -0.375em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.6em 0.1em var(--accent);
  opacity: 0;
}

/* Schmale Spalte (Smartphone): Kette senkrecht, Beschriftung rechts */
@container (max-width: 470px) {
  .scene { font-size: 14px; height: auto; padding-block: 2.5em; }
  .chain { flex-direction: column; }
  .module {
    width: auto;
    grid-template-columns: 4.75em auto;
    grid-template-rows: auto auto;
    column-gap: 1.1em;
    justify-items: start;
    align-content: center;
    text-align: left;
  }
  .module__body { grid-row: 1 / 3; margin: 0; }
  .module__app { align-self: end; }
  .module__action { align-self: start; }
  .link {
    width: 0.5em;
    height: 2.4em;
    margin: 0.2em 0 0.2em 2.125em;
    transform-origin: center top;
  }
  .link__dots--h { display: none; }
  .link__dots--v { display: block; }
  .module__ports { display: none; }
  .link__pulse { left: 50%; top: 0; margin: -0.375em 0 0 -0.375em; }
}

@media (prefers-reduced-motion: no-preference) {
  .scene { animation: scene-float 12s ease-in-out 6.6s infinite alternate; }

  /* Anflug aus allen Richtungen, mit Drehung im Raum */
  .chain .module { animation: module-fly 1.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chain .module--1 { --from: translate3d(-26em, 9em, -30em) rotateX(-25deg) rotateY(300deg) rotateZ(-20deg); animation-delay: 0.4s; }
  .chain .module--2 { --from: translate3d(5em, -24em, 20em) rotateX(260deg) rotateY(-30deg) rotateZ(25deg); animation-delay: 0.9s; }
  .chain .module--3 { --from: translate3d(30em, -5em, -45em) rotateX(20deg) rotateY(-320deg) rotateZ(15deg); animation-delay: 0.15s; }
  .chain .module--4 { --from: translate3d(16em, 22em, 26em) rotateX(-240deg) rotateY(40deg) rotateZ(-30deg); animation-delay: 0.65s; }
  .chain .module--5 { --from: translate3d(-12em, -22em, -24em) rotateX(40deg) rotateY(280deg) rotateZ(10deg); animation-delay: 1.05s; }

  /* Danach schwebt jedes Modul leicht versetzt */
  .chain .module--1 { animation: module-fly 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both, module-bob 4.5s ease-in-out 6.6s infinite alternate; }
  .chain .module--2 { animation: module-fly 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both, module-bob 5s ease-in-out 7s infinite alternate; }
  .chain .module--3 { animation: module-fly 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both, module-bob 4.2s ease-in-out 6.8s infinite alternate; }
  .chain .module--4 { animation: module-fly 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both, module-bob 4.8s ease-in-out 7.2s infinite alternate; }


  /* Verbindungen entstehen nacheinander */
  .chain .link { animation: link-draw 0.4s ease-out both; }
  .chain .link--1 { animation-delay: 2.6s; }
  .chain .link--2 { animation-delay: 2.8s; }
  .chain .link--3 { animation-delay: 3s; }
  .chain .link--4 { animation-delay: 3.2s; }

  /* Run once: ein Modul nach dem anderen – Ring läuft im Uhrzeigersinn, dann „1“, dann weiter zum nächsten */
  .chain .link__pulse { animation: pulse-run 0.35s ease-in-out both; }
  .chain .link--1 .link__pulse { animation-delay: 3.85s; }
  .chain .link--2 .link__pulse { animation-delay: 4.65s; }
  .chain .link--3 .link__pulse { animation-delay: 5.45s; }

  .chain .module__arc { animation: arc-run 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; }
  .chain .module__track { animation: track-run 0.55s ease both; }
  .chain .module__ring { animation: ring 0.6s ease-out forwards; }
  .chain .module__count { animation: count-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .chain .module--1 .module__arc, .chain .module--1 .module__track { animation-delay: 3.3s; }
  .chain .module--2 .module__arc, .chain .module--2 .module__track { animation-delay: 4.1s; }
  .chain .module--3 .module__arc, .chain .module--3 .module__track { animation-delay: 4.9s; }
  .chain .module--4 .module__arc, .chain .module--4 .module__track { animation-delay: 5.7s; }
  .chain .module--1 .module__ring, .chain .module--1 .module__count { animation-delay: 3.75s; }
  .chain .module--2 .module__ring, .chain .module--2 .module__count { animation-delay: 4.55s; }
  .chain .module--3 .module__ring, .chain .module--3 .module__count { animation-delay: 5.35s; }
  .chain .module--4 .module__ring, .chain .module--4 .module__count { animation-delay: 6.15s; }

  @container (max-width: 470px) {
    .chain .link { animation-name: link-draw-v; }
    .chain .link__pulse { animation-name: pulse-run-v; }
  }
}

@keyframes module-fly {
  0% { opacity: 0; transform: var(--from); filter: blur(0.2em); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0); filter: blur(0); }
}
@keyframes module-bob {
  from { translate: 0 0 0; }
  to { translate: 0 -0.3em; }
}
@keyframes scene-float {
  from { transform: none; }
  to { transform: translateY(-0.3em); }
}
@keyframes link-draw {
  from { transform: scale(0, 1); }
  to { transform: none; }
}
@keyframes link-draw-v {
  from { transform: scale(1, 0); }
  to { transform: none; }
}
@keyframes pulse-run-v {
  0% { opacity: 0; top: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; top: 100%; }
}
@keyframes pulse-run {
  0% { opacity: 0; left: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; left: 100%; }
}
@keyframes ring {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.45); opacity: 0; }
}
@keyframes arc-run {
  0% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes track-run {
  0% { opacity: 0; }
  12%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes count-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Nach dem Intro: Die Kette steht bereits (die Intro-Module sind hineingeflogen),
   nur das sanfte Schweben läuft weiter. */
html.is-intro .chain .module, html.is-intro .chain .link, html.is-intro .scene__grid { opacity: 0; }
html.is-intro .scene { transform: none; }
html.intro-played .scene { transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
html.is-intro .chain .module, html.is-intro .scene { animation: none; }
html.intro-played .chain .module { animation-name: none, module-bob; }
html.is-intro .chain .link, html.is-intro .chain .link__pulse,
html.is-intro .chain .module__ring, html.is-intro .chain .module__count,
html.is-intro .chain .module__arc, html.is-intro .chain .module__track,
html.intro-played .chain .module__arc, html.intro-played .chain .module__track,
html.intro-played .chain .link, html.intro-played .chain .link__pulse,
html.intro-played .chain .module__ring, html.intro-played .chain .module__count { animation: none; }
html.intro-played .scene__grid { transition: opacity 0.8s ease; }

/* ---------- Problem ---------- */

.problem__text { font-size: clamp(1.375rem, 2.8vw, 1.875rem); line-height: 1.45; letter-spacing: -0.015em; margin: 0; max-width: 44rem; }

/* ---------- Karten (Leistungen) ---------- */

.cards { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 48em) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.card {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card p { color: var(--text-muted); margin: 0; }
.card__icon { position: relative; display: block; width: 3rem; height: 3rem; margin-bottom: 1.5rem; border-radius: 50%; box-shadow: 0.15rem 0.35rem 0.8rem -0.2rem rgba(20, 30, 40, 0.3); }
.card__icon .module__icon { width: 100%; height: 100%; display: block; }
.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 0.9rem 2rem -1rem rgba(20, 30, 40, 0.22); }
.card__title { font-size: 1.25rem; margin-bottom: 0.75rem; }

.cards--links .card { transition: border-color 0.15s ease; }
.cards--links .card:hover { border-color: var(--accent-text); }
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.card__more { display: inline-block; margin-top: 1.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--accent-text); }

/* ---------- Preiskarten (Betreuung) ---------- */

.plans { list-style: none; display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 56em) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
}
.plan--highlight { border: 2px solid var(--accent); box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.08); }
@media (min-width: 56em) {
  .plan--highlight { margin-block: -0.75rem; padding-block: 2.75rem; }
}

.plan__name { font-family: var(--mono); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.plan__price { margin-bottom: 1.75rem; }
.plan__amount { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; }
.plan__period { color: var(--dark-muted); }

.plan__features { margin: 0 0 2rem; flex: 1; }
.plan__features div { padding: 0.7rem 0; border-top: 1px solid var(--dark-border); }
.plan__features dt { font-size: 0.8125rem; color: var(--dark-muted); margin-bottom: 0.1rem; }
.plan__features dd { margin: 0; font-weight: 500; }
.plan .button { width: 100%; }
.section--dark .button--outline { color: var(--dark-text); }
.section--dark .button--outline:hover { color: var(--accent-ink); }

.plans__note { margin: 2.5rem 0 0; font-size: 0.9375rem; color: var(--dark-muted); max-width: 44rem; }

/* ---------- Schritte (So arbeite ich) ---------- */

.steps { list-style: none; display: grid; gap: 2.25rem; counter-reset: none; }
@media (min-width: 40em) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
}
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step { position: relative; padding-top: 1.5rem; border-top: 2px dotted var(--text-muted); }
.step__number { display: block; font-family: var(--mono); font-size: 0.875rem; color: var(--accent-text); margin-bottom: 1rem; }
.step__number::before {
  content: '';
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
.step__title { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.step p { color: var(--text-muted); margin: 0; }

/* ---------- Über mich ---------- */

.about { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 48em) {
  .about { grid-template-columns: minmax(14rem, 20rem) 1fr; gap: 4rem; }
}
.about__text p { font-size: 1.1875rem; line-height: 1.6; margin: 0; }
.about__photo { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about--text { display: block; }
.about--text .about__text { max-width: 46rem; }
.about__photo--placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #eceef0 0 10px, #f3f4f5 10px 20px);
  border: 1px dashed #c3c8cd;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1rem;
}

/* ---------- Kontakt ---------- */

.contact { text-align: center; }
.contact__text { font-size: 1.1875rem; color: var(--text-muted); margin-bottom: 2rem; }
.contact__address { margin: 1.25rem 0 0; font-family: var(--mono); font-size: 0.875rem; }
.contact__address a { color: var(--text-muted); }

/* ---------- Unterseiten (Rechtliches, Anwendungsfälle) ---------- */

.legal h2, .usecase h2 { font-size: 1.375rem; margin: 2.5rem 0 0.75rem; }
.legal h3 { font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }
.legal ul, .legal ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal a { word-break: break-word; }
.placeholder-note { padding: 1rem 1.25rem; background: var(--bg-alt); border-left: 3px solid var(--accent); }

.usecase__back { margin-bottom: 1.5rem; font-size: 0.9375rem; }
.usecase__back a { color: var(--text-muted); text-decoration: none; }

.checklist { list-style: none; margin-bottom: 1rem; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230b1f16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.usecase__figure { margin: 1rem 0 0; }
.usecase__screenshot { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
.usecase__screenshot--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, #eceef0 0 10px, #f3f4f5 10px 20px);
  border-style: dashed;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 1rem;
  text-align: center;
}

.cta-box {
  margin-top: 3.5rem;
  padding: 2.25rem 1.75rem;
  background: var(--dark-bg);
  color: var(--dark-text);
  border-radius: calc(var(--radius) * 1.5);
}
.cta-box h2 { margin-top: 0; }
.cta-box p { color: var(--dark-muted); margin-bottom: 1.5rem; }
.cta-box :focus-visible { outline-color: var(--accent); }

/* ---------- Fußzeile ---------- */

.site-footer { border-top: 1px solid var(--border); padding-block: 2rem; font-size: 0.9375rem; color: var(--text-muted); }
.site-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover, .site-footer a[aria-current] { color: var(--text); }

/* ---------- Dezente Einblendung beim Scrollen (nur ohne „Bewegung reduzieren“) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media print {
  .site-header, .menu-toggle, .skip-link { display: none; }
  main { padding-top: 0; }
  .section--dark, .cta-box { background: none; color: inherit; }
}

/* Preiskarten auf dem Smartphone kompakter */
@media (max-width: 40em) {
  .plan { padding: 1.5rem 1.25rem; }
  .plan__price { margin-bottom: 1.25rem; }
  .plan__features { margin-bottom: 1.5rem; }
  .plan__features div { padding: 0.55rem 0; }
}

/* =====================================================================
   Gestaltung 2026 – warmes Off-White, leichte große Schrift, feine Linien,
   eine Akzentfarbe, Bewegung beim Laden, Scrollen und Überfahren.
   (Diese Ebene überschreibt die Grundstile oben.)
   ===================================================================== */

:root {
  --bg: #fbfaf8;
  --bg-alt: #f4f2ef;
  --surface: #ffffff;
  --text: #111214;
  --text-muted: #6b6761;
  --border: #e9e5e0;
  --border-strong: #d9d4cd;
  --ink: #111214;
  --accent-text: #15925e;
  --radius: 16px;
  --section-y: clamp(5rem, 11vw, 8.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body { font-size: 1.0625rem; letter-spacing: -0.006em; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; }
em { font-style: normal; }
h1 em, h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.08em;
  color: var(--accent-text);
  padding-right: 0.04em;
}
::selection { background: rgba(61, 220, 151, 0.28); }
.section--alt { background: var(--bg-alt); }

/* Knöpfe: schwarze Pille, Pfeil rückt beim Überfahren nach rechts */
.button {
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fbfaf8;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 24px -14px rgba(17, 18, 20, 0.55);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s ease;
}
.button:hover { background: #26282c; border-color: #26282c; color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(17, 18, 20, 0.6); }
.button__arrow { display: inline-block; transition: transform 0.25s var(--ease-out); opacity: 0.75; }
.button:hover .button__arrow { transform: translateX(3px); }
.button--ghost, .button--outline { background: transparent; color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.button--ghost:hover, .button--outline:hover { background: var(--surface); color: var(--text); border-color: var(--text); }
.button--large { min-height: 3.5rem; padding-inline: 1.9rem; }

/* Kopfzeile: über dem Kopfbereich durchsichtig, beim Scrollen mattiertes Glas */
.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: transparent; backdrop-filter: none; }
  html.is-scrolled .site-header { background: rgba(251, 250, 248, 0.78); backdrop-filter: blur(14px) saturate(160%); }
}
html.is-scrolled .site-header { background: rgba(251, 250, 248, 0.96); border-bottom-color: var(--border); }
.logo { display: grid; grid-template-columns: auto auto; column-gap: 0.65rem; align-items: center; }
.logo__mark {
  grid-row: 1 / 3;
  width: 1.5rem; height: 1.5rem;
  border-radius: 7px;
  background: conic-gradient(from 210deg, #3ddc97, #1fa463, #0f766e, #95bf47, #3ddc97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -4px rgba(15, 118, 110, 0.6);
}
.logo__name { font-size: 1rem; letter-spacing: 0.16em; font-weight: 600; }
.logo__tagline { font-size: 0.6875rem; margin-top: 0.1rem; }
.site-nav a { font-size: 0.9rem; color: #4a4742; }
.site-nav__list a { position: relative; }
.site-nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-out);
}
.site-nav__list a:hover { color: var(--text); }
.site-nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Abschnittsbeschriftung mit feiner Linie */
.kicker, .eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.kicker::before { content: ''; width: 1.75rem; height: 1px; background: var(--border-strong); }
.section__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 20ch; }
.section__lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-muted); max-width: 36rem; margin-bottom: 3.5rem; }

/* ---------- Kopfbereich ---------- */
.hero { position: relative; padding-block: clamp(3.5rem, 9vw, 6.5rem) 0; overflow: hidden; isolation: isolate; }
.hero::before {           /* feines Raster, zur Mitte hin sichtbar */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000 10%, transparent 75%);
  opacity: 0.7;
}
.hero::after {            /* sanftes grünes Licht hinter dem App-Fenster */
  content: ''; position: absolute; left: 50%; top: 42%; z-index: -1;
  width: min(70rem, 120vw); height: 34rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(61, 220, 151, 0.16), rgba(61, 220, 151, 0));
  pointer-events: none;
}
.hero__inner { display: block; text-align: center; }
.hero__text { max-width: 52rem; margin-inline: auto; }
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.85rem 0.3rem 0.3rem; margin-bottom: 1.75rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem; color: var(--text-muted); text-decoration: none;
  transition: border-color 0.2s ease, transform 0.25s var(--ease-out);
}
.pill b { font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; background: #eaf6f0; color: var(--accent-text); }
.pill:hover { color: var(--text); border-color: var(--text-muted); transform: translateY(-1px); }
.hero__title {
  font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.05em; font-weight: 400;
  margin: 0 auto 1.5rem; max-width: 14ch;
}
.hero__subline { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.6; margin: 0 auto 2.25rem; max-width: 36rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
@media (min-width: 56em) {
  .hero__inner { display: block; }
  .hero__title { font-size: clamp(3.4rem, 6.4vw, 5.6rem); }
}

/* App-Fenster mit der Workflow-Kette */
.window {
  position: relative;
  max-width: 62rem; margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  border: 1px solid var(--border-strong); border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 0 #fff inset, 0 50px 100px -50px rgba(17, 18, 20, 0.35), 0 20px 40px -30px rgba(15, 118, 110, 0.35);
  overflow: hidden;
  text-align: left;
}
.window__bar {
  display: flex; align-items: center; gap: 0.45rem;
  height: 2.6rem; padding: 0 1rem;
  border-bottom: 1px solid var(--border); background: #fdfcfb;
  font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted);
}
.window__bar i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #e7e3de; }
.window__bar span { margin-left: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window__bar b { margin-left: auto; font-weight: 400; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.window__bar b::before {
  content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #3ddc97;
  box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); animation: live 2s ease-out infinite;
}
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
.window .scene { height: 21em; }
.window .scene__grid { inset: 0; }
@media (max-width: 29.99em) { .window__bar span { display: none; } }

/* Werkzeug-Laufband */
.marquee { margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); text-align: center; }
.marquee__label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.marquee__track {
  display: flex; overflow: hidden; gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__list { list-style: none; display: flex; flex: none; gap: 3.25rem; padding-right: 3.25rem; animation: marquee 32s linear infinite; }
.marquee__list li { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; color: #8a857e; white-space: nowrap; }
.marquee__track:hover .marquee__list { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Problem: Wörter leuchten beim Scrollen auf ---------- */
.problem { padding-top: clamp(4rem, 9vw, 7rem); }
.problem__text { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25; letter-spacing: -0.035em; max-width: 30ch; font-weight: 400; }
.problem__text .w { transition: color 0.4s ease; }
html.words-ready .problem__text .w { color: #8f8982; }
html.words-ready .problem__text .w.is-lit { color: var(--text); }

/* ---------- Leistungen: Kachelraster ---------- */
.bento { list-style: none; display: grid; gap: 1rem; }
@media (min-width: 48em) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile--wide { grid-column: span 2; }
}
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 2rem; min-height: 15rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.tile::before {          /* Lichtfleck folgt der Maus */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 220, 151, 0.12), transparent 45%);
}
.tile:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(17, 18, 20, 0.35); }
.tile:hover::before { opacity: 1; }
.tile__icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.75rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); color: var(--accent-text);
}
.tile__icon svg { width: 1.35rem; height: 1.35rem; }
.tile__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.tile p { color: var(--text-muted); margin: 0; max-width: 38ch; line-height: 1.55; }
.stat { font-size: clamp(3rem, 6vw, 4.25rem) !important; line-height: 1 !important; letter-spacing: -0.05em; color: var(--text) !important; margin: 0.75rem 0 1rem !important; }
.log {
  margin-top: 1.75rem; min-height: 6.4rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt);
  padding: 0.75rem 1rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.9; color: #4a4742; overflow: hidden;
}
.log__row { display: flex; gap: 0.75rem; white-space: nowrap; animation: log-in 0.5s var(--ease-out) both; }
.log__row span { color: #a59f97; }
.log__row b { font-weight: 400; color: var(--accent-text); }
@keyframes log-in { from { opacity: 0; transform: translateY(8px); } }
/* Betreuungs-Kalender */
.cal { margin-top: 1.75rem; max-width: 19rem; }
.cal__month { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.6rem !important; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__grid b { font-weight: 400; font-size: 0.68rem; text-align: center; color: var(--text-muted); padding-bottom: 0.15rem; }
.cal__d {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px;
  font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #1d5c40; background: #d3f3e2;
}
.cal__d.is-fixed { background: #f5c26b; color: #4a3108; font-weight: 600; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.85rem 0 0 !important; font-size: 0.8rem; }
.cal__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal__legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: #d3f3e2; border: 1px solid #9fdcbd; }
.cal__legend i.is-fixed { background: #f5c26b; border-color: #e0a646; }
@media (prefers-reduced-motion: no-preference) {
  .cal__d.is-fixed { animation: cal-pulse 2.8s ease-in-out infinite; }
}
@keyframes cal-pulse { 50% { box-shadow: 0 0 0 4px rgba(245, 194, 107, 0.28); } }
@media (min-width: 60em) {
  .tile.tile--cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); grid-template-rows: auto auto 1fr; column-gap: 2.5rem; }
  .tile--cal > * { grid-column: 1; }
  .tile--cal .tile__icon { justify-self: start; }
  .tile--cal > .cal { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
}

/* ---------- Preise ---------- */
.plans { gap: 1rem; }
.plan {
  padding: 2rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(17, 18, 20, 0.35); border-color: var(--border-strong); }
.plan--highlight { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle, 0deg), #3ddc97, #d9d4cd 25%, #d9d4cd 50%, #1fa463 75%, #3ddc97) border-box; box-shadow: 0 30px 70px -45px rgba(15, 118, 110, 0.55); }
@media (min-width: 56em) { .plan--highlight { margin-block: 0; padding-block: 2rem; } }
.plan__name { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; }
.plan__badge { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: none; color: #fff; background: var(--ink); padding: 0.2rem 0.6rem; border-radius: 999px; }
.plan__amount { font-size: 3rem; font-weight: 500; letter-spacing: -0.05em; }
.plan__period { color: var(--text-muted); }
.plan__features div { border-top: 1px solid var(--border); }
.plan__features dt { color: var(--text-muted); }
.plan__features dd { font-weight: 500; }
.plans__note { color: var(--text-muted); }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@media (prefers-reduced-motion: no-preference) {
  .plan--highlight { animation: spin-border 8s linear infinite; }
}
@keyframes spin-border { to { --angle: 360deg; } }

/* ---------- Ablauf: Linie füllt sich beim Scrollen ---------- */
.steps { position: relative; }
.step { border-top: 1px solid var(--border-strong); padding-top: 1.75rem; }
.step__number::before { top: -6px; width: 11px; height: 11px; background: var(--bg); border: 1px solid var(--border-strong); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.step.is-active .step__number::before { background: #3ddc97; border-color: #3ddc97; box-shadow: 0 0 0 5px rgba(61, 220, 151, 0.18); }
.step__number { color: var(--text-muted); }
.step__title { font-weight: 500; font-size: 1.25rem; }
@media (min-width: 64em) {
  .steps::before, .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
  .steps::after { background: #3ddc97; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.2s linear; }
  .step { border-top-color: transparent; }
  .steps::before { background: var(--border-strong); }
}

/* ---------- Über mich / Kontakt ---------- */
.about__text p { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.5; letter-spacing: -0.02em; color: #2b2a28; }
.contact { text-align: center; }
.contact__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
  border: 1px solid var(--border); border-radius: 28px; background: var(--surface);
}
.contact__card::before {
  content: ''; position: absolute; inset: -40% 10% auto; height: 80%; z-index: -1;
  background: radial-gradient(closest-side, rgba(61, 220, 151, 0.16), transparent);
}
.contact__card .kicker { justify-content: center; }
.contact__card .kicker::after { content: ''; width: 1.75rem; height: 1px; background: var(--border-strong); }
.contact__card .section__title { margin-inline: auto; }
.contact__text { max-width: 34rem; margin-inline: auto; }
.site-footer { border-top: 1px solid var(--border); }

/* ---------- Einblendungen (nur mit JavaScript und ohne „Bewegung reduzieren“) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
  /* Überschrift im Kopfbereich: Wörter steigen nacheinander auf */
  .split-ready [data-split] .sw { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(8px); animation: word-in 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 0.1s); }
  .split-ready .hero__subline, .split-ready .hero__ctas, .split-ready .pill, .split-ready .window { animation: fade-up 1.1s var(--ease-out) both; }
  .split-ready .pill { animation-delay: 0s; }
  .split-ready .hero__subline { animation-delay: 0.45s; }
  .split-ready .hero__ctas { animation-delay: 0.6s; }
  .split-ready .window { animation-delay: 0.75s; }
}
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } }
/* Nach dem Intro kein zweites Einblenden des Kopfbereichs */
html.is-intro [data-split] .sw, html.intro-played [data-split] .sw { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
html.is-intro .hero__subline, html.is-intro .hero__ctas, html.is-intro .pill, html.is-intro .window,
html.intro-played .hero__subline, html.intro-played .hero__ctas, html.intro-played .pill, html.intro-played .window { animation: none !important; }

/* Kopfbereich kompakter, damit das App-Fenster mit der Kette schon im ersten Bild zu sehen ist
   (dorthin gleiten auch die Module am Ende des Intros) */
.hero { padding-top: clamp(2.5rem, 6vw, 4rem); }
.pill { margin-bottom: 1.25rem; }
.hero__title { margin-bottom: 1.1rem; }
.hero__subline { margin-bottom: 1.75rem; }
.window { margin-top: clamp(2.25rem, 5vw, 3rem); }
.window .scene { height: 18em; }
@media (min-width: 56em) {
  .hero__title { font-size: clamp(3.2rem, 5.6vw, 4.9rem); }
}

/* Lebendiger Hintergrund: Module finden sich laufend zu neuen Workflows (assets/js/flow.js).
   Zur Mitte hin ausgeblendet, damit Überschrift und Text frei bleiben. */
.flow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 36% 30% at 50% 30%, transparent 0%, transparent 62%, #000 100%);
  mask-image: radial-gradient(ellipse 36% 30% at 50% 30%, transparent 0%, transparent 62%, #000 100%);
}
.flow__canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 43.99em) {
  /* Smartphone: Hintergrund-Module nur an den Rändern, Text bleibt frei */
  .flow {
    -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
  }
  .pill { font-size: 0.75rem; }
  .pill b { white-space: nowrap; }
}
@media (max-width: 29.99em) {
  .pill__text { display: none; }
  .pill { padding-right: 0.6rem; }
}

/* =====================================================================
   Thema „futur“ – dunkel, leuchtend, gläsern. Aktiv mit <html class="theme-futur">
   (content/site.json → "theme"). Alles andere oben bleibt die Grundlage.
   ===================================================================== */
html.theme-futur {
  --bg: #05070a;
  --bg-alt: #080b10;
  --surface: rgba(255, 255, 255, 0.035);
  --text: #eef2f5;
  --text-muted: #8b95a1;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ink: #eef2f5;
  --accent: #3ddc97;
  --accent-text: #5ef0b0;
  --cyan: #38d6f5;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  color-scheme: dark;
}
html.theme-futur body { background: var(--bg); color: var(--text); }
html.theme-futur ::selection { background: rgba(61, 220, 151, 0.35); color: #fff; }
html.theme-futur a:hover { color: var(--accent-text); }
html.theme-futur :focus-visible { outline-color: var(--accent); }
/* feine Körnung über allem */
html.theme-futur body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Lichtschein folgt der Maus (assets/js/main.js) */
.cursor-glow { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.theme-futur .cursor-glow {
    display: block; position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
    width: 44rem; height: 44rem; margin: -22rem 0 0 -22rem; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(61, 220, 151, 0.07), rgba(56, 214, 245, 0.03) 50%, transparent);
    transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0); transition: opacity 0.4s ease; will-change: transform;
  }
}
html.theme-futur main, html.theme-futur .site-footer { position: relative; z-index: 1; }

/* Überschriften: Verlauf wie leuchtendes Glas, Akzentwort mit wanderndem Schimmer */
html.theme-futur h1, html.theme-futur h2 {
  background: linear-gradient(180deg, #ffffff 25%, rgba(255, 255, 255, 0.58));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.theme-futur h1 em, html.theme-futur h2 em {
  background: linear-gradient(100deg, #3ddc97 0%, #38d6f5 30%, #b6ffe0 45%, #3ddc97 60%, #38d6f5 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }
html.theme-futur h3 { color: #f3f6f8; }

/* Knöpfe: leuchtender Hauptknopf, gläserner Nebenknopf */
html.theme-futur .button {
  background: linear-gradient(180deg, #5ef0b0, #2cc983); border: 1px solid rgba(255, 255, 255, 0.25); color: #04140c;
  box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.35), 0 10px 40px -8px rgba(61, 220, 151, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative; overflow: hidden;
}
html.theme-futur .button::after {   /* Lichtstreif fährt beim Überfahren durch */
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ease-out);
}
html.theme-futur .button:hover { background: linear-gradient(180deg, #7af5c2, #34d58d); color: #04140c; box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.5), 0 14px 50px -8px rgba(61, 220, 151, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
html.theme-futur .button:hover::after { left: 120%; }
html.theme-futur .button--ghost, html.theme-futur .button--outline {
  background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px);
}
html.theme-futur .button--ghost:hover, html.theme-futur .button--outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 30px -10px rgba(56, 214, 245, 0.5); }

/* Kopfzeile: dunkles Glas beim Scrollen */
@supports (backdrop-filter: blur(8px)) {
  html.theme-futur.is-scrolled .site-header { background: rgba(5, 7, 10, 0.6); backdrop-filter: blur(16px) saturate(160%); }
}
html.theme-futur.is-scrolled .site-header { background: rgba(5, 7, 10, 0.92); border-bottom-color: var(--border); }
html.theme-futur .site-nav a { color: #aab3bd; }
html.theme-futur .site-nav__list a:hover { color: #fff; }
html.theme-futur .logo:hover { color: var(--text); }
html.theme-futur .logo__mark { box-shadow: 0 0 18px rgba(61, 220, 151, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html.theme-futur .lang-switch a { color: #7d8793; }
html.theme-futur .lang-switch a[aria-current] { color: #fff; }
html.theme-futur .lang-switch__sep { color: #2a3038; }
@media (max-width: 55.99em) {
  html.theme-futur .site-nav { background: rgba(8, 11, 16, 0.97); border-bottom-color: var(--border); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
  html.theme-futur .site-nav__list a { border-bottom-color: var(--border); }
}

/* Abschnittsbeschriftung wie eine Anzeige im Head-up-Display */
html.theme-futur .kicker { color: var(--accent-text); }
html.theme-futur .kicker::before { background: linear-gradient(90deg, transparent, var(--accent)); width: 2.25rem; }
html.theme-futur .kicker::after { content: '//'; color: #3a434d; margin-left: -0.2rem; }
html.theme-futur .contact__card .kicker::after { content: ''; width: 2.25rem; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); margin: 0; }
html.theme-futur .section--alt { background: linear-gradient(180deg, #05070a, #070a0f 20%, #070a0f 80%, #05070a); }
html.theme-futur .section__lead, html.theme-futur .tile p, html.theme-futur .plans__note { color: var(--text-muted); }

/* ---------- Kopfbereich: Polarlicht, Perspektiv-Raster als Boden ---------- */
html.theme-futur .hero::before { opacity: 0; }
html.theme-futur .hero::after { background: radial-gradient(closest-side, rgba(61, 220, 151, 0.2), rgba(56, 214, 245, 0.06) 55%, transparent); top: 48%; }
.hero__fx { display: none; }
html.theme-futur .hero__fx { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
html.theme-futur .aurora { position: absolute; width: 60vw; height: 60vw; max-width: 60rem; max-height: 60rem; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
html.theme-futur .aurora--1 { left: -15vw; top: -30vw; background: radial-gradient(closest-side, rgba(61, 220, 151, 0.45), transparent); animation: drift-a 22s ease-in-out infinite alternate; }
html.theme-futur .aurora--2 { right: -18vw; top: -22vw; background: radial-gradient(closest-side, rgba(56, 120, 245, 0.4), rgba(56, 214, 245, 0.2) 50%, transparent); animation: drift-b 26s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(18vw, 10vw, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-16vw, 14vw, 0) scale(0.9); } }
html.theme-futur .hero__floor {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
  background-image: linear-gradient(rgba(94, 240, 176, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 240, 176, 0.35) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(72deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  opacity: 0.35; animation: floor-run 6s linear infinite;
}
@keyframes floor-run { to { background-position: 0 72px, 0 0; } }
html.theme-futur .pill { background: rgba(255, 255, 255, 0.04); border-color: var(--border-strong); color: #b3bcc6; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html.theme-futur .pill b { background: rgba(61, 220, 151, 0.14); color: var(--accent-text); box-shadow: 0 0 16px -4px rgba(61, 220, 151, 0.6); }
html.theme-futur .pill:hover { color: #fff; border-color: rgba(94, 240, 176, 0.5); }
html.theme-futur .hero__subline { color: #9aa4af; }

/* App-Fenster: dunkles Glas mit leuchtender Kante und HUD-Ecken */
html.theme-futur .window {
  background: linear-gradient(180deg, rgba(14, 19, 26, 0.85), rgba(8, 11, 16, 0.9)) padding-box,
              linear-gradient(180deg, rgba(94, 240, 176, 0.55), rgba(56, 214, 245, 0.15) 40%, rgba(255, 255, 255, 0.06)) border-box;
  border: 1px solid transparent; overflow: visible;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 60px 140px -50px rgba(61, 220, 151, 0.45), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}
html.theme-futur .window::before, html.theme-futur .window::after {
  content: ''; position: absolute; width: 1.4rem; height: 1.4rem; border: 1.5px solid rgba(94, 240, 176, 0.8); pointer-events: none;
}
html.theme-futur .window::before { left: -0.7rem; top: -0.7rem; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
html.theme-futur .window::after { right: -0.7rem; bottom: -0.7rem; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
html.theme-futur .window__bar { background: rgba(255, 255, 255, 0.02); border-bottom-color: var(--border); color: #7d8793; border-radius: 18px 18px 0 0; }
html.theme-futur .window__bar i { background: #1f262e; }
html.theme-futur .window .scene__grid { background: radial-gradient(circle, rgba(94, 240, 176, 0.22) 0.075em, transparent 0.09em) 0 0 / 1.5em 1.5em; }
html.theme-futur .module__app { color: #eef2f5; }
html.theme-futur .module__action { color: #8b95a1; }
html.theme-futur .module__body::before { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25) 55%, transparent); }
html.theme-futur .module__glow { opacity: 0.8; }
html.theme-futur .marquee__label { color: #6f7a86; }
html.theme-futur .marquee__list li { color: #5d6773; transition: color 0.3s ease, text-shadow 0.3s ease; }
html.theme-futur .marquee__list li:hover { color: #fff; text-shadow: 0 0 20px rgba(94, 240, 176, 0.6); }

/* ---------- Problem ---------- */
html.theme-futur.words-ready .problem__text .w { color: #6b7682; }
html.theme-futur.words-ready .problem__text .w.is-lit { color: #eef2f5; text-shadow: 0 0 24px rgba(94, 240, 176, 0.15); }
html.theme-futur .problem__text { color: #eef2f5; }

/* ---------- Kacheln und Preiskarten: Glas mit leuchtender Kante ---------- */
html.theme-futur .tile, html.theme-futur .plan {
  background: var(--glass); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}
html.theme-futur .tile::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(94, 240, 176, 0.14), transparent 45%); }
html.theme-futur .tile::after {    /* Kante leuchtet dort, wo die Maus ist */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(94, 240, 176, 0.9), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.theme-futur .tile:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 40px 80px -40px rgba(61, 220, 151, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html.theme-futur .tile:hover::after { opacity: 1; }
html.theme-futur .tile__icon { background: rgba(94, 240, 176, 0.08); border-color: rgba(94, 240, 176, 0.25); color: var(--accent-text); box-shadow: 0 0 24px -6px rgba(61, 220, 151, 0.6); }
html.theme-futur .stat { color: #fff !important; text-shadow: 0 0 40px rgba(94, 240, 176, 0.35); }
html.theme-futur .log { background: rgba(0, 0, 0, 0.4); border-color: var(--border); color: #b7c0c9; }
html.theme-futur .log__row span { color: #4f5a66; }
html.theme-futur .log__row b { color: var(--accent-text); text-shadow: 0 0 10px rgba(94, 240, 176, 0.7); }
html.theme-futur .cal__d { background: rgba(94, 240, 176, 0.14); color: #9ff0cb; box-shadow: inset 0 0 0 1px rgba(94, 240, 176, 0.18); }
html.theme-futur .cal__d.is-fixed { background: #f5c26b; color: #2a1c04; box-shadow: 0 0 14px -2px rgba(245, 194, 107, 0.8); }
html.theme-futur .cal__legend i { background: rgba(94, 240, 176, 0.3); border-color: rgba(94, 240, 176, 0.5); }
html.theme-futur .cal__legend i.is-fixed { background: #f5c26b; border-color: #f5c26b; }
html.theme-futur .cal__month, html.theme-futur .cal__grid b { color: #8a949e; }

html.theme-futur .plan { color: var(--text); }
html.theme-futur .plan:hover { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 40px 80px -40px rgba(61, 220, 151, 0.35); }
html.theme-futur .plan--highlight {
  background: linear-gradient(180deg, rgba(20, 40, 32, 0.9), rgba(8, 14, 12, 0.92)) padding-box,
              conic-gradient(from var(--angle, 0deg), #3ddc97, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.08) 50%, #38d6f5 75%, #3ddc97) border-box;
  border: 1px solid transparent; box-shadow: 0 0 80px -30px rgba(61, 220, 151, 0.6);
}
html.theme-futur .plan__name { color: #7d8793; }
html.theme-futur .plan__badge { background: var(--accent); color: #04140c; box-shadow: 0 0 20px -4px rgba(61, 220, 151, 0.8); }
html.theme-futur .plan__amount { color: #fff; }
html.theme-futur .plan__features div { border-top-color: var(--border); }
html.theme-futur .plan__features dd { color: #e3e8ec; }

/* ---------- Ablauf ---------- */
html.theme-futur .steps::before { background: var(--border-strong); }
html.theme-futur .steps::after { background: linear-gradient(90deg, #3ddc97, #38d6f5); box-shadow: 0 0 16px rgba(61, 220, 151, 0.8); }
html.theme-futur .step { border-top-color: var(--border-strong); }
html.theme-futur .step__number::before { background: var(--bg); border-color: #3a434d; }
html.theme-futur .step.is-active .step__number::before { background: #5ef0b0; border-color: #5ef0b0; box-shadow: 0 0 0 5px rgba(61, 220, 151, 0.18), 0 0 18px rgba(61, 220, 151, 0.9); }
html.theme-futur .step__number { color: #6f7a86; }
html.theme-futur .step.is-active .step__number { color: var(--accent-text); }
html.theme-futur .step p { color: var(--text-muted); }

/* ---------- Über mich / Kontakt / Fußzeile ---------- */
html.theme-futur .about__text p { color: #c9d0d7; }
html.theme-futur .contact__card {
  background: radial-gradient(70% 90% at 50% 0%, rgba(61, 220, 151, 0.14), transparent 70%), var(--glass);
  border-color: var(--border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.theme-futur .contact__card::before { background: radial-gradient(closest-side, rgba(56, 214, 245, 0.12), transparent); }
html.theme-futur .contact__text { color: var(--text-muted); }
html.theme-futur .contact__address a { color: #7d8793; }
html.theme-futur .site-footer { border-top-color: var(--border); color: #6f7a86; }
html.theme-futur .site-footer a { color: #8b95a1; }

/* Unterseiten (Impressum, Datenschutz, Anwendungsfälle) */
html.theme-futur .legal, html.theme-futur .usecase { color: #c9d0d7; }
html.theme-futur .legal h1, html.theme-futur .usecase h1, html.theme-futur .page-title { background: none; color: #fff; }
html.theme-futur .placeholder-note { background: rgba(255, 255, 255, 0.04); }
html.theme-futur .flow__node { background: var(--bg); border-color: #c9d0d7; }
html.theme-futur .flow--vertical { background: var(--glass); }
html.theme-futur .card { background: var(--glass); border-color: var(--border); }
html.theme-futur .card p { color: var(--text-muted); }
/* Überschrift im Kopfbereich ist in einzelne Wörter zerlegt: Verlauf pro Wort setzen (sonst unsichtbar) */
html.theme-futur h1[data-split] { background: none; color: #fff; text-shadow: 0 0 60px rgba(94, 240, 176, 0.18); }
html.theme-futur h1[data-split] .sw { background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.62)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.theme-futur h1[data-split] em { background: none; animation: none; text-shadow: 0 0 40px rgba(61, 220, 151, 0.35); }
html.theme-futur h1[data-split] em .sw { background: linear-gradient(100deg, #3ddc97 0%, #38d6f5 35%, #b6ffe0 50%, #3ddc97 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@media (prefers-reduced-motion: no-preference) { html.theme-futur.split-ready h1[data-split] em .sw { animation: word-in 1s var(--ease-out) calc(var(--i) * 70ms + 0.1s) forwards, shimmer 7s linear infinite; } }
@media (max-width: 43.99em) { .window .scene { height: auto; } }
html.theme-futur .intro, html.theme-futur.is-intro .intro { background: #05070a; }

/* ---------- Kopfzeile neu: schwebende Glasleiste, eigenes Zeichen, ruhige Wortmarke ---------- */
.nav-cta { display: none; }
.button--small { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: 0.875rem; }
.logo { display: inline-flex; align-items: center; gap: 0.7rem; }
.logo__mark { width: 1.6rem; height: 1.6rem; flex: none; color: var(--text); box-shadow: none; background: none; border-radius: 0; transition: transform 0.5s var(--ease-out); }
.logo:hover .logo__mark { transform: rotate(90deg); }
.logo__name { font-family: var(--font); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.3em; line-height: 1; margin-right: -0.3em; }
.logo__four { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.45em; letter-spacing: 0; margin-right: 0.04em; color: var(--accent-text); vertical-align: -0.08em; }
.logo__tagline { display: none; }

html.theme-futur .site-header { top: 0.75rem; left: 0; right: 0; height: auto; background: transparent !important; border: 0 !important; backdrop-filter: none !important; }
html.theme-futur .site-header__inner {
  height: 3.6rem; max-width: 70rem; padding: 0 0.5rem 0 1.25rem;
  border: 1px solid var(--border); border-radius: 18px;
  background: rgba(10, 13, 18, 0.55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.9);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
html.theme-futur.is-scrolled .site-header__inner { background: rgba(8, 11, 16, 0.9); border-color: var(--border-strong); }
html.theme-futur .logo__mark { color: #dfe6ec; filter: drop-shadow(0 0 10px rgba(61, 220, 151, 0.45)); }
html.theme-futur .logo__name { color: #f3f6f8; }
html.theme-futur .logo__four { background: linear-gradient(120deg, #7af5c2, #38d6f5); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
html.theme-futur .site-nav { gap: 1.25rem; }
html.theme-futur .site-nav__list { gap: 0.25rem; }
html.theme-futur .site-nav__list a { display: block; padding: 0.45rem 0.8rem; border-radius: 10px; font-size: 0.875rem; transition: background-color 0.2s ease, color 0.2s ease; }
html.theme-futur .site-nav__list a::after { display: none; }
html.theme-futur .site-nav__list a:hover { background: rgba(255, 255, 255, 0.06); }
html.theme-futur .lang-switch { padding-left: 1rem; border-left: 1px solid var(--border); }
html.theme-futur main { padding-top: 5rem; }
@media (min-width: 56em) { html.theme-futur .nav-cta { display: inline-flex; } }
@media (max-width: 55.99em) {
  html.theme-futur .site-header { left: 0.75rem; right: 0.75rem; }
  html.theme-futur .site-header__inner { padding: 0 0.4rem 0 1rem; }
  html.theme-futur .site-nav { inset: 4.9rem 0.75rem auto 0.75rem; border: 1px solid var(--border); border-radius: 18px; }
  html.theme-futur .site-nav__list a { padding: 0.9rem 0.25rem; border-radius: 0; }
  html.theme-futur .lang-switch { border-left: 0; padding-left: 0; }
}
html.theme-futur .hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
.logo { flex-direction: row; }
html.theme-futur .logo__mark { box-shadow: none; }
html.theme-futur .site-nav a.nav-cta, html.theme-futur .site-nav a.nav-cta:hover { color: #04140c; }
/* Kopfbereich reicht unter die schwebende Leiste */
html.theme-futur main { padding-top: 0; }
html.theme-futur .hero { padding-top: clamp(6.5rem, 10vw, 8rem); }
/* Wortmarke: „4“ in derselben Schrift wie ELEMENTS (nur farbig abgesetzt) */
.logo__four { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 1em; vertical-align: 0; margin-right: 0; }
.logo__four, html.theme-futur .logo__four { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; padding-right: 0; }
.logo__four { letter-spacing: inherit; }

/* ---------- Hell/Dunkel-Schalter ---------- */
.theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease-out);
}
.theme-toggle:hover { background: rgba(127, 127, 127, 0.1); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out), opacity 0.3s ease; }
.theme-toggle__moon { fill: currentColor !important; stroke: none !important; }
html.theme-futur .theme-toggle__moon, html:not(.theme-futur) .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
html.theme-futur .theme-toggle__sun { color: #f5d06b; }
/* Weicher Übergang beim Umschalten */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease !important;
}
@media (max-width: 55.99em) {
  .theme-toggle { margin-left: auto; margin-right: 0.5rem; }
}

/* Helles Thema: dieselbe schwebende Leiste, als helles Glas */
html.theme-hell .site-header { top: 0.75rem; height: auto; background: transparent !important; border: 0 !important; backdrop-filter: none !important; }
html.theme-hell .site-header__inner {
  height: 3.6rem; max-width: 70rem; padding: 0 0.5rem 0 1.25rem;
  border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 40px -30px rgba(17, 18, 20, 0.35);
}
html.theme-hell.is-scrolled .site-header__inner { background: rgba(255, 255, 255, 0.9); border-color: var(--border-strong); }
html.theme-hell .logo__mark { color: #1c1f23; }
html.theme-hell .site-nav { gap: 1.25rem; }
html.theme-hell .site-nav__list { gap: 0.25rem; }
html.theme-hell .site-nav__list a { display: block; padding: 0.45rem 0.8rem; border-radius: 10px; font-size: 0.875rem; }
html.theme-hell .site-nav__list a::after { display: none; }
html.theme-hell .site-nav__list a:hover { background: rgba(17, 18, 20, 0.05); }
html.theme-hell .lang-switch { padding-left: 1rem; border-left: 1px solid var(--border); }
html.theme-hell .site-nav a.nav-cta, html.theme-hell .site-nav a.nav-cta:hover { color: #fbfaf8; }
html.theme-hell main { padding-top: 0; }
html.theme-hell .hero { padding-top: clamp(6.5rem, 10vw, 8rem); }
@media (min-width: 56em) { html.theme-hell .nav-cta { display: inline-flex; } }
@media (max-width: 55.99em) {
  html.theme-hell .site-header { left: 0.75rem; right: 0.75rem; }
  html.theme-hell .site-header__inner { padding: 0 0.4rem 0 1rem; }
  html.theme-hell .site-nav { inset: 4.9rem 0.75rem auto 0.75rem; border: 1px solid var(--border); border-radius: 18px; }
  html.theme-hell .lang-switch { border-left: 0; padding-left: 0; }
}
/* Unterseiten haben keinen Kopfbereich: Abstand unter der schwebenden Leiste */
html.theme-hell main > .section:first-child, html.theme-futur main > .section:first-child { padding-top: calc(var(--section-y) + 4rem); }
.theme-toggle { margin-left: 0.5rem; }
@media (max-width: 55.99em) {
  .logo { order: 0; } .theme-toggle { order: 1; margin-left: auto; margin-right: 0.35rem; } .menu-toggle { order: 2; }
}

/* Leistungs-Kacheln: Schlagworte und Anfrage-Link */
.tile { display: flex; flex-direction: column; }
.tile > p { flex: 0 0 auto; }
.tile__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 1.5rem; }
.tile__tags li { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; color: var(--text-muted); background: var(--bg-alt); }
.tile__cta { margin-top: auto; padding-top: 1.5rem; font-weight: 500; text-decoration: none; color: var(--accent-text); }
.tile__cta span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.tile__cta:hover span { transform: translateX(3px); }
.tile--accent { border-color: rgba(61, 220, 151, 0.45); }
html.theme-futur .tile__tags li { background: rgba(255, 255, 255, 0.04); border-color: var(--border); color: #aab3bd; }
html.theme-futur .tile--accent { background: linear-gradient(180deg, rgba(61, 220, 151, 0.1), rgba(255, 255, 255, 0.015)); border-color: rgba(94, 240, 176, 0.35); }