/* ═════════════════════════════════════════════════════════════════════════
   Startseite — neue Kapitel

   Ersetzt: „Aus fünf Baustellen wird ein System", „Sichtbarkeit endet nicht
   beim Gefundenwerden", die zwei umschaltbaren Hero-Fälle und die große
   Integrations-Logowand.

   Baut auf den Tokens aus main.css auf. Neu ist nur das semantische
   Farbsystem darunter — es kommt nicht zusätzlich, sondern ordnet die
   vorhandenen Farben einer festen Bedeutung zu.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Jede Farbe bedeutet auf der ganzen Seite dasselbe. Nie dekorativ. */
  /* Aus den drei Markentönen abgeleitet, jeder auf mindestens 5:1 gegen
     --canvas gebracht — sie tragen Schrift und dünne Linien. Anfrage und
     Ablauf bleiben getrennt: es sind zwei Bedeutungen, keine Variante. */
  --sicht: #097078;      /* Sichtbarkeit, Aufmerksamkeit, Nachfrage */
  --sicht-fl: #0E8A97;   /* dieselbe Bedeutung, für Flächen und Linien */
  --anfrage: #6553C4;    /* Fragen, Anfragen, Kundeninteresse */
  --ablauf: #446B99;     /* Abläufe, Termine, Informationsübertragung */
  --ergebnis: #516C43;   /* Ergebnis, bestätigte Verbindung, Wirksamkeit */
  --system: #19191C;     /* acessio-System, Diagnose, Priorität */

  --flaeche: #FBFAF8;
  --ease-sys: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ 1 · Hero-Arbeitsfläche ══════════════════════════════════════════════
   Ein einziger Vorgang, kein Umschalter. Er endet NICHT beim Verlust:
   Signal → Engpass → Maßnahme → Umsetzung → Messung.
   Höchstens drei Detailangaben gleichzeitig — was verstanden ist, tritt
   zurück und bleibt als Zeile stehen. */

.hf { margin-top: clamp(36px, 4.5vw, 60px); }

.hf__blatt {
  background: var(--flaeche);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px);
  box-shadow:
    0 1px 1px rgba(25, 25, 28, 0.03),
    0 8px 16px -8px rgba(25, 25, 28, 0.05),
    0 30px 50px -34px rgba(25, 25, 28, 0.14);
}

.hf__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.hf__kopf b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.hf__kopf span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }

/* Das Ziel steht durchgehend oben — alles darunter dient ihm. */
.hf__ziel { padding: 18px 0 4px; opacity: 0; transform: translateY(8px); }
.hf__ziel-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.hf__ziel-t { margin-top: 6px; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.018em; }

/* ── Der Vorgang: was mit 96 Anrufen tatsächlich passiert ───────────── */

.hf__vorgang { margin-top: 20px; }
.hf__quelle {
  display: flex; align-items: baseline; gap: 12px;
  opacity: 0; transform: translateY(8px);
}
.hf__quelle b {
  font-size: clamp(34px, 3.6vw, 48px); font-weight: 500;
  line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.hf__quelle span { font-size: 14px; color: var(--muted); }

/* Der Strom teilt sich sichtbar — nicht drei gleichartige Statistikkacheln. */
.hf__teilung {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; margin-top: 16px;
}
.hf__ast {
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--line);
  opacity: 0; transform: translateY(9px);
}
.hf__ast b { display: block; font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.hf__ast span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hf__ast--gut { border-color: color-mix(in oklab, var(--ergebnis) 34%, transparent); }
.hf__ast--gut b { color: var(--ergebnis); }
.hf__ast--luecke { border-color: color-mix(in oklab, var(--anfrage) 34%, transparent); }
.hf__ast--luecke b { color: var(--anfrage); }

/* Ab der Diagnose schrumpft der Vorgang auf eine Zeile zusammen. */
.hf__kurz {
  display: none; align-items: baseline; gap: 10px;
  padding: 10px 0; font-size: 13.5px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.hf__kurz i { font-style: normal; color: var(--anfrage); font-weight: 600; }

/* ── Diagnose, Maßnahmen, Messung ───────────────────────────────────── */

.hf__block { opacity: 0; transform: translateY(10px); }

.hf__engpass {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--system);
}
.hf__engpass p:first-child { font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(243, 241, 240, 0.55); }
.hf__engpass p:last-child {
  margin-top: 8px; color: #F6F4F1;
  font-family: var(--serif); font-style: normal;
  font-size: clamp(19px, 1.95vw, 26px); line-height: 1.1; letter-spacing: -0.02em;
}

.hf__mass { margin-top: 18px; }
.hf__mass-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); }
.hf__zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
  opacity: 0; transform: translateX(-6px);
}
/* Der Punkt zeigt, WO die Maßnahme wirkt — Bedeutung, nicht Dekoration. */
.hf__wo { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.hf__wo--sicht { background: var(--sicht-fl); }
.hf__wo--anfrage { background: var(--anfrage); }
.hf__wo--ablauf { background: var(--ablauf); }

.hf__mess { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hf__mess-l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ablauf); }
.hf__mess ul { list-style: none; margin-top: 9px; display: grid; gap: 6px; }
.hf__mess li { font-size: 14px; color: var(--ink-2); }
.hf__mess li::before { content: "?"; color: var(--ablauf); font-weight: 600; margin-right: 8px; }

.hf__fuss {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: 13.5px; opacity: 0;
}
.hf__fuss b { font-weight: 600; }
.hf__fuss span { color: var(--muted); }

.hf__quelle-hinweis { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* Nur einmal ansehen — dezent, kein Loader, keine Schleife. */
.hf__nochmal {
  margin-top: 12px; border: 0; background: transparent; padding: 6px 2px;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity 400ms var(--ease-sys), color 200ms var(--ease-sys);
}
.hf__nochmal:hover { color: var(--ink); }
.hf[data-stufe="9"] .hf__nochmal { opacity: 1; }

/* ── Stufen ─────────────────────────────────────────────────────────── */

.hf__ziel, .hf__quelle, .hf__ast, .hf__block, .hf__zeile, .hf__fuss {
  transition: opacity 700ms var(--ease-sys), transform 700ms var(--ease-sys);
}
.hf[data-stufe="1"] .hf__ziel, .hf[data-stufe="2"] .hf__ziel, .hf[data-stufe="3"] .hf__ziel,
.hf[data-stufe="4"] .hf__ziel, .hf[data-stufe="5"] .hf__ziel, .hf[data-stufe="6"] .hf__ziel,
.hf[data-stufe="7"] .hf__ziel, .hf[data-stufe="8"] .hf__ziel, .hf[data-stufe="9"] .hf__ziel { opacity: 1; transform: none; }

.hf[data-stufe="2"] .hf__quelle, .hf[data-stufe="3"] .hf__quelle, .hf[data-stufe="4"] .hf__quelle { opacity: 1; transform: none; }
.hf[data-stufe="3"] .hf__ast, .hf[data-stufe="4"] .hf__ast { opacity: 1; transform: none; }

/* Ab Stufe 5 ist der Vorgang verstanden: er weicht der Diagnose. */
.hf[data-stufe="5"] .hf__vorgang, .hf[data-stufe="6"] .hf__vorgang,
.hf[data-stufe="7"] .hf__vorgang, .hf[data-stufe="8"] .hf__vorgang,
.hf[data-stufe="9"] .hf__vorgang { display: none; }
.hf[data-stufe="5"] .hf__kurz, .hf[data-stufe="6"] .hf__kurz,
.hf[data-stufe="7"] .hf__kurz, .hf[data-stufe="8"] .hf__kurz,
.hf[data-stufe="9"] .hf__kurz { display: flex; }

.hf[data-stufe="5"] .hf__engpass, .hf[data-stufe="6"] .hf__engpass,
.hf[data-stufe="7"] .hf__engpass, .hf[data-stufe="8"] .hf__engpass,
.hf[data-stufe="9"] .hf__engpass { opacity: 1; transform: none; }

.hf[data-stufe="6"] .hf__mass, .hf[data-stufe="7"] .hf__mass,
.hf[data-stufe="8"] .hf__mass, .hf[data-stufe="9"] .hf__mass { opacity: 1; transform: none; }
.hf[data-stufe="6"] .hf__zeile:nth-of-type(1),
.hf[data-stufe="7"] .hf__zeile, .hf[data-stufe="8"] .hf__zeile, .hf[data-stufe="9"] .hf__zeile { opacity: 1; transform: none; }
.hf[data-stufe="7"] .hf__zeile:nth-of-type(2) { transition-delay: 160ms; }
.hf[data-stufe="7"] .hf__zeile:nth-of-type(3) { transition-delay: 320ms; }

.hf[data-stufe="8"] .hf__mess, .hf[data-stufe="9"] .hf__mess { opacity: 1; transform: none; }
.hf[data-stufe="9"] .hf__fuss { opacity: 1; }

/* ═══ 2 · Sechs Quellen ══════════════════════════════════════════════════
   Die frühere Fassung (Kästen mit Beschreibungssätzen, feste Verbindungslinien,
   eigener Mobilersatz) ist entfallen. Die Sektion läuft jetzt über
   assets/css/fluss.css. Die alten Regeln standen hier noch und haben die neue
   Bühne unter 899 px per display:none ausgeblendet. */

/* ═══ 3 · Werkzeuge bleiben ═══════════════════════════════════════════ */

.wz__gruppen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; margin-top: clamp(30px, 3.4vw, 46px);
  background: var(--line); border: 1px solid var(--line);
}
.wz__g { background: var(--canvas); padding: clamp(20px, 2.2vw, 28px); }
.wz__g b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wz__g span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.wz__g i { display: block; width: 22px; height: 2px; margin-bottom: 14px; }
.wz__fuss { margin-top: 20px; font-size: 12.5px; color: var(--muted); }

/* ═══ 4 · Ein Ziel. Viele Signale. ════════════════════════════════════ */

.zs__raster {
  display: grid; gap: 1px; margin-top: clamp(32px, 3.6vw, 52px);
  background: var(--line); border: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
}
.zs__f { background: var(--canvas); padding: clamp(22px, 2.4vw, 32px); }
.zs__l { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; }
.zs__f h3 { margin-top: 9px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.zs__f ul { list-style: none; margin-top: 13px; display: grid; gap: 7px; }
.zs__f li { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.zs__f li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; vertical-align: 0.12em; background: currentColor; opacity: 0.4; }
.zs__f p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.zs__f--ziel .zs__l { color: var(--sicht); }
.zs__f--signal .zs__l { color: var(--anfrage); }
.zs__f--engpass { background: var(--system); }
.zs__f--engpass .zs__l { color: rgba(243, 241, 240, 0.55); }
.zs__f--engpass h3 { color: #F6F4F1; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.02em; }
.zs__f--engpass p { color: rgba(243, 241, 240, 0.6); }
.zs__f--mass .zs__l { color: var(--sicht); }
.zs__f--mess .zs__l { color: var(--ablauf); }
.zs__f--zurueck .zs__l { color: var(--ergebnis); }

@media (min-width: 900px) {
  .zs__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zs__f--ziel { grid-column: 1 / -1; }
  .zs__f--zurueck { grid-column: 1 / -1; }
}

/* ═══ 5 · Branchenfälle ═══════════════════════════════════════════════ */

.bf { display: grid; gap: 1px; margin-top: clamp(32px, 3.6vw, 52px); background: var(--line); border: 1px solid var(--line); }
.bf__f { background: var(--canvas); padding: clamp(22px, 2.4vw, 34px); }
.bf__wer { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.bf__zahl { margin-top: 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bf__zahl b { font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bf__zahl span { font-size: 14px; color: var(--muted); }
.bf__verlust { margin-top: 12px; font-family: var(--serif); font-style: normal; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.12; letter-spacing: -0.02em; }
.bf__schritt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.bf__schritt b { font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sicht); display: block; }
.bf__schritt ul { list-style: none; margin-top: 10px; display: grid; gap: 7px; }
.bf__schritt li { font-size: 14px; color: var(--ink-2); }
.bf__schritt li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sicht-fl); margin-right: 9px; vertical-align: 0.12em; }
.bf__danach { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.bf__danach b { color: var(--ablauf); font-weight: 600; }

@media (min-width: 900px) { .bf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ Mobile ══════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .hf__teilung { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* Eigene senkrechte Dramaturgie statt gestapelter Desktop-Fassung.
     Gemessen waren 1102 px Höhe — alles gleichzeitig sichtbar. Mobil steht
     immer nur der aktive Gedanke im Bild; das Ziel bleibt als Zeile darüber.
     Nebeneffekt: die Fläche ist niedrig genug, dass die Animation überhaupt
     anläuft, statt unter dem Bildrand zu warten. */
  .hf__vorgang, .hf__engpass, .hf__mass, .hf__mess, .hf__fuss { display: none; }
  .hf[data-stufe="2"] .hf__vorgang,
  .hf[data-stufe="3"] .hf__vorgang,
  .hf[data-stufe="4"] .hf__vorgang { display: block; }
  .hf[data-stufe="5"] .hf__engpass { display: block; }
  .hf[data-stufe="6"] .hf__mass,
  .hf[data-stufe="7"] .hf__mass { display: block; }
  .hf[data-stufe="8"] .hf__mess { display: block; }
  .hf[data-stufe="9"] .hf__fuss { display: flex; }
  /* Im Endzustand steht die Kette vollständig da — sonst wäre der Schluss leer. */
  .hf[data-stufe="9"] .hf__engpass,
  .hf[data-stufe="9"] .hf__mass,
  .hf[data-stufe="9"] .hf__mess { display: block; }
  .hf__ziel-t { font-size: 19px; }
  .hf__engpass p:last-child { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf__ziel, .hf__quelle, .hf__ast, .hf__block, .hf__zeile, .hf__fuss,
  .hf__ziel, .hf__quelle, .hf__ast {
    transition: none !important;
  }
}