/* ==========================================================
   Interface -- eigenes Seitenmodul ueber troncom.css.
   Eigenes visuelles Mittel: ein Geraeterahmen, in dem die
   Oberflaeche laeuft, und ein Vorgang als Sequenzdiagramm.
   ========================================================== */
.if {
  --rule: rgba(255,255,255,.14);
  --rule-strong: rgba(255,255,255,.3);
  --dim: rgba(255,255,255,.5);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.25, 0, .3, 1);
}
.if-wrap { max-width: 1300px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 80px); }

/* ---------- Buehne: Video bleibt, Inhalt ist neu ---------- */
.if-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.if-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 46%, transparent 24%, rgba(0,0,0,.66) 100%),
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.4) 32%, transparent 60%);
}
.if-hero-inhalt {
  position: relative; z-index: 2;
  max-width: 1300px; width: 100%;
  margin: 0 auto; padding: clamp(120px, 16vh, 190px) clamp(20px, 5vw, 80px) clamp(50px, 7vh, 90px);
}
.if-kicker {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: var(--mono); font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  opacity: 0; animation: ifAuf .9s cubic-bezier(.25,0,.3,1) .1s forwards;
}
.if-kicker::before { content: ''; width: 40px; height: 1px; background: rgba(255,255,255,.4); }

.if-hero h1 {
  font-size: clamp(38px, 5.9vw, 88px); font-weight: 600;
  letter-spacing: -.038em; line-height: 1.03;
  text-shadow: 0 2px 40px rgba(0,0,0,.6);
}
.if-ln {
  /* Platz fuer die Unterlaengen: der Aufzugsrahmen schnitt g, p und j ab.
     Die Aussparung wird per negativem Rand wieder eingezogen, damit der
     Zeilenabstand gleich bleibt. Der Startversatz waechst entsprechend,
     sonst luegte die Zeile vor dem Aufzug unten heraus. */
  display: block; overflow: hidden;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.if-ln > span {
  display: block; transform: translateY(125%);
  animation: ifRise .95s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay: calc(var(--l) * 130ms + 250ms);
}
@keyframes ifRise { to { transform: none; } }
@keyframes ifAuf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.if-lead {
  margin-top: clamp(24px, 2.8vw, 34px);
  font-size: clamp(16px, 1.55vw, 20px); line-height: 1.6;
  color: rgba(255,255,255,.7); max-width: 54ch;
  opacity: 0; animation: ifAuf .9s cubic-bezier(.25,0,.3,1) .62s forwards;
}
.if-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(40px, 5.2vw, 74px);
  padding: 17px 30px; border-radius: 100px;
  background: #fff; color: #000; text-decoration: none;
  font-size: clamp(13px, 1.2vw, 15px); font-weight: 600; letter-spacing: -.01em;
  opacity: 0; animation: ifAuf .9s cubic-bezier(.25,0,.3,1) .78s forwards;
  transition: box-shadow .3s ease;
}
.if-cta i { font-size: 12px; transition: transform .3s cubic-bezier(.25,0,.3,1); }
.if-cta:hover { box-shadow: 0 14px 40px rgba(255,255,255,.16); }
.if-cta:hover i { transform: translateX(4px); }

/* ---------- Geraeterahmen ---------- */
.if-schirm-sec { padding-bottom: clamp(56px, 8vw, 110px); }

/* Die Buehne gibt die Strecke vor, ueber die sich der Deckel hebt.
   Das Geraet bleibt dabei stehen, gescrollt wird die Buehne. */
.if-buehne { height: 210vh; }
.if-klebe {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  /* ohne feste Spalte bemisst sich die Bahn am Inhalt -- die Miniaturen
     rechnen in Prozent und tragen fast nichts bei, das Geraet schrumpft dann */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
/* Auto-Raender wuerden im Grid die Streckung aushebeln und den
   Inhalt auf seine Eigenbreite zusammenziehen. */
.if-klebe > .if-wrap { width: 100%; max-width: none; padding-inline: 0; }
/* ==========================================================
   Der Laptop: 3D-Modell in einer Leinwand.
   Groesse und Bildausschnitt setzt das Modul, hier steht nur
   die Buehne, in der die Leinwand sitzt.
   ========================================================== */
.mb3 {
  position: relative;
  width: 100%;
  max-width: min(1420px, 96vw);
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  max-height: 94svh;
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s cubic-bezier(.25,0,.3,1), transform 1s cubic-bezier(.25,0,.3,1);
}
.mb3.visible { opacity: 1; transform: none; }
.mb3 canvas { display: block; width: 100%; height: 100%; }


/* ---------- Abschnitte ---------- */
.if-sec { padding-block: clamp(56px, 7.5vw, 104px); border-top: 1px solid var(--rule); }
.if-num {
  display: block; margin-bottom: clamp(14px, 1.8vw, 20px);
  font-family: var(--mono); font-size: clamp(9.5px, .95vw, 11px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.if-kopf { margin-bottom: clamp(36px, 4.6vw, 58px); max-width: 62ch; }
.if-kopf h2 {
  font-size: clamp(28px, 3.9vw, 54px); font-weight: 600;
  letter-spacing: -.032em; line-height: 1.05;
}
.if-kopf > p {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.62; color: rgba(255,255,255,.58);
}

/* Vier Punkte */
.if-punkte { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px, 3.4vw, 56px); }

/* Kleiner Schirm je Punkt: ein Ausschnitt der Oberflaeche, der laeuft */
.if-schirmchen {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background:
    radial-gradient(130% 120% at 20% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%), #000;
}
.mn { position: absolute; inset: 0; padding: clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; justify-content: center; }

/* 01 Eingabe: es wird getippt, dann kommt eine Rueckfrage */
.mn-feld {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
}
.mn-text { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); width: 0; }
.mn-caret { display: block; width: 1.5px; height: 13px; background: #fff; }
.mn-rueck { display: flex; align-items: center; gap: 8px; margin-top: 14px; opacity: 0; }
.mn-rueck i { width: 6px; height: 6px; border-radius: 50%; background: #FFC46B; flex: 0 0 auto; }
.mn-rueck span { display: block; height: 5px; width: 58%; border-radius: 3px; background: rgba(255,255,255,.24); }
.if-punkte.visible .mn-text  { animation: mnTippen 6s cubic-bezier(.3,0,.6,1) infinite; }
.if-punkte.visible .mn-caret { animation: mnBlink 1.1s steps(1,end) infinite; }
.if-punkte.visible .mn-rueck { animation: mnRueck 6s ease-out infinite; }
@keyframes mnTippen { 0% { width: 0; } 34% { width: 68%; } 76% { width: 68%; } 88%, 100% { width: 0; } }
@keyframes mnBlink  { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes mnRueck  { 0%, 38% { opacity: 0; transform: translateY(4px); } 48%, 78% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }

/* 02 Schritte: Aufrufe laufen durch, Haken setzt sich */
.mn-schritte { gap: 11px; }
.mn-schritt { display: flex; align-items: center; gap: 9px; opacity: 0; }
.mn-schritt i { width: 7px; height: 7px; border-radius: 50%; background: #FFC46B; flex: 0 0 auto; }
.mn-code { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); flex: 1; max-width: 60%; }
.mn-schritt em { display: block; height: 5px; width: 22%; border-radius: 3px; background: rgba(255,255,255,.16); }
.mn-stop { margin-top: auto; height: 5px; width: 26%; border-radius: 3px; background: rgba(255,255,255,.14); }
.if-punkte.visible .mn-schritt {
  animation: mnAuf 5.4s ease-out infinite; animation-delay: calc(var(--s) * 620ms);
}
.if-punkte.visible .mn-schritt i {
  animation: mnPuls 5.4s ease-in-out infinite; animation-delay: calc(var(--s) * 620ms);
}
@keyframes mnAuf  { 0%, 4% { opacity: 0; transform: translateY(5px); } 14%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes mnPuls { 0%, 16% { background: #FFC46B; } 34%, 84% { background: #7CF5B0; } 94%, 100% { background: #FFC46B; } }

/* 03 Rechte: Rollen werden geprueft, eine bleibt gesperrt */
.mn-rechte { gap: 12px; }
.mn-rolle { display: flex; align-items: center; gap: 10px; opacity: 0; }
.mn-rolle span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.34); flex: 1; max-width: 62%; }
.mn-ja, .mn-nein { display: block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mn-ja { background: #7CF5B0; }
.mn-nein { background: transparent; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.3); }
.mn-rolle.is-sperre span { background: rgba(255,255,255,.14); }
.mn-schloss { margin-top: auto; display: flex; align-items: center; gap: 8px; opacity: 0; }
.mn-schloss i {
  width: 12px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.5); position: relative;
}
.mn-schloss i::before {
  content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: 8px; height: 6px; border: 1.4px solid rgba(255,255,255,.5); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.if-punkte.visible .mn-rolle {
  animation: mnAuf 5.6s ease-out infinite; animation-delay: calc(var(--s) * 480ms);
}
.if-punkte.visible .mn-schloss { animation: mnRueck 5.6s ease-out 1.6s infinite; }

/* 04 Beleg: Quellen setzen sich unter das Ergebnis */
.mn-beleg { gap: 14px; }
.mn-blatt { display: flex; flex-direction: column; gap: 8px; }
.mn-blatt span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.26); opacity: 0; }
.mn-blatt span:nth-child(1) { width: 86%; }
.mn-blatt span:nth-child(2) { width: 72%; }
.mn-blatt span:nth-child(3) { width: 54%; }
.mn-quellen { margin-top: auto; display: flex; gap: 7px; }
.mn-quellen span {
  display: block; height: 14px; width: 34px; border-radius: 3px;
  border: 1px solid rgba(255,196,107,.5); background: rgba(255,196,107,.1);
  opacity: 0; transform: translateY(5px);
}
.if-punkte.visible .mn-blatt span {
  animation: mnAuf 5.8s ease-out infinite; animation-delay: calc(var(--s) * 220ms);
}
.if-punkte.visible .mn-quellen span {
  animation: mnQuelle 5.8s ease-out infinite; animation-delay: calc(var(--s) * 260ms + 1.1s);
}
@keyframes mnQuelle { 0%, 6% { opacity: 0; transform: translateY(5px); } 18%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
.if-punkt {
  padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--rule-strong);
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.25,0,.3,1), transform .8s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--p) * 140ms + 120ms);
}
.if-punkte.visible .if-punkt { opacity: 1; transform: none; }
.if-nr {
  display: block; margin-bottom: clamp(10px, 1.2vw, 14px);
  font-family: var(--mono); font-weight: 700; font-size: clamp(10px, .95vw, 12px);
  letter-spacing: .12em; color: rgba(255,255,255,.4);
}
.if-punkt h3 { font-size: clamp(16px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.028em; line-height: 1.15; }
.if-punkt p { margin-top: clamp(10px, 1.2vw, 14px); font-size: clamp(12.5px, 1.15vw, 14.5px); line-height: 1.6; color: rgba(255,255,255,.54); }

/* Verlauf als Sequenzdiagramm.
   Lebenslinien fuer Nutzer, Interface und die drei Fachsysteme; die
   Aktivierungsbalken zeigen, wie lange ein System im Vorgang steht.
   Aufgebaut wird ueber stroke-dashoffset -- die Laengen setzt troncom.js. */
.sq { margin: 0; }
.sq-rolle {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  /* deckender Wert: Chromium mischt einen durchscheinenden Daumen nicht
     mit der Seite, er wird dadurch heller als gedacht */
  scrollbar-width: thin; scrollbar-color: #303030 transparent;
}
.sq-rolle::-webkit-scrollbar { height: 6px; }
.sq-rolle::-webkit-scrollbar-track { background: transparent; }
.sq-rolle::-webkit-scrollbar-thumb { background: #303030; border-radius: 3px; }
.sq svg { display: block; width: 100%; min-width: 660px; height: auto; }

.sq-linie {
  stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 3, 7;
}
.sq-kopf rect {
  fill: rgba(255,255,255,.045); stroke: var(--rule); stroke-width: 1;
}
.sq-kopf text {
  fill: rgba(255,255,255,.88); font-family: var(--mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; text-anchor: middle;
}
.sq-kopf { opacity: 0; transform: translateY(-8px); }
.sq.visible .sq-kopf {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--r) * 70ms);
}

.sq-aktiv {
  fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.22); stroke-width: 1;
  transform: scaleY(0); transform-origin: center top; transform-box: fill-box;
}
.sq.visible .sq-aktiv {
  transform: none;
  transition: transform .8s var(--ease);
  transition-delay: calc(400ms + var(--r) * 220ms);
}

.sq-zeit line, .sq-zeit path { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.sq-zeit text {
  fill: var(--dim); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; text-anchor: middle;
}

.sq-pfeil {
  stroke: #FFC46B; stroke-width: 1.6; fill: none;
  stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
}
.sq-pfeil.is-rueck { stroke: rgba(255,255,255,.34); stroke-width: 1.2; }
.sq-pfeil.is-selbst { stroke: rgba(255,255,255,.34); stroke-width: 1.2; }
.sq-ruf:first-of-type .sq-pfeil { stroke: rgba(255,255,255,.85); }
.sq-ruf:last-of-type .sq-pfeil { stroke: #7CF5B0; }

.sq-name {
  fill: #FFC46B; font-family: var(--mono); font-size: 13px; text-anchor: middle;
}
.sq-ruf:first-of-type .sq-name { fill: rgba(255,255,255,.92); }
.sq-ruf:last-of-type .sq-name { fill: #7CF5B0; }
.sq-arg {
  fill: rgba(255,255,255,.42); font-family: var(--mono); font-size: 11px; text-anchor: middle;
}
.sq-rueck {
  fill: rgba(255,255,255,.72); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
}

.sq-ruf text { opacity: 0; }
.sq.visible .sq-pfeil {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s var(--ease);
  transition-delay: calc(600ms + var(--r) * 200ms);
}
.sq.visible .sq-ruf text {
  opacity: 1;
  transition: opacity .45s var(--ease);
  transition-delay: calc(700ms + var(--r) * 200ms);
}

/* Kennzahlen als kleine Zeichnungen */
.sq-zahlen {
  list-style: none; margin: clamp(38px, 4.6vw, 62px) 0 0; padding: 0;
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sq-zahlen li {
  padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--rule);
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--r) * 90ms + 200ms);
}
.sq-zahlen.visible li { opacity: 1; transform: none; }
.sq-zahlen svg { display: block; width: 100%; max-width: 132px; height: auto; margin-bottom: clamp(14px, 1.8vw, 20px); }
.sq-zahlen b {
  display: block; font-size: clamp(26px, 3.2vw, 40px); font-weight: 500;
  letter-spacing: -.03em; line-height: 1;
}
.sq-zahlen span {
  display: block; margin-top: 8px;
  font-size: clamp(12px, 1.12vw, 13.5px); line-height: 1.5; color: rgba(255,255,255,.52);
}

.sq-zahlen rect { fill: rgba(255,255,255,.10); stroke: var(--rule-strong); stroke-width: 1; }
.zl-strich { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3, 5; }
.sq-zahlen .zl-voll { fill: rgba(255,196,107,.30); stroke: #FFC46B; }
.sq-zahlen .zl-schreib { fill: rgba(255,255,255,.18); stroke: rgba(255,255,255,.8); }
.sq-zahlen .zl-feld rect { fill: rgba(255,255,255,.34); stroke: none; }
.sq-zahlen .zl-feld rect:nth-child(-n+34) { fill: #FFC46B; }
.sq-zahlen .zl-blatt { fill: rgba(255,255,255,.06); stroke: var(--rule-strong); }
.zl-text { stroke: rgba(255,255,255,.34); stroke-width: 2; stroke-linecap: round; }
.sq-zahlen .zl-quelle circle { fill: none; stroke: #7CF5B0; stroke-width: 1.4; }

@media (max-width: 900px) {
  .sq-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sq-zahlen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-kopf, .sq-ruf text, .sq-zahlen li { opacity: 1; transform: none; }
  .sq-aktiv { transform: none; }
  .sq-pfeil { stroke-dashoffset: 0; }
}

/* ---------- Die Schleife: MCP-Regal, Kette, Ruecksprung ---------- */
.lp, .tp { margin: 0; }
.lp svg { display: block; width: 100%; min-width: 760px; height: auto; }

.lp-regal-marke {
  fill: var(--dim); font-family: var(--mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; text-anchor: start;
}
.lp-bus { stroke: var(--rule); stroke-width: 1; }
.lp-drop { stroke: var(--rule); stroke-width: 1; }
.lp-chip rect { fill: rgba(255,255,255,.05); stroke: var(--rule-strong); stroke-width: 1; }
.lp-chip text {
  fill: rgba(255,255,255,.72); font-family: var(--mono); font-size: 12px; text-anchor: middle;
}
.lp-chip.is-mehr rect { fill: none; stroke: #FFC46B; stroke-dasharray: 4, 4; }
.lp-chip.is-mehr text { fill: #FFC46B; }
.lp-chip { opacity: 0; transform: translateY(-8px); }
.lp.visible .lp-chip {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--c) * 55ms);
}
.lp-zufuhr {
  stroke: #FFC46B; stroke-width: 1.4;
  stroke-dasharray: var(--len, 90); stroke-dashoffset: var(--len, 90);
}
.lp.visible .lp-zufuhr {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s var(--ease) .7s;
}

.lp-knoten rect { fill: rgba(255,255,255,.045); stroke: var(--rule-strong); stroke-width: 1; }
.lp-knoten.is-pruef rect { stroke: #FFC46B; }
.lp-knoten.is-fertig rect { fill: rgba(124,245,176,.10); stroke: #7CF5B0; }
.lp-titel {
  fill: rgba(255,255,255,.92); font-size: 16px; text-anchor: middle; letter-spacing: -.01em;
}
.lp-knoten.is-fertig .lp-titel { fill: #7CF5B0; }
.lp-unter {
  fill: rgba(255,255,255,.44); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
}
.lp-knoten { opacity: 0; transform: translateY(10px); }
.lp.visible .lp-knoten {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(800ms + var(--k) * 130ms);
}

.lp-kante line, .lp-kante path {
  fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.4;
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
}
.lp-kante.is-zurueck path { stroke: #FFC46B; }
.lp-kante.is-fertig path { stroke: #7CF5B0; }
.lp.visible .lp-kante line, .lp.visible .lp-kante path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .6s var(--ease);
  transition-delay: calc(900ms + var(--e) * 150ms);
}
.lp-kanten-text {
  fill: rgba(255,255,255,.5); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
  opacity: 0;
}
.lp-kanten-text.is-ja { fill: #7CF5B0; text-anchor: end; }
.lp.visible .lp-kanten-text {
  opacity: 1; transition: opacity .5s var(--ease) 1.5s;
}

/* ---------- Eingebaute Sicherheit ----------
   Ein Torposten im Ablauf: links laufen die Handlungen zusammen, in der
   Mitte validiert das Sicherheitsmodell, rechts gehen die zwei Wege
   auseinander. */
.sc { margin: 0; }
.sc svg { display: block; width: 100%; min-width: 800px; height: auto; }

.sc-marke {
  fill: var(--dim); font-family: var(--mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; text-anchor: start;
}
.sc-aufruf rect { fill: rgba(255,255,255,.045); stroke: var(--rule-strong); stroke-width: 1; }
.sc-aufruf.is-heikel rect { stroke: #FFC46B; }
.sc-code { fill: rgba(255,255,255,.86); font-family: var(--mono); font-size: 13px; }
.sc-aufruf.is-heikel .sc-code { fill: #FFC46B; }
.sc-quelle {
  fill: rgba(255,255,255,.4); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; text-anchor: end;
}
.sc-stub, .sc-sammel { stroke: var(--rule-strong); stroke-width: 1; }
.sc-aufruf { opacity: 0; transform: translateX(-10px); }
.sc.visible .sc-aufruf {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--a) * 90ms);
}
.sc-zufuhr {
  stroke: rgba(255,255,255,.55); stroke-width: 1.4;
  stroke-dasharray: var(--len, 60); stroke-dashoffset: var(--len, 60);
}
.sc.visible .sc-zufuhr { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease) .5s; }

.sc-tor rect { fill: rgba(255,196,107,.05); stroke: #FFC46B; stroke-width: 1.4; }
.sc-tor-titel { fill: rgba(255,255,255,.94); font-size: 17px; text-anchor: middle; letter-spacing: -.015em; }
.sc-tor-unter {
  fill: rgba(255,196,107,.85); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
}
.sc-netz circle { fill: #FFC46B; }
.sc-netz line { stroke: rgba(255,196,107,.3); stroke-width: 1; }
.sc-tor { opacity: 0; transform: scale(.96); transform-origin: 545px 215px; }
.sc.visible .sc-tor {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease) .7s, transform .6s var(--ease) .7s;
}
.sc.visible .sc-netz circle { animation: scPuls 2.6s var(--ease) 1.4s infinite; }
.sc-netz circle:nth-child(3n) { animation-delay: 1.7s !important; }
.sc-netz circle:nth-child(3n+1) { animation-delay: 2s !important; }
@keyframes scPuls { 0%, 100% { opacity: .45; } 40% { opacity: 1; } }

.sc-weg path {
  fill: none; stroke-width: 1.5;
  stroke-dasharray: var(--len, 130); stroke-dashoffset: var(--len, 130);
}
.sc-weg.is-frei path { stroke: #7CF5B0; }
.sc-weg.is-heikel path { stroke: #FFC46B; }
.sc.visible .sc-weg path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease) 1.3s; }
.sc-weg-text {
  fill: rgba(124,245,176,.9); font-family: var(--mono); font-size: 11.5px; text-anchor: middle; opacity: 0;
}
.sc-weg-text.is-warn { fill: rgba(255,196,107,.9); }
.sc.visible .sc-weg-text { opacity: 1; transition: opacity .45s var(--ease) 1.6s; }

.sc-ziel rect { fill: rgba(124,245,176,.10); stroke: #7CF5B0; stroke-width: 1.2; }
.sc-ziel-titel { fill: #7CF5B0; font-size: 17px; text-anchor: middle; letter-spacing: -.01em; }
.sc-fussnote {
  fill: rgba(255,255,255,.42); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
}
.sc-fussnote.is-warn { fill: rgba(255,196,107,.8); }

.sc-karte rect { fill: rgba(255,196,107,.05); stroke: rgba(255,196,107,.55); stroke-width: 1.2; }
.sc-karte-marke {
  fill: #FFC46B; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.sc-karte-code { fill: rgba(255,255,255,.92); font-family: var(--mono); font-size: 15px; }
.sc-karte-grund { fill: rgba(255,255,255,.48); font-family: var(--mono); font-size: 11.5px; }
.sc-knopf rect { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.2; }
.sc-knopf.is-ja rect { fill: rgba(255,255,255,.92); stroke: none; }
.sc-knopf text {
  fill: rgba(255,255,255,.85); font-family: var(--mono); font-size: 12.5px; text-anchor: middle;
}
.sc-knopf.is-ja text { fill: #000; }

.sc-ziel, .sc-karte, .sc-fussnote { opacity: 0; }
.sc.visible .sc-ziel { opacity: 1; transition: opacity .5s var(--ease) 1.7s; }
.sc.visible .sc-karte { opacity: 1; transition: opacity .5s var(--ease) 1.9s; }
.sc.visible .sc-fussnote { opacity: 1; transition: opacity .5s var(--ease) 2.1s; }

@media (prefers-reduced-motion: reduce) {
  .sc-aufruf, .sc-tor, .sc-weg-text, .sc-ziel, .sc-karte, .sc-fussnote { opacity: 1; transform: none; }
  .sc-zufuhr, .sc-weg path { stroke-dashoffset: 0; }
  .sc-netz circle { animation: none; opacity: 1; }
}

/* ---------- Teleport ----------
   Der Strahl steht unten breit auf dem Chat und laeuft nach oben schmal
   auf den Rechner zu. Erst wenn er durch ist, taucht der Rechner auf;
   der Rueckweg kommt zuletzt und laeuft dauerhaft. */
.tp svg { display: block; width: 100%; min-width: 820px; height: auto; }

.tp-rahmen { fill: rgba(255,255,255,.035); stroke: var(--rule-strong); stroke-width: 1; }
.tp-rahmen.is-rechner { fill: rgba(255,255,255,.05); }
.tp-leiste { stroke: var(--rule); stroke-width: 1; }
.tp-ampel { fill: rgba(255,255,255,.28); }
.tp-adresse { fill: rgba(255,255,255,.10); }
.tp-marke {
  fill: var(--dim); font-family: var(--mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; text-anchor: middle;
}
.tp-marke.is-bahn { fill: #7FC7FF; }
.tp-zurueck-text {
  fill: rgba(255,255,255,.45); font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
}

/* Browser mit Chat */
.tp-browser { opacity: 0; transform: translateY(14px); }
.tp.visible .tp-browser {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.tp-geraet rect { fill: rgba(124,245,176,.10); stroke: rgba(124,245,176,.45); stroke-width: 1; }
.tp-geraet circle { fill: #7CF5B0; }
.tp-geraet text { fill: #7CF5B0; font-family: var(--mono); font-size: 11px; }
.tp-chat .tp-zeile { fill: rgba(255,255,255,.20); }
.tp-blase rect { fill: rgba(255,196,107,.12); stroke: rgba(255,196,107,.5); stroke-width: 1; }
.tp-blase text { fill: #FFC46B; font-family: var(--mono); font-size: 12.5px; text-anchor: middle; }
.tp-eingabe { fill: rgba(255,255,255,.07); }
.tp-chat > * { opacity: 0; }
.tp.visible .tp-chat > * {
  opacity: 1; transition: opacity .45s var(--ease);
  transition-delay: calc(500ms + var(--z) * 180ms);
}

/* Der Strahl */
.tp-kegel { fill: url(#tp-strahl); }
.tp-kernlinie {
  stroke: url(#tp-kern); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
}
.tp-scan line { stroke: rgba(223,240,255,.5); stroke-width: 2; }
.tp-komet {
  stroke: #eaf6ff; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 30 600; stroke-dashoffset: 30; opacity: 0;
}
.tp-strahl { opacity: 0; }
.tp.visible .tp-strahl { opacity: 1; transition: opacity .5s var(--ease) 1.2s; }
.tp.visible .tp-kernlinie {
  stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) 1.3s;
}
.tp.visible .tp-komet { animation: tpFlug 3.2s var(--ease) 2.2s infinite; }
.tp.visible .tp-scan { animation: tpScan 3.2s linear 2.2s infinite; }
@keyframes tpFlug {
  0%   { stroke-dashoffset: 30; opacity: 0; }
  10%  { opacity: 1; }
  62%  { opacity: 1; }
  78%, 100% { stroke-dashoffset: -600; opacity: 0; }
}
@keyframes tpScan {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .8; }
  70%  { opacity: .35; }
  100% { transform: translate(560px, -210px); opacity: 0; }
}
.tp-marke.is-bahn { opacity: 0; }
.tp.visible .tp-marke.is-bahn { opacity: 1; transition: opacity .5s var(--ease) 1.8s; }

/* Der Rechner taucht am schmalen Ende auf */
.tp-rechner { opacity: 0; transform: translateY(-10px) scale(.965); transform-origin: 880px 145px; }
.tp.visible .tp-rechner {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) 2.1s, transform .7s var(--ease) 2.1s;
}
.tp-fenster rect { fill: rgba(255,255,255,.06); stroke: var(--rule-strong); stroke-width: 1; }
.tp-fenster line { stroke: var(--rule); stroke-width: 1; }
.tp-fenster .tp-zeile { fill: rgba(255,255,255,.22); stroke: none; }
.tp-fenster.is-vorn rect { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.45); }
.tp-fenster .tp-zeile.is-akzent { fill: #FFC46B; }
.tp-fenster { opacity: 0; }
.tp.visible .tp-fenster {
  opacity: 1; transition: opacity .5s var(--ease);
  transition-delay: calc(2500ms + var(--f) * 240ms);
}
.tp-zeiger { fill: #fff; opacity: 0; }
.tp.visible .tp-zeiger { opacity: 1; transition: opacity .4s var(--ease) 3.3s; }

/* Rueckweg -- eigener Lauf, damit der Weg zurueck sichtbar bleibt */
.tp-rueck { opacity: 0; }
.tp.visible .tp-rueck { opacity: 1; transition: opacity .5s var(--ease) 3.4s; }
.tp-bahn {
  fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.2;
  stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900);
}
.tp.visible .tp-bahn { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) 3.5s; }
.tp-rueck-komet {
  fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 26 900; stroke-dashoffset: 26; opacity: 0;
}
.tp.visible .tp-rueck-komet { animation: tpRueck 3.6s var(--ease) 4.4s infinite; }
@keyframes tpRueck {
  0%   { stroke-dashoffset: 26; opacity: 0; }
  8%   { opacity: .95; }
  66%  { opacity: .95; }
  82%, 100% { stroke-dashoffset: -900; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-browser, .tp-chat > *, .tp-strahl, .tp-rechner, .tp-fenster, .tp-zeiger, .tp-rueck, .tp-marke.is-bahn {
    opacity: 1; transform: none;
  }
  .tp-kernlinie, .tp-bahn { stroke-dashoffset: 0; }
  .tp-komet, .tp-rueck-komet, .tp-scan { animation: none; opacity: 0; }
}

/* ---------- Zusammenspiel: reiner Text ----------
   Nach vier Zeichnungen ein Abschnitt, der nur aus Sprache besteht.
   Ein ruhiges Satzfeld, der Einstieg groesser, die Pointe abgesetzt. */
.zw { max-width: 68ch; }
.zw p {
  font-size: clamp(14.5px, 1.35vw, 17px); line-height: 1.72;
  color: rgba(255,255,255,.6);
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--p) * 130ms);
}
.zw p + p { margin-top: clamp(18px, 2.2vw, 26px); }
.zw.visible p { opacity: 1; transform: none; }
.zw-gross {
  font-size: clamp(17px, 1.95vw, 24px) !important; line-height: 1.5 !important;
  color: rgba(255,255,255,.88) !important; letter-spacing: -.012em;
}
.zw-pointe {
  margin-top: clamp(34px, 4vw, 52px) !important;
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--rule);
  font-size: clamp(18px, 2.2vw, 28px) !important; line-height: 1.4 !important;
  letter-spacing: -.02em; color: rgba(255,255,255,.94) !important;
}

@media (prefers-reduced-motion: reduce) {
  .zw p { opacity: 1; transform: none; }
}

/* Die halbe Miete als Balken: links gefuellt, rechts drei leere Felder */
.zwb { margin: clamp(34px, 4vw, 52px) 0 clamp(30px, 3.6vw, 46px); }
.zwb svg { display: block; width: 100%; min-width: 680px; height: auto; }
.zwb-marke {
  fill: var(--dim); font-family: var(--mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; text-anchor: middle;
}
.zwb-mitte { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 3, 5; }
.zwb-voll rect { fill: rgba(255,255,255,.9); }
.zwb-leer rect { fill: none; stroke: var(--rule-strong); stroke-width: 1.2; stroke-dasharray: 6, 6; }
.zwb-name {
  font-size: 19px; text-anchor: middle; letter-spacing: -.015em;
  fill: rgba(255,255,255,.55);
}
.zwb-name.is-hell { fill: #000; font-weight: 600; }
.zwb-folge {
  font-family: var(--mono); font-size: 11.5px; text-anchor: middle;
  fill: rgba(255,255,255,.38);
}
.zwb-folge.is-hell { fill: rgba(255,255,255,.62); }

.zwb-voll rect { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; }
.zwb.visible .zwb-voll rect {
  transform: none; transition: transform .8s var(--ease) .2s;
}
.zwb-voll text, .zwb-marke, .zwb-mitte { opacity: 0; }
.zwb.visible .zwb-voll text { opacity: 1; transition: opacity .5s var(--ease) .8s; }
.zwb.visible .zwb-marke  { opacity: 1; transition: opacity .5s var(--ease) 1s; }
.zwb.visible .zwb-mitte  { opacity: 1; transition: opacity .5s var(--ease) 1s; }
.zwb-leer { opacity: 0; }
.zwb.visible .zwb-leer {
  opacity: 1; transition: opacity .55s var(--ease);
  transition-delay: calc(1.1s + var(--s) * 160ms);
}

@media (prefers-reduced-motion: reduce) {
  .zwb-voll rect { transform: none; }
  .zwb-voll text, .zwb-marke, .zwb-mitte, .zwb-leer { opacity: 1; }
}

/* Zugehoerigkeit */
.if-teil {
  padding-block: clamp(56px, 8vw, 116px); border-top: 1px solid var(--rule);
}
.if-teil .if-wrap {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.if-teil h2 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.032em; line-height: 1.06; }
.if-teil p { margin-top: clamp(16px, 2vw, 22px); font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.62; color: rgba(255,255,255,.58); max-width: 46ch; }
.if-teil-links { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.if-weiter {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: clamp(14px, 2vw, 26px); row-gap: 6px;
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rule-strong); color: inherit; text-decoration: none;
}
.if-weiter-k {
  grid-column: 1; font-family: var(--mono); font-size: clamp(9px, .88vw, 10.5px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.if-weiter-t { grid-column: 1; font-size: clamp(17px, 1.9vw, 25px); font-weight: 600; letter-spacing: -.03em; }
.if-weiter-p {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--mono); font-size: clamp(9.5px, .9vw, 11px);
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.45);
}
.if-weiter-p i { font-size: 10px; transition: transform .3s cubic-bezier(.25,0,.3,1); }
.if-weiter:hover .if-weiter-p i { transform: translateX(4px); }

@media (max-width: 980px) {
  .if-teil .if-wrap { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .if-punkte { grid-template-columns: 1fr; }
  .if-mock-leiste { display: none; }
  .if-mock { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .if-buehne { height: 160vh; }
}

@media (prefers-reduced-motion: reduce) {
  .if-buehne { height: auto; }
  .if-klebe { position: static; height: auto; padding-block: clamp(40px, 8vw, 80px); }
  .mb-deckel { transform: rotateX(var(--blick)); }
  .mb-schirm > .if-mock, .mb-schirm > .if-aufnahme { opacity: 1; }
  .mb-blende, .mb-bloom, .mb-deck-licht, .mb-lippe { opacity: 0; }
  .mn-text, .mn-caret, .mn-rueck, .mn-schritt, .mn-schritt i,
  .mn-rolle, .mn-schloss, .mn-blatt span, .mn-quellen span { animation: none !important; opacity: 1; transform: none; width: auto; }
  .mn-text { width: 68%; }
  .if-ln > span, .if-kicker, .if-lead, .if-cta { animation: none; opacity: 1; transform: none; }
  .mb, .if-punkt { transition: none; opacity: 1; transform: none; }
  .if-mock-eingabe b, .if-mock-schritt i,
  .if-mock-antwort span, .if-mock-schritt span { animation: none; }
}