/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — LEISTUNGSBEREICH WEB-SYSTEME
   Gilt NUR für web-systeme/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 IT-Service nicht verändern.

   ZWILLINGE: ki-prozesse/ki-prozesse.css und it-service/it-service.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. Seiteneigenes steht im Abschnitt „NUR DIESE SEITE“.

   GRUNDREGEL des Auftritts: JEDER Inhalt sitzt in einem Kasten.

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

   FELDFARBE: `.leistungsseite--orange` setzt `--feldfarbe: 251, 146, 60`.
   Alle Regeln ändern nur die Deckkraft. Das Markengrün steht nur bei
   Preisen, Haken und Hauptknopf — die sehen auf allen Seiten gleich aus.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   BAUSTEINE (Zwillinge in ki-prozesse.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 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: it-service.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; }

/* ── Web-Pakete ────────────────────────────────────────────────────────
   Drei Karten mit Preis im Markengrün. Die mittlere ist betont (Rand,
   Schein) — optisch, ohne Etikett. Die Haken-Liste kommt aus den
   Bausteinen (`.ls-haken`). */
.ls-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ls-paket {
  min-width: 0; display: flex; flex-direction: column;
  padding: 26px 24px;
  border: 1px solid rgba(34, 197, 94, .26); border-radius: 14px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .08), rgba(34, 197, 94, .02)), rgba(6, 11, 18, .6);
  transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease;
}
.ls-paket:hover { transform: translateY(-4px); border-color: rgba(34, 197, 94, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.ls-paket--betont {
  border-color: rgba(34, 197, 94, .55);
  background: linear-gradient(180deg, rgba(34, 197, 94, .15), rgba(34, 197, 94, .03)), rgba(6, 11, 18, .6);
  box-shadow: 0 0 30px rgba(34, 197, 94, .14);
}
.ls-paket-name { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: #fff; }
.ls-paket-preis { font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: var(--green-h); margin: 6px 0 4px; }
/* Korrekturrunden als Zeile unter dem Preis (addieren sich nicht), darüber
   der Hinweis „Alles aus dem kleineren Paket, dazu:“ — die Pakete zeigen
   nur ihre Unterschiede (Gemeinsames in „In jedem Paket“). */
.ls-paket-runden { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--tx-dim); }
.ls-paket-plus { margin-top: 14px; color: var(--tx-dim); font-size: 14.5px; font-style: italic; }
.ls-paket-plus + .ls-haken { margin-top: 8px; }
/* Erweiterungen UNTER der Liste (Erweitert): gleiche Form wie „Alles aus
   dem kleineren Paket“, Abstand nach oben zur Liste. */
.ls-paket-plus--nach { margin-top: 14px; }
.ls-paket .ls-haken { margin-top: 14px; }
.ls-paket .ls-haken li { font-size: 15.5px; }

/* Was in jedem Paket enthalten ist: eine ruhige Fläche unter den Karten. */
.ls-enthalten {
  margin-top: 18px; padding: 20px 22px;
  border: 1px solid rgba(154, 165, 182, .18); border-radius: 12px;
  background: rgba(6, 11, 18, .55);
}
.ls-enthalten-titel {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgb(var(--feldfarbe)); margin-bottom: 12px;
}
.ls-enthalten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ls-enthalten-liste li { color: var(--tx-dim2); font-size: 15.5px; line-height: 1.55; }
.ls-enthalten-liste strong { color: #fff; }
.ls-enthalten-liste a { color: rgb(var(--feldfarbe)); border-bottom: 1px solid rgba(var(--feldfarbe), .4); }
.ls-enthalten-liste a:hover { border-bottom-color: rgb(var(--feldfarbe)); }
.ls-fussnote { margin-top: 14px; color: var(--tx-dim); font-size: 14.5px; line-height: 1.55; }
/* Das Sternchen selbst: in der Grundschrift (das der Mono-Schrift sitzt
   tief und wirkt wie ein Fleck), hochgestellt, Feldfarbe. */
.ls-stern { font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 1.05em; color: rgb(var(--feldfarbe)); vertical-align: .35em; line-height: 0; margin-left: 1px; }
/* Sternchen-Hinweis unter „In jedem Paket“: eigener Absatz, kursiv und mit
   Abstand — soll nicht aussehen wie die Angaben darüber. */
.ls-sternhinweis { margin-top: 16px; color: var(--tx-dim); font-size: 14px; font-style: italic; line-height: 1.5; }
.ls-sternhinweis + .ls-sternhinweis { margin-top: 4px; }
/* Fußnoten-Ziffern ¹ (Preis „ab“) und ² (Korrekturrunden) statt eines
   Sterns für beides: kleiner und höher als der Stern, Abstand zum Text. */
.ls-stern--ziffer { font-size: .62em; vertical-align: .6em; margin-left: 2px; }
.ls-sternhinweis .ls-stern--ziffer { margin: 0 3px 0 0; }
/* Am großen Preis dieselbe absolute Größe wie die ² an den Korrekturrunden
   (sonst wüchse die Ziffer mit der Preisschrift); höher gesetzt, damit sie
   an der Oberkante der Zahl sitzt. */
.ls-paket-preis .ls-stern--ziffer { font-size: 8px; vertical-align: 1.9em; }

/* ── Größere Vorhaben ──────────────────────────────────────────────────
   Text links, rechts Stichworte als Pillen — sie zeigen die Bandbreite,
   ohne eine weitere Liste zu sein. */
.ls-vorhaben { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; }
.ls-vorhaben .ls-titel { margin-bottom: 14px; }
.ls-vorhaben .ls-fliess + .ls-fliess { margin-top: 12px; }
.ls-stichworte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ls-stichworte li {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--feldfarbe), .38);
  background: rgba(var(--feldfarbe), .08);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--tx);
}

/* ── Referenzen ────────────────────────────────────────────────────────
   Drei Karten mit Bildschirmfoto. Das ganze Feld ist der Link; das Bild
   hebt sich beim Überfahren leicht an. `aspect-ratio` hält den Platz frei,
   solange das Bild (lazy) noch nicht geladen ist. */
.ls-referenzen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ls-referenz { min-width: 0; }
.ls-referenz a {
  display: block; height: 100%; padding: 10px 10px 16px;
  border: 1px solid rgba(var(--feldfarbe), .22); border-radius: 12px;
  background: rgba(6, 11, 18, .6);
  transition: border-color .25s ease, transform .25s ease;
}
.ls-referenz a:hover { border-color: rgba(var(--feldfarbe), .55); transform: translateY(-3px); }
.ls-referenz img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid rgba(154, 165, 182, .18);
}
/* Bildrahmen der Karte: trägt bei Beispielen die Marke „Beispiel“ oben
   links auf dem Bild — so ist auch im laufenden Band sofort erkennbar,
   dass es eine Musterseite ist, nicht eine Kundenarbeit. */
.ls-referenz-bild { position: relative; display: block; }
.ls-referenz-marke {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(6, 11, 18, .82); border: 1px solid rgba(var(--feldfarbe), .65);
  color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.ls-referenz-name { display: block; margin: 14px 6px 2px; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; }
.ls-referenz-art { display: block; margin: 0 6px; color: var(--tx-dim2); font-size: 15px; line-height: 1.5; }

/* ── Beispiel vergrößert ───────────────────────────────────────────────
   Fenster über der Seite (Muster wie das Kontaktfenster: abgedunkelter,
   weichgezeichneter Grund). Das Bild füllt den Platz im Seitenverhältnis
   16:10, höchstens so hoch wie das Fenster erlaubt. Schließen-Knopf aus
   kontaktformular.css (.kf-schliessen), hier nur auf das Bild gesetzt. */
.ls-zoom {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(4, 8, 16, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ls-zoom[hidden] { display: none; }
.ls-zoom-box { position: relative; margin: 0; width: min(1440px, 100%, calc((100vh - 110px) * 1.6)); }
.ls-zoom-bild {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border-radius: 10px; border: 1px solid rgba(154, 165, 182, .25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.ls-zoom-text { margin-top: 12px; color: var(--tx-dim2); font-size: 15px; text-align: center; }
.ls-zoom .ls-zoom-zu { top: -14px; right: -14px; background: rgba(6, 11, 18, .92); }
.ls-zoom-offen { overflow: hidden; }
@media (max-width: 760px) {
  .ls-zoom .ls-zoom-zu { top: -46px; right: 0; }
}

/* ── Referenzen als Fließband (NUR DESKTOP) ────────────────────────────
   Ab 761 px läuft die Reihe als langsames, endloses Band von rechts nach
   links (kein Blättern per Knopf). Das Band enthält jede Karte zweimal
   (Markup, `--kopie`); die Animation schiebt um genau eine Hälfte und
   springt dann unsichtbar zurück. Dafür steht der Abstand als
   `margin-right` an JEDER Karte statt als `gap`: nur so ist die halbe
   Bandbreite exakt eine Kartenfolge (mit `gap` ruckte es um einen halben
   Abstand). Feste Kartenbreite, weil die Breite des Bandes aus seinem
   Inhalt kommt (`max-content`) — Prozentangaben gingen dort ins Leere.
   Maus oder Tastaturfokus auf einer Karte hält es an. Die Ränder blenden
   weich aus (Maske). `--dauer` setzt web-systeme.js aus der Kartenzahl.
   Reduzierte Bewegung: kein Lauf, die Reihe ist von Hand schiebbar, die
   Kopie entfällt. Handy (bis 760 px): eigener Block unten. */
@media (min-width: 761px) {
  .ls-band {
    overflow: hidden; padding-top: 4px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .ls-band .ls-referenzen {
    display: flex; gap: 0; width: max-content;
    animation: ls-band var(--dauer, 60s) linear infinite;
  }
  .ls-band .ls-referenz { flex: 0 0 320px; margin-right: 16px; }
  /* Anhalten bei Maus darüber oder TASTATURfokus auf einer Karte.
     Bewusst nicht `:focus-within`: Nach einem Mausklick behält der Link
     den Fokus, das Band stünde dann still, bis man woanders klickt.
     `:focus-visible` gilt nur für Tastaturfokus. */
  .ls-band:hover .ls-referenzen,
  .ls-band:has(a:focus-visible) .ls-referenzen { animation-play-state: paused; }
}
@keyframes ls-band { to { transform: translateX(-50%); } }
/* Knopf „Besuchen“ unter der Karte: nur Handy (Block unten), Desktop nie.
   Zwei Klassen im Selektor, weil `.ls-referenz a` (Karte, oben) sonst
   gewinnt — dieselbe Regel träfe auch diesen Link. */
.ls-referenz .ls-referenz-besuchen { display: none; }

/* ── Referenzen am HANDY ───────────────────────────────────────────────
   Dasselbe Fließband wie am Desktop (Keyframes oben), Karten 230 px. Am
   Handy hält kein Überfahren mit der Maus an — stattdessen schaltet ein
   Tipp aufs Band die Klasse `steht` (web-systeme.js): Band steht, unter
   jeder Karte erscheint „Besuchen“ (neuer Tab); der nächste Tipp lässt es
   weiterlaufen. Der Knopf belegt seinen Platz immer (nur unsichtbar),
   damit das Band beim Anhalten nicht in der Höhe springt.
   Reduzierte Bewegung: kein Band, sondern eine wischbare Reihe (Karten
   82 % breit, rasten ein), Kopie und Knopf entfallen, der Tipp auf die
   Karte öffnet die Seite. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ls-band {
    overflow: hidden; padding-top: 4px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .ls-band .ls-referenzen {
    display: flex; gap: 0; width: max-content;
    animation: ls-band var(--dauer, 60s) linear infinite;
  }
  .ls-band .ls-referenz { flex: 0 0 230px; margin-right: 12px; display: flex; flex-direction: column; }
  /* Marke auf der schmalen Karte kleiner, sonst deckt sie ein Viertel des Bildes. */
  .ls-referenz-marke { top: 7px; left: 7px; padding: 2px 7px; font-size: 10px; }
  .ls-band .ls-referenz > a:first-child { flex: 1; }
  .ls-band.steht .ls-referenzen { animation-play-state: paused; }
  .ls-referenz .ls-referenz-besuchen {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: auto; min-height: 44px; margin-top: 8px; padding: 0 16px; border-radius: 999px;
    border: 1.5px solid rgba(var(--feldfarbe), .6); background: rgba(var(--feldfarbe), .12);
    color: #fff; font-weight: 700; font-size: 15px;
    visibility: hidden;
  }
  .ls-referenz .ls-referenz-besuchen::after { content: "↗"; color: rgb(var(--feldfarbe)); }
  .ls-band.steht .ls-referenz .ls-referenz-besuchen { visibility: visible; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .ls-referenz--kopie { display: none; }
  .ls-band {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-top: 4px;
  }
  .ls-band::-webkit-scrollbar { display: none; }
  .ls-band .ls-referenzen { display: flex; gap: 12px; }
  .ls-band .ls-referenz { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .ls-band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ls-band .ls-referenzen { animation: none; }
  .ls-referenz--kopie { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NUR HOSTING-SEITE (web-systeme/hosting.php)
   ═══════════════════════════════════════════════════════════════════════
   Zwei gleichrangige Felder nebeneinander, gleich gestaltet: Keiner der
   Fälle ist der empfohlene, der Kunde wählt. */
.ls-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ls-wegfeld {
  min-width: 0; padding: 24px 24px 22px;
  border: 1px solid rgba(var(--feldfarbe), .28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--feldfarbe), .07), rgba(var(--feldfarbe), .01)), rgba(6, 11, 18, .6);
}
.ls-wegfeld-titel { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 8px; }
.ls-wegfeld p { color: var(--tx-dim2); font-size: 16px; line-height: 1.55; }
.ls-wegfeld .ls-haken a,
.ls-wege ~ .ls-fussnote a { color: rgb(var(--feldfarbe)); }
/* Einleitungssatz unter der Überschrift: Abstand wie unter dem Titel. */
.ls-kopf .ls-fliess { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   SCHMALE FENSTER
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .ls-hero { grid-template-columns: 1fr; }
  .ls-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pakete, .ls-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-vorhaben { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ls-pakete, .ls-referenzen, .ls-wege { grid-template-columns: 1fr; }
  .ls-pakete { max-width: 460px; }
}
@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%; }
}