/* ==========================================================================
   sections.css — Abschnitte, die nach main.css geladen werden.
   Bewusst eigene Datei: main.css wird parallel gepflegt, hier stehen die
   Komponenten der neuen Startseiten-Abschnitte ohne Konfliktgefahr.
   ========================================================================== */

/* ── Integrationen — Gruppen-Karten in zwei Laufbändern ────── */
.intg { padding-block: clamp(72px, 9vw, 128px); overflow: hidden; }
.intg__head { max-width: 720px; margin-inline: auto; text-align: center; }
.intg__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 20px 0 20px;
}
.intg__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); margin-inline: auto; }

.intg__rails {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.intg-row { overflow: hidden; }
.intg-track {
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.intg-track--1 { animation: intg-links 64s linear infinite; }
.intg-track--2 { animation: intg-rechts 72s linear infinite; }
@keyframes intg-links  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes intg-rechts { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
.intg__rails:hover .intg-track { animation-play-state: paused; }

.intg-card {
  flex: 0 0 auto;
  display: grid;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.45) 100%);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.intg-card:hover { border-color: var(--line-2); background: #fff; }
.intg-card__logos { display: flex; gap: 10px; }
.intg-card__logo {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.intg-card__logo img { width: 26px; height: 26px; object-fit: contain; }
.intg-card__text { font-size: 14px; color: var(--ink-2); white-space: nowrap; }

.intg__foot { margin-top: clamp(32px, 4vw, 48px); }
.intg__note { font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 76ch; margin-inline: auto; text-align: center; }

@media (max-width: 640px) {
  .intg-card { padding: 14px 16px; gap: 10px; }
  .intg-card__logo { width: 40px; height: 40px; border-radius: 10px; }
  .intg-card__logo img { width: 22px; height: 22px; }
  .intg-card__text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .intg-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .intg-card[aria-hidden="true"] { display: none; }
  .intg__rails { -webkit-mask-image: none; mask-image: none; }
}

/* ── Betreuung & Förderung ─────────────────────────────────── */
.care { padding-block: clamp(72px, 9vw, 128px); }
.care__head { max-width: 660px; margin-bottom: clamp(40px, 5vw, 64px); }
.care__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 20px 0 20px;
}
.care__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.care__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.care__card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 100%);
}
.care__card--accent {
  border-color: rgba(34, 199, 214, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(238, 233, 228, 0.75) 100%);
}
.care__kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.care__card--accent .care__kicker { color: var(--accent-ink); }
.care__h3 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.care__card p { color: var(--ink-2); line-height: 1.65; max-width: 48ch; }
.care__card p + p { margin-top: 14px; }
.care__list { list-style: none; margin: 18px 0 0; padding: 0; }
.care__list li {
  position: relative;
  padding-left: 22px;
  margin-top: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 46ch;
}
.care__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.care__note {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 76ch;
}
@media (min-width: 900px) { .care__grid { grid-template-columns: 1fr 1fr; } }


/* ── System Modules: neun Bausteine in drei Wirkungsgruppen ── */
.system-modules { margin-top: clamp(48px, 6vw, 80px); }

.module-group + .module-group {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.module-group__head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.module-group__nr {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.module-group__name {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.module-group__name .dot { font-style: normal; color: var(--accent); }
.module-group__lead {
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 56ch;
}
@media (min-width: 900px) {
  .module-group__head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: baseline;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .module-group__nr { grid-column: 1; }
  .module-group__name { grid-column: 1; grid-row: 2; }
  .module-group__lead { grid-column: 2; grid-row: 2; }
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.module-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.module-card:hover {
  background: #fff;
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.module-card__icon {
  width: 26px;
  height: 26px;
  color: var(--accent-ink);
  margin-bottom: 6px;
}
.module-card__name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.module-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: none;
}
@media (max-width: 900px) { .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modules-grid { grid-template-columns: minmax(0, 1fr); } }


/* ── Bausteine: Karte als Schalter + Detailfenster ─────────── */
.module-card { padding: 0; overflow: hidden; }
.module-card__btn {
  display: grid;
  align-content: start;
  gap: 10px;
  width: 100%;
  padding: clamp(20px, 2.2vw, 30px);
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.module-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--accent-ink);
  transition: gap var(--dur-fast) var(--ease);
}
.module-card:hover .module-card__more { gap: 10px; }
.module-card__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 18px; }

.modul-modal {
  /* main.css setzt global margin:0 — das hebelt die native Zentrierung von <dialog> aus.
     position:fixed, weil das UA-Stylesheet dialog sonst absolut zur Seite positioniert. */
  position: fixed;
  margin: auto;
  inset: 0;
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: clamp(26px, 3.4vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--canvas);
  color: var(--ink);
  overflow: auto;
}
.modul-modal::backdrop { background: rgba(25, 25, 28, 0.45); backdrop-filter: blur(3px); }
.modul-modal__close-form { position: absolute; top: 14px; right: 16px; margin: 0; }
.modul-modal__close {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.modul-modal__close:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.modul-modal__kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.modul-modal__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.modul-modal__lead { font-size: var(--fs-lead); color: var(--ink-2); margin-bottom: 14px; }
.modul-modal__text { color: var(--ink-2); line-height: 1.65; }
.modul-modal__cols {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .modul-modal__cols { grid-template-columns: 1.15fr 0.85fr; } }
.modul-modal__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.modul-modal__steps { counter-reset: ms; list-style: none; margin: 0; padding: 0; }
.modul-modal__steps li {
  counter-increment: ms;
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.modul-modal__steps li::before {
  content: counter(ms);
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 12px;
  color: var(--accent-ink);
}
.modul-modal__wins { list-style: none; margin: 0; padding: 0; }
.modul-modal__wins li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.modul-modal__wins li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.modul-modal__cta { margin-top: clamp(24px, 3vw, 36px); }
@media (prefers-reduced-motion: no-preference) {
  .modul-modal[open] { animation: modal-in 0.28s var(--ease); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }
}

/* ── Hero-Stationen: klickbare Leiste statt Autoplay ───────── */
.hstabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(8px, 1vw, 14px);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
}
.hstabs::-webkit-scrollbar { display: none; }
.hstab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hstab svg { width: 17px; height: 17px; opacity: 0.75; }
.hstab:hover { color: var(--ink-2); }
.hstab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.hstab[aria-selected="true"] svg { opacity: 1; color: var(--accent-ink); }
.hstab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 6px; }

.hscene__split {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.6vw, 36px);
  align-items: center;
}
@media (min-width: 900px) { .hscene__split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }

.hspanels { position: relative; }
.hspanel { display: none; }
.hspanel[data-active] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hspanel[data-active] { animation: hspanel-in 0.32s var(--ease); }
  @keyframes hspanel-in { from { opacity: 0; transform: translateY(6px); } }
}
.hspanel__step {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.hspanel__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 18ch;
}
.hspanel__list { list-style: none; margin: 0 0 26px; padding: 0; }
.hspanel__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.hspanel__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hspanel__cta { font-size: 14px; padding: 12px 20px; }

/* Die Bühne trägt jetzt zwei Spalten — Rahmen ruhiger, Höhe frei */
.hscene__stage { padding: 0; }
.hscene__frames { position: relative; min-height: clamp(280px, 30vw, 420px); }
/* Bühne flacher halten und das Visual die Spalte füllen lassen */
.hscene__frames { min-height: clamp(230px, 22vw, 320px); }
.hscene__frame { width: 100%; }
.hscene__frame > .hs-card { width: 100%; max-width: none; }
@media (max-width: 899px) {
  .hscene__split { padding: clamp(16px, 4vw, 24px); }
  .hspanel__title { font-size: clamp(21px, 5.4vw, 28px); }
  .hscene__frames { min-height: 250px; }
}
/* heroscene.css gibt der Bühne 16:9 — mit Tab-Leiste und Textspalte
   bestimmt jetzt der Inhalt die Höhe. */
.hscene__stage { aspect-ratio: auto; }
/* Whereby liegt nur als 32-px-Favicon vor — klein halten, sonst unscharf. */
.logomarquee__item--small img { max-height: 38px; max-width: 38px; }

/* Station "Website" - eine Praxisseite auf Rechner und Telefon.
   Alle Groessen in cqw, damit das Mockup mit der Buehne mitskaliert. */
.hs-devices { display: flex; align-items: flex-end; gap: clamp(10px, 1.4cqw, 20px); }
.hs-dev {
  background: #fff;
  border: 1px solid rgba(25, 25, 28, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1.4cqw 3cqw -1.8cqw rgba(25, 25, 28, 0.3);
}
.hs-dev--desk { flex: 1 1 auto; }
.hs-dev--phone { flex: 0 0 clamp(74px, 21%, 118px); border-radius: 16px; }

.hs-dev__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.75cqw 1cqw;
  border-bottom: 1px solid rgba(25, 25, 28, 0.08);
  background: #f6f4f2;
}
.hs-dev__bar > span { width: 0.55cqw; height: 0.55cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: rgba(25, 25, 28, 0.14); }
.hs-dev__url {
  margin-left: 0.8cqw;
  padding: 0.24cqw 0.9cqw;
  border-radius: 99px;
  background: #fff;
  border: 1px solid rgba(25, 25, 28, 0.07);
  font-style: normal;
  font-size: clamp(6px, 0.82cqw, 10px);
  color: var(--muted);
}
.hs-dev__notch { height: 1.4cqw; min-height: 10px; display: grid; place-items: center; background: #fff; }
.hs-dev__notch::after { content: ""; width: 28%; height: 3px; border-radius: 99px; background: rgba(25, 25, 28, 0.14); }

.hs-dev__page { padding: 1.1cqw 1.3cqw 1.4cqw; }

.hs-dev__nav { display: flex; align-items: center; gap: 0.8cqw; padding-bottom: 1cqw; border-bottom: 1px solid rgba(25, 25, 28, 0.06); }
.hs-dev__nav b { font-family: var(--serif); font-style: normal; font-size: clamp(8px, 1.1cqw, 14px); font-weight: 400; }
.hs-dev__nav i { width: 2.4cqw; height: 0.42cqw; min-height: 3px; border-radius: 99px; background: rgba(25, 25, 28, 0.1); }
.hs-dev__nav i:first-of-type { margin-left: auto; }
.hs-dev__pill { padding: 0.3cqw 0.8cqw; border-radius: 99px; background: var(--accent); color: #fff; font-size: clamp(6px, 0.78cqw, 9px); }
.hs-dev__nav--s { padding-bottom: 0.8cqw; }
.hs-dev__burger { margin-left: auto; width: 1.4cqw; min-width: 8px; height: 0.36cqw; min-height: 2px; border-radius: 2px; background: rgba(25, 25, 28, 0.35); box-shadow: 0 0.6cqw 0 rgba(25, 25, 28, 0.35), 0 -0.6cqw 0 rgba(25, 25, 28, 0.35); }

.hs-dev__hero { display: grid; grid-template-columns: 1.1fr minmax(0, 1fr); gap: 1.2cqw; padding-block: 1.3cqw; align-items: center; }
.hs-dev__eyebrow { font-size: clamp(5.5px, 0.72cqw, 9px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.hs-dev__h {
  margin-top: 0.5cqw;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(11px, 1.7cqw, 23px);
  line-height: 1.05;
}
.hs-dev__h--s { margin-top: 0.8cqw; font-size: clamp(7px, 1cqw, 12px); }
.hs-dev__sub { margin-top: 0.45cqw; font-size: clamp(6px, 0.8cqw, 10px); color: var(--muted); line-height: 1.4; }
.hs-dev__btn {
  display: inline-block;
  margin-top: 0.9cqw;
  padding: 0.5cqw 1.1cqw;
  border-radius: 99px;
  background: var(--ink);
  color: var(--canvas);
  font-size: clamp(6px, 0.86cqw, 11px);
}
.hs-dev__btn--s { margin-top: 0.7cqw; padding: 0.45cqw 0.9cqw; font-size: clamp(5.5px, 0.7cqw, 8px); }

/* Angedeutetes Bild: warme Flaeche mit Horizont statt Platzhaltergrau */
.hs-dev__shot {
  align-self: stretch;
  min-height: 5.2cqw;
  border-radius: 8px;
  background: linear-gradient(180deg, #dfe8ee 0%, #e9eef1 46%, #cfd8c9 47%, #bcc7b4 100%);
}
.hs-dev__shot--s { min-height: 3.4cqw; margin-top: 0.8cqw; border-radius: 6px; }

.hs-dev__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8cqw; padding-top: 1.1cqw; border-top: 1px solid rgba(25, 25, 28, 0.06); }
.hs-dev__cards--s { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.9cqw; }
.hs-dev__cards span { display: grid; gap: 0.4cqw; padding: 0.7cqw; border: 1px solid rgba(25, 25, 28, 0.07); border-radius: 6px; }
.hs-dev__cards i { width: 1.5cqw; min-width: 8px; height: 1.5cqw; min-height: 8px; border-radius: 50%; background: rgba(34, 199, 214, 0.22); }
.hs-dev__cards b { height: 0.42cqw; min-height: 3px; border-radius: 99px; background: rgba(25, 25, 28, 0.1); }


/* Tableiste füllt die volle Breite — jede Station gleich breit und lesbar */
@media (min-width: 940px) {
  .hstabs { padding: 0; overflow: visible; }
  .hstab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 6px;
    gap: 7px;
  }
  .hstab > span { overflow: hidden; text-overflow: ellipsis; }
}

/* Verbunden-Grafik bleibt in ihrer Spalte */
.hscene__frame > .hs-orbit { width: 100%; }
.hscene__frame > .hs-orbit svg { overflow: hidden; }

/* Verbunden auf schmalen Schirmen: lesbare Kacheln statt geschrumpfter Grafik */
.hs-orblist { display: none; }
@media (max-width: 760px) {
  .hscene__frame > .hs-orbit > svg { display: none; }
  .hs-orblist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    list-style: none;
  }
  .hs-orblist li {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(25,25,28,0.08);
    line-height: 1.3;
  }
  .hs-orblist strong { display: block; font-size: 13px; font-weight: 500; }
  .hs-orblist span { font-size: 11px; color: var(--muted); }
  .hs-orblist li:last-of-type { grid-column: 1 / -1; }
  .hs-orblist li.hs-orblist__hub { grid-column: 1 / -1; background: #19191C; border-color: #19191C; }
  .hs-orblist li.hs-orblist__hub strong { font-family: var(--serif); font-style: normal; font-size: 17px; color: #F3F1F0; }
  .hs-orblist li.hs-orblist__hub span { color: rgba(243, 241, 240, 0.7); }
}

/* ── Der Ablauf als Trommel ────────────────────────────────────────────────
   Die Sektion ist hoch, die Bühne steht. Beim Scrollen dreht sich das Rad. */
.drum { position: relative; --stationen: 8; height: calc(100vh + var(--stationen) * 52vh); }
.drum__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.drum__count {
  position: absolute;
  top: clamp(72px, 12vh, 130px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.drum__count b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }

.drum__words {
  position: relative;
  width: min(100%, 40rem);
  height: clamp(320px, 48vh, 440px);
  list-style: none;
  transform-style: preserve-3d;
}
.drum__word {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50% -170px;
  backface-visibility: hidden;
  text-align: center;
  will-change: transform, opacity;
}
.drum__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto clamp(16px, 2.2vh, 24px);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.drum__ic svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drum__ic svg .acc { stroke: var(--accent); }
.drum__title {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.drum__title .dot { color: var(--accent); }
.drum__desc {
  margin: clamp(12px, 1.8vh, 20px) auto 0;
  max-width: 36ch;
  color: var(--ink);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
}
.drum__points {
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  padding-top: clamp(14px, 2vh, 20px);
  max-width: 46ch;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  list-style: none;
  text-align: left;
}
.drum__points li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: clamp(13.5px, 1.2vw, 15px);
  line-height: 1.5;
}
.drum__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.drum__dots {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  list-style: none;
}
.drum__dot {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.drum__dot.is-on { opacity: 1; color: var(--accent); }


@media (max-width: 700px) {
  .drum__dots { display: none; }
  .drum__words { padding-inline: 8px; }
  .drum__points { max-width: 100%; }
  .drum { height: calc(100vh + var(--stationen) * 62vh); }
}

/* Ohne Bewegung und ohne JS: schlichte Liste statt Rad */
.drum.is-static,
html.no-js .drum { height: auto; }
.drum.is-static .drum__stage,
html.no-js .drum .drum__stage {
  position: static;
  height: auto;
  display: block;
  perspective: none;
  padding: clamp(24px, 5vh, 56px) 0;
}
.drum.is-static .drum__count,
html.no-js .drum .drum__count { display: none; }
.drum.is-static .drum__words,
html.no-js .drum .drum__words {
  display: grid;
  gap: clamp(36px, 6vh, 64px);
  width: 100%;
  height: auto;
}
.drum.is-static .drum__word,
html.no-js .drum .drum__word {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
}
.drum.is-static .drum__title,
html.no-js .drum .drum__title { font-size: clamp(34px, 5vw, 54px); }
.drum.is-static .drum__dots,
html.no-js .drum .drum__dots { display: none; }

/* Marken ohne verfügbare Logodatei laufen als Schriftzug mit */
.logomarquee__wort {
  display: block;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.72;
}

@media (max-width: 640px) {
  .hero__bg {
    height: clamp(340px, 46vh, 460px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 94%);
  }
  .hero__bg img { object-position: 58% 38%; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(243, 241, 240, 0.86) 0%, rgba(243, 241, 240, 0.7) 40%, rgba(243, 241, 240, 0.3) 100%);
  }
}


/* Ohne Kopfzeile braucht die Ueberschrift oben etwas mehr Luft */
@media (min-width: 900px) {
  .hero { padding-top: 196px; }
}

/* Whereby fuehrt eine Serifen-Wortmarke — bis die Originaldatei da ist,
   kommt die Hausserife dem Schriftbild am naechsten. */
.logomarquee__wort--serif {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: -0.005em;
  opacity: 0.8;
}

/* Marken ohne Logofreigabe laufen als Schriftzug in der Kachel mit */
.intg-card__logo--wort {
  display: grid;
  place-items: center;
  padding-inline: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
/* Der Hinweis steht jetzt ueber der Logowand, nicht mehr im Fuss —
   dort liegt er in derselben Blickachse wie die Marken. */
.intg__foot--oben { margin-bottom: clamp(28px, 3.4vw, 44px); }
.intg__foot--oben .intg__note { margin-inline: auto; text-align: center; max-width: 74ch; }

/* ── Logoband: jede Marke traegt ihre Rolle ───────────────────────────────
   Ohne die Rollenzeile liest sich eine gemischte Reihe wie eine Partnerschafts-
   behauptung — genau der Punkt, den § 5 Abs. 2 Nr. 3 UWG adressiert. */
.logomarquee__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.logomarquee__link { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logomarquee__bild {
  display: grid;
  place-items: center;
  /* Muss die hoechste Variante fassen: --tall 96px, --mark 74px, --dark 60px plus
     Innenabstand. Sonst laeuft die Rollenzeile in die Kachel. */
  min-height: 98px;
}
.logomarquee__rolle {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.75;
}
.logomarquee__note {
  width: min(62ch, calc(100% - 2 * var(--gutter)));
  margin: clamp(36px, 4.5vw, 60px) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── Modulkarten im Projektraster ─────────────────────────────────────────
   Gleiche Geometrie wie die Kundenprojekte, aber ohne Link und mit einer
   Kennzeichnung: was laeuft heute, was steckt in jedem System, was entsteht noch. */
.project-card--modul {
  display: grid;
  grid-template-rows: 1fr auto auto;
  aspect-ratio: 4 / 5;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--canvas-2);
  cursor: default;
}
.pm-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(160deg, #faf8f5 0%, #efe9e2 100%);
  container-type: inline-size;
}
.project-card--modul .project-card__label {
  position: static;
  margin-top: 20px;
  padding: 0;
  background: none;
  color: var(--ink);
}
.project-card__note {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-card--modul[data-ton="live"] .project-card__note { color: #4d7a41; }
.project-card--modul[data-ton="bau"] .project-card__note { color: var(--cta-text); }
.project-card__text { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* Nachbauten in den Karten — bewusst schlicht, es sind keine Bildschirmfotos */
.pm { width: 84cqw; font-size: clamp(8px, 3.1cqw, 13px); color: var(--ink); }
.pm__bar { display: flex; gap: 4px; padding: 0 0 10px; }
.pm__bar span { width: 5px; height: 5px; border-radius: 50%; background: rgba(25,25,28,0.15); }
.pm__body { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.pm__kicker { font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pm__days, .pm__slots { display: flex; gap: 4px; }
.pm__days span, .pm__slots span {
  flex: 1; padding: 5px 0; text-align: center; border-radius: 6px;
  border: 1px solid var(--line); font-size: 0.84em;
}
.pm__days .is-on, .pm__slots .is-on { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.pm__cta { justify-self: start; margin-top: 2px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.84em; }

.pm--os { display: flex; gap: 8px; }
.pm__side { display: grid; gap: 6px; align-content: start; padding: 10px 8px; border-radius: 10px; background: var(--ink); }
.pm__side i { display: block; width: 14px; height: 3px; border-radius: 2px; background: rgba(243,241,240,0.55); }
.pm__side i:first-child { background: var(--accent); }
.pm__main { flex: 1; display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.pm__tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.pm__tiles span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 7px; background: var(--canvas); font-size: 0.72em; color: var(--muted); }
.pm__tiles b { font-family: var(--serif); font-style: normal; font-size: 1.7em; font-weight: 400; color: var(--ink); }
.pm__chart { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.pm__chart i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in oklab, var(--accent) 55%, transparent); }
.pm__chart i:last-child { background: var(--accent); }

.pm__zeile { display: flex; justify-content: space-between; font-size: 0.86em; color: var(--ink-2); }
.pm__zeile--summe { padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.pm__track { height: 4px; border-radius: 99px; background: var(--canvas-2); overflow: hidden; }
.pm__track i { display: block; width: 100%; height: 100%; background: #4d7a41; }
.pm__stamp { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(77,122,65,0.12); color: #3f6636; font-size: 0.78em; font-weight: 600; }

@media (max-width: 640px) {
  .project-card--modul { aspect-ratio: auto; }
  .pm-frame { min-height: 210px; }
}

/* ── Weingut-Karte: sieht aus wie ein Projekt, traegt aber keinen Link ────── */
.project-card--entwurf {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: default;
}

/* ── Unsichtbares nicht berechnen ─────────────────────────────────────────
   Die Laufbaender sind sehr breite Ebenen (bis 9200 px). Solange sie ausserhalb
   des Bildschirms liegen, kann der Browser Layout und Malen ueberspringen.
   contain-intrinsic-size gibt die erwartete Hoehe an, sonst springt das Layout. */
.logomarquee__viewport,
.intg-row {
  content-visibility: auto;
}
.logomarquee__viewport { contain-intrinsic-size: auto 150px; }
.intg-row { contain-intrinsic-size: auto 120px; }

/* Laufbaender pausieren, wenn der Besucher keine Bewegung will */
@media (prefers-reduced-motion: reduce) {
  .logomarquee__track,
  .intg-track { animation: none; }
}

/* Kopf der Systemsektion ohne Zierde: die Überschrift trägt allein. */
.system-intro__head { padding-top: 0; }
.system-intro__title { margin-top: 0; }

/* ── Die fünf Module ──────────────────────────────────────────────────────
   Loest Takte und Fließtextliste ab. Fünf Karten, je eine Zeile: in fünf
   Sekunden erfasst statt in zwei Minuten gelesen. */
.module { margin-top: clamp(52px, 6vw, 88px); }
.module__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.modul {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px) clamp(26px, 2.4vw, 32px);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in oklab, #fff 58%, var(--canvas));
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.modul:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); transform: translateY(-2px); }
.modul__kopf { display: flex; align-items: center; gap: 10px; }
.modul__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--accent);
  flex: 0 0 auto;
}
.modul__icon svg { width: 17px; height: 17px; }
.modul__name {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.modul__name b { color: var(--ink); font-weight: 600; }
.modul__titel {
  margin-top: 4px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.modul__satz { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.module__fuss {
  max-width: 62ch;
  margin: clamp(32px, 3.6vw, 46px) auto 0;
  text-align: center;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.6;
}

/* ── Aufwand: die drei Fragen vor dem Klick ───────────────────────────────
   Ohne Preis, aber mit Dauer und Zusagen — sonst landet genau das im
   Erstgespräch und hält Leute vom Anfragen ab. */
.aufwand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  max-width: 960px;
  margin: clamp(36px, 4vw, 52px) auto 0;
  padding: clamp(24px, 2.6vw, 32px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.aufwand li {
  display: grid;
  gap: 4px;
  text-align: center;
  max-width: 30ch;
}
.aufwand b {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.1;
  color: var(--ink);
}
.aufwand span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ── Regelkreis ───────────────────────────────────────────────────────────
   Das Ziel steht in der Mitte, sechs Schritte laufen darum. Bewusst getrennt
   von den Kundenstationen — das eine ist unser Denkprozess, das andere sind
   Ergebnisse beim Kunden. */
.rk { margin-top: clamp(40px, 5vw, 72px); }
.rk__lead { margin-top: 18px; max-width: 56ch; margin-inline: auto; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.rk__bild { display: none; }
.rk__svg { width: 100%; max-width: 720px; height: auto; margin-inline: auto; display: block; overflow: visible; }

.rk__bogen { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.rk__spitze { fill: var(--accent); }
.rk__knoten circle {
  fill: color-mix(in oklab, #fff 62%, var(--canvas));
  stroke: var(--line-2);
  stroke-width: 1;
}
.rk__nr {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  fill: var(--accent-dark, var(--cta-text)); text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.rk__titel { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--ink); }
.rk__mitte { fill: var(--ink); }
.rk__mitte-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; fill: rgba(243,241,240,0.6); }
.rk__mitte-wert { font-family: var(--serif); font-style: normal; font-size: 25px; fill: var(--canvas); }

/* Laufendes Licht auf dem Ring — erklaert die Richtung, mehr nicht */
@media (prefers-reduced-motion: no-preference) {
  .rk__knoten circle { animation: rkPuls 12s linear infinite; }
  .rk__knoten[data-rk="1"] circle { animation-delay: -10s; }
  .rk__knoten[data-rk="2"] circle { animation-delay: -8s; }
  .rk__knoten[data-rk="3"] circle { animation-delay: -6s; }
  .rk__knoten[data-rk="4"] circle { animation-delay: -4s; }
  .rk__knoten[data-rk="5"] circle { animation-delay: -2s; }
  @keyframes rkPuls {
    0%, 12%  { stroke: var(--accent); stroke-width: 2; }
    22%, 100% { stroke: var(--line-2); stroke-width: 1; }
  }
}

/* Liste: auf schmalen Schirmen die einzige Darstellung, sonst versteckt */
.rk__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.rk__liste li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px;
  padding: 16px 0; border-top: 1px solid var(--line); text-align: left;
}
.rk__lnr { grid-row: 1 / 3; font-size: 13px; font-weight: 600; color: var(--accent-dark, var(--cta-text)); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rk__liste b { font-size: 16.5px; font-weight: 600; }
.rk__liste span:last-child { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

@media (min-width: 900px) {
  .rk__bild { display: block; }
  .rk__liste { display: none; }
}

/* ── Problem: sechs Inseln ohne Verbindung ────────────────────────────────
   Muss ohne gelesenen Text wirken. Die Kaesten stehen bewusst versetzt und
   ohne verbindende Linien — dieselbe Bildsprache kehrt bei den Signalen
   wieder, dort dann verbunden. */
.problem__titel { max-width: 20ch; margin-inline: auto; }
.problem__titel em { font-style: italic; color: var(--muted); }
.inseln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px, 2vw, 26px);
  max-width: 940px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: 0;
  list-style: none;
}
.insel {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px) 12px;
  border: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, #fff 40%, transparent);
}
/* Versatz, damit es nicht nach ordentlichem Raster aussieht */
.inseln .insel:nth-child(2) { transform: translateY(-14px); }
.inseln .insel:nth-child(4) { transform: translateY(12px); }
.inseln .insel:nth-child(5) { transform: translateY(-8px); }
.insel__icon { color: var(--muted); opacity: 0.75; }
.insel__icon svg { width: 24px; height: 24px; display: block; }
.insel__name { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.problem__schluss {
  max-width: 46ch;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.3;
  color: var(--ink);
}

/* ── Signale: dieselben Quellen, jetzt verbunden ──────────────────────────── */
.sig {
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: center;
}
.sig__quellen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.insel--sig {
  border-style: solid;
  border-color: var(--line-2);
  background: color-mix(in oklab, #fff 58%, transparent);
  transform: none !important;
  padding: 16px 10px;
}
.insel--sig .insel__icon { color: var(--accent); opacity: 1; }
.sig__kern {
  justify-self: center;
  display: grid;
  place-items: center;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
}
.sig__kern::before,
.sig__kern::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: clamp(18px, 2.4vw, 30px);
  background: var(--line-2);
}
.sig__kern::before { bottom: 100%; }
.sig__kern::after { top: 100%; }
.sig__erkennt { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sig__erkennt li {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.sig__erkennt b { font-size: 16.5px; font-weight: 600; }
.sig__erkennt span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.sig__fuss {
  max-width: 52ch;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
@media (min-width: 900px) {
  .sig__erkennt { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ── Beispiel am Regelkreis ───────────────────────────────────────────────
   Uebersetzt „Engpass erkennen" in etwas, das ein Wirt versteht. Die vierte
   Zeile ist die wichtigste: dort wird bewusst nichts verkauft. */
.rkbsp {
  max-width: 760px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: color-mix(in oklab, #fff 55%, transparent);
  text-align: left;
}
.rkbsp__kopf {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.rkbsp__schritte { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: b; }
.rkbsp__schritte li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.rkbsp__schritte li:first-child { border-top: none; padding-top: 0; }
.rkbsp__label {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.rkbsp__schritte b { font-size: 17px; font-weight: 500; line-height: 1.45; }
.rkbsp__wende b { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.2; }
.rkbsp__wende { background: rgba(34, 199, 214, 0.055); margin-inline: calc(-1 * clamp(26px, 3vw, 40px)); padding-inline: clamp(26px, 3vw, 40px); }
.rkbsp__zusatz { grid-column: 2; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.rkbsp__fuss { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 640px) {
  .rkbsp__schritte li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .rkbsp__zusatz { grid-column: 1; }
}

/* ── Vier Faelle ─────────────────────────────────────────────────────────── */
.faelle__lead { margin-top: 18px; max-width: 54ch; margin-inline: auto; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.faelle__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.fall {
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in oklab, #fff 52%, var(--canvas));
  text-align: left;
}
.fall__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; }
.fall__branche { font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.fall__engpass { font-size: 11.5px; color: var(--accent-dark, var(--cta-text)); letter-spacing: 0.04em; }
.fall__ziel {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.12;
}
.fall__liste { display: grid; gap: 0; margin: 20px 0 0; }
.fall__liste dt {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding-top: 13px; border-top: 1px solid var(--line);
}
.fall__liste dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* Sechs Inseln sollen als sechs lesbar sein, nicht als 5+1 umbrechen */
@media (min-width: 1080px) {
  .inseln { grid-template-columns: repeat(6, 1fr); }
  .sig__quellen { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 560px) and (max-width: 1079px) {
  .inseln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sig__quellen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .inseln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig__quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inseln .insel:nth-child(n) { transform: none; }
}

/* Der Engpass-Vermerk gehoert auf eine eigene Zeile, sonst kollidiert er
   mit langen Branchennamen wie „Dienstleister" */
.fall__kopf { display: grid; gap: 3px; }
.fall__engpass { justify-self: start; }

/* ── Ziel- und Engpass-Demo ───────────────────────────────────────────────
   Der Besucher waehlt sein Ziel und sieht dieselbe Pruefung, die wir im
   Erstgespraech machen. Die letzte Zeile — was NICHT der naechste Schritt
   ist — traegt die ganze Sektion. */
.demo__lead { margin-top: 18px; max-width: 56ch; margin-inline: auto; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.demo__box { margin-top: clamp(36px, 4.4vw, 60px); }
.demo__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.demo__knopf {
  padding: 12px 22px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.demo__knopf:hover { border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.demo__knopf.is-an { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

.demo__tafel {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  max-width: 1020px;
  margin-inline: auto;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: color-mix(in oklab, #fff 55%, transparent);
  text-align: left;
}
.demo__betrieb {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo__pruefung { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.demo__zeile {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.demo__zeile:first-child { border-top: none; padding-top: 0; }
.demo__mark { font-size: 14px; font-weight: 600; line-height: 1.4; }
.demo__zeile--ja .demo__mark { color: #4d7a41; }
.demo__zeile--nein .demo__mark { color: #a8443c; }
.demo__zeile--teils .demo__mark { color: var(--accent-dark, var(--cta-text)); }
.demo__was { font-size: 16px; font-weight: 500; }
.demo__hinweis { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
.demo__zeile--nein .demo__was { color: var(--ink); }

.demo__befund { align-self: start; }
.demo__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo__label--hebel { margin-top: 26px; }
.demo__engpass {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.22;
}
.demo__hebel { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.demo__nicht {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  background: rgba(34, 199, 214, 0.07);
  color: var(--ink-2);
  font-size: 15px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 900px) {
  .demo__tafel { grid-template-columns: 1fr 1fr; }
}

/* display: grid schlaegt das hidden-Attribut — sonst stehen alle vier Tafeln da */
.demo__tafel[hidden] { display: none; }

/* ── Regelkreis als Ellipse ───────────────────────────────────────────────
   Eine dünne Bahn, sechs Begriffe, ein wandernder Punkt. Kein Pfeilkranz,
   keine Nummern. Immer nur ein Gedanke ist aktiv — das macht den Unterschied
   zwischen Prozessgrafik und Präzisionsinstrument. */
.ell__lead { margin-top: 18px; max-width: 58ch; margin-inline: auto; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.ell { margin-top: clamp(28px, 3.4vw, 52px); }
.ell__bild { display: none; position: relative; }
.ell__svg { width: 100%; max-width: 1000px; height: auto; margin-inline: auto; display: block; overflow: visible; }

.ell__bahn { fill: none; stroke: var(--line-2); stroke-width: 1; }
.ell__marke { fill: var(--line-2); transition: fill 500ms var(--ease), r 500ms var(--ease); }
.ell__marke.is-an { fill: var(--accent); }
.ell__punkt { fill: var(--accent); }

.ell__titel {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  fill: var(--muted);
  transition: fill 450ms var(--ease);
}
.ell__detail {
  font-family: var(--sans);
  font-size: 13.5px;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.ell__st.is-an .ell__titel { fill: var(--ink); font-weight: 600; }
.ell__st.is-an .ell__detail { opacity: 1; }

.ell__mitte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: min(300px, 34%);
  pointer-events: none;
}
.ell__mlabel { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ell__mwert {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.ell__mwert.ist-neu { animation: ellNeu 700ms var(--ease); }
@keyframes ellNeu {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Senkrechte Fassung fürs Telefon */
.ell__vert { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; text-align: left; }
.ell__vert::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 42px;
  width: 1px;
  background: var(--line-2);
}
.ell__vst { position: relative; padding: 13px 0; }
.ell__vst::before {
  content: "";
  position: absolute;
  left: -25px; top: 20px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background 400ms var(--ease), transform 400ms var(--ease);
}
.ell__vst.is-an::before { background: var(--accent); transform: scale(1.35); }
.ell__vst b { display: block; font-size: 16.5px; font-weight: 500; color: var(--muted); transition: color 400ms var(--ease); }
.ell__vst span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 400ms var(--ease), max-height 400ms var(--ease); }
.ell__vst.is-an b { color: var(--ink); font-weight: 600; }
.ell__vst.is-an span { opacity: 1; max-height: 3em; }
.ell__zurueck {
  position: relative;
  margin-top: 6px;
  padding: 14px 0 0 0;
  font-size: 14px;
  color: var(--accent-dark, var(--cta-text));
}
.ell__zurueck::before {
  content: "";
  position: absolute;
  left: -25px; top: 0;
  width: 26px; height: 22px;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  border-bottom-left-radius: 12px;
  opacity: 0.6;
}

@media (min-width: 940px) {
  .ell__bild { display: block; }
  .ell__vert { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ell__marke, .ell__titel, .ell__detail, .ell__vst::before, .ell__vst b, .ell__vst span { transition: none; }
  .ell__mwert.ist-neu { animation: none; }
}

/* ── Aus fünf Baustellen wird ein System ──────────────────────────────────
   Drei Akte auf einer Fläche. Der Zustand steckt in data-akt am Abschnitt,
   die Elemente reagieren darauf — kein Umbau des DOM, nur Sichtbarkeit. */
.es__lead {
  margin-top: 20px;
  max-width: 58ch;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
}
.es { margin-top: clamp(32px, 4vw, 56px); }
.es__svg { width: 100%; max-width: 940px; height: auto; margin-inline: auto; display: block; }

/* Grundzustand aller beweglichen Teile */
.es__l1, .es__l2, .es__lkern { fill: none; stroke-width: 1.3; transition: opacity 900ms var(--ease); }
.es__l1 { stroke: color-mix(in oklab, var(--ink) 30%, transparent); stroke-dasharray: 5 6; opacity: 0; }
.es__l2 { stroke: var(--line-2); opacity: 0; }
.es__lkern { stroke: var(--accent); stroke-width: 1.8; opacity: 0; }

.es__quelle rect { fill: color-mix(in oklab, #fff 60%, var(--canvas)); stroke: var(--line-2); stroke-width: 1; }
.es__quelle text { font-family: var(--sans); font-size: 15px; font-weight: 500; fill: var(--ink-2); }

.es__zettel {
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: normal;
  fill: var(--muted);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.es__kern rect { fill: var(--ink); opacity: 0; transition: opacity 800ms var(--ease); }
.es__kern text { font-family: var(--sans); font-size: 17px; font-weight: 600; fill: var(--canvas); opacity: 0; transition: opacity 800ms var(--ease); }

.es__betrieb rect { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.es__betrieb text { font-family: var(--serif); font-style: normal; font-size: 20px; fill: var(--ink); }

.es__schritt { opacity: 0; transition: opacity 800ms var(--ease); }
.es__slabel { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted); }
.es__swert { font-family: var(--serif); font-style: normal; font-size: 26px; fill: var(--accent-dark, var(--cta-text)); }

/* Akt 1 — fünf getrennte Leitungen, alle enden beim Inhaber */
[data-akt="0"] .es__l1 { opacity: 1; }
[data-akt="0"] .es__zettel { opacity: 1; }

/* Akt 2 — dieselben fünf laufen in acessio, von dort eine Leitung */
[data-akt="1"] .es__l2,
[data-akt="2"] .es__l2 { opacity: 1; }
[data-akt="1"] .es__lkern,
[data-akt="2"] .es__lkern { opacity: 1; }
[data-akt="1"] .es__kern rect, [data-akt="2"] .es__kern rect,
[data-akt="1"] .es__kern text, [data-akt="2"] .es__kern text { opacity: 1; }

/* Akt 3 — der abgestimmte Schritt */
[data-akt="2"] .es__schritt { opacity: 1; }

/* Die drei Akte als Text daneben */
.es__akte {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}
.es__akt {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border-left: 2px solid var(--line-2);
  text-align: left;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 400ms var(--ease), border-color 400ms var(--ease);
}
.es__akt:hover { opacity: 0.75; }
.es__akt.is-an { opacity: 1; border-left-color: var(--accent); }
.es__akt b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.es__akt.is-an b { color: var(--accent-dark, var(--cta-text)); }
.es__akt span { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.es__akt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Zwei konkrete Fälle */
.es__faelle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}
.esf {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in oklab, #fff 52%, var(--canvas));
  text-align: left;
}
.esf__betrieb { font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.esf__ziel {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.1;
}
.esf dl { margin: 22px 0 0; }
.esf dt {
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.esf dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.esf__schritt { color: var(--ink) !important; font-weight: 600; }
.esf__nicht {
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(34, 199, 214, 0.07);
  font-size: 14.5px;
  color: var(--ink-2);
}

@media (min-width: 1000px) {
  .es { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 52px); align-items: center; }
  .es__akte { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .es__l1, .es__l2, .es__lkern, .es__zettel, .es__kern rect, .es__kern text, .es__schritt, .es__akt { transition: none; }
}


/* Auf schmalen Schirmen greift sonst die Untergrenze von --fs-display mit
   52 px — dafür ist „Weniger Verwaltung." bei 390 px zu breit, und jede der
   drei Aussagen bricht ein zweites Mal. */
@media (max-width: 899px) {
  .hero__title { font-size: clamp(30px, 9.2vw, 48px); line-height: 1.02; }
}

/* ── Filme auf der Seite ──────────────────────────────────────────────────
   Stumm, ein Durchlauf, Start erst beim Sichtwerden. preload="none" heißt:
   solange niemand hinsieht, kostet der Film kein Byte. Die Aussage steht
   zusätzlich als Text darunter — wer den Film nicht sieht, verliert nichts. */
/* Nicht über die volle Spaltenbreite: die Komposition ist für 1920 px gesetzt,
   auf 1300 px wirkt sie leer statt ruhig. */
.film { margin: clamp(30px, 4vw, 56px) auto 0; max-width: 1000px; }
.film--schmal { max-width: 660px; }
.film__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--canvas);
  box-shadow:
    0 1px 1px rgba(23, 23, 26, 0.03),
    0 10px 20px -10px rgba(23, 23, 26, 0.06),
    0 34px 56px -36px rgba(23, 23, 26, 0.16);
}
.film__text {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.film-sek__lead { margin-top: 18px; max-width: 60ch; color: var(--ink-2); }

/* Jede Angabe bleibt mit ihrem Trennzeichen zusammen. */
.hero__trust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.hero__fakt { white-space: nowrap; }
.hero__fakt + .hero__fakt::before { content: "· "; opacity: 0.45; }

/* Im Zweispalter braucht die Überschrift weniger Größe — sonst drückt sie
   CTA und Vertrauenszeile unter die Falz. Drei Zeilen statt fünf. */
@media (min-width: 900px) {
  .hero__title { font-size: clamp(32px, 3.5vw, 50px); max-width: 26ch; line-height: 1.04; }
  .hero__body { font-size: clamp(16px, 1.15vw, 18.5px); margin-top: 26px; }
  .hero__actions { margin-top: 28px; }
  .hero__trust { margin-top: 22px; font-size: 13.5px; }
  .hero { align-items: start; padding-top: clamp(130px, 16vh, 180px); }
  .hw { margin-top: 6px; }
}

/* ── Hero: links die Position, rechts ein Nachrichtenverlauf ──────────────
   Jemand schreibt in eigenen Worten. Das System übernimmt sichtbar. Wer das
   sieht, braucht keinen Erklärtext darüber, wie acessio arbeitet. */
.hero { padding-top: clamp(120px, 15vh, 170px); }
.hero__text { max-width: 46ch; }

/* ── Die Lücke im Hero ────────────────────────────────────────────────────
   Zeigt NUR den Verlust: zwei Zahlen und den Abstand dazwischen. Diagnose,
   Maßnahmen und Freigabe stehen weiter unten — der Hero beantwortet genau
   eine Frage. Bildsprache identisch mit motion/film1-luecke.html, damit Seite
   und Film dieselbe Sache zeigen.

   Bewusst HTML statt eingebettetem Video: kein Ladegewicht im ersten Bild,
   scharf auf jedem Bildschirm, und der Text bleibt Text. */
.hlu { margin-top: clamp(40px, 5vw, 64px); }
.hlu__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hlu__knopf {
  padding: 9px 17px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.hlu__knopf:hover { border-color: color-mix(in oklab, var(--ink) 38%, transparent); }
.hlu__knopf.is-an { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

.hlu__blatt {
  background: #FBFAF8;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 36px);
  box-shadow:
    0 1px 1px rgba(23, 23, 26, 0.03),
    0 8px 16px -8px rgba(23, 23, 26, 0.05),
    0 30px 50px -34px rgba(23, 23, 26, 0.14);
}
.hlu__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.hlu__kopf b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hlu__kopf span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }

.hlu__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(24px, 2.6vw, 36px) 0 6px;
}
.hlu__zahl { margin: 0; }
.hlu__zahl b {
  display: block;
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hlu__zahl small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.hlu__zahl--r { text-align: right; }

/* Der Abstand zwischen den Zahlen IST die Aussage. */
.hlu__spanne { display: block; width: clamp(52px, 9vw, 132px); height: 2px; background: var(--line-2); }
.hlu__spanne i {
  display: block; height: 100%; width: 0; background: var(--accent);
  transition: width 900ms var(--ease);
}

.hlu__verlust {
  margin-top: clamp(20px, 2.2vw, 30px);
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 820ms var(--ease), transform 820ms var(--ease);
}
.hlu__nach {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.hlu__quelle { margin-top: 14px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }

.hlu__fall[data-stufe="1"] .hlu__zahl b,
.hlu__fall[data-stufe="2"] .hlu__zahl b,
.hlu__fall[data-stufe="3"] .hlu__zahl b,
.hlu__fall[data-stufe="4"] .hlu__zahl b,
.hlu__fall[data-stufe="5"] .hlu__zahl b { opacity: 1; transform: none; }
.hlu__fall[data-stufe="1"] .hlu__zahl small,
.hlu__fall[data-stufe="2"] .hlu__zahl small,
.hlu__fall[data-stufe="3"] .hlu__zahl small,
.hlu__fall[data-stufe="4"] .hlu__zahl small,
.hlu__fall[data-stufe="5"] .hlu__zahl small { opacity: 1; }
/* Bis Stufe 2 zeigt nur die linke Zahl — die rechte ist die Pointe. */
.hlu__fall[data-stufe="1"] .hlu__zahl--r b,
.hlu__fall[data-stufe="1"] .hlu__zahl--r small { opacity: 0; }
.hlu__fall[data-stufe="3"] .hlu__spanne i,
.hlu__fall[data-stufe="4"] .hlu__spanne i,
.hlu__fall[data-stufe="5"] .hlu__spanne i { width: 100%; }
.hlu__fall[data-stufe="4"] .hlu__verlust,
.hlu__fall[data-stufe="5"] .hlu__verlust { opacity: 1; transform: none; }
.hlu__fall[data-stufe="5"] .hlu__nach { opacity: 1; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 4vw, 68px);
    align-items: start;
    padding-top: clamp(130px, 16vh, 180px);
  }
  .hero__title { font-size: clamp(32px, 3.5vw, 50px); max-width: 26ch; line-height: 1.04; }
  .hero__body { font-size: clamp(16px, 1.15vw, 18.5px); margin-top: 26px; }
  .hlu { margin-top: 6px; }
}
/* Auf schmalen Schirmen und ohne Bewegung steht der Endzustand sofort. */
@media (max-width: 899px) {
  .hlu__zahl b, .hlu__zahl small, .hlu__verlust, .hlu__nach { opacity: 1 !important; transform: none !important; }
  .hlu__spanne i { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hlu__zahl b, .hlu__zahl small, .hlu__verlust, .hlu__nach, .hlu__spanne i { transition: none !important; }
}

/* ── Projektprofil: Ziel zuerst, Leistung gar nicht ───────────────────────
   Fünf nummerierte Schritte untereinander. Ein Assistent mit Weiter-Knöpfen
   verliert bei dieser Länge mehr Leute, als er gewinnt. */
.pf-person {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  padding-bottom: clamp(28px, 3.4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.pf-person img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--canvas-2);
}
.pf-person__label { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.pf-person__name { margin-top: 4px; font-family: var(--serif); font-style: normal; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.05; }
.pf-person__rolle { margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.pf-person__satz { margin-top: 11px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

.pf-schritt {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 18px;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--line);
}
.pf-schritt:first-of-type { border-top: none; padding-top: 0; }
.pf-nr {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-dark, var(--cta-text));
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.pf-frage {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.pf-hilfe { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 52ch; }

/* Kacheln zum Antippen statt Ankreuzliste */
.pf-kacheln { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.pf-kachel { position: relative; cursor: pointer; }
.pf-kachel input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pf-kachel span {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 15px;
  color: var(--ink-2);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.pf-kachel:hover span { border-color: color-mix(in oklab, var(--ink) 38%, transparent); }
.pf-kachel input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.pf-kachel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.pf-felder { display: grid; gap: 20px; margin-top: 20px; }
.pf-feld { display: grid; gap: 5px; }
.pf-feld > span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pf-feld input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  outline: none;
  transition: border-color 200ms var(--ease);
}
.pf-feld input:focus { border-bottom-color: var(--ink); }

.pf-schritt textarea {
  width: 100%;
  margin-top: 18px;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: color-mix(in oklab, #fff 40%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16.5px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 200ms var(--ease);
}
.pf-schritt textarea:focus { border-color: var(--ink); }

@media (min-width: 700px) {
  .pf-felder { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
}
@media (max-width: 599px) {
  .pf-person { grid-template-columns: 68px minmax(0, 1fr); gap: 15px; }
  .pf-person img { width: 68px; height: 68px; }
  .pf-schritt { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-kachel span, .pf-feld input, .pf-schritt textarea { transition: none; }
}

/* ═══ Laufbänder in rechtsläufigen Fassungen ═══════════════════════════════
   Die Bänder verschieben ihre Spur um -50 % nach links und setzen dafür
   voraus, dass die Klone rechts vom Original liegen. Mit dir="rtl" dreht der
   Flexcontainer die Reihenfolge um: die Klone landen links, die Spur läuft
   von der Fläche weg, und nach einem Durchlauf steht dort nichts mehr.

   Deshalb laufen Spur und Sichtfenster ausdrücklich linksläufig. Der Inhalt
   sind Bildmarken und kurze Beschriftungen — die Leserichtung des Bandes
   trägt keine Bedeutung.
   ═════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .logomarquee__viewport,
[dir="rtl"] .logomarquee__track,
[dir="rtl"] .intg-row,
[dir="rtl"] .intg-track { direction: ltr; }

/* Der Markenhinweis lief als vier Zeilen Kleingedrucktes unter der Leiste und
   hat den Durchlauf zerschnitten. Jetzt ein Sternchen, das auf den Wortlaut im
   Impressum zeigt. */
.logomarquee__note a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.logomarquee__note a:hover, .logomarquee__note a:focus-visible { color: var(--ink); }