/* ============================================================
   DORA-Landingpage — Grundform "Die Weggabelung"

   Die Seite ist um EINE Frage gebaut: Reicht der Basistest nach
   Art. 24/25, oder gibt die Aufsicht einen TLPT nach Art. 26/27 vor?
   Der blaue Strang ist unser Weg (Art. 24/25), der gestrichelte,
   gedaempfte Strang ist der andere Weg (Art. 26/27, ausdruecklich
   nicht unser Angebot).

   Zweitakzent Bernstein (--dr-amber) hat GENAU EINE Bedeutung:
   aufsichtliche Durchsetzung, Frist, Konsequenz. Nirgends sonst.

   Kein Abschnitt wiederholt die Gestalt seines Vorgaengers:
   Gabel-Figur, Faktenspalten, Zeitachse, Pfadvergleich, Registerliste,
   Konsequenzenliste, flache Pruefliste, Jahresring, Schrittbahn,
   Leistungskarten, FAQ-Register.

   Hallmark: fork-as-structure, monospace indices, hairline rules.
   ============================================================ */

.dora {
  --dr-navy-1: #02101f;
  --dr-navy-2: #041326;
  --dr-navy-3: #04182F;

  --dr-blue: #1E88E5;
  --dr-blue-15: rgba(30, 136, 229, 0.15);
  --dr-blue-30: rgba(30, 136, 229, 0.3);
  --dr-blue-08: rgba(30, 136, 229, 0.08);

  --dr-amber: #EF9F27;
  --dr-amber-30: rgba(239, 159, 39, 0.3);
  --dr-amber-10: rgba(239, 159, 39, 0.1);

  --dr-ink-1: #ffffff;
  --dr-ink-2: rgba(255, 255, 255, 0.8);
  --dr-ink-3: rgba(255, 255, 255, 0.6);
  --dr-ink-4: rgba(255, 255, 255, 0.42);
  --dr-mute: rgba(255, 255, 255, 0.34);
  --dr-line: rgba(255, 255, 255, 0.09);

  --dr-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --dr-dur: 620ms;

  background: var(--dr-navy-2);
  display: block;
}

.dora .container,
.dora .container-fluid { position: relative; }

/* ---- Baender: Rhythmus der drei erlaubten Navy-Toene ---- */
.dr-band { padding: 104px 0; position: relative; }
.dr-band-2 { background: var(--dr-navy-2); }
.dr-band-3 { background: var(--dr-navy-3); }
.dr-band-4 { background: var(--dr-navy-1); }
.dr-band-5 { background: var(--dr-navy-2); }
.dr-band-6 { background: var(--dr-navy-3); }
.dr-band-7 { background: var(--dr-navy-1); }
.dr-band-8 { background: var(--dr-navy-2); }
.dr-band-9 { background: var(--dr-navy-3); }
.dr-band-10 { background: var(--dr-navy-1); }
.dr-band-11 { background: var(--dr-navy-2); }

/* ---- Typografie ---- */
.dr-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dr-blue);
  margin: 0 0 0.7rem;
}
.dr-h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 800;
  color: var(--dr-ink-1); letter-spacing: -0.02em; line-height: 1.16;
  margin: 0 0 0.9rem; text-wrap: balance;
}
.dr-lead {
  font-size: 1rem; line-height: 1.8; color: var(--dr-ink-3);
  margin: 0; max-width: 62ch;
}
.dr-lead-wide { max-width: 78ch; margin-top: 0.4rem; }
.dr-lead-center { margin: 0.4rem auto 0; }

.dr-split-head {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem 4rem; align-items: end;
  padding-bottom: 2.4rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--dr-line);
}
.dr-split-head .dr-h2 { margin-bottom: 0; }
.dr-center-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }

/* ============================================================
   1 · Hero
   ============================================================ */
.dr-hero {
  background: var(--dr-navy-1);
  padding: 118px 0 96px;
  position: relative; overflow: hidden;
}
.dr-hero::before {
  content: ''; position: absolute; top: -240px; right: -180px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 136, 229, 0.09) 0%, transparent 70%);
  pointer-events: none;
}
.dr-hero::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dr-blue-30), transparent);
}
.dr-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: 4.5rem; align-items: start;
}
.dr-hero-copy { min-width: 0; }

.dr-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dr-blue-08); border: 1px solid var(--dr-blue-30);
  border-radius: 3px; padding: 5px 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--dr-blue); margin: 0 0 1.6rem;
}
.dr-h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--dr-ink-1);
  margin: 0 0 1.6rem; text-wrap: balance;
}
.dr-h1-accent { color: var(--dr-blue); display: block; }

.dr-alert {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--dr-amber-10); border: 1px solid var(--dr-amber-30);
  border-left-width: 3px; border-radius: 4px;
  padding: 0.95rem 1.35rem; margin: 0 0 2.2rem;
  font-size: 0.85rem; line-height: 1.6; color: var(--dr-ink-2);
  max-width: 62ch;
}
.dr-alert svg { color: var(--dr-amber); flex-shrink: 0; margin-top: 2px; }
.dr-alert strong { color: var(--dr-amber); }

.dr-hero-text {
  font-size: 1.02rem; line-height: 1.8; color: var(--dr-ink-3);
  max-width: 60ch; margin: 0 0 2.4rem;
}

.dr-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.dr-actions--center { justify-content: center; }
.dr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 700; text-decoration: none !important;
  transition: background var(--dr-dur) var(--dr-ease), color 200ms, transform 180ms, box-shadow 200ms;
}
.dr-btn-primary {
  background: var(--dr-blue); color: #fff !important;
  padding: 14px 28px; border-radius: 4px;
  box-shadow: 0 4px 18px rgba(30, 136, 229, 0.3);
}
.dr-btn-primary:hover { background: #0A3570; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30, 136, 229, 0.4); }
.dr-btn-ghost {
  color: var(--dr-ink-3) !important; font-weight: 500;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.dr-btn-ghost:hover { color: var(--dr-ink-1) !important; border-bottom-color: var(--dr-blue); }

.dr-trust {
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.8rem;
}
.dr-trust li {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 600; color: var(--dr-ink-4);
}
.dr-trust svg { color: var(--dr-blue); flex-shrink: 0; }

/* ---- Die Gabel-Figur im Hero ---- */
.dr-fig { margin: 0; min-width: 0; }
.dr-fig-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(30, 136, 229, 0.85);
  margin-bottom: 1.5rem;
}
.dr-branch-tag {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--dr-blue); background: var(--dr-blue-08);
  border: 1px solid var(--dr-blue-30); border-radius: 3px;
  padding: 4px 10px; margin: 0 0 0.9rem;
}
.dr-branch-tag--alt { color: var(--dr-mute); background: rgba(255, 255, 255, 0.03); border-color: var(--dr-line); }

.dr-branch-list { list-style: none; padding: 0; margin: 0; }
.dr-node {
  position: relative; padding: 0 0 1.15rem 1.9rem;
}
.dr-node:last-child { padding-bottom: 0; }
.dr-node::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: 0;
  width: 2px; background: var(--dr-blue-15);
}
.dr-node:last-child::before { display: none; }
.dr-node::after {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dr-navy-1); border: 2px solid var(--dr-blue);
}
.dr-branch--alt .dr-node::after { border-color: var(--dr-mute); }
.dr-branch--alt .dr-node::before { background: var(--dr-line); }
.dr-node-title {
  font-weight: 700; color: var(--dr-ink-1); font-size: 0.9rem;
  margin: 0 0 4px; line-height: 1.35;
}
.dr-node-text { font-size: 0.8rem; color: var(--dr-ink-4); line-height: 1.65; margin: 0; }
.dr-branch--alt .dr-node-title { color: var(--dr-ink-3); }

.dr-branch--main { padding-bottom: 0.25rem; }
.dr-branch--alt {
  margin-left: 2.4rem; padding: 1.1rem 1.25rem;
  border: 1px dashed var(--dr-line); border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}
.dr-fork { height: 66px; margin-left: -1px; }
.dr-fork-svg { display: block; overflow: visible; }
.dr-fork-stem { stroke: var(--dr-blue); }
.dr-fork-arm { stroke: var(--dr-mute); }
.dr-fork-node { fill: var(--dr-navy-1); stroke: var(--dr-blue); stroke-width: 2; }

.dr-fig-foot {
  margin: 1.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--dr-line);
  font-size: 0.78rem; line-height: 1.7; color: var(--dr-ink-4);
}

/* ============================================================
   2 · Der Stamm — drei Faktenspalten
   ============================================================ */
.dr-facts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem;
}
.dr-fact { padding-top: 1.1rem; border-top: 2px solid var(--dr-blue-30); }
.dr-fact-idx {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--dr-blue); margin-bottom: 0.7rem;
}
.dr-fact p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--dr-ink-3); }

/* ============================================================
   3 · Zeitachse
   ============================================================ */
.dr-axis {
  list-style: none; padding: 0; margin: 3.4rem 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  position: relative;
}
.dr-axis::before {
  content: ''; position: absolute; left: 0; right: 0; top: 46px; height: 2px;
  background: var(--dr-line);
}
.dr-axis-pt { position: relative; padding: 0 1.6rem 0 0; }
.dr-axis-pt:last-child { padding-right: 0; }
.dr-axis-date {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--dr-blue); height: 34px;
}
.dr-axis-dot {
  display: block; position: relative; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dr-navy-3); border: 2px solid var(--dr-blue);
  margin: 5px 0 1.5rem;
}
.dr-axis-pt--now .dr-axis-date { color: var(--dr-amber); }
.dr-axis-pt--now .dr-axis-dot { border-color: var(--dr-amber); box-shadow: 0 0 0 4px var(--dr-amber-10); }
.dr-axis-title { color: var(--dr-ink-1); font-size: 0.95rem; font-weight: 700; margin: 0 0 0.45rem; line-height: 1.3; }
.dr-axis-text { color: var(--dr-ink-4); font-size: 0.8rem; line-height: 1.7; margin: 0; }

/* Der Fortschritt der Achse laeuft bis zum Knoten "aktive Durchsetzung":
   drei von vier Spaltenbreiten plus der halbe Rest. */
.dr-axis::after {
  content: ''; position: absolute; left: 0; top: 46px; height: 2px; z-index: 1;
  width: 78%;
  background: linear-gradient(90deg, var(--dr-blue) 0%, var(--dr-blue) 62%, var(--dr-amber) 100%);
  transform-origin: left center;
}

/* ============================================================
   4 · Die Gabelung — zwei Pfade, Merkmal als Mittelachse
   ============================================================ */
.dr-forkwide { max-width: 980px; margin: 0 auto 0.25rem; }
.dr-forkwide svg { display: block; width: 100%; height: auto; }
.dr-fw-stem { stroke: var(--dr-blue); }
.dr-fw-arm--a { stroke: var(--dr-blue); }
.dr-fw-arm--b { stroke: var(--dr-mute); }
.dr-fw-node { fill: var(--dr-navy-1); stroke: var(--dr-blue); stroke-width: 2; }

.dr-paths { max-width: 980px; margin: 0 auto; }
.dr-path-heads,
.dr-path-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 0.62fr) minmax(0, 1fr);
  gap: 0 1.5rem; align-items: center;
}
.dr-path-heads { margin-bottom: 0.4rem; }
.dr-path-head {
  margin: 0; padding: 0.8rem 1.15rem; border-radius: 4px 4px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-align: center;
}
.dr-path-head--ours { color: var(--dr-blue); background: rgba(30, 136, 229, 0.14); border-bottom: 2px solid var(--dr-blue); }
.dr-path-head--alt { color: var(--dr-mute); background: rgba(255, 255, 255, 0.03); border-bottom: 2px solid var(--dr-line); }
.dr-path-spine {
  margin: 0; text-align: center; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dr-ink-4);
}

.dr-path-row { border-bottom: 1px solid var(--dr-line); }
.dr-path-row:last-of-type { border-bottom: none; }
.dr-path-cell {
  margin: 0; padding: 1.05rem 1.15rem; font-size: 0.86rem; line-height: 1.6;
}
.dr-path-cell--ours { color: var(--dr-ink-2); background: rgba(30, 136, 229, 0.05); }
.dr-path-cell--alt { color: var(--dr-mute); }
.dr-path-label {
  margin: 0; text-align: center; font-size: 0.78rem; font-weight: 700;
  color: var(--dr-ink-1); letter-spacing: 0.01em;
}
.dr-path-row--verdict .dr-path-cell--ours { background: rgba(30, 136, 229, 0.1); color: var(--dr-ink-1); font-weight: 600; }
.dr-mark { display: inline-block; margin-right: 8px; font-weight: 800; }
.dr-mark--yes { color: var(--dr-blue); }
.dr-mark--no { color: var(--dr-mute); }

.dr-note {
  max-width: 900px; margin: 2.6rem auto 0;
  background: var(--dr-blue-08); border-left: 3px solid var(--dr-blue);
  border-radius: 0 4px 4px 0; padding: 1.2rem 1.5rem;
  font-size: 0.86rem; line-height: 1.75; color: var(--dr-ink-3);
}
.dr-note strong { color: var(--dr-blue); }

/* ============================================================
   5 · Registerliste der betroffenen Sektoren
   ============================================================ */
.dr-register {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3rem;
}
.dr-reg {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--dr-line);
  transition: border-color 220ms var(--dr-ease);
}
.dr-reg:hover { border-bottom-color: var(--dr-blue-30); }
.dr-reg-idx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem; font-weight: 700; color: rgba(30, 136, 229, 0.65);
  flex-shrink: 0; letter-spacing: 0.06em;
}
.dr-reg-name { font-size: 0.9rem; color: var(--dr-ink-2); line-height: 1.5; }

/* ============================================================
   6 · Konsequenzen — Bernsteinkante, genau eine Bedeutung
   ============================================================ */
.dr-conseq {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 3rem 4rem;
  align-items: start;
}
.dr-conseq-head { position: sticky; top: 110px; }
.dr-conseq-head .dr-h2 { margin-bottom: 1.8rem; }
.dr-conseq-mark { color: var(--dr-amber); opacity: 0.35; display: block; width: 64px; height: 64px; }
.dr-conseq-list {
  list-style: none; padding: 0 0 0 1.75rem; margin: 0;
  border-left: 2px solid var(--dr-amber-30);
}
.dr-conseq-list li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 0.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--dr-line);
}
.dr-conseq-list li:first-child { padding-top: 0; }
.dr-conseq-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dr-conseq-idx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem; font-weight: 800; color: var(--dr-amber); letter-spacing: 0.08em;
  padding-top: 3px;
}
.dr-conseq-list p { margin: 0; font-size: 0.87rem; line-height: 1.75; color: var(--dr-ink-3); }

/* ============================================================
   7 · Pruefbereiche — flache Zweispaltenliste, keine Karten
   ============================================================ */
.dr-checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
}
.dr-check {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.7rem 0; border-top: 1px solid var(--dr-line);
  position: relative;
}
.dr-check::after {
  content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
  background: var(--dr-blue); transition: width 420ms var(--dr-ease);
}
.dr-check:hover::after { width: 100%; }
.dr-check-idx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; font-weight: 800; color: rgba(30, 136, 229, 0.6);
  letter-spacing: 0.06em; padding-top: 2px;
}
.dr-check-title { color: var(--dr-ink-1); font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.3; }
.dr-check-text { color: var(--dr-ink-3); font-size: 0.86rem; line-height: 1.75; margin: 0 0 0.85rem; }
.dr-check-tag {
  display: inline-block; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
  color: rgba(30, 136, 229, 0.85);
}

/* ============================================================
   8 · Der Pflicht-Rhythmus — Jahresring und Kennzahlen
   ============================================================ */
.dr-rhythm {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3.5rem 4.5rem; align-items: center;
}
.dr-ring-wrap { margin: 0; text-align: center; }
.dr-ring { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto 1.6rem; }
.dr-ring-track { stroke: var(--dr-line); }
/* Kein transform-origin auf diesem Kreis: zusammen mit dem
   transform-Attribut rotate(-90 100 100) rechnet Chrome den Ursprung ein
   zweites Mal ein und schiebt den Bogen komplett aus dem viewBox heraus -
   der Ring war dadurch unsichtbar, ohne jede Fehlermeldung. */
.dr-ring-arc {
  stroke: var(--dr-blue);
  stroke-dasharray: 502.7; stroke-dashoffset: 0;
}
.dr-ring-ticks line { stroke: rgba(255, 255, 255, 0.18); }
.dr-ring-flag { fill: var(--dr-amber); }
.dr-ring-flag-label {
  fill: #14243a; font-size: 9px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dr-ring-big { fill: var(--dr-ink-1); font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.dr-ring-cap { display: block; max-width: 34ch; margin: 0 auto; }
.dr-ring-cap-lead {
  display: block; font-size: 0.84rem; font-weight: 700;
  color: var(--dr-ink-2); line-height: 1.55; margin-bottom: 0.6rem;
}
.dr-ring-cap-text { display: block; font-size: 0.79rem; line-height: 1.7; color: var(--dr-ink-4); }

.dr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2rem; }
.dr-kpi { border-top: 2px solid var(--dr-blue-30); padding-top: 1rem; }
.dr-kpi-num {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800;
  color: var(--dr-ink-1); letter-spacing: -0.03em; margin: 0 0 0.4rem; line-height: 1.1;
}
.dr-kpi-label { font-size: 0.76rem; color: var(--dr-ink-4); line-height: 1.55; margin: 0; }
.dr-kpi-source {
  grid-column: 1 / -1; margin: 0; font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3); line-height: 1.6;
}

/* ============================================================
   9 · Ablauf — Schrittbahn und Musterbericht
   ============================================================ */
.dr-track {
  list-style: none; padding: 0; margin: 0 0 4rem;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.5rem;
  position: relative;
}
.dr-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: var(--dr-line);
}
.dr-track-step { position: relative; padding-top: 2.1rem; }
.dr-track-step::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dr-navy-3); border: 2px solid var(--dr-blue); z-index: 2;
}
.dr-track-num {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(30, 136, 229, 0.7); margin-bottom: 0.5rem;
}
.dr-track-title { color: var(--dr-ink-1); font-size: 0.93rem; font-weight: 700; margin: 0 0 0.45rem; line-height: 1.3; }
.dr-track-text { color: var(--dr-ink-4); font-size: 0.8rem; line-height: 1.7; margin: 0; }

.dr-report {
  max-width: 840px; margin: 0 auto;
  background: var(--dr-navy-1); border: 1px solid var(--dr-blue-15);
  border-radius: 6px; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dr-report-hdr {
  background: var(--dr-blue-08); border-bottom: 1px solid var(--dr-blue-15);
  padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dr-report-hdr > span { font-size: 0.7rem; color: var(--dr-ink-4); letter-spacing: 0.04em; }
.dr-report-badge {
  font-size: 0.64rem !important; font-weight: 700; color: var(--dr-blue);
  background: var(--dr-blue-08); border: 1px solid var(--dr-blue-30);
  border-radius: 3px; padding: 2px 9px; flex-shrink: 0;
}
.dr-report-body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 12px; }
.dr-report-row { display: flex; align-items: center; gap: 12px; }
.dr-sev { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dr-sev--cr { background: #E24B4A; }
.dr-sev--hi { background: var(--dr-amber); }
.dr-sev--me { background: var(--dr-blue); }
.dr-report-txt { color: var(--dr-ink-3); font-size: 0.75rem; flex: 1; line-height: 1.5; }
.dr-report-ref { font-size: 0.68rem; color: rgba(30, 136, 229, 0.75); text-align: right; flex-shrink: 0; white-space: nowrap; }
.dr-report-ftr {
  border-top: 1px solid var(--dr-line); padding: 11px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.dr-report-ftr-badge { font-size: 0.65rem; font-weight: 700; color: rgba(30, 136, 229, 0.85); }
.dr-report-ftr-ref { font-size: 0.62rem; color: rgba(255, 255, 255, 0.26); }
.dr-report-note {
  max-width: 840px; margin: 0.8rem auto 0;
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.3); line-height: 1.5;
}

/* ============================================================
   10 · Leistungen
   ============================================================ */
.dr-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.dr-service {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.022); border: 1px solid var(--dr-line);
  border-radius: 8px; padding: 1.9rem 1.7rem; text-decoration: none !important;
  transition: border-color 240ms var(--dr-ease), transform 240ms var(--dr-ease), background 240ms var(--dr-ease);
}
.dr-service:hover { border-color: var(--dr-blue-30); background: var(--dr-blue-08); transform: translateY(-3px); }
.dr-service-icon { color: var(--dr-blue); margin-bottom: 1.1rem; }
.dr-service-title { color: var(--dr-ink-1); font-size: 1rem; font-weight: 700; margin: 0 0 0.6rem; line-height: 1.3; }
.dr-service-text { color: var(--dr-ink-4); font-size: 0.84rem; line-height: 1.75; margin: 0 0 1.4rem; flex: 1; }
.dr-service-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 700; color: var(--dr-blue);
}

/* ============================================================
   11 · FAQ — flaches Register statt Kaesten
   ============================================================ */
.dr-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.dr-faq .accordion-item {
  background: transparent; border: none;
  border-top: 1px solid var(--dr-line); border-radius: 0; overflow: hidden;
}
.dr-faq .accordion:last-child .accordion-item:last-child { border-bottom: 1px solid var(--dr-line); }
.dr-faq .accordion-button {
  background: transparent; border: none; box-shadow: none;
  padding: 1.15rem 0.25rem; width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
}
.dr-faq .accordion-button h3 {
  font-size: 0.93rem; font-weight: 600; color: var(--dr-ink-2); margin: 0; line-height: 1.45;
  transition: color 200ms;
}
.dr-faq .accordion-button:not(.collapsed) h3 { color: var(--dr-blue); }
.dr-faq .accordion-button:hover h3 { color: var(--dr-ink-1); }
.dr-faq .accordion-body {
  padding: 0 0.25rem 1.3rem; font-size: 0.86rem; line-height: 1.8; color: var(--dr-ink-3);
}
.dr-faq .accordion-button::after { filter: invert(1) brightness(0.55); flex-shrink: 0; }
.dr-faq .accordion-button:not(.collapsed)::after { filter: invert(0.4) sepia(1) saturate(3) hue-rotate(180deg) brightness(1.2); }

/* ============================================================
   12 · Abschluss
   ============================================================ */
.dr-cta {
  background: linear-gradient(135deg, rgba(30, 136, 229, 0.1) 0%, rgba(30, 136, 229, 0.035) 100%);
  border-top: 1px solid var(--dr-blue-15); border-bottom: 1px solid var(--dr-blue-15);
  padding: 84px 0; text-align: center;
}
.dr-cta-fork { margin-bottom: 1.6rem; }
.dr-cta-fork svg { display: block; margin: 0 auto; opacity: 0.55; }
.dr-cta-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--dr-ink-1);
  letter-spacing: -0.02em; margin: 0 0 0.8rem; text-wrap: balance;
}
.dr-cta-text { color: var(--dr-ink-3); font-size: 0.97rem; max-width: 56ch; margin: 0 auto 2.2rem; line-height: 1.75; }

/* ============================================================
   Bewegung

   Text steht immer vollstaendig im gerenderten HTML. Versteckt wird
   ausschliesslich ueber opacity, und nur wenn JavaScript gelaufen ist
   (.dora-js). Faellt der IntersectionObserver aus, setzt das Skript
   sofort .is-in auf alles. Keine Keyframe-Animation, ohne die Inhalt
   unsichtbar bliebe.
   ============================================================ */
.dora-js .dr-reveal { opacity: 0; transform: translateY(14px); }
.dora-js .dr-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dr-dur) var(--dr-ease), transform var(--dr-dur) var(--dr-ease);
}

/* Gabel: zeichnet sich einmal. Die Laenge jedes Pfads misst das Skript und
   setzt sie als --dr-len; ohne Skript steht die Linie sofort vollstaendig da. */
.dora-js .dr-draw { stroke-dashoffset: var(--dr-len, 0); }
.dora-js .is-in .dr-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 760ms var(--dr-ease);
}
.dora-js .is-in .dr-fork-arm,
.dora-js .is-in .dr-fw-arm--a { transition-delay: 260ms; }
.dora-js .is-in .dr-fw-arm--b { transition-delay: 420ms; }
.dora-js .dr-fig .dr-fork-node,
.dora-js .dr-forkwide .dr-fw-node { opacity: 0; }
.dora-js .is-in .dr-fork-node,
.dora-js .is-in .dr-fw-node { opacity: 1; transition: opacity 280ms var(--dr-ease) 380ms; }

/* Zeitachse: der Balken waechst bis zum Knoten "aktive Durchsetzung". */
.dora-js .dr-axis::after { transform: scaleX(0); }
.dora-js .dr-axis.is-in::after { transform: scaleX(1); transition: transform 1100ms var(--dr-ease) 180ms; }
.dora-js .dr-axis .dr-axis-dot { opacity: 0; transform: scale(0.5); }
.dora-js .dr-axis.is-in .dr-axis-dot {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--dr-ease), transform 300ms var(--dr-ease);
}
.dora-js .dr-axis.is-in .dr-axis-pt:nth-child(1) .dr-axis-dot { transition-delay: 240ms; }
.dora-js .dr-axis.is-in .dr-axis-pt:nth-child(2) .dr-axis-dot { transition-delay: 500ms; }
.dora-js .dr-axis.is-in .dr-axis-pt:nth-child(3) .dr-axis-dot { transition-delay: 760ms; }
.dora-js .dr-axis.is-in .dr-axis-pt:nth-child(4) .dr-axis-dot { transition-delay: 1020ms; }

/* Jahresring: der Bogen schliesst sich einmal, die Aprilmarke pocht dreimal. */
.dora-js .dr-ring-arc { stroke-dashoffset: 502.7; }
.dora-js .dr-ring-wrap.is-in .dr-ring-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--dr-ease) 200ms; }
.dora-js .dr-ring-flag,
.dora-js .dr-ring-flag-label { opacity: 0; }
.dora-js .dr-ring-wrap.is-in .dr-ring-flag,
.dora-js .dr-ring-wrap.is-in .dr-ring-flag-label { opacity: 1; transition: opacity 320ms var(--dr-ease) 1100ms; }
.dora-js .dr-ring-flag { transform-box: fill-box; transform-origin: center; }
.dora-js .dr-ring-wrap.is-in .dr-ring-flag { animation: drPulse 1500ms var(--dr-ease) 1400ms 3; }
@keyframes drPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

/* Schrittbahn: die Knoten setzen sich nacheinander. */
.dora-js .dr-track .dr-track-step::before { opacity: 0; transform: scale(0.5); }
.dora-js .dr-track.is-in .dr-track-step::before {
  opacity: 1; transform: none;
  transition: opacity 280ms var(--dr-ease), transform 280ms var(--dr-ease);
}
.dora-js .dr-track.is-in .dr-track-step:nth-child(1)::before { transition-delay: 200ms; }
.dora-js .dr-track.is-in .dr-track-step:nth-child(2)::before { transition-delay: 380ms; }
.dora-js .dr-track.is-in .dr-track-step:nth-child(3)::before { transition-delay: 560ms; }
.dora-js .dr-track.is-in .dr-track-step:nth-child(4)::before { transition-delay: 740ms; }
.dora-js .dr-track.is-in .dr-track-step:nth-child(5)::before { transition-delay: 920ms; }

@media (prefers-reduced-motion: reduce) {
  .dora-js .dr-reveal,
  .dora-js .dr-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dora-js .dr-axis::after { transform: scaleX(1) !important; transition: none !important; }
  .dora-js .dr-axis .dr-axis-dot,
  .dora-js .dr-track .dr-track-step::before,
  .dora-js .dr-fig .dr-fork-node,
  .dora-js .dr-forkwide .dr-fw-node,
  .dora-js .dr-ring-flag,
  .dora-js .dr-ring-flag-label { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dora-js .dr-ring-arc { stroke-dashoffset: 0 !important; transition: none !important; }
  .dora-js .dr-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .dora-js .dr-ring-wrap.is-in .dr-ring-flag { animation: none !important; }
  .dr-btn, .dr-service, .dr-check::after { transition: none !important; }
}

/* ============================================================
   Breiten
   ============================================================ */
@media (max-width: 1199.98px) {
  .dr-hero-grid { gap: 3.2rem; }
  .dr-rhythm { gap: 2.8rem 3rem; }
  .dr-checks { column-gap: 2.6rem; }
  .dr-register { column-gap: 2rem; }
}

@media (max-width: 991.98px) {
  .dr-band { padding: 76px 0; }
  .dr-hero { padding: 88px 0 72px; }
  .dr-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .dr-fig { max-width: 620px; }
  .dr-split-head { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
  .dr-facts { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .dr-register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-conseq { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .dr-checks { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .dr-rhythm { grid-template-columns: minmax(0, 1fr); }
  .dr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dr-services { grid-template-columns: minmax(0, 1fr); }
  .dr-faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dr-faq .accordion:last-child .accordion-item:last-child { border-bottom: 1px solid var(--dr-line); }

  /* Zeitachse kippt auf eine senkrechte Schiene. */
  .dr-axis { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 1.9rem; }
  .dr-axis::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .dr-axis::after { left: 5px; top: 6px; width: 2px; height: 80%;
    background: linear-gradient(180deg, var(--dr-blue) 0%, var(--dr-blue) 62%, var(--dr-amber) 100%);
    transform-origin: center top; }
  .dora-js .dr-axis::after { transform: scaleY(0); }
  .dora-js .dr-axis.is-in::after { transform: scaleY(1); }
  .dr-axis-pt { padding: 0 0 1.9rem 0; }
  .dr-axis-pt:last-child { padding-bottom: 0; }
  .dr-axis-date { height: auto; margin-bottom: 0.4rem; }
  .dr-axis-dot { position: absolute; left: -1.9rem; top: 3px; margin: 0; }

  /* Schrittbahn kippt ebenfalls senkrecht. */
  .dr-track { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 1.9rem; margin-bottom: 3rem; }
  .dr-track::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .dr-track-step { padding: 0 0 1.7rem 0; }
  .dr-track-step:last-child { padding-bottom: 0; }
  .dr-track-step::before { left: -1.9rem; top: 2px; }
}

@media (max-width: 767.98px) {
  .dr-band { padding: 60px 0; }
  .dr-hero { padding: 70px 0 56px; }
  .dr-h1-accent { display: inline; }
  .dr-branch--alt { margin-left: 1.1rem; }
  .dr-register { grid-template-columns: minmax(0, 1fr); }
  .dr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-kpi-source { grid-column: 1 / -1; }
  .dr-conseq-list { padding-left: 1.2rem; }
  .dr-conseq-list li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .dr-report-body { padding: 1.1rem 1rem; }
  .dr-report-row { flex-wrap: wrap; row-gap: 3px; }
  .dr-report-ref { width: 100%; text-align: left; padding-left: 20px; }

  /* Pfadvergleich: aus der Mittelachse werden gestapelte Bloecke. */
  .dr-path-heads { display: none; }
  .dr-path-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.1rem 0; }
  .dr-path-label { text-align: left; order: -1; font-size: 0.68rem; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--dr-ink-4); margin-bottom: 0.6rem; }
  .dr-path-cell { padding: 0.55rem 0.9rem; border-left: 2px solid transparent; }
  .dr-path-cell--ours { border-left-color: var(--dr-blue); margin-bottom: 0.4rem; }
  .dr-path-cell--alt { border-left-color: var(--dr-line); }
  .dr-path-cell::before {
    display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 3px;
  }
  .dr-path-cell--ours::before { content: 'Art. 24 / 25'; color: var(--dr-blue); }
  .dr-path-cell--alt::before { content: 'Art. 26 / 27 · TLPT'; color: var(--dr-mute); }
}