/* Funnel-Seiten "Workflow X/100". Gilt für jede Workflow-Seite, nur Markup und
   Daten (script#workflow-daten) ändern sich je Workflow. Grammatik: Live surface.
   Die Seite ist eine stilisierte Workflow-Oberfläche im Markenlook, keine Kopie
   von n8n, Gmail oder Google. */

:root { --leiste: 64px; }

/* ================= App-Leiste (ersetzt die Navigation) ================= */
.lauf-leiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--leiste);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
  background: var(--karte);
  border-bottom: var(--kontur);
}
.lauf-leiste .badge { font-size: 0.85rem; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.8em;
  border: var(--kontur-fein);
  border-radius: var(--rund);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--weiss);
  transition: transform 140ms var(--sc-ease-out);
}
.zurueck:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .zurueck:hover { background: var(--limette); } }
.tabs {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  gap: 0.4rem;
}
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.8em 0.4em 0.5em;
  border: var(--kontur-fein);
  border-radius: var(--rund);
  background: var(--weiss);
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--sc-ease-out);
}
.tabs i {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: var(--kontur-fein);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.8em;
  font-weight: 900;
  line-height: 1;
}
.tabs [data-zustand="laeuft"] a { background: var(--tinte); color: var(--karte); }
.tabs [data-zustand="laeuft"] i { border-color: var(--limette); background: var(--blau); }
.tabs [data-zustand="fertig"] a { background: var(--limette); }
.tabs [data-zustand="fertig"] i::before { content: "✓"; }
/* ================= Akt 1: Wiedererkennung (Ebenen) ================= */
.hook {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  padding-top: var(--leiste);
}
.hook__ebene { position: absolute; pointer-events: none; }
.hook__postfach {
  right: clamp(1rem, 3vw, 3rem);
  top: calc(var(--leiste) + 9vh);
  width: min(38rem, 46vw);
  transform-origin: center;
}
.hook__fenster { transform: rotate(2deg); pointer-events: auto; }
.hook__stapel {
  left: 47%;
  top: calc(var(--leiste) + 44vh);
  width: 15rem;
  height: 19rem;
}
.hook__stapel .blatt { position: absolute; inset: 0; }
.hook__stapel .blatt:nth-child(1) { transform: rotate(-11deg) translate(-1.5rem, 0.5rem); }
.hook__stapel .blatt:nth-child(2) { transform: rotate(6deg) translate(1.5rem, -0.5rem); }
.hook__stapel .blatt:nth-child(3) { transform: rotate(-3deg); }
.hook__zaehler {
  right: clamp(3rem, 6vw, 7rem);
  top: calc(var(--leiste) + 2.5vh);
  padding: 0.45em 0.9em;
  background: var(--limette);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: var(--rund);
  font-weight: 900;
  font-size: 1.05rem;
  rotate: 7deg;
  white-space: nowrap;
}
.hook__text {
  position: relative;
  z-index: 3;
  width: min(36rem, 46vw);
  margin-left: var(--sc-gutter);
  padding-top: clamp(2.5rem, 11vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}
.problemkarte {
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.6rem, 2.8vw, 2.4rem);
  transform: rotate(-2deg);
}
.problemkarte h1 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.problemkarte p {
  margin: 1rem 0 0;
  font-weight: 600;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.4;
  max-width: 34ch;
}

/* Postfach-Fenster (stilisiert) */
.fenster { overflow: hidden; }
.fenster__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--tinte);
  color: var(--karte);
  font-weight: 800;
  font-size: 0.95rem;
}
.fenster__kopf .beispiel { background: var(--limette); color: var(--tinte); }
.mails { list-style: none; margin: 0; padding: 0.35rem 0; }
.mails li {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1.5px solid rgba(10, 16, 51, 0.16);
  font-size: 0.95rem;
}
.mails li:last-child { border-bottom: 0; }
.mails .punkt { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--blau); border: 1.5px solid var(--tinte); }
.mails b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mails span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinte-leise); }
.anhang {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.12em 0.5em;
  border: var(--kontur-fein);
  border-radius: 6px;
  background: var(--weiss);
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  white-space: nowrap;
}

/* Beleg-Blatt: die stilisierte Beispielrechnung */
.blatt {
  background: var(--weiss);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: 6px 6px 6px 22px;
  padding: 1rem 1rem 1.1rem;
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  overflow: hidden;
}
.blatt--leer::before, .blatt--leer::after {
  content: "";
  display: block;
  height: 0.55rem;
  margin: 0.55rem 0;
  background: rgba(10, 16, 51, 0.82);
  border-radius: 4px;
  width: 70%;
}
.blatt--leer { background-image: repeating-linear-gradient(to bottom, transparent 0 1.6rem, rgba(10,16,51,0.14) 1.6rem 1.75rem); background-position: 0 4.5rem; }
.blatt__kopf { font-family: var(--sc-font-display); font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.blatt dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.05rem 0.6rem; }
.blatt dt { color: var(--tinte-leise); }
.blatt dd { margin: 0; font-weight: 700; text-align: right; }
.blatt__summe { margin-top: 0.55rem; padding-top: 0.45rem; border-top: 2px solid var(--tinte); display: flex; justify-content: space-between; font-weight: 700; font-size: 0.82rem; }

/* ================= Akt 2: Durchlauf (Schiene) ================= */
.lauf .sc-stage { display: flex; align-items: center; padding-top: var(--leiste); }
.schiene {
  align-items: center;
  gap: 0;
  padding: 0 var(--sc-gutter);
  width: 100%;
}
.schiene > * { flex: 0 0 auto; }
.schiene__kopf { width: min(27rem, 80vw); padding: 1.8rem 1.8rem 2rem; transform: rotate(-1.5deg); margin-right: clamp(1.5rem, 6vw, 6rem); }
.schiene__kopf h2 { margin: 0.8rem 0 0.6rem; font-weight: 900; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1.04; letter-spacing: -0.035em; }
.schiene__kopf p { margin: 0; font-size: 1rem; }
.schiene__ende {
  margin-left: 1rem;
  width: min(17rem, 70vw);
  padding: 1.2rem 1.3rem 1.3rem;
  transform: rotate(3deg);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
/* Auslauf am Ende der Schiene. Als Element, weil scrollWidth den Außenabstand des letzten Flex-Kinds ignoriert. */
.schiene::after { content: ""; flex: 0 0 34vw; height: 1px; }
.draht {
  position: relative;
  width: clamp(3rem, 6vw, 6rem);
  height: 10px;
  background: rgba(10, 16, 51, 0.35);
  border-radius: 5px;
  margin: 0 0.6rem;
}
.draht::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  translate: 0 -50%;
  border-left: 14px solid var(--tinte);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.draht__fuellung {
  position: absolute;
  inset: 0;
  background: var(--tinte);
  border-radius: 5px;
  transform-origin: left center;
  transform: scaleX(var(--f, 0));
}

/* Knoten */
.knoten {
  width: min(25rem, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: var(--kontur);
  box-shadow: var(--schatten);
  border-radius: var(--radius);
  overflow: hidden;
}
.knoten:nth-of-type(odd) { transform: rotate(-1deg); }
.knoten:nth-of-type(even) { transform: rotate(0.8deg); }
.knoten__kopf {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-bottom: var(--kontur);
}
.knoten__icon {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.6rem;
  border: var(--kontur);
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--limette);
  font-weight: 900;
  font-size: 1.25rem;
}
.knoten__titel { margin: 0; font-weight: 900; font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.025em; }
.knoten__icon { position: relative; }
.knoten[data-zustand="fertig"] .knoten__icon::after {
  content: "✓";
  position: absolute;
  inset: -3px;
  display: grid;
  place-items: center;
  background: var(--limette);
  color: var(--tinte);
  border: var(--kontur);
  border-radius: inherit;
  font-size: 1.3rem;
  transform: rotate(-6deg);
}
.knoten__satz { margin: 0; font-weight: 700; font-size: 1.1rem; line-height: 1.35; letter-spacing: -0.01em; }
.knoten__koerper { flex: 1; padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.knoten--dunkel { background: var(--tinte); color: var(--karte); box-shadow: var(--schatten-limette); }
.knoten--dunkel .knoten__kopf { border-color: var(--karte); }
.knoten--dunkel .knoten__icon { background: var(--blau); border-color: var(--karte); color: var(--weiss); }

/* Mail im Postfach-Knoten */
.mail { padding: 0.9rem 1rem; background: var(--weiss); border: var(--kontur-fein); border-radius: var(--radius-klein); font-size: 0.92rem; }
.mail b { display: block; font-weight: 800; }
.mail .anhang { margin-top: 0.7rem; transition: transform 260ms var(--sc-ease-out), background-color 200ms; }
.knoten[data-zustand="fertig"] .mail .anhang,
.knoten[data-zustand="laeuft"] .mail .anhang { background: var(--limette); transform: translate(6px, -4px) rotate(-3deg); }

/* KI-Knoten: Vorschau mit Scanbalken, Felder */
.ki-vorschau { position: relative; }
.ki-vorschau .blatt { box-shadow: 4px 4px 0 var(--limette); border-color: var(--karte); color: var(--tinte); }
.scan {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 0;
  height: 8px;
  background: var(--limette);
  border: 2px solid var(--tinte);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(calc(var(--scan, 0) * 1px));
}
.felder { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.7rem; align-items: center; }
.felder dt { font-weight: 800; font-size: 0.95rem; }
.felder dd {
  margin: 0;
  min-height: 1.9rem;
  padding: 0.25rem 0.55rem;
  background: rgba(238, 243, 255, 0.12);
  border: 2px dashed rgba(238, 243, 255, 0.5);
  border-radius: 7px;
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.felder dd.voll { background: var(--karte); color: var(--tinte); border: 2px solid var(--karte); }

/* Ablage-Knoten */
.ordner {
  position: relative;
  padding: 2rem 0.9rem 0.9rem;
  background: var(--weiss);
  border: var(--kontur-fein);
  border-radius: 4px var(--radius-klein) var(--radius-klein) var(--radius-klein);
  flex: 1;
}
.ordner::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -14px;
  width: 42%;
  height: 14px;
  background: var(--weiss);
  border: var(--kontur-fein);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.ordner__name { position: absolute; left: 0.9rem; top: 0.45rem; font-weight: 900; font-size: 0.95rem; }
.dateien { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.dateien li {
  display: flex;
  font-size: 0.82rem !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 2px dashed rgba(10, 16, 51, 0.4);
  border-radius: 8px;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  color: var(--tinte-leise);
}
.dateien li.neu {
  border: var(--kontur-fein);
  background: var(--limette);
  color: var(--tinte);
  box-shadow: 3px 3px 0 var(--tinte);
  opacity: 0;
  transform: translateY(calc(var(--fall, 1) * -2.2rem)) rotate(calc(var(--fall, 1) * -6deg));
}

/* ================= Akt 3: Peak, das Sheet ================= */
.peak .sc-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--leiste) + 1rem) var(--sc-gutter) 1.5rem;
}
.sheet-wrap { position: relative; width: min(76rem, 100%); }
.sheet { padding: 0; overflow: hidden; }
.sheet__kopf {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border-bottom: var(--kontur);
}
.sheet__kopf .knoten__icon { width: 2.4rem; height: 2.2rem; font-size: 1rem; }
.sheet__kopf p { margin: 0; font-weight: 900; font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.1; }
.sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(1rem, 0.8rem + 0.4vw, 1.25rem); }
.sheet th {
  background: var(--tinte);
  color: var(--karte);
  font-weight: 800;
  text-align: left;
  padding: 0.8rem 0.8rem;
  border-right: 1.5px solid rgba(238, 243, 255, 0.25);
}
.sheet td {
  padding: 1.1rem 0.8rem;
  border-right: 1.5px solid rgba(10, 16, 51, 0.18);
  border-bottom: 1.5px solid rgba(10, 16, 51, 0.18);
  background: var(--weiss);
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.6rem + 0.95vw, 1.6rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
  vertical-align: top;
  height: 7.5rem;
  transition: background-color 260ms var(--sc-ease-out);
}
.sheet th:nth-child(1) { width: 17%; }
.sheet th:nth-child(2) { width: 30%; }
.sheet th:nth-child(3) { width: 14%; }
.sheet th:nth-child(4) { width: 21%; }
.sheet th:nth-child(5) { width: 18%; }
.sheet .zeilen-nr { width: 2.6rem; text-align: center; font-family: var(--sc-font-display); font-weight: 900; color: var(--tinte-leise); }
.sheet td.aktiv { box-shadow: inset 0 0 0 3px var(--blau); }
.sheet td.aktiv::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--tinte);
}
.sheet tr.geschrieben td { background: var(--limette); }
.sheet td.offen { font-family: var(--sc-font-display); font-weight: 600; font-style: italic; color: var(--tinte-leise); }
.sheet tr.geschrieben td.offen { background: var(--weiss); }

.chip {
  position: absolute;
  left: 63%;
  top: -3.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  background: var(--karte);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: var(--rund);
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 4;
  opacity: 0;
}
.steht-drin {
  position: absolute;
  right: 2rem;
  bottom: -5.6rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.4rem 0.8rem 0.8rem;
  background: var(--limette);
  border: 4px solid var(--tinte);
  box-shadow: 8px 8px 0 var(--tinte);
  border-radius: 22px;
  transform: rotate(-4deg) scale(var(--pop, 0.95));
  opacity: 0;
}
.steht-drin__haken {
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--limette);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.7rem;
}
.steht-drin p { margin: 0; font-weight: 900; font-size: clamp(2.2rem, 1rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.045em; }
.steht-drin .beispiel { position: absolute; top: -0.9rem; left: 1.2rem; }
.nachsatz {
  margin: 7.6rem 0 0;
  padding: 0.7rem 1.1rem;
  max-width: 40rem;
  font-weight: 800;
  font-size: 1.25rem;
  opacity: 0;
}

/* ================= Vorlage für weitere Workflows (erzeugt von bauen.py) ================= */
.hook__teil {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em 0.55em 0.55em;
  background: var(--karte);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: 14px;
  font-weight: 900;
  font-size: 1.15rem;
  white-space: nowrap;
  pointer-events: none;
}
.hook__teil i { font-style: normal; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: var(--kontur-fein); border-radius: 9px; background: var(--limette); font-size: 0.95rem; }
.zeilen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 0.7rem; align-items: center; }
.zeilen dt { font-weight: 800; font-size: 0.9rem; }
.zeilen dd {
  margin: 0;
  min-height: 2rem;
  padding: 0.3rem 0.6rem;
  background: var(--weiss);
  border: 2px dashed rgba(10, 16, 51, 0.4);
  border-radius: 8px;
  font-family: var(--sc-font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.zeilen dd.voll { border-style: solid; background: var(--limette); }
.knoten--dunkel .zeilen dd { background: rgba(238, 243, 255, 0.12); border-color: rgba(238, 243, 255, 0.5); color: var(--karte); }
.knoten--dunkel .zeilen dd.voll { background: var(--karte); color: var(--tinte); border: 2px solid var(--karte); }
.sheet--frei table { table-layout: auto; }
.sheet--frei th { width: auto !important; }
.sheet--frei td { height: auto; min-height: 3.2rem; padding-block: 0.9rem; }
.sheet--frei tbody tr + tr td { border-top: 1.5px solid rgba(10, 16, 51, 0.18); }
.ergebnis__knoepfe { display: flex; gap: 0.8rem; padding: 0.9rem 1.1rem; border-top: var(--kontur-fein); background: var(--karte); }
.ergebnis__knoepfe .knopf { pointer-events: none; }

/* ================= Telefon ================= */
@media (max-width: 860px) {
  :root { --leiste: 104px; }
  .lauf-leiste { flex-wrap: wrap; align-content: center; row-gap: 0.45rem; height: var(--leiste); }
  .lauf-leiste nav { order: 3; width: 100%; }
  .tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; width: 100%; justify-content: space-between; margin: 0; gap: 0.3rem; }
  .tabs a { font-size: 0.78rem; padding: 0.32em 0.6em 0.34em 0.4em; }
  .lauf-leiste .badge { font-size: 0.78rem; }

  .hook__text { width: auto; margin: 0 var(--sc-gutter); padding-top: 1.6rem; }
  .problemkarte h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hook__postfach { right: -18vw; left: auto; top: auto; bottom: 2vh; width: 92vw; }
  .mails li { grid-template-columns: 0.7rem minmax(0, 8rem) minmax(0, 1fr); }
  .mails li .anhang { display: none; }
  .hook__stapel { left: 4vw; top: auto; bottom: 14vh; width: 9.5rem; height: 12rem; }
  .hook__stapel .blatt { font-size: 0.55rem; padding: 0.6rem; }
  .hook__zaehler { left: auto; right: 6vw; top: auto; bottom: calc(14vh + 11.5rem); font-size: 0.92rem; }
  .hook .knopf { font-size: 1rem; }
  .hook__teil { font-size: 0.85rem; top: auto !important; }
  .hook__teil:nth-of-type(1) { right: 6% !important; bottom: 10vh; }
  .hook__teil:nth-of-type(2) { right: auto !important; left: 6%; bottom: 16vh; }
  .hook__teil:nth-of-type(3) { right: 30% !important; bottom: 4vh; }
  .hook__teil:nth-of-type(n+4) { display: none; }

  .knoten { min-height: 0; }
  .schiene__kopf { margin-right: 1.5rem; }

  .peak .sc-stage { padding-top: calc(var(--leiste) + 2.4rem); justify-content: flex-start; }
  .sheet table, .sheet tbody, .sheet tr, .sheet td { display: block; width: auto !important; }
  .sheet thead { display: none; }
  .sheet td {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 0.6rem;
    height: auto;
    min-height: 2.4rem;
    padding: 0.5rem 0.8rem;
    border-right: 0;
    font-size: 0.8rem;
  }
  .sheet td::before { content: attr(data-label); font-family: var(--sc-font-display); font-weight: 800; color: var(--tinte); }
  .sheet td.aktiv::after { display: none; }
  .sheet td.aktiv { box-shadow: inset 4px 0 0 var(--blau); }
  .sheet .zeilen-nr { display: none; }
  .chip { left: auto; right: 0.5rem; top: -2.9rem; font-size: 0.72rem; }
  .steht-drin { position: relative; right: auto; bottom: auto; width: max-content; margin: 0.9rem 0.4rem 0 auto; padding: 0.5rem 1rem 0.55rem 0.55rem; gap: 0.6rem; }
  .steht-drin__haken { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .steht-drin p { font-size: 1.7rem; }
  .nachsatz { margin-top: 1.4rem; font-size: 0.98rem; }

}

/* ================= Weniger Bewegung ================= */
@media (prefers-reduced-motion: reduce) {
  /* Die Schiene wird ein normaler Abschnitt mit umbrechenden Knoten:
     alles bleibt erreichbar, nichts gleitet. */
  .lauf { height: auto !important; }
  .lauf .sc-stage { position: relative; height: auto; overflow: visible; padding: calc(var(--leiste) + 2rem) 0 3rem; }
  .lauf .schiene { flex-wrap: wrap; justify-content: center; row-gap: 2.5rem; overflow: visible; }
  .lauf .draht { display: none; }
  .lauf .schiene::after { display: none; }
  .knoten, .knoten:nth-of-type(odd), .knoten:nth-of-type(even) { transform: none; }
  .scan { display: none; }
  .dateien li.neu { transform: none; }
  .chip { display: none; }
  .steht-drin { transform: rotate(-4deg); }
  .mail .anhang { transition: none; }
  .knoten[data-zustand] .mail .anhang { transform: none; }
}