/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — LEISTUNGSBEREICH KI-PROZESSE
   Gilt für ki-prozesse/index.php und ki-prozesse/video.php. Wird als
   letzte Vorlage geladen.
   ═══════════════════════════════════════════════════════════════════════

   ── WARUM DIESE DATEI EIGENSTÄNDIG IST ─────────────────────────────────
   Jeder Leistungsbereich ist sein eigener Herr: Die drei Bereiche tragen
   je eine eigene Fassung der gemeinsamen Bausteine, auch wo sie sich
   gleichen — eine Änderung hier soll Web-Systeme und IT-Service nicht
   verändern.

   ZWILLINGE: web-systeme/web-systeme.css und it-service/it-service.css
   tragen dieselben Grundbausteine (Abschnitt „BAUSTEINE“ unten: Kasten,
   Kopf, Hero, Kacheln, Merksatz, Fußzeile, Haken, Abschluss). Wer dort die
   GESTALTUNG eines Bausteins ändert und alle drei Seiten gleich aussehen
   sollen, zieht in den beiden anderen nach. Seiteneigenes steht je Datei
   im Abschnitt „NUR DIESE SEITE“.

   GRUNDREGEL des Auftritts: JEDER Inhalt sitzt in einem Kasten, zwischen
   den Kästen liegt nur Abstand. Innerhalb der Kästen hat jeder Abschnitt
   seine eigene Form.

   ── LADEREIHENFOLGE ────────────────────────────────────────────────────
       grund.css → rechtstext.css → leistungsseite.css → DIESE DATEI

   FELDFARBE: `.leistungsseite--blau` setzt `--feldfarbe: 56, 189, 248`
   (leistungsseite.css). Alle Regeln greifen sie über
   `rgb(var(--feldfarbe))` bzw. `rgba(var(--feldfarbe), x)` ab und ändern
   nur die Deckkraft. Das Markengrün (`--green`) steht nur dort, wo es auf
   allen Seiten gleich ist: Preis, Freigabe, Hauptknopf.

   MITBENUTZT aus leistungsseite.css: das Seitenmotiv.

   SCHMALE FENSTER: Haltepunkte 1000 / 760 / 480 px am Dateiende; Ziel ist
   bei 390 px Breite keine waagerechte Bildlaufleiste.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   BAUSTEINE (Zwillinge in web-systeme.css und it-service.css)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Der Kasten ────────────────────────────────────────────────────────
   Grundform jeder Sektion: dunkler Grund, Verlauf in Feldfarbe von links,
   farbige linke Kante. Machart von `.leistungsseite .imp-block`
   übernommen, damit die Seite zu Impressum und Datenschutz passt. */
.ls-hero,
.ls-abschnitt {
  position: relative;
  margin-bottom: 16px;
  padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3.4vw, 44px);
  border: 1px solid rgba(var(--feldfarbe), .26);
  border-left: 2px solid rgba(var(--feldfarbe), .7);
  border-radius: 14px;
  background:
    linear-gradient(to right, rgba(var(--feldfarbe), .09), rgba(var(--feldfarbe), 0) 240px),
    rgba(8, 15, 28, .80);
  box-shadow: 0 0 24px rgba(var(--feldfarbe), .10);
}

/* ── Abschnittskopf ────────────────────────────────────────────────────
   Vorzeile in Versalien (Mono, Feldfarbe) und Überschrift. Bewusst ohne
   Einleitungsabsatz: Was der Abschnitt sagt, zeigt sein Inhalt. */
.ls-kopf { margin-bottom: clamp(22px, 2.6vw, 32px); }
.ls-vorzeile {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .2em; color: rgb(var(--feldfarbe)); margin-bottom: 10px;
}
.ls-titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.12;
  color: #fff; letter-spacing: .005em;
}
.ls-fliess { color: var(--tx-dim2); font-size: 17px; max-width: 62ch; }
.ls-aktionen { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Einstieg (Hero) ───────────────────────────────────────────────────
   Zwei Spalten: Text links, rechts das seiteneigene Bild (hier der Film).
   Der Kasten ist etwas deckender als die übrigen, weil das Seitenmotiv
   oben am hellsten durchscheint. Die Überschrift ist die größte der Seite
   und nimmt die Größe der Startseite auf (dort `Technik, die …`). */
.ls-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 52px); align-items: center;
  background:
    linear-gradient(to right, rgba(var(--feldfarbe), .10), rgba(var(--feldfarbe), 0) 300px),
    rgba(8, 15, 28, .86);
  scroll-margin-top: 20px;
}
.ls-hero-text { min-width: 0; }
.ls-hero-titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
  color: #fff; margin-bottom: 18px;
}
.ls-hero-lead { color: var(--tx-dim2); font-size: 17.5px; line-height: 1.6; margin-bottom: 26px; }

/* Ankersprünge auf einen Abschnitt landen mit Abstand zum Fensterrand. */
.ls-abschnitt { scroll-margin-top: 76px; }

/* ── Kacheln ───────────────────────────────────────────────────────────
   Drei Spalten, je Kachel Symbol, Titel und EINE Zeile. Die Kacheln sind
   dunkler als ihr Kasten, wirken also als Vertiefung darin (Machart der
   Startseiten-Kacheln). `min-width: 0` hält lange Wörter im Raster. */
.ls-kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.ls-kachel {
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid rgba(var(--feldfarbe), .20);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 11, 18, .55), rgba(6, 11, 18, .72));
  transition: border-color .25s ease, transform .25s ease;
}
.ls-kachel:hover { border-color: rgba(var(--feldfarbe), .5); transform: translateY(-3px); }
.ls-kachel-titel {
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: #fff; margin: 14px 0 6px; letter-spacing: .01em;
}
.ls-kachel p { color: var(--tx-dim2); font-size: 15.5px; line-height: 1.5; }

/* ── Merksatz ──────────────────────────────────────────────────────────
   Ein einzelner Satz unter dem Inhalt eines Abschnitts — die Quintessenz.
   Abgesetzt durch eine Linie in Feldfarbe, kein eigener Kasten. */
.ls-merksatz {
  margin-top: 24px; padding-left: 16px;
  border-left: 2px solid rgba(var(--feldfarbe), .5);
  color: var(--tx); font-size: 17px; max-width: 70ch;
}

/* ── Fußzeile eines Abschnitts (Satz + Knopf quer) ───────────────────── */
.ls-fusszeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 28px; padding: 18px 22px;
  border: 1px solid rgba(154, 165, 182, .18); border-radius: 12px;
  background: rgba(6, 11, 18, .55);
}
.ls-fusszeile p { color: var(--tx-dim2); font-size: 16px; }

/* ── Haken-Liste ───────────────────────────────────────────────────────
   Aufzählung mit Haken im Markengrün — für Leistungsumfang und
   Enthaltenes. Der Haken ist ein gedrehter Rahmen (zwei Kanten), kein
   Zeichen aus der Schrift: so sitzt er in jeder Schrift gleich. */
.ls-haken { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ls-haken li { position: relative; padding-left: 28px; color: var(--tx-dim2); font-size: 16px; line-height: 1.5; }
.ls-haken li::before {
  content: ""; position: absolute; left: 4px; top: .32em;
  width: 6px; height: 11px;
  border: solid var(--green-h); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Abschluss ─────────────────────────────────────────────────────────
   Der Erstgespräch-Kasten aus grund.css (grüner Rand, Wortlaut überall
   gleich) ist hier zugleich der Abschlusskasten: `.erstgespraech
   .ls-abschluss` an EINEM Element, die Knöpfe sitzen darin. Hier nur
   Innenabstand und Abstand zu den Knöpfen; der Rand bleibt der aus
   grund.css. `max-width: none` hebt die Mobilbegrenzung dort auf, damit
   der Kasten so breit ist wie die übrigen. */
.erstgespraech.ls-abschluss {
  margin: 16px 0 0; max-width: none;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3.4vw, 40px);
  background: linear-gradient(to right, rgba(34, 197, 94, .10), rgba(34, 197, 94, .03)), rgba(8, 15, 28, .82);
}
.ls-abschluss .ls-aktionen { margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   NUR DIESE SEITE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Der Film ──────────────────────────────────────────────────────────
   16:9-Rahmen in Feldfarbe. `aspect-ratio` hält den Platz frei, bevor das
   Standbild geladen ist — sonst spränge der Text beim Laden. Das Video
   füllt den Rahmen, `object-fit: cover` vermeidet Ränder durch Rundung. */
.ls-video { margin: 0; min-width: 0; }
.ls-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(var(--feldfarbe), .45);
  background: #050a12;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 34px rgba(var(--feldfarbe), .16);
}
/* Im Vollbild den ganzen Film zeigen: `cover` füllte sonst den Bildschirm und
   schnitt auf Handys (quer breiter als 16:9) oben und unten ab. `contain`
   lässt stattdessen schmale schwarze Ränder. Zwei getrennte Regeln, weil ein
   unbekannter Selektor (Safari-Präfix) sonst die ganze Liste ungültig macht. */
.ls-video video:fullscreen { object-fit: contain; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.ls-video video:-webkit-full-screen { object-fit: contain; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
/* Großer Play-Knopf mittig über dem Bild (ki-prozesse.js). Kreis in
   Feldfarbe mit weißem Dreieck, deutlich größer als der Startknopf der
   Browser-Leiste. Er liegt nur über der Bildmitte; die Leiste unten bleibt
   frei bedienbar. */
.ls-film { position: relative; }
.ls-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  --d: clamp(64px, 11vw, 104px);          /* Durchmesser, auch fürs Dreieck */
  width: var(--d); height: var(--d); padding: 0;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(var(--feldfarbe), .88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 8px rgba(var(--feldfarbe), .18);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.ls-play[hidden] { display: none; }
/* Das Dreieck, optisch leicht nach rechts versetzt (sonst wirkt es
   im Kreis links verschoben). Maße aus --d: Rahmenbreiten in Prozent
   kennt CSS nicht — so geschrieben blieb vom Dreieck nur ein Punkt. */
.ls-play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-color: transparent transparent transparent #fff;
  border-width: calc(var(--d) * .17) 0 calc(var(--d) * .17) calc(var(--d) * .27);
  width: 0; height: 0;
}
.ls-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(var(--feldfarbe), 1); }
.ls-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ls-play { transition: none; } .ls-play:hover { transform: translate(-50%, -50%); } }
/* NUR DESKTOP, KI-SEITE UND FILMSEITE (.ls-hero bzw. .ls-filmseite): Der
   große Knopf in der Mitte deckte den Titel „KI-OS“ im Standbild zu. Darum
   kleiner und rechts neben dem Schriftzug (Mitte und Titel bleiben frei).
   Unten geht nicht: Dort liegt die Steuerleiste des Browsers, die bei
   angehaltenem Film stehen bleibt. Handy unverändert (mittig). Ändert sich
   das Standbild, die Lage prüfen. */
@media (min-width: 761px) {
  :is(.ls-hero, .ls-filmseite) .ls-play { --d: 64px; left: 86%; top: 46%; }
  .ls-filmseite .ls-play { --d: 96px; }   /* großes Bild: etwas größer */
}
.ls-video-zeile {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--tx-dim);
}

/* ── NUR VIDEO-SEITE (ki-prozesse/video.php) ───────────────────────────
   Der Film in voller Kastenbreite, darunter die zwei Wege weiter. Die
   Breite ist begrenzt, damit das 16:9-Bild auf großen Schirmen nicht höher
   als das Fenster wird. */
.ls-filmseite .ls-video { max-width: 1000px; margin-inline: auto; }
.ls-filmseite-wege { justify-content: center; margin-top: 24px; }

/* ── Vergleich Chat ↔ Agent ────────────────────────────────────────────
   Zwei gleich große Felder. Das Agentenfeld ist hervorgehoben (Feldfarbe,
   heller Grund), weil es die Antwort auf die Überschrift ist. */
.ls-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ls-vergleich-feld {
  min-width: 0; padding: 22px 22px 20px;
  border: 1px solid rgba(154, 165, 182, .20); border-radius: 12px;
  background: rgba(6, 11, 18, .55);
}
.ls-vergleich-feld--agent {
  border-color: rgba(var(--feldfarbe), .5);
  background:
    linear-gradient(180deg, rgba(var(--feldfarbe), .10), rgba(var(--feldfarbe), .02)),
    rgba(6, 11, 18, .55);
  box-shadow: 0 0 26px rgba(var(--feldfarbe), .10);
}
.ls-vergleich-marke {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  color: #fff; margin-bottom: 14px;
}
/* Der Satz steht zwischen Name und Ablaufgrafik: leichter als der Name,
   darunter mit Abstand die Grafik. */
.ls-vergleich-text { color: var(--tx-dim); font-size: 15.5px; line-height: 1.55; margin: 0 0 16px; }
/* NUR DESKTOP: Name kräftiger; das Handy behält seine Größe. */
@media (min-width: 761px) {
  .ls-vergleich-marke { font-size: 24px; margin-bottom: 6px; }
  .ls-vergleich-text { font-size: 16.5px; }
}

/* ── Ablaufgrafiken Chat ↔ Agent ───────────────────────────────────────
   Markup: Abschnitt #agent. Alle Farben über Klassen und Variablen, damit
   „Hell“ (kaesten-hell.css) greift. Chat gedämpft und still, Agent in
   Feldfarbe mit laufendem Fluss und dem grünen Freigabe-Tor. Breite =
   Feldbreite; die Schrift skaliert mit (viewBox 400 breit). */
.vg-bild { display: block; width: 100%; height: auto; margin-top: 4px; }
.vg-bild text { font-family: var(--font-sans); }
.vg-h { fill: var(--tx); font-size: 13px; font-weight: 700; }
.vg-t { fill: var(--tx-dim2); font-size: 12.5px; }
.vg-s { fill: var(--tx-dim); font-size: 11.5px; }
.vg-linie { fill: none; stroke: var(--tx-dim); stroke-opacity: .7; stroke-width: 1.5; }
.vg-linie--gestrichelt { stroke-dasharray: 3 3; }
.vg-spitze { fill: var(--tx-dim); }
.vg-person { fill: none; stroke: var(--tx-dim2); stroke-width: 1.8; }
.vg-flaeche { fill: rgba(255, 255, 255, .04); stroke: var(--tx-dim); stroke-opacity: .45; }
.vg-blase { fill: rgba(154, 165, 182, .22); }
.vg-blatt { fill: #0b1424; stroke: var(--tx-dim); stroke-opacity: .6; }
.vg-feld { fill: rgba(var(--feldfarbe), .08); stroke: rgb(var(--feldfarbe)); stroke-opacity: .65; stroke-width: 1.5; }
.vg-fluss {
  fill: none; stroke: rgb(var(--feldfarbe)); stroke-opacity: .85; stroke-width: 2;
  stroke-dasharray: 6 8; animation: vg-fluss 2.8s linear infinite;
}
@keyframes vg-fluss { to { stroke-dashoffset: -28; } }   /* -28 = 2 × (6+8): nahtlos */
.vg-station { fill: #0b1424; stroke: rgb(var(--feldfarbe)); stroke-width: 1.6; }
.vg-zeichen { fill: none; stroke: rgb(var(--feldfarbe)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-regel { fill: rgba(var(--feldfarbe), .10); stroke: rgb(var(--feldfarbe)); stroke-opacity: .4; }
.vg-go { fill: rgba(34, 197, 94, .16); stroke: var(--green); stroke-width: 1.6; }
.vg-go-t { fill: var(--green-h); font-size: 12px; font-weight: 700; }
.vg-go-l { fill: var(--green-h); font-size: 12px; font-weight: 700; }
.vg-linie-gruen { fill: none; stroke: var(--green); stroke-width: 1.6; }
.vg-spitze-gruen { fill: var(--green); }
.vg-ziel { fill: rgba(34, 197, 94, .14); stroke: var(--green); stroke-width: 1.6; }
.vg-haken { fill: none; stroke: var(--green-h); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Angebot (Kurs) ────────────────────────────────────────────────────
   Text links, Preisfeld rechts. Das Preisfeld trägt das Markengrün und
   nicht die Feldfarbe: Ein Preis sieht auf jeder Leistungsseite gleich
   aus (dieselbe Entscheidung wie bei den Web-Paketen). */
.ls-angebot { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 48px); align-items: center; }
.ls-angebot .ls-titel { margin-bottom: 14px; }
.ls-preis {
  text-align: center; padding: 28px 22px;
  border: 1px solid rgba(34, 197, 94, .36); border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .04)),
    rgba(6, 11, 18, .6);
}
.ls-preis-wert { font-family: var(--font-mono); font-weight: 700; font-size: 44px; color: var(--green-h); line-height: 1; }
.ls-preis-info { font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; color: var(--tx-dim); margin: 10px 0 20px; }
/* Kurs: Zeile mit der Pflicht nach Art. 4 zwischen Titel und Text. Leiser
   als der Fließtext, in Klammern. */
.ls-pflicht { margin: -6px 0 12px; color: var(--tx-dim); font-size: 15px; }
/* Vortrag: „Vortrag“ als eigene Zeile über dem Titel, damit die Kachel
   nicht aussieht wie der Kurs; statt des Preises „Auf Anfrage“ in kleinerer
   Schrift. */
.ls-titel-art {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: .5em; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--feldfarbe));
}
.ls-preis-wert--text { font-size: 28px; }

/* ── Häufige Fragen ────────────────────────────────────────────────────
   Je Frage ein <details>: Die Frage ist die Zeile zum Aufklappen, rechts ein
   Plus in Feldfarbe, das sich beim Öffnen zum Kreuz dreht. Getrennt durch
   feine Linien, kein Kasten im Kasten. Hell-Fassung: kaesten-hell.css. */
.ls-fragen { border-top: 1px solid rgba(154, 165, 182, .18); }
.ls-frage { border-bottom: 1px solid rgba(154, 165, 182, .18); }
.ls-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: .01em;
}
.ls-frage summary::-webkit-details-marker { display: none; }
.ls-frage summary::after {
  content: "+"; flex: none; font-family: var(--font-sans); font-size: 24px; line-height: 1;
  color: rgb(var(--feldfarbe)); transition: transform .2s ease;
}
.ls-frage[open] summary::after { transform: rotate(45deg); }
.ls-frage summary:focus-visible { outline: 2px solid rgb(var(--feldfarbe)); outline-offset: 2px; border-radius: 4px; }
.ls-frage p { margin: 0 0 18px; color: var(--tx-dim2); font-size: 16.5px; line-height: 1.6; max-width: 70ch; }

/* ═══════════════════════════════════════════════════════════════════════
   SCHMALE FENSTER
   ═══════════════════════════════════════════════════════════════════════
   Alle Haltepunkte `max-width`. */
@media (max-width: 1000px) {
  .ls-hero { grid-template-columns: 1fr; }
  .ls-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ls-vergleich { grid-template-columns: 1fr; }
  .ls-angebot { grid-template-columns: 1fr; }
  .ls-preis { max-width: 320px; }
}
@media (max-width: 480px) {
  /* Kacheln einspaltig und kompakter: Symbol links neben Titel und Text,
     sonst würden sechs Kacheln untereinander fast zwei Bildschirme lang. */
  .ls-kacheln { grid-template-columns: 1fr; gap: 10px; }
  .ls-kachel { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  /* Bild-Symbol: eigene Spalte über zwei Zeilen, 42 px wie die Spalte. */
  .ls-kachel .ls-icon-bild { grid-row: span 2; width: 42px; height: 42px; }
  .ls-kachel-titel { margin: 0 0 4px; align-self: end; }
  .ls-hero-lead, .ls-fliess { font-size: 16.5px; }
  .ls-aktionen .btn { flex: 1 1 100%; }
}