/* ==========================================================
   KI-Loesung -- Seitenmodul ueber troncom.css.
   Traegt nur, was es allein hier gibt: den Verweis auf das
   Interface, die Einsatzkarten in mittlerer Breite, die Preis-
   grafik und das Knotenpunkt-Schema der Architektur.
   Buehne, Koepfe, Merkmale, Aussage, Band, Karten, Schritte und
   Abschluss kommen unveraendert aus dem Designsystem.
   ========================================================== */
.kl { --mono: var(--font-mono); }

/* ---------- Umfang: Verweis auf das Interface ----------
   Wie die Vorlagenkarten bei Squarespace: ein Foto traegt die Karte,
   darauf schwebt das Interface als gerahmtes Fenster, links der Text. */
.kl-if {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center; gap: clamp(20px, 3vw, 56px);
  min-height: clamp(420px, 38vw, 580px);
  margin-top: clamp(64px, 7.4vw, 112px);
  padding: clamp(26px, 3vw, 48px);
  border-radius: var(--radius-karte); overflow: hidden;
  background: #000;
}
.kl-if-foto { position: absolute; inset: 0; z-index: -2; }
.kl-if-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; filter: saturate(.65) brightness(.56); transition: transform 1.4s var(--ease-out); }
.kl-if::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.15) 100%);
}
.kl-if::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .4s var(--ease);
}
.kl-if:hover::after { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.kl-if:hover .kl-if-foto img { transform: scale(1.04); }
.kl-if-text { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.kl-if h3 { margin-top: clamp(16px, 1.8vw, 24px); max-width: 15ch; font-size: clamp(30px, 3vw, 46px); font-weight: 300; letter-spacing: -.05em; line-height: 1.02; }
.kl-if .pfeil-link { align-self: flex-start; }
.kl-if:hover .pfeil-link { text-decoration-color: #fff; }
/* Das Fenster: Bildschirmfoto mit Kante und tiefem Schatten */
.kl-if-bild {
  position: relative; overflow: hidden;
  aspect-ratio: 1920 / 1248;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 90px rgba(0,0,0,.75);
  transition: transform 1s var(--ease-out);
}
.kl-if-bild img { width: 100%; height: 100%; object-fit: cover; }
.kl-if:hover .kl-if-bild { transform: translateY(-6px); }
@media (max-width: 820px) {
  .kl-if { grid-template-columns: 1fr; min-height: 0; }
  .kl-if-bild { order: 2; }
  .kl-if::before { background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.3) 100%); }
}

/* ---------- Einsatz ----------
   Vier Karten nebeneinander werden unter 1100 px zu schmal fuer
   "Kundenkommunikation" -- dort zwei mal zwei, ganz schmal eine Spalte
   (troncom.css). */
@media (min-width: 621px) and (max-width: 1100px) {
  .kl-einsatz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Preise: Verlaufsgrafik ----------
   Vier Spuren als Stufen, rechts der Festpreis je Stufe. Die Kurve
   ist der Verbrauch ueber zwoelf Monate, je Spur eingefaerbt:
   Bernstein ueber, Mint unter der gebuchten Stufe. */
.kl-chart {
  padding: clamp(18px, 3vw, 44px) clamp(14px, 3vw, 44px) clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-karte);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.sp-chart { width: 100%; overflow: visible; }
.sp-chart * { vector-effect: non-scaling-stroke; }

/* Spuren */
.sp-bahn { fill: rgba(255,255,255,.028); }
.sp-bahn.ist-aktuell { fill: url(#klAktiv); }
.sp-kante, .sp-boden { stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 4 6; }
.sp-kante.ist-aktuell { stroke: rgba(255,255,255,.42); stroke-dasharray: none; }
.sp-preis { fill: rgba(255,255,255,.22); }
.sp-preis.ist-aktuell { fill: #fff; }

/* Beschriftung */
.sp-stufe, .sp-fest, .sp-kopf, .sp-monat { font-family: var(--mono); }
.sp-stufe { fill: var(--text-3); font-size: 15px; letter-spacing: .1em; }
.sp-stufe.ist-aktuell { fill: #fff; }
.sp-fest, .sp-kopf, .sp-monat { font-size: 11px; text-transform: uppercase; }
.sp-fest { fill: rgba(255,255,255,.42); letter-spacing: .16em; }
.sp-fest.ist-aktuell { fill: var(--text-2); }
.sp-kopf { fill: var(--text-3); letter-spacing: .2em; }
.sp-monat { fill: rgba(255,255,255,.42); letter-spacing: .14em; }

/* Der Verlauf, je Spur eingefaerbt */
.sp-linie { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-basis { stroke: rgba(255,255,255,.16); }
.sp-linie.ist-aktuell { stroke: #fff; }
.sp-linie.ist-hoch { stroke: var(--akzent); filter: drop-shadow(0 0 7px rgba(255,196,107,.5)); }
.sp-linie.ist-niedrig { stroke: var(--gegen); filter: drop-shadow(0 0 7px rgba(124,245,176,.5)); }
.sp-halo { fill: none; stroke-width: 1.4; opacity: 0; }
.sp-halo.ist-hoch { stroke: var(--akzent); }
.sp-halo.ist-niedrig { stroke: var(--gegen); }
.sp-punkt { stroke: #000; stroke-width: 2; }
.sp-punkt.ist-hoch { fill: var(--akzent); }
.sp-punkt.ist-niedrig { fill: var(--gegen); }

/* Aufbau beim Eintreten (.visible setzt troncom.js) */
.sp-bahn, .sp-kante, .sp-boden, .sp-stufe, .sp-preis, .sp-fest, .sp-kopf, .sp-monat, .sp-punkt {
  opacity: 0; transition: opacity .7s ease-out;
  transition-delay: calc(var(--s, 0) * 110ms + 200ms);
}
.kl-chart.visible .sp-bahn, .kl-chart.visible .sp-kante, .kl-chart.visible .sp-boden,
.kl-chart.visible .sp-stufe, .kl-chart.visible .sp-preis, .kl-chart.visible .sp-fest,
.kl-chart.visible .sp-kopf, .kl-chart.visible .sp-monat, .kl-chart.visible .sp-punkt { opacity: 1; }

/* --len setzt troncom.js, fuer die Lichtspur das Skript der Seite */
.sp-linie:not(.sp-flow) {
  stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400);
  transition: stroke-dashoffset 2.2s cubic-bezier(.3,0,.25,1) .7s;
}
.kl-chart.visible .sp-linie:not(.sp-flow) { stroke-dashoffset: 0; }

/* Ein Licht laeuft dauerhaft mit dem Verbrauch */
.sp-flow {
  stroke: #fff; stroke-width: 3;
  stroke-dasharray: 26 calc(var(--len, 2400) - 26);
  filter: drop-shadow(0 0 9px rgba(255,255,255,.8));
  opacity: 0;
}
.kl-chart.visible .sp-flow { animation: spFlow 7s linear 2.6s infinite; }
@keyframes spFlow {
  0% { opacity: 0; stroke-dashoffset: var(--len, 2400); }
  6%, 94% { opacity: .9; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.kl-chart.visible .sp-halo { animation: spHalo 3.4s ease-out 2.8s infinite; }
@keyframes spHalo { 0% { opacity: .8; r: 8; } 70%, 100% { opacity: 0; r: 20; } }

/* Legende */
.kl-legend {
  display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.6vw, 40px);
  margin-top: clamp(22px, 2.6vw, 32px); padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule);
}
.kl-lg {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; line-height: 1.35;
  text-transform: uppercase; color: var(--text-3);
}
.kl-lg i { width: 18px; height: 3px; flex: 0 0 auto; border-radius: 2px; }
.kl-lg.is-norm i { background: #fff; }
.kl-lg.is-over i { background: var(--akzent); }
.kl-lg.is-under i { background: var(--gegen); }

/* Schmal liefen die SVG-Beschriftungen ineinander -- dort traegt die Legende */
@media (max-width: 860px) { .kl-chart text { display: none; } }

.kl-schritte { margin-top: clamp(48px, 6vw, 88px); }
.kl-note { margin-top: clamp(18px, 2vw, 24px); max-width: 80ch; font-size: 13px; line-height: 1.6; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .sp-bahn, .sp-kante, .sp-boden, .sp-stufe, .sp-preis, .sp-fest, .sp-kopf, .sp-monat, .sp-punkt { opacity: 1; transition: none; }
  .sp-linie:not(.sp-flow) { stroke-dashoffset: 0; transition: none; }
  .sp-flow, .sp-halo { display: none; animation: none; }
}

/* ==========================================================
   Architektur: Knotenpunkt-Schema
   Core AI Server links, Transmit Server in der Mitte, rechts die
   drei Anschluesse. Die Bausteine sind Typenschilder: nur die
   Plakette hat eine Kante, der Text haengt frei darunter. Die
   Leitungen zeichnet das Skript am Seitenende aus den echten
   Positionen; schmal stehen die Bausteine untereinander.
   ========================================================== */
.nx {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(72px, 5.8vw, 112px); align-items: center;
}
.nx-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nx-wires path { fill: none; stroke-linecap: butt; }

/* Symbole auf den Leitungen */
.nx-wire-chip, .nx-trunk-label {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: var(--radius); background: #000;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  pointer-events: none; opacity: 0;
}
.nx-wire-chip { width: 30px; height: 30px; font-size: 11px; color: var(--wc, #fff); transition: opacity .55s var(--ease); }
.nx-trunk-label { width: 28px; height: 28px; font-size: 10px; color: #fff; transition: opacity .6s var(--ease) 1.1s; }
.nx.is-wired .nx-wire-chip, .nx.is-wired .nx-trunk-label { opacity: 1; }

/* Bausteine */
.nx-node { position: relative; z-index: 1; }
.nx-plate {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden;
  background: #000;
}
.nx-no {
  display: grid; place-items: center; padding: 0 clamp(12px, 1.3vw, 17px);
  border-right: 1px solid var(--rule); background: rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .12em; color: #fff;
}
.nx-id { min-width: 0; padding: clamp(13px, 1.5vw, 18px) clamp(14px, 1.6vw, 20px); }
.nx-node h3 { font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.nx-loc {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: clamp(9.5px, .9vw, 10.5px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.nx-mark {                                   /* Geraetesymbol am rechten Rand */
  display: grid; place-items: center; padding: 0 clamp(13px, 1.4vw, 18px);
  border-left: 1px solid var(--rule);
  font-size: clamp(14px, 1.4vw, 17px); color: var(--text-2);
}
.nx-node p {                                 /* haengt frei unter der Plakette */
  max-width: 34ch; margin-top: clamp(12px, 1.4vw, 16px); padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 1px solid var(--rule);
  font-size: clamp(13.5px, 1.1vw, 14.5px); line-height: 1.6; color: var(--text-2);
}

/* Knotenpunkt: hellere Kante, weisse Nummer, groesserer Name */
.nx-hub .nx-plate { border-color: rgba(255,255,255,.55); }
.nx-hub .nx-no { border-right-color: transparent; background: #fff; color: #000; }
.nx-hub .nx-id { padding: clamp(16px, 1.9vw, 24px) clamp(17px, 1.9vw, 24px); }
.nx-hub h3 { font-size: clamp(20px, 1.95vw, 27px); font-weight: 400; letter-spacing: -.03em; }
.nx-hub p { color: rgba(255,255,255,.8); }

/* Was auf dem Transmit Server laeuft, als Chips */
.nx-runs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(12px, 1.4vw, 16px); padding-left: clamp(12px, 1.4vw, 18px); }
.nx-runs li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; line-height: 1.1;
  text-transform: uppercase; white-space: nowrap; color: #fff;
}
.nx-runs i { font-size: 10px; color: var(--text-3); }
.nx-sats { display: grid; gap: clamp(20px, 2vw, 30px); }

@media (max-width: 940px) {
  .nx { grid-template-columns: 1fr; gap: clamp(22px, 4.5vw, 34px); }
  /* Die Symbole mit ausblenden: nach einer Verkleinerung stuenden sie
     sonst an den alten Positionen ueber den Bausteinen */
  .nx-wires, .nx-trunk-label, .nx-wire-chip { display: none; }
  .nx-node p { max-width: none; }
  .nx-connector { display: block; justify-self: center; width: 1px; height: clamp(22px, 3.6vw, 32px); background: var(--rule-strong); }
}
@media (min-width: 941px) { .nx-connector { display: none; } }