/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — LEISTUNGSSEITEN
   IT-Service · KI-Prozesse · Web-Systeme. Eine Vorlage für alle drei.
   Wird NACH rechtstext.css geladen — sie verfeinert dessen Kästen.
   ═══════════════════════════════════════════════════════════════════════

   ── AUFBAU EINER LEISTUNGSSEITE ────────────────────────────────────────
   Die Seiten teilen sich alles bis auf drei Dinge: ihr Motiv, ihre Farbe
   und ihren Text. Der Abschnitt trägt dafür zwei Klassen:

       <section class="section section-dark leistungsseite leistungsseite--gruen" id="it-service">

   und die Bildebene im Seitenkopf ihre eigene Kennung:

       $hg_klasse = 'seitenbild seitenbild--it';

   FARBEN — jede Leistung trägt IHRE Farbe in Rand und Schein:
       --blau    KI-Prozesse    56, 189, 248
       --orange  Web-Systeme   251, 146,  60
       --gruen   IT-Service     34, 197,  94
   Es sind dieselben Werte wie an den Kacheln der Startseite. Sie stehen
   als RGB-Tripel in `--feldfarbe`, damit Rand, Schein und Überschrift nur
   die Deckkraft ändern — sonst müsste jede Farbe dreimal gepflegt werden.

   EINE VIERTE SEITE ANLEGEN
   1. Ein Farbpaar unten ergänzen (`.leistungsseite--…`).
   2. Motiv als `.seitenbild--…` eintragen, mit eigenen Werten für
      Helligkeit und Deckkraft — die hängen am Bild, nicht an der Seite.
   3. Die Seite selbst nach dem Muster von it-service/index.php bauen.
   Alles Übrige (Kästen, Kopfzeile, Erstgespräch, Rückweg) trägt sich von
   selbst.

   Die drei Leistungsbereiche liegen in eigenen Ordnern (`web-systeme/`,
   `it-service/`, `ki-prozesse/`) und bringen je eine eigene Stilvorlage
   mit. DIESE Datei trägt nur, was sie gemeinsam haben: Seitenmotiv,
   Feldfarben und die Kästen. Neue Gestaltung gehört in die Vorlage des
   jeweiligen Bereichs, nicht hierher — eine Änderung hier trifft alle
   drei.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Seitenmotiv ───────────────────────────────────────────────────────
   Ganzflächig hinter der Seite, fest am Fenster. Doppelt gedämpft: das
   Bild selbst zurückgenommen, dazu ein Schleier darüber — sonst ist der
   Text auf dem unruhigen Motiv nicht lesbar.

   Zuschnitt, Drehung und weiche Kanten stecken im Bild selbst; hier
   bewusst KEIN CSS dafür. Sonst entstünde für jedes neue Motiv eine neue
   Sonderklasse. */
.seitenbild {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-position: center center; background-size: cover; background-repeat: no-repeat;
  filter: brightness(.85) saturate(.75);
  opacity: .42;
}
.seitenbild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,15,28,.72), rgba(8,15,28,.52) 55%, rgba(8,15,28,.78));
}

/* Alle drei Motive stehen heller und kräftiger als die Grundwerte oben.
   Das ist möglich, weil auf diesen Seiten die Netzwerkpunkte abgeschaltet
   sind ($canvas = false): Das Bild muss sich die Aufmerksamkeit mit nichts
   mehr teilen und darf deutlicher stehen. Die Grundwerte bleiben, damit
   ein neues Motiv gedämpft startet statt zu erschlagen. */
.seitenbild--ki {
  background-image: url(../ki-prozesse-hg.webp);
  filter: brightness(1.05) saturate(.9);
  opacity: .62;
}
.seitenbild--web {
  background-image: url(../web-systeme-hg.webp);
  filter: brightness(1.05) saturate(.9);
  opacity: .62;
}
/* Beim Serverschrank zählt die BREITE: `cover` beschnitt links und rechts
   und zeigte nur den mittleren Ausschnitt — also je einen halben Schrank.
   Mit `100% auto` liegt das Bild in voller Breite an, die Höhe folgt
   proportional. Beim Tafelmotiv der KI-Seite ist `cover` dagegen richtig,
   dort gibt es keinen solchen Bildaufbau.
   Unten bündig statt mittig: In voller Breite ist das Bild niedriger als
   das Fenster, mittig blieb dadurch UNTEN ein bildfreier Streifen — dort
   sitzt die Fußzeile und stand ohne Unterbau da. Unten verankert schließt
   das Motiv mit dem Seitenfuß ab, und der freie Rest liegt oben beim
   Kopfblock, wo er ohnehin erwünscht ist. */
.seitenbild--it {
  background-image: url(../it-service-hg.webp);
  background-size: 100% auto;
  filter: brightness(1.05) saturate(.9);
  opacity: .62;
  background-position: center bottom;
}
/* Hochkant-Fenster (Tablet hochkant, Handy): In voller Breite füllte das
   Bild dort nur einen Streifen am Fuß. Dort deshalb `cover` — der Schrank
   wird seitlich beschnitten, das Fenster ist aber ganz gefüllt. Querformat
   bleibt bei voller Breite. */
@media (max-aspect-ratio: 5/4) {
  .seitenbild--it { background-size: cover; }
}

/* ── Die Farbe der Seite ───────────────────────────────────────────── */
.leistungsseite--blau   { --feldfarbe:  56, 189, 248; }
.leistungsseite--orange { --feldfarbe: 251, 146,  60; }
.leistungsseite--gruen  { --feldfarbe:  34, 197,  94; }

/* Etwas weniger Abstand unter dem Seitenkopf als auf den Rechtsseiten
   (dort 30 px): Hier folgt direkt der erste Kasten. */
.leistungsseite .imp-kopfzeile { margin-bottom: 22px; }

/* ── Kästen in der Seitenfarbe ─────────────────────────────────────────
   Sie liegen auf einem Foto, nicht auf dem ruhigen Netzwerk — ohne eigenen
   Grund verschwimmt der Text darauf. Dieselbe Überlegung wie bei den
   Kästen der Datenschutzseite.
   Deckkraft .74: Das Motiv soll unter dem Text erkennbar bleiben. */
.leistungsseite .imp-block {
  background:
    linear-gradient(to right, rgba(var(--feldfarbe),.10), rgba(var(--feldfarbe),0) 200px),
    rgba(8,15,28,.74);
  border: 1px solid rgba(var(--feldfarbe),.28);
  border-left: 2px solid rgba(var(--feldfarbe),.7);
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(var(--feldfarbe),.13);
}
/* Einspaltig: Die Kästen tragen hier keine Nummern — sie stehen für sich
   und zählen nichts auf, anders als die Paragraphen der Rechtsseiten. Ohne
   diese Zeile bliebe links die leere Nummernspalte von 48 px stehen. */
.leistungsseite .imp-block { grid-template-columns: 1fr; }
/* Überschrift in der Farbe des Feldes statt im Grün der Rechtsseiten —
   sonst stünde ein grüner Titel in einem blau umrandeten Kasten. */
.leistungsseite .imp-kicker { color: rgb(var(--feldfarbe)); }

/* ═══════════════════════════════════════════════════════════════════════
   HINWEIS: `.zurueck-zeile` — der Absatz mit dem „Zurück"-Knopf am Ende
   einer Seite — hat KEINE Regel, weder hier noch sonstwo. Der Knopf darin
   trägt `btn btn-ghost` und sieht deshalb richtig aus; die Zeile selbst
   bringt nur den Standardabstand eines Absatzes mit, also keinen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bild-Symbole ─────────────────────────────────────────────────────
   3D-Symbole als Bilddateien (<bereich>/icons/3d/; Farbe je Bereich: KI
   blau, Web orange, IT grün): ohne Kästchen drumherum (die Bilder bringen
   ihre eigene Form mit), 56 px, Datei in doppelter Größe (112 px) für feine
   Bildschirme. Gilt auf allen drei Leistungsseiten. */
.ls-icon-bild { display: block; width: 56px; height: 56px; }