/* ==========================================================
   Interface -- Seitenmodul ueber troncom.css.
   Traegt nur, was es allein hier gibt: das Programmfenster unter
   der Buehne, die vier laufenden Miniaturen, den Verlauf als
   Sequenzdiagramm mit Kennzahlen, die Arbeitsschleife, das
   Sicherheitsmodell, das Teleport-Protokoll und den Balken zur
   halben Miete.
   Die Zeichnungen bauen sich auf, sobald troncom.js ihrem Rahmen
   (.fade-in) die Klasse .visible gibt; die Strichlaengen (--len)
   setzt ebenfalls troncom.js.
   ========================================================== */
.if {
  --dim: var(--text-3);
  --mono: var(--font-mono);
  --schirm-hub: clamp(96px, 17vh, 210px);   /* so weit ragt das Programmfenster in die Buehne */
}
@media (max-width: 700px) { .if { --schirm-hub: 64px; } }

/* ---------- Buehne: unten Platz fuer das hereinragende Fenster ---------- */
.if-buehne .buehne-inhalt { padding-bottom: calc(var(--schirm-hub) + clamp(40px, 7vh, 80px)); }

/* ---------- Programmfenster (nach Squarespace) ----------
   Steigt nach der Buehne von unten herein. Das Bildschirmfoto hat oben
   und unten je einen schwarzen Streifen -- das Seitenverhaeltnis
   schneidet genau das Programmfenster aus. */
.if-produkt { position: relative; z-index: 3; margin-top: calc(-1 * var(--schirm-hub)); }
.if-schirm {
  max-width: 1240px; margin-inline: auto;
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 40px 120px -50px rgba(255,255,255,.14);
  opacity: 0; animation: schirmAuf 1.2s var(--ease-out) .75s forwards;
}
.if-schirm img, .if-schirm video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1040; object-fit: cover; background: #000; border-radius: inherit; }
/* Das Fenster ist fast schwarz -- die Kante traegt etwas mehr als bei .medien */
.if-schirm::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
@keyframes schirmAuf { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

/* ---------- Ablauf: vier Punkte, je ein laufender Miniaturschirm ---------- */
.if-punkte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(44px, 5vw, 64px) clamp(14px, 1.4vw, 20px); }
.if-punkte.fade-in { opacity: 1; transform: none; }
.if-punkt {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--p) * 140ms + 120ms);
}
.if-punkte.visible .if-punkt { opacity: 1; transform: none; }
/* Nummer mit Haarlinie: die vier Punkte lesen sich als eine Zeitachse */
.if-punkt .schritt-nr { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 2.2vw, 30px); }
.if-punkt .schritt-nr::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.if-punkt h3 { margin-top: 14px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.if-punkt p { margin-top: 10px; max-width: 40ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.6; color: var(--text-2); }

/* Kleiner Schirm je Punkt: ein Ausschnitt der Oberflaeche, der laeuft */
.if-schirmchen {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-karte);
  background: radial-gradient(120% 110% at 18% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 62%), var(--flaeche-1);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.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 { position: relative; width: 12px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.5); }
.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; } }

@media (max-width: 1100px) {
  .if-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .if-schirmchen { aspect-ratio: 16 / 8; }
}
@media (max-width: 620px) {
  .if-punkte { grid-template-columns: 1fr; }
  .if-schirmchen { aspect-ratio: 16 / 9; }
}

/* ---------- Tafeln: die grossen Zeichnungen stehen in einem Rahmen ----------
   Schmal rollt die Zeichnung seitlich und laeuft dabei bis an den
   Rahmen, statt am Innenabstand abzubrechen. */
.if-tafel {
  --tafel-pad: clamp(16px, 3.4vw, 56px);
  padding: var(--tafel-pad);
  border-radius: var(--radius-karte); overflow: hidden;
  background: var(--flaeche-karte);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.if-tafel > .sq-rolle { margin-inline: calc(-1 * var(--tafel-pad)); padding-inline: var(--tafel-pad); }
.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; }

/* ---------- Verlauf als Sequenzdiagramm ----------
   Lebenslinien fuer Nutzer, Interface und die drei Fachsysteme; die
   Aktivierungsbalken zeigen, wie lange ein System im Vorgang steht. */
.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, .sq-pfeil.is-selbst { stroke: rgba(255,255,255,.34); stroke-width: 1.2; }
/* Auftrag weiss, Abnahme mint, dazwischen die Aufrufe in Bernstein */
.sq-ruf.is-start .sq-pfeil { stroke: rgba(255,255,255,.85); }
.sq-ruf.is-ende .sq-pfeil { stroke: #7CF5B0; }

.sq-name { fill: #FFC46B; font-family: var(--mono); font-size: 13px; text-anchor: middle; }
.sq-ruf.is-start .sq-name { fill: rgba(255,255,255,.92); }
.sq-ruf.is-ende .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: kleine Zeichnung, grosse leichte Zahl, Beschriftung */
.sq-zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(40px, 4.8vw, 68px);
}
.sq-zahlen.fade-in { opacity: 1; transform: none; }
.sq-zahlen li {
  padding-top: clamp(18px, 2vw, 24px); 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 { width: 100%; max-width: 120px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.sq-zahlen b {
  display: block; font-size: clamp(40px, 4.4vw, 64px); font-weight: 300;
  letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
}
.sq-zahlen span { display: block; margin-top: 12px; max-width: 24ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.5; color: var(--text-2); }

.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)); row-gap: clamp(32px, 6vw, 44px); } }

/* ---------- Die Schleife: MCP-Regal, Kette, Ruecksprung ---------- */
.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, .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 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; }

/* ---------- 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. Eisblau gibt es nur
   in diesem einen Bild (farbwelt.md): es markiert den Weg, keinen Zustand. */
.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: #fff; 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; }
}

/* ---------- Zusammenspiel ----------
   Das Band oeffnet den Abschnitt. Darunter wie auf der Startseite links
   der grosse Satz, rechts die Erlaeuterung, dann der Balken zur halben
   Miete und zum Schluss die Pointe. */
.if-zs { padding-top: clamp(56px, 7vw, 110px); }
.if-zs-oben { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(26px, 5vw, 96px); align-items: end; }
.if-zs-lead {
  max-width: 30ch;
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 300; letter-spacing: -.035em; line-height: 1.2;
  hyphens: manual; text-wrap: pretty;
}
.if-zs-text p { max-width: 52ch; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.65; color: var(--text-2); }
.if-zs-text p + p { margin-top: 1em; }
@media (max-width: 900px) { .if-zs-oben { grid-template-columns: 1fr; align-items: start; } }

/* Die halbe Miete als Balken: links gefuellt, rechts drei leere Felder */
.zwb { margin-top: clamp(48px, 6vw, 88px); }
.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: 500; }
.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, .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);
}

/* Pointe: ohne Sie leise, mit Ihnen hell */
.if-aussage p { max-width: 26ch; }
.if-aussage .is-leise { color: var(--text-3); }

/* ---------- Zugehoerigkeit: zwei Bildkarten ---------- */
.if-teil .bildkarte { min-height: clamp(380px, 34vw, 520px); }
.if-teil .kicker { color: rgba(255,255,255,.78); }
.if-teil h3 { margin-top: clamp(14px, 1.4vw, 18px); font-size: clamp(30px, 3vw, 46px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.if-teil-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Das Panorama ist breiter als die Karte: links sitzen die Arbeitsplaetze */
.if-teil-buero > img { object-position: 12% 50%; }

/* ---------- Weniger Bewegung ----------
   Alles steht sofort im Endzustand. Die Regeln fuer laufende Animationen
   brauchen dieselbe Spezifitaet wie ihre .visible-Regel. */
@media (prefers-reduced-motion: reduce) {
  .if-schirm { animation: none; opacity: 1; }
  .if-punkt, .sq-zahlen li { transition: none; opacity: 1; transform: none; }
  .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; }
  .mn-text { width: 68%; }
  .sq-kopf, .sq-ruf text { opacity: 1; transform: none; }
  .sq-aktiv { transform: none; }
  .sq-pfeil { stroke-dashoffset: 0; }
  .lp-chip, .lp-knoten, .lp-kanten-text { opacity: 1; transform: none; }
  .lp-zufuhr, .lp-kante line, .lp-kante path { stroke-dashoffset: 0; }
  .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.visible .sc-netz circle { animation: none; opacity: 1; }
  .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.visible .tp-komet, .tp.visible .tp-rueck-komet, .tp.visible .tp-scan { animation: none; opacity: 0; }
  .zwb-voll rect { transform: none; }
  .zwb-voll text, .zwb-marke, .zwb-mitte, .zwb-leer { opacity: 1; }
}