/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — LEISTUNGSBEREICH IT-SERVICE
   Gilt NUR für it-service/index.php. Wird als letzte Vorlage geladen.
   ═══════════════════════════════════════════════════════════════════════

   ── WARUM DIESE DATEI EIGENSTÄNDIG IST ─────────────────────────────────
   Jeder Leistungsbereich ist sein eigener Herr: Eine Änderung hier soll
   KI-Prozesse und Web-Systeme nicht verändern.

   ZWILLINGE: ki-prozesse/ki-prozesse.css und web-systeme/web-systeme.css
   tragen dieselben Grundbausteine (Abschnitt „BAUSTEINE“: Kasten, Kopf,
   Hero, Kacheln, Merksatz, Fußzeile, Haken, Abschluss). Soll ein
   Baustein auf allen drei Seiten gleich aussehen, wird er in allen drei
   Dateien geändert. Die Eckdaten-Linie im Einstieg (`.ls-fakten`) ist
   Zwilling von web-systeme.css. Seiteneigenes steht unter „NUR DIESE
   SEITE“.

   GRUNDREGEL des Auftritts: JEDER Inhalt sitzt in einem Kasten.

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

   FELDFARBE: `.leistungsseite--gruen` setzt `--feldfarbe: 34, 197, 94` —
   hier ist die Feldfarbe zugleich das Markengrün.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   BAUSTEINE (Zwillinge in ki-prozesse.css und web-systeme.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 Element (hier die
   Eckdaten, auf der KI-Seite 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
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Eckdaten im Einstieg (Zwilling: web-systeme.css) ──────────────────
   Senkrechte Linie mit Punkten, je Punkt eine fette Zeile und eine
   gedämpfte darunter. Dieselbe Form wie die Leistungsliste rechts im Kopf
   der Startseite (startseite.css, „Leistungslinie“) — dort grün, hier in
   der Feldfarbe. Die Linie hängt am EINZELNEN Punkt (`::after` an jedem
   außer dem letzten) und reicht bis zum nächsten Punkt — eine Linie an der
   Liste lief über den letzten Punkt hinaus, sobald dessen Text umbrach.
   `bottom: -26px` = 22 px Lücke + 4 px Abstand des nächsten Punkts von
   seiner Zeilenoberkante. */
.ls-fakten {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 22px; min-width: 0;
}
.ls-fakten li:not(:last-child)::after {
  content: ""; position: absolute; left: 7px; top: 20px; bottom: -26px; width: 2px;
  background: linear-gradient(180deg, rgba(var(--feldfarbe), .7), rgba(var(--feldfarbe), .25));
}
.ls-fakten li { position: relative; padding-left: 36px; min-width: 0; }
.ls-fakten li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--feldfarbe));
  box-shadow: 0 0 0 4px rgba(var(--feldfarbe), .16), 0 0 14px rgba(var(--feldfarbe), .5);
}
.ls-fakten strong {
  display: block; font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--feldfarbe));
}
.ls-fakten span { display: block; color: var(--tx-dim2); font-size: 15.5px; margin-top: 2px; }

/* ── Unterbau: Text + Schichtgrafik ────────────────────────────────────
   Drei Schichten übereinander, unten die eigene (IT-Service), oben das
   KI-System in kräftigerer Feldfarbe. Die Grafik ist Zierde
   (`aria-hidden`), der Text daneben sagt dasselbe. */
.ls-bruecke { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; }
.ls-bruecke .ls-titel { margin-bottom: 14px; }
.ls-bruecke-knopf { margin-top: 22px; }
.ls-bruecke-bild { min-width: 0; max-width: 380px; justify-self: center; width: 100%; }
.ls-bruecke-bild svg { width: 100%; height: auto; display: block; }
.lg-schicht { fill: rgba(255, 255, 255, .05); stroke: rgba(var(--feldfarbe), .40); stroke-width: 1.2; }
.lg-oben    { fill: rgba(var(--feldfarbe), .14); stroke: rgba(var(--feldfarbe), .75); }
.lg-t { fill: #e8edf4; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; text-anchor: middle; }
.lg-s { fill: var(--tx-dim); font-family: var(--font-mono); font-size: 10px; text-anchor: middle; }
.lg-pfeil { stroke: rgba(var(--feldfarbe), .6); stroke-width: 1.6; stroke-linecap: round; }

/* ═══════════════════════════════════════════════════════════════════════
   SCHMALE FENSTER
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .ls-hero { grid-template-columns: 1fr; }
  .ls-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-bruecke { grid-template-columns: 1fr; }
  .ls-bruecke-bild { max-width: 320px; justify-self: start; }
}
@media (max-width: 480px) {
  /* Kacheln einspaltig und kompakt: Symbol links neben Titel und Text. */
  .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%; }
}