/* acessio.de /leistungen/ · Modul „leistungen-hub“, Release 2026-10-22-verkaufsstark.
   1. Neuer Bereich „Ihre IT im Hintergrund“ mit der Leistung IT-Betreuung: eigene Fläche (Sand) und
      Tinte als Kreisfarbe beim Zeigen, damit er sich von den drei Farbbereichen der H1 absetzt.
   2. Abschluss nach Victor (22.10.2026): gezeichneter Pfeil auf „Erstgespräch anfragen“, darunter ein
      ruhiger Hinweis. Der Pfeil ist die vorhandene Zeichnung der Startseite (pfeil-an.svg, bei
      reduzierter Bewegung pfeil.svg). Am Desktop kommt er aus der Spalte zwischen Überschrift und Knopf,
      am Phone steht er gespiegelt rechts neben dem Knopf. */

.lu-gruppe--it { --lu-flaeche: #E7E0D8; --lu-tief: var(--ink, #19191C); }

/* H1 nach seitenplan.csv: „Online-Shop“ nicht am Bindestrich trennen. */
.lu-wort { white-space: nowrap; }
.page-leistungen .lu-hero h1 { max-width: 20ch; }
/* r2d: Die H1 läuft bei 320 px über sechs Zeilen; bei 320 × 700 lag der feste Anrufknopf (unten rechts) über der
   rechten unteren Ecke von „Erstgespräch anfragen“. Bis 340 px Breite (ab 600 px Höhe) Abstände im Held verdichtet
   wie auf der IT-Seite und den Schwesterseiten: oben 96 px, Einleitung 20 px, Knopf 22 px darunter. Die H1 behält
   ihre Größe. */
@media (max-width: 340px) and (min-height: 600px) {
  .page-leistungen main .lu-hero { padding-top: 96px; }
  .page-leistungen main .lu-hero__lead { margin-top: 20px; }
  .page-leistungen main .lu-hero__aktion { margin-top: 22px; }
}

.lu-abschluss__wege { position: relative; }
.lu-abschluss__pfeil { display: block; flex: none; pointer-events: none; }
.lu-abschluss__pfeil img { display: block; width: 100%; height: 100%; }
.page-leistungen .lu-abschluss__text > p.lu-abschluss__hinweis {
  max-width: 44ch; margin: 16px 0 0;
  color: var(--muted, #6E6A66); font-size: 15px; line-height: 1.5;
}

/* Desktop: Pfeil links vom Knopf, kommt von oben aus dem Spaltenzwischenraum. */
@media (min-width: 900px) {
  .lu-abschluss__pfeil {
    position: absolute; right: calc(100% + 10px); top: -50px;
    width: 124px; height: 83px;
  }
}

/* Phone und Tablet: Knopf links, Pfeil gespiegelt rechts daneben, zeigt auf den Knopf. */
@media (max-width: 899px) {
  .lu-abschluss__wege { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .lu-abschluss__pfeil { width: 76px; height: 51px; margin-top: -20px; transform: scaleX(-1); }
}
@media (max-width: 359px) {
  .lu-abschluss__pfeil { display: none; }
}

/* r2g (QA r4 zugang-leistung): Die H1-Auszeichnungen „Sichtbarkeit“ und „Abläufe“ stehen in einer Teilmenge der
   Figtree-Kursiven, vorgeladen mit 4,5 statt 20,9 KB (ganze Kursive). Datei und Regel wie Modul seiten-ta
   (figtree-kursiv-ta, SIL Open Font License 1.1); sie enthält alle Zeichen beider Wörter (cmap geprüft,
   werkzeug/baue_kursiv.py). Zeichen außerhalb der unicode-range kommen wie bisher aus der ganzen Kursiven des Bündels. */
@font-face { font-family: "Figtree Kursiv TA"; src: url("/assets/fonts/figtree-kursiv-ta-f6fa9dd8ec86.woff2") format("woff2-variations"), url("/assets/fonts/figtree-kursiv-ta-f6fa9dd8ec86.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+20, U+2C-2E, U+41, U+45-46, U+4B, U+53, U+57, U+61-69, U+6B-6F, U+72-75, U+77, U+A0, U+AD, U+C4, U+E4, U+FC, U+201C, U+201E; }
#lu-titel .mk { font-family: "Figtree Kursiv TA", var(--sans); }