/* ============================================================
   Komponenten, Bewegung, Zustände — mobilApp Voicebot
   Sektions-Layout steht als Inline-Style im HTML; hier lebt alles,
   was mehr als einmal vorkommt.
   ============================================================ */

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

/* Muss die Inline-display-Werte der Panels und Formulare schlagen */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--mo-bg);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--mo-bg);
  color: var(--mo-text);
  font-family: var(--mo-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--mo-blue); } }
button { font-family: var(--mo-body); }
img, video { max-width: 100%; }
p { margin: 0; text-wrap: pretty; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--mo-sans);
  font-weight: 600;
  color: var(--mo-text);
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-size: 18px; line-height: 1.2; letter-spacing: -.018em; }

::selection { background: rgba(79, 111, 245, .25); }
:focus-visible { outline: 2px solid var(--mo-blue); outline-offset: 3px; border-radius: 3px; }

/* ---------- Bausteine ---------- */
.wrap { max-width: 1280px; margin: 0 auto; }

/* Eyebrow: gesperrte Versalien über Überschriften und in Tabellenspalten */
.eyebrow {
  font-family: var(--mo-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.mono { font-family: var(--mo-mono); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mo-blue);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.btn:hover { background: #3d5ae0; color: #fff; }
.btn:disabled { opacity: .6; cursor: default; }
/* Sendezustand: Knopf bleibt stehen, der Ring zeigt, dass etwas passiert. */
.btn[data-busy]::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: mo-spin .7s linear infinite;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--full { width: 100%; }
.btn--ghost {
  background: transparent;
  border-color: var(--mo-line);
  color: var(--mo-text);
  font-weight: 500;
  padding: 14px 26px;
}
.btn--ghost:hover { background: transparent; border-color: rgba(13, 22, 42, .42); color: var(--mo-text); }
[data-theme="dark"] .btn--ghost:hover { border-color: rgba(255, 255, 255, .42); }

.card {
  border: 1px solid var(--mo-line);
  border-radius: 8px;
  background: var(--mo-surface);
}

/* Textlink im Fließtext und im Footer */
.tlink { color: var(--mo-muted); }
.tlink:hover { color: var(--mo-text); }

.navlink {
  font-family: var(--mo-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.navlink:hover { color: var(--mo-text); }

/* ---------- Formularfeld ---------- */
.field { display: block; }
.field__label {
  display: block;
  font-family: var(--mo-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mo-muted);
  margin-bottom: 7px;
}
/* Unterstrich statt Kasten — das Feld soll die Zeilenführung nicht brechen */
.field__input {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mo-line);
  border-radius: 0;
  font-family: var(--mo-body);
  font-size: 15px;
  color: var(--mo-text);
}
.field__input::placeholder { color: #7f8caa; }
.field__input:focus { outline: none; border-bottom-color: var(--mo-blue); }
.field__input:focus-visible { outline: none; }
textarea.field__input { min-height: 96px; resize: vertical; }

/* ---------- Drehregler (ROI) ----------
   Ring + Zeiger sind Zierde, der Wert lebt im nativen <input type="range">
   darunter: Tastatur und Screenreader kommen dadurch von selbst mit. */
.knobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.knob {
  border: 1px solid var(--mo-line); border-radius: 14px; background: var(--mo-surface);
  padding: 18px 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.knob__label {
  font-family: var(--mo-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mo-muted); text-align: center;
}
.knob__dial {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  cursor: grab; touch-action: none; user-select: none;
}
.knob__dial:active { cursor: grabbing; }
.knob__dial:focus-within { box-shadow: 0 0 0 4px rgba(79, 111, 245, .18); }
.knob__svg { position: absolute; inset: 0; display: block; }
.knob__fill { transition: stroke-dasharray .08s linear; }
.knob__disc {
  position: absolute; inset: 20px; border-radius: 50%;
  background: var(--mo-surface); border: 1px solid var(--mo-line);
  box-shadow: 0 6px 18px -8px rgba(13, 22, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .08s linear;
}
.knob__disc::before {
  content: ""; position: absolute; top: 8px; left: 50%;
  width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: var(--mo-blue);
}
.knob__read {
  position: absolute; inset: 20px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.knob__val { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.knob__unit {
  font-family: var(--mo-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mo-muted); margin-top: 4px;
}
/* Der echte Regler bleibt fokussierbar, ist aber unsichtbar: gezogen wird am Ring. */
.knob__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.knob__scale {
  display: flex; justify-content: space-between; width: 100%;
  font-family: var(--mo-mono); font-size: 10px; color: var(--mo-muted); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .knob__disc,
  html:not([data-motion="on"]) .knob__fill { transition: none; }
}
@media (max-width: 480px) { .knobs { grid-template-columns: 1fr; } }
@media (max-width: 700px) { [data-dwell] { grid-template-columns: 1fr !important; gap: 14px !important; } }

/* ---------- Bewegung ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--mo-ease), transform .3s var(--mo-ease);
}
[data-reveal="in"] { opacity: 1; transform: none; }

/* Stagger: Rasterkinder treten nacheinander ein, 50-ms-Schritte */
[data-cols] > [data-reveal]:nth-child(2), [data-statrow] > [data-reveal]:nth-child(2) { transition-delay: .05s; }
[data-cols] > [data-reveal]:nth-child(3), [data-statrow] > [data-reveal]:nth-child(3) { transition-delay: .1s; }
[data-cols] > [data-reveal]:nth-child(4), [data-statrow] > [data-reveal]:nth-child(4) { transition-delay: .15s; }
[data-cols] > [data-reveal]:nth-child(5) { transition-delay: .2s; }
[data-cols] > [data-reveal]:nth-child(6) { transition-delay: .25s; }
[data-cols] > [data-reveal]:nth-child(n+7) { transition-delay: .28s; }

/* Druckfeedback: jedes drückbare Element antwortet sofort */
button, a.btn, [data-navcta] {
  transition: transform .16s var(--mo-ease), background-color .16s ease, border-color .16s ease, color .16s ease;
}
button:active, a.btn:active, [data-navcta]:active { transform: scale(.97); }

/* Nav: am Seitenanfang randlos, beim Scrollen legt sich die Fläche darunter */
[data-nav] {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .2s var(--mo-ease), border-color .2s var(--mo-ease);
}
[data-nav][data-scrolled] {
  background: rgba(244, 246, 251, .9);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--mo-line);
}

/* Burgermenü — erst unter 1080px sichtbar, siehe Responsive-Block */
.burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--mo-text);
  transition: transform .2s var(--mo-ease-io), opacity .16s ease;
}
[data-nav][data-open] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-nav][data-open] .burger span:nth-child(2) { opacity: 0; }
[data-nav][data-open] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* CTA im Menü: ersetzt unter 720px den Knopf in der Leiste */
.btn[data-navpanelcta] { display: none; }

/* Produktzeilen im Ökosystem: erst beim Zeigen wird die Zeile als Ziel sichtbar */
[data-ecorow] { transition: background-color .16s ease; }
[data-ecoarrow] { transition: transform .16s var(--mo-ease), color .16s ease; }
@media (hover: hover) and (pointer: fine) {
  [data-ecorow]:hover { background: var(--mo-surface-2); color: var(--mo-text); }
  [data-ecorow]:hover [data-ecoarrow] { color: var(--mo-blue); transform: translateX(3px); }
}
[data-ecorow]:focus-visible [data-ecoarrow] { color: var(--mo-blue); }

/* ---------- Hörbeispiel-Modal ---------- */
[data-modal], [data-vmodal] {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11, 17, 32, .72);
  opacity: 0;
  transition: opacity .18s var(--mo-ease);
}
[data-modal][data-open], [data-vmodal][data-open] { display: flex; opacity: 1; }
[data-modalcard] {
  width: 100%; max-width: 560px;
  transform-origin: center;
  transform: scale(.96);
  opacity: 0;
  transition: transform .22s var(--mo-ease), opacity .22s var(--mo-ease);
}
[data-modal][data-open] [data-modalcard],
[data-vmodal][data-open] [data-modalcard] { transform: none; opacity: 1; }
[data-vmodal] [data-modalcard] { max-width: 420px; }
[data-vmodal] video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: #0b1120; border-radius: 8px; }

/* ---------- Bewegung reduzieren: weniger und sanfter, nicht aus ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) { scroll-behavior: auto; }
  html:not([data-motion="on"]) [data-reveal] { transform: none; transition: opacity .2s ease; }
  html:not([data-motion="on"]) button:active,
  html:not([data-motion="on"]) a.btn:active,
  html:not([data-motion="on"]) [data-navcta]:active { transform: none; }
  html:not([data-motion="on"]) [data-modalcard] { transform: none; transition: opacity .18s ease; }
  html:not([data-motion="on"]) [data-ecoarrow] { transition: color .16s ease; }
  html:not([data-motion="on"]) [data-ecorow]:hover [data-ecoarrow] { transform: none; }
  html:not([data-motion="on"]) [data-flow] { animation: none; opacity: 0; }
}

/* Integrationen: „Ist Ihr System dabei?"-Suche */
/* Chips statt Zeilen: 37 Systeme als Liste waren ~700 px hoch, als Chip-Wolke
   in zwei Spalten passt dieselbe Liste auf ein Drittel der Höhe. */
.int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; margin-top: 28px; align-items: start; }
.int-group__label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mo-muted); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--mo-line-soft);
}
.int-group__items { display: flex; flex-wrap: wrap; gap: 8px; }
.int-item[hidden], .int-group[hidden] { display: none; }
.int-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  background: var(--mo-surface); border: 1px solid var(--mo-line);
}
.int-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mo-blue); flex: none; }
.int-item__name { font-family: var(--mo-sans); font-size: 14px; font-weight: 500; color: var(--mo-text); }
[data-intquery]:focus { border-bottom-color: var(--mo-blue); }

/* Ausklappen: auf dem Handy ist die Liste zu, sichtbar bleiben Suche und Zähler.
   Ab 861 px übernimmt initIntSearch() das `open` und der Schalter verschwindet. */
.int-reveal__toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 16px 0 14px; margin-top: 8px; border-bottom: 1px solid var(--mo-line);
  font-family: var(--mo-sans); font-size: 15px; font-weight: 600; color: var(--mo-blue);
}
.int-reveal__toggle::-webkit-details-marker { display: none; }
.int-reveal__chev { margin-left: auto; line-height: 0; transition: transform .22s var(--mo-ease-io); }
.int-reveal[open] .int-reveal__chev { transform: rotate(180deg); }
@media (min-width: 861px) { .int-reveal__toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .int-reveal__chev { transition: none; }
}

/* Integrationen · Schichtenmodell (isometrischer Flow): Bänder fließen, Sphäre
   schimmert, Staubpartikel pulsieren — alles per CSS, kein JS. */
@keyframes mo-flow    { to { stroke-dashoffset: -334; } }
@keyframes mo-dust    { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }
@keyframes mo-shimmer { to { transform: rotate(360deg); } }
[data-ribbon] { animation: mo-flow 3.6s linear infinite; }
[data-ribbon="1"] { animation-delay: .5s; }
[data-ribbon="2"] { animation-delay: 1s; }
[data-ribbon="3"] { animation-delay: 1.5s; }
[data-shimmer] { animation: mo-shimmer 26s linear infinite; }
[data-dust] { animation: mo-dust 4.4s ease-in-out infinite; }
[data-dust="1"] { animation-delay: .7s; } [data-dust="2"] { animation-delay: 1.4s; }
[data-dust="3"] { animation-delay: 2.1s; } [data-dust="4"] { animation-delay: 2.8s; }
[data-dust="5"] { animation-delay: 3.5s; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) [data-ribbon],
  html:not([data-motion="on"]) [data-shimmer],
  html:not([data-motion="on"]) [data-dust] { animation: none; }
  html:not([data-motion="on"]) [data-ribbon] { stroke-dasharray: none; opacity: .8; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) { [data-layerwrap] { grid-template-columns: 1fr !important; gap: 8px !important; } }
@media (max-width: 900px) { [data-callflow] { display: none; } }
@media (max-width: 860px) { .int-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  [data-layerwrap] { display: none !important; }
  [data-layerlist] { display: flex !important; flex-direction: column; }
}

@media (max-width: 1080px) {
  [data-split] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-panel] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-panel] > * { border-right: none !important; border-bottom: 1px solid var(--mo-line-soft); }
  [data-panel] > *:last-child { border-bottom: none; }
  [data-cols="4"] { grid-template-columns: 1fr 1fr !important; }
  [data-cols="3"]:not([data-videos]) { grid-template-columns: 1fr 1fr !important; }
  [data-videos] { grid-template-columns: 1fr !important; max-width: 440px; margin-inline: auto; }
  /* Nav-Links werden zum Klappmenü unter der Leiste */
  .burger { display: flex; }
  [data-navlinks] {
    display: none !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0 !important;
    padding: 4px 40px 24px;
    background: var(--mo-bg);
    border-bottom: 1px solid var(--mo-line);
  }
  [data-nav][data-open] [data-navlinks] { display: flex !important; }
  [data-nav][data-open] { background: var(--mo-bg); border-bottom-color: transparent; }
  [data-navlinks] .navlink { padding: 15px 0; border-bottom: 1px solid var(--mo-line-soft); font-size: 12.5px; }
  [data-navcta] { flex: none; margin-left: auto; }
  [data-bandmedia] { width: 52% !important; }
  [data-bandlabels] { display: none !important; }
  [data-callgrid] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-callfig] { position: static !important; max-width: 460px; }
}
@media (max-width: 860px) {
  [data-band] { min-height: 0 !important; }
  [data-bandmedia] { position: relative !important; width: 100% !important; height: 280px; }
  [data-bandscrim] { background: linear-gradient(180deg, rgba(11,17,32,.3) 0%, rgba(11,17,32,.7) 68%, #0b1120 100%) !important; }
  [data-band] [data-bandpause] { right: 20px !important; bottom: 20px !important; }
  [data-bandcopy] { padding: 40px 20px 72px !important; }
}
@media (max-width: 720px) {
  /* :not() muss mitgeführt werden — sonst gewinnt die spezifischere
     Tablet-Regel oben und die Karten bleiben zweispaltig */
  [data-cols="4"], [data-cols="3"]:not([data-videos]), [data-cols="2"], [data-videos] { grid-template-columns: 1fr !important; }
  [data-wrap] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-sec] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-statrow] { grid-template-columns: 1fr 1fr !important; }
  [data-mobilecta] { display: block !important; }
  [data-navlinks] { padding-left: 20px; padding-right: 20px; }
  [data-navcta] { display: none; }
  .btn[data-navpanelcta] { display: inline-flex; margin-top: 20px; }
  .burger { margin-left: auto; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   Sektions-Komponenten
   ============================================================ */

/* ---------- Hero: Videohintergrund, dunkles Band ----------
   Die Tokens kippen über data-theme="dark" am <header>. Nur die paar Werte
   hier weichen bewusst ab: der CTA bleibt das Originalblau, die Akzente
   werden heller, damit sie auf dem Video tragen. */
[data-herovideo] {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Zwei Verläufe, mehr nicht: horizontal für die Textspalte, vertikal für den
   randlosen Übergang in die dunkle Auszeichnungs-Sektion darunter. */
[data-heroscrim] {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, #0b1120 0%, rgba(11, 17, 32, .4) 34%, rgba(11, 17, 32, 0) 60%),
    linear-gradient(90deg, rgba(11, 17, 32, .92) 0%, rgba(11, 17, 32, .6) 45%, rgba(11, 17, 32, .12) 100%);
}
#top .btn { background: #4f6ff5; }
#top .btn:hover { background: #3d5ae0; }
#top .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
#top .btn--ghost:hover { border-color: rgba(255, 255, 255, .42); }
#top [data-heroclock] .hero-accent { color: #a5bce8; }
#top .award { border-color: rgba(255, 255, 255, .22); color: #fff; }
#top .tlink { color: #c3ccdf; }
#top .tlink:hover { color: #fff; }

/* Anrufverlauf: die aktive Zeile tritt vor, die anderen bleiben gedämpft */
.cf-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  opacity: .42; color: #9aa6c0;
  transition: opacity .3s var(--mo-ease), color .3s var(--mo-ease);
}
.cf-row.is-on { opacity: 1; color: #fff; }
.cf-row__t { font-size: 12px; font-variant-numeric: tabular-nums; }
.cf-row__x { font-size: 14.5px; }

/* Nav liest über dem Hero auf Navy, ab 8px Scroll wieder auf heller Fläche */
/* Display gehört hier, nicht inline — sonst schlägt der Inline-Stil
   den Wechsel zwischen hellem und dunklem Logo. */
[data-logo-dark], [data-logo-light] { display: block; }
[data-logo-light] { display: none; }
[data-nav]:not([data-scrolled]):not([data-open]) [data-logo-light] { display: block; }
[data-nav]:not([data-scrolled]):not([data-open]) [data-logo-dark] { display: none; }
[data-nav]:not([data-scrolled]):not([data-open]) .navlink { color: #fff; }
[data-nav]:not([data-scrolled]):not([data-open]) .burger span { background: #fff; }

/* Hero-Headline: zweite Zeile (der Voicebot) in Primärfarbe */
[data-heroclock] > span { display: block; }
[data-heroclock] .hero-accent { color: var(--mo-blue); }

.hero-state {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font-family: var(--mo-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mo-muted);
}
.hero-state__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mo-success); flex: none; }
.hero-state[data-clock="closed"] .hero-state__dot,
.hero-state[data-clock="weekend"] .hero-state__dot { background: var(--mo-warn); }

.award {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 30px;
  padding: 9px 18px 9px 9px;
  border: 1px solid var(--mo-line); border-radius: 999px;
  font-size: 14px; color: var(--mo-muted);
}
.award strong { color: var(--mo-text); font-weight: 600; }
.award__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #f2c14e, #cf9b28);
  color: #3b2a05; font-size: 12px; font-weight: 600;
}

/* ---------- Kundenstimmen: ein waagerechter Streifen ---------- */
/* Alle Zitate in einer Reihe, seitlich scrollbar — neue Stimmen kosten
   keine Seitenhöhe. Reines CSS-Scroll-Snap, kein Slider-Skript. */
.qrow {
  display: flex; gap: 48px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.qrow::-webkit-scrollbar { display: none; }
.qrow > * {
  flex: 0 0 min(420px, 78vw); scroll-snap-align: start;
  display: flex; flex-direction: column;
}
/* Die angeschnittene nächste Karte ist der Hinweis, dass es weitergeht */
.qrow::after { content: ""; flex: 0 0 1px; }
.qnav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 28px; }
.qnav__btn {
  width: 40px; height: 40px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mo-surface); border: 1px solid var(--mo-line); color: var(--mo-text);
  transition: border-color .2s var(--mo-ease), background .2s var(--mo-ease);
}
.qnav__btn:hover { border-color: var(--mo-blue); color: var(--mo-blue); }
/* Schmal ist immer nur eine Karte zu sehen: gleich hohe Karten würden dort
   nur Leerraum unter den kurzen Zitaten erzeugen. */
@media (max-width: 720px) {
  .qrow { align-items: start; gap: 32px; }
}

/* ---------- Referenzen: Kennzahlen + laufende Logo-Leiste ---------- */
.refnums { display: flex; flex-wrap: wrap; gap: 26px 96px; }
.refnums__val {
  display: block; font-size: clamp(44px, 6vw, 76px); font-weight: 600;
  line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.refnums__label {
  display: block; margin-top: 12px;
  font-family: var(--mo-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mo-muted);
}

.mq {
  overflow: hidden; margin-top: 72px; padding: 34px 0 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq__track { display: flex; width: max-content; animation: mq-run 70s linear infinite; }
/* Abstand als margin, nicht als gap: nur so ist -50 % ein nahtloser Schnitt */
.mq img {
  /* Die Logodateien sind 600x200 mit reichlich Weissraum, deshalb die hohe Zeile */
  height: 56px; width: auto; margin-right: 40px; flex: none;
  /* Fremdlogos einfarbig weiss, damit die Leiste ruhig bleibt und auf Navy traegt */
  filter: brightness(0) invert(1); opacity: .5;
  transition: opacity .25s var(--mo-ease);
}
@keyframes mq-run { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .mq:hover .mq__track { animation-play-state: paused; }
  .mq img:hover { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .mq { overflow-x: auto; }
  html:not([data-motion="on"]) .mq__track { animation: none; }
  html:not([data-motion="on"]) [data-mqcopy] { display: none; }
}
@media (max-width: 720px) {
  .refnums { gap: 22px 48px; }
  .mq { margin-top: 48px; }
  .mq img { height: 42px; margin-right: 24px; }
}

/* ---------- Auszeichnung (Best Brands) ---------- */
.aw {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; min-height: 600px;
}
/* clip-path statt overflow: das Polaroid darf über die Spaltenkante ragen,
   das 112 % hohe Parallax-Foto aber nicht. */
.aw__media { position: relative; }
.aw__photo {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%;
  object-fit: cover; object-position: 38% 60%; display: block;
  clip-path: inset(6% 0);
  will-change: transform;
}
.aw__fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0b1120 0%, rgba(11,17,32,0) 12%, rgba(11,17,32,0) 58%, #0b1120 100%),
    linear-gradient(0deg, #0b1120 0%, rgba(11,17,32,0) 28%);
}
.aw__polaroid {
  position: absolute; right: -8px; bottom: 44px; z-index: 2; width: 232px; margin: 0;
  padding: 8px 8px 12px; background: #fff; border-radius: 6px;
  transform: rotate(-4deg);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
}
.aw__polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; display: block; }
.aw__polaroid figcaption {
  font-family: var(--mo-mono); font-size: 9.5px; line-height: 1.4; color: #5d6885;
  margin-top: 8px;
}
/* Reveal darf die Drehung nicht wegrechnen */
.aw__polaroid[data-reveal] { opacity: 0; transform: translateY(10px) rotate(-4deg); }
.aw__polaroid[data-reveal="in"] { opacity: 1; transform: rotate(-4deg); }

.aw__copy { padding: 88px 40px 88px 72px; align-self: center; }
.aw__year {
  font-size: clamp(96px, 12vw, 168px); font-weight: 700; line-height: .9;
  letter-spacing: -.05em; color: #a5bce8;
  font-variant-numeric: tabular-nums; margin: 0 0 22px -6px;
}
.aw__podium {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 22px;
  font-family: var(--mo-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--mo-muted);
}
.aw__podium li { display: flex; align-items: center; gap: 9px; }
.aw__podium li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #f6d365, #c9931a);
}
.aw__podium [data-medal="gold"] { color: #fff; }

@media (max-width: 900px) {
  .aw { grid-template-columns: 1fr; min-height: 0; }
  .aw__media { min-height: 420px; }
  .aw__polaroid { right: 16px; bottom: 24px; width: 190px; }
  .aw__copy { padding: 56px 24px 72px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* Chips und Tabs */
.chip { border: 1px solid var(--mo-line); border-radius: 5px; padding: 8px 14px; font-size: 13.5px; color: var(--mo-text); }
.uc-tab, .role-tab {
  background: transparent;
  border: 1px solid var(--mo-line);
  color: var(--mo-muted);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.role-tab { border-radius: 5px; padding: 9px 16px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.uc-tab.is-active, .role-tab.is-active { background: var(--mo-blue); border-color: var(--mo-blue); color: #fff; }

.role-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; border-top: 1px solid var(--mo-line); }
.role-item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--mo-line-soft);
  font-size: 15px; color: var(--mo-text);
}
.role-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mo-success); flex: none; transform: translateY(-2px); }

/* Zweispaltige Textzeilen (Vorteile, Phasen, Sicherheit) */
.benefit-row { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--mo-line-soft); align-items: baseline; }
.benefit-row h4 { font-size: 16px; }
.benefit-row p { font-size: 14.5px; line-height: 1.6; color: var(--mo-muted); }

.area-row { display: grid; grid-template-columns: 64px 250px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--mo-line-soft); align-items: baseline; }
.area-row p { font-size: 15.5px; line-height: 1.6; color: var(--mo-muted); }

.channel-row { display: grid; grid-template-columns: 130px 150px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--mo-line-soft); align-items: baseline; }

.phase-row { display: grid; grid-template-columns: 90px 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--mo-line-soft); align-items: baseline; }
.phase-row > span { font-size: 11.5px; letter-spacing: .06em; color: var(--mo-muted); }
.phase-row p { font-size: 14.5px; line-height: 1.6; color: var(--mo-muted); }

.sec-item { padding: 20px 0; border-bottom: 1px solid var(--mo-line-soft); }
.sec-item h3 { margin-bottom: 6px; font-size: 15.5px; letter-spacing: 0; }
.sec-item p { font-size: 14px; line-height: 1.6; color: var(--mo-muted); }

.spec-row { display: grid; grid-template-columns: 68px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mo-line-soft); font-size: 14.5px; color: var(--mo-muted); }
.spec-row > .mono { font-size: 12px; color: var(--mo-text); }
.spec-row--last { border-bottom: none; }

/* Dashboard-Balken */
.dash-bar { display: flex; align-items: center; gap: 14px; }
.dash-bar > span:first-child { width: 160px; font-size: 13.5px; color: var(--mo-text); flex: none; }
.dash-bar__track { flex: 1; height: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dash-bar__track > span { display: block; height: 100%; }
.dash-bar > .mono:last-child { width: 42px; font-size: 12px; color: var(--mo-muted); text-align: right; flex: none; }

/* Integrationsgrafik — Listen-Ansicht unter 1000px */
.int-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mo-line-soft); }
.int-row > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--mo-muted); flex: none; }
.int-row--out > span:first-child { background: var(--mo-blue); }
.int-row > .mono { font-size: 12.5px; letter-spacing: .04em; color: var(--mo-text); }

/* Ein Impuls je Strecke, damit die Richtung lesbar wird. Die Pfade sind
   dieselben wie im SVG — ändert sich dort einer, muss er hier mit. */
@keyframes mo-flow {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  32%  { opacity: 1; }
  38%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
[data-flow] { animation: mo-flow 4.4s linear infinite; }
[data-flow="0"] { offset-path: path("M276 92 C 356 92, 396 200, 476 200");  animation-delay: 0s; }
[data-flow="1"] { offset-path: path("M276 164 C 356 164, 404 200, 476 200"); animation-delay: .28s; }
[data-flow="2"] { offset-path: path("M276 236 C 356 236, 404 200, 476 200"); animation-delay: .56s; }
[data-flow="3"] { offset-path: path("M276 308 C 356 308, 396 200, 476 200"); animation-delay: .84s; }
[data-flow="4"] { offset-path: path("M684 200 C 764 200, 804 62, 884 62");   animation-delay: 1.5s; }
[data-flow="5"] { offset-path: path("M684 200 C 764 200, 812 131, 884 131"); animation-delay: 1.74s; }
[data-flow="6"] { offset-path: path("M684 200 C 764 200, 812 200, 884 200"); animation-delay: 1.98s; }
[data-flow="7"] { offset-path: path("M684 200 C 764 200, 812 269, 884 269"); animation-delay: 2.22s; }
[data-flow="8"] { offset-path: path("M684 200 C 764 200, 804 338, 884 338"); animation-delay: 2.46s; }

/* Videokarten: Diagramm liegt über dem Standbild und weicht beim Abspielen */
.vcard { border: 1px solid var(--mo-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: var(--mo-bg); }
.vcard__stage { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.vcard__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.5) brightness(.5) contrast(.95) blur(1px);
  transition: filter .24s var(--mo-ease);
}
.vcard.is-playing .vcard__video { filter: none; }
.vcard__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,17,32,.86) 0%, rgba(11,17,32,.7) 45%, rgba(11,17,32,.88) 100%);
  transition: opacity .24s var(--mo-ease);
}
.vcard__diagram {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 22px; pointer-events: none;
  transition: opacity .24s var(--mo-ease);
}
.vcard.is-playing .vcard__scrim, .vcard.is-playing .vcard__diagram { opacity: 0; }
.vcard__flow { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vnode-circle { display: inline-flex; width: 46px; height: 46px; border: 1px solid var(--mo-blue); border-radius: 50%; align-items: center; justify-content: center; color: var(--mo-blue); }
.vnode-caption { margin-top: 8px; font-family: var(--mo-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.vline { width: 1px; border-left: 1px dashed rgba(111, 137, 248, .6); }
.vbox { display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(111, 137, 248, .45); border-radius: 6px; }
.vbox__label { font-family: var(--mo-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.vcard__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(11,17,32,.82) 100%); }
.vcard__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px; }
.vcard__play {
  display: inline-flex; width: 46px; height: 46px;
  border: 1px solid var(--mo-blue); border-radius: 50%;
  background: rgba(11, 17, 32, .85);
  align-items: center; justify-content: center;
  color: var(--mo-blue); cursor: pointer;
}
.vcard__play:hover { background: var(--mo-blue); color: #0b1120; }
.vcard__ico-pause { display: none; }
.vcard.is-playing .vcard__ico-play { display: none; }
.vcard.is-playing .vcard__ico-pause { display: block; }
.vcard__time { background: rgba(11, 17, 32, .85); border-radius: 4px; padding: 5px 9px; font-size: 12.5px; letter-spacing: .06em; color: var(--mo-blue); }
.vcard__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; border-top: 1px solid var(--mo-line-soft); }
.vcard__body p { font-size: 14.5px; line-height: 1.6; color: var(--mo-muted); }

/* ---------- Mediathek: Poster-Kachel, das Video lädt erst im Modal ---------- */
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mtile {
  position: relative; display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--mo-line); border-radius: 8px;
  background: var(--mo-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mtile__img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: 50% 22%; background: var(--mo-surface-2);
  transition: transform .3s var(--mo-ease);
}
.mtile__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 17, 32, .92) 76%);
}
.mtile__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; pointer-events: none; }
.mtile__title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff; }
.mtile__meta { display: block; margin-top: 6px; font-family: var(--mo-mono); font-size: 11px; letter-spacing: .08em; color: var(--mo-blue); }
.mtile__play {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 17, 32, .72); color: #fff;
  transition: background-color .16s var(--mo-ease);
}
.mtile:focus-visible { outline: 2px solid var(--mo-blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mtile:hover .mtile__img { transform: scale(1.04); }
  .mtile:hover .mtile__play { background: var(--mo-blue); }
}
@media (max-width: 1080px) { .mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .mgrid { grid-template-columns: repeat(2, 1fr); } }
/* Ab hier zieht [data-wrap] die Sektion auf 20 px Innenabstand — das negative
   margin unten rechnet genau damit, deshalb dieselbe Grenze wie dort. */
@media (max-width: 720px) {
  /* Reihe zum Wischen statt Stapel: man sieht, dass es weitergeht */
  .mgrid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 0 20px 8px; scrollbar-width: none;
  }
  .mgrid::-webkit-scrollbar { display: none; }
  .mgrid > * { flex: 0 0 64%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .mtile__img { transition: none; }
  html:not([data-motion="on"]) .mtile:hover .mtile__img { transform: none; }
}

/* Beleg-Zeile: ein einzelnes Video dort, wo die Aussage steht */
.vlink {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; max-width: 430px; padding: 10px 16px 10px 10px;
  border: 1px solid var(--mo-line); border-radius: 10px;
  background: var(--mo-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .16s var(--mo-ease), background-color .16s var(--mo-ease);
}
.vlink__img { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; object-position: 50% 14%; background: var(--mo-surface-2); }
.vlink__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--mo-text); }
.vlink__meta { display: block; margin-top: 3px; font-family: var(--mo-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mo-muted); }
.vlink__time { font-family: var(--mo-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--mo-blue); }
.vlink:focus-visible { outline: 2px solid var(--mo-blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .vlink:hover { border-color: var(--mo-blue); background: var(--mo-surface-2); }
}

/* Stimmen: Filter, Player der gewählten Stimme, 3×3-Auswahl */
.vhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vfilters { display: flex; gap: 6px; flex-wrap: wrap; }
.vfilter {
  height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--mo-line); background: transparent; color: var(--mo-text);
  font-family: var(--mo-body); font-size: 12px; cursor: pointer;
  transition: background-color .16s var(--mo-ease), border-color .16s var(--mo-ease), color .16s var(--mo-ease);
}
.vfilter:hover { border-color: var(--mo-blue); }
.vfilter.is-active { background: var(--mo-blue); border-color: var(--mo-blue); color: #fff; }

.vplayer { border: 1px solid var(--mo-line); border-radius: 12px; background: var(--mo-surface); padding: 22px 24px; margin-bottom: 12px; }
.vplayer__head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.vplayer__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  background: #e9eef8; color: #2f49c4;
}
/* Männliche Stimmen invertiert, damit die Auswahl auf einen Blick lesbar bleibt */
.vplayer__avatar[data-g="m"], .vcell[data-g="m"] .vcell__avatar { background: #2f49c4; color: #fff; }
.vplayer__id { min-width: 0; }
.vplayer__line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vplayer__name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--mo-text); }
.vplayer__meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-muted); }
.vplayer__traits { grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vchip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--mo-bg); color: var(--mo-text); }
.vplayer__btn {
  grid-column: 3; grid-row: 1;
  width: 48px; height: 48px; border-radius: 50%; border: none; flex: none;
  background: var(--mo-blue); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vplayer__btn:hover { background: #3d5ae0; }
.vplayer__btn:active { transform: scale(.97); }
.vplayer__play { margin-left: 2px; }
.vplayer__pause { display: none; }
.vplayer.is-playing .vplayer__play { display: none; }
.vplayer.is-playing .vplayer__pause { display: block; }
.vplayer__foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--mo-muted); font-variant-numeric: tabular-nums; }

.vwave { display: flex; align-items: center; gap: 2px; height: 36px; margin: 20px 0 12px; }
.vwave > span { flex: 1; border-radius: 2px; background: var(--mo-line); transition: height .18s var(--mo-ease), background-color .18s var(--mo-ease); }
.vwave > span.is-played { background: var(--mo-blue); }

.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vcell {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--mo-line); background: var(--mo-surface); cursor: pointer;
  transition: border-color .16s var(--mo-ease), background-color .16s var(--mo-ease), opacity .2s var(--mo-ease);
}
.vcell:hover { border-color: var(--mo-blue); }
.vcell.is-active { border-color: var(--mo-blue); background: rgba(79, 111, 245, .08); }
/* Vom Filter ausgeschlossen: sichtbar, aber zurückgenommen */
.vcell.is-dimmed { opacity: .3; }
.vcell__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: #e9eef8; color: #2f49c4;
}
.vcell__text { min-width: 0; }
.vcell__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--mo-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcell__short { display: block; font-size: 11.5px; color: var(--mo-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .vwave > span { transition: background-color .18s var(--mo-ease); }
}
@media (max-width: 600px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vplayer__traits { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .vgrid { grid-template-columns: 1fr; } }

/* Ökosystem-Zeilen */
.eco-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; padding: 18px 12px; margin: 0 -12px; border-bottom: 1px solid var(--mo-line-soft); align-items: baseline; border-radius: 4px; color: var(--mo-text); }
.eco-row--self { padding-left: 0; padding-right: 0; margin: 0; }
.eco-row__name { font-size: 16px; font-weight: 600; }
.eco-row__desc { font-size: 14.5px; line-height: 1.55; color: var(--mo-muted); }
.eco-row__arrow { display: inline-flex; align-items: center; color: var(--mo-muted); }

/* Auswahlkriterien */
.crit-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--mo-line-soft); }
.crit-item h3 { margin-bottom: 5px; font-size: 15.5px; letter-spacing: 0; }
.crit-item p { font-size: 14px; line-height: 1.6; color: var(--mo-muted); }

/* FAQ-Akkordeon */
.faq-item { border-bottom: 1px solid var(--mo-line-soft); }
.faq-q { display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left; background: transparent; border: none; padding: 20px 0; cursor: pointer; }
.faq-q__n { font-size: 11.5px; color: var(--mo-muted); flex: none; width: 26px; }
.faq-q__text { flex: 1; font-family: var(--mo-sans); font-size: 17px; font-weight: 500; color: var(--mo-text); letter-spacing: -.012em; }
.faq-q__chev { flex: none; color: var(--mo-muted); line-height: 0; transition: transform .22s var(--mo-ease-io), color .16s ease; }
.faq-item.is-open .faq-q__chev { transform: rotate(180deg); color: var(--mo-success); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--mo-ease); }
.faq-body > div { overflow: hidden; opacity: 0; transition: opacity .24s var(--mo-ease); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-item.is-open .faq-body > div { opacity: 1; }
.faq-body p { padding: 0 40px 22px 42px; font-size: 15px; line-height: 1.7; color: var(--mo-muted); }

/* Formular-Erfolgszustand */
.form-done { border: 1px solid rgba(53, 201, 138, .45); border-radius: 6px; padding: 20px; }
.form-done__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-success); }
.form-done p { font-size: 14.5px; line-height: 1.6; color: var(--mo-text); }

/* Hörbeispiel-Zeilen */
.audio-line { display: grid; grid-template-columns: 54px 1fr; gap: 16px; opacity: .1; transition: opacity .3s var(--mo-ease); }
.audio-line.is-on { opacity: 1; }
.audio-line__t { font-size: 11.5px; color: var(--mo-muted); padding-top: 2px; }
.audio-line__who { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.audio-line__text { display: block; font-size: 14.5px; line-height: 1.6; color: var(--mo-text); }

@media (max-width: 1080px) {
  [data-photoband] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-photoband] > div:first-child { padding: 0 0 4px !important; }
}
@media (max-width: 860px) {
  [data-photofigure] { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 780px) {
  .benefit-row, .phase-row { grid-template-columns: 1fr; gap: 6px; }
  .area-row { grid-template-columns: 40px 1fr; gap: 6px 16px; }
  .area-row h3 { grid-column: 2; }
  .area-row p { grid-column: 2; }
  .channel-row { grid-template-columns: 1fr; gap: 4px; }
  .dash-bar { flex-wrap: wrap; }
  .dash-bar > span:first-child { width: auto; flex: 1; }
  .dash-bar__track { flex-basis: 100%; order: 3; }
  .role-list { grid-template-columns: 1fr; }
  .eco-row { grid-template-columns: 1fr auto; }
  .eco-row__desc { grid-column: 1 / -1; }
}

/* ============================================================
   Rechtsseiten (Impressum, Datenschutz, AGB)
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: 128px 40px 96px; }
.legal h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.06; letter-spacing: -.032em; margin: 0 0 8px; }
.legal .legal__lead { font-family: var(--mo-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-muted); margin: 0 0 40px; }
.legal h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.022em; margin: 40px 0 12px; }
.legal h3 { font-size: 16px; letter-spacing: -.015em; color: var(--mo-blue); margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--mo-muted); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 6px; }
.legal a { color: var(--mo-blue); }
.legal a:hover { text-decoration: underline; }
.legal .legal__block { background: var(--mo-surface); border: 1px solid var(--mo-line); border-radius: 8px; padding: 20px 24px; margin: 0 0 14px; }
.legal .legal__block p:last-child { margin-bottom: 0; }
.legal strong { color: var(--mo-text); }
@media (max-width: 720px) { .legal { padding: 104px 20px 72px; } }

/* ============================================================
   Signature-Momente (v11)
   Einstieg als Anruf · Fall-Pills · Aufnahme-Player
   ============================================================ */

/* ---------- 01 Einstieg als Anruf ----------
   Läuft nur, wenn der Guard im <head> data-intro an <html> gesetzt hat. */
[data-introcall] { display: none; }
html[data-intro] [data-introcall] {
  display: flex; position: fixed; inset: 0; z-index: 300;
  flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: #0b1120; color: #fff;
  transition: opacity .35s var(--mo-ease);
}
html[data-intro] { overflow: hidden; }
[data-introcall][data-out] { opacity: 0; pointer-events: none; }
[data-introcore] {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--mo-blue); color: #fff;
  transition: background .3s var(--mo-ease);
}
[data-introring] {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(111,137,248,.5);
  animation: mo-ring 1.1s var(--mo-ease-io) infinite;
}
[data-introcall][data-accepted] [data-introring] { animation-play-state: paused; opacity: 0; }
[data-introcall][data-accepted] [data-introcore] { background: var(--mo-success); }
[data-introstatus] { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #9aa6c0; }
@keyframes mo-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* ---------- 03 Fall durchspielen ---------- */
.case-pill {
  font-family: var(--mo-mono); font-size: 11px; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--mo-line); color: var(--mo-muted);
  transition: color .2s var(--mo-ease), border-color .2s var(--mo-ease), background .2s var(--mo-ease);
}
.case-pill[aria-pressed="true"] { color: var(--mo-blue); border-color: var(--mo-blue); background: rgba(79,111,245,.08); }
.case-pill:active { transform: scale(.97); }
.case-hint {
  display: none; align-items: center; gap: 12px; margin: 0 0 32px;
  padding: 9px 16px; border: 1px solid var(--mo-blue); border-radius: 999px;
  background: rgba(79,111,245,.07); font-size: 14px;
}
.case-hint[data-on] { display: inline-flex; }
[data-sys] { transition: opacity .3s var(--mo-ease); }
[data-sys][data-dim] { opacity: .22; }

/* ---------- 02 Live-Uhr: die Uhrzeit-Headline ist länger als die statische ---------- */
[data-heroclock][data-clock] { font-size: clamp(30px, 3.4vw, 46px) !important; max-width: 720px !important; }

/* ---------- 05 Aufnahme-Player ---------- */
.rec {
  display: flex; align-items: center; gap: 18px;
  margin: 8px 0 32px; padding: 18px 20px;
  border: 1px solid var(--mo-line); border-radius: 8px; max-width: 760px;
}
.rec__btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--mo-blue); color: #fff;
}
.rec__btn:active { transform: scale(.97); }
.rec__btn:disabled { background: var(--mo-line); color: var(--mo-muted); cursor: default; }
.rec__bar { height: 3px; border-radius: 2px; background: var(--mo-line); overflow: hidden; }
.rec__bar > span { display: block; height: 100%; width: 0%; background: var(--mo-blue); }

@media (prefers-reduced-motion: reduce) {
  [data-introring] { animation: none; }
}

/* ── KI-Kennzeichnung ────────────────────────────────────────────────
   EU-AI-Act-Label auf KI-generierten Fotos. Wrapper um das <img>,
   das Label liegt als eigenes <img> in der Ecke. */
.aiimg { position: relative; display: block; }
.aiimg > img { display: block; }
.aiimg__label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 104px;
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
  pointer-events: none;
}