/* Modul „leistungsseiten“, Release 2026-10-22-verkaufsstark.
   Warum-Abschnitt mit Zeichnung, „Warum jetzt?“ mit belegter Kennzahl und sichtbarer Quelle,
   Bewertungszeile und Zwischen-Aufruf im Kundenbeleg. Nur Klassen mit Präfix lv-. */

.lv-warum {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px 72px;
  align-items: center;
}
.lv-warum > .lp-eyebrow { grid-column: 1 / -1; margin: 0; }
.lv-warum__text h2 { margin: 0 0 22px; }
.lv-warum__text p { font-size: 20px; line-height: 1.55; max-width: 58ch; margin: 0; }
.lv-warum__bild { margin: 0; }
.lv-warum__bild img { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }

.lv-jetzt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px 72px;
  align-items: start;
  margin-top: 20px;
  padding-top: 36px;
  border-top: 1px solid var(--lp-line, #d3ceca);
}
.lv-jetzt--ohne-zahl { grid-template-columns: minmax(0, 1fr); }
.lv-jetzt h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; }
.lv-jetzt__text p { font-size: 18px; line-height: 1.6; max-width: 58ch; margin: 0; }

.lv-kennzahl { margin: 0; }
.lv-kennzahl__wert {
  display: block;
  font-size: clamp(52px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink, #19191C);
  margin: 0 0 12px;
}
.lv-kennzahl__wert--datum { font-size: clamp(40px, 4.6vw, 60px); }
.lv-kennzahl figcaption { font-size: 17px; line-height: 1.5; max-width: 36ch; color: var(--ink, #19191C); }
.lv-kennzahl sup, .lv-quelle sup { font-size: .7em; line-height: 0; }
/* r2: Fußnoten- und Quellenlinks nicht nur über die Farbe erkennbar (WCAG 1.4.1) */
.lv-jetzt .lv-kennzahl sup a { color: var(--lp-accent, #075b62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; padding-inline: 2px; }
.lv-quelle { font-size: 13px; line-height: 1.55; color: var(--lp-muted, #57534f); margin: 14px 0 0; max-width: 48ch; }
.lv-jetzt .lv-quelle a { color: var(--lp-accent, #075b62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Kundenbeleg: Zitat, Bewertungszeile, Zwischen-Aufruf */
.lp-proof-image.lv-ohne-rahmen img { border: 0; border-radius: 6px; box-shadow: 0 1px 0 rgba(25, 25, 28, .05), 0 22px 40px -28px rgba(25, 25, 28, .45); }
.lp-proof .ls-zitat { margin: 22px 0 4px; max-width: 56ch; }
/* r2: Absender außerhalb des Links, damit die Wertung erkennbar die von acessio ist. Der Link läuft als Text
   in derselben Zeile weiter (kein Flex), so bleiben Absender, Sterne und Wertung auch am Handy beieinander. */
.lv-bewertung { margin: 20px 0 6px; font-size: 15px; line-height: 1.7; }
.lv-bewertung__absender { color: var(--lp-muted, #57534f); font-weight: 400; }
.lv-bewertung a { color: var(--ink, #19191C); font-weight: 650; text-decoration: none; }
.lv-bewertung a .stars { white-space: nowrap; margin-right: 2px; }
.lv-bewertung a:hover, .lv-bewertung a:focus-visible { color: var(--lp-accent, #075b62); text-decoration: underline; text-underline-offset: 3px; }
.lv-bewertung .google-reviews-date { font-weight: 400; color: var(--lp-muted, #57534f); margin-left: 8px; }
.lp-proof p.lv-weiter { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: var(--lp-muted, #57534f); }
.lp-proof p.lv-weiter a { padding-block: 4px; }
.lv-weiter__tel { white-space: nowrap; }

/* Umfang: Zeichnung „Angebot mit Haken“ neben der Überschrift */
.lv-umfang-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; }
.lv-umfang-bild { display: block; width: 240px; height: auto; }

/* Ablauf: Zeichnung „Gespräch, Termin, Umsetzung“ unter dem Einleitungssatz */
.lv-ablauf-bild { display: block; width: 300px; max-width: 100%; height: auto; margin-top: 28px; }

/* Betreuung: „Warum jetzt?“ unter den drei Aushang-Punkten */
.bt-aushang .lv-jetzt { margin-top: 48px; }

/* r2: Held bei 320 px ohne Querscrollen. Die SEO-H1 enthalten lange Komposita („Google-Unternehmensprofil:“);
   ohne min-width: 0 dehnt deren Mindestbreite die Heldspalte über den Bildschirm. Weiche Trennstellen (­)
   setzt inhalt.py; overflow-wrap fängt Wörter ohne Trennstelle ab. */
.lp-hero-grid > * { min-width: 0; }
.lp-hero h1 { overflow-wrap: break-word; }

@media (max-width: 860px) {
  .page-leistungen .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lv-warum, .lv-jetzt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lv-warum__text p { font-size: 18px; }
  .lv-warum__bild img { max-width: 300px; margin-inline: 0; }
  .lv-jetzt { padding-top: 28px; margin-top: 8px; }
  .bt-aushang .lv-jetzt { margin-top: 36px; }
  .lv-umfang-kopf { grid-template-columns: minmax(0, 1fr); }
  .lv-umfang-bild { width: 190px; }
  .lv-ablauf-bild { width: 250px; margin-top: 20px; }
}

/* r2b (23.10.2026): Auf sehr schmalen, hohen Bildschirmen lag der Held-Knopf bei scrollY 0 unter dem festen
   Anrufknopf (unten rechts), z. B. Google-Profil bei 320 × 700 (H1 sechs Zeilen). H1 und Abstände im Held leicht
   verdichtet; die H1 bleibt die größte Überschrift (35 px gegenüber 32 px der H2). Erst ab 600 px Höhe: darunter
   liegt der Knopf ohnehin unter dem ersten Bildschirm und würde verdichtet erst unter den Anrufknopf rutschen.
   Die Anrufknopf-Regel selbst bleibt unverändert. Spezifität wie das Bündel (.page-leistungen …) plus main. */
@media (max-width: 340px) and (min-height: 600px) {
  .page-leistungen main .lp-hero { padding-top: 96px; }
  .page-leistungen main .lp-hero .lp-breadcrumb { margin-bottom: 22px; }
  .page-leistungen main .lp-hero h1 { font-size: 35px; line-height: 1; }
  .page-leistungen main .lp-hero .lp-intro { margin-top: 20px; margin-bottom: 10px; line-height: 1.5; }
}

/* r2c (23.10.2026, QA-Vorschau r2 0b1f12ec) */

/* Bewertungszeile: Sterne in Türkis wie auf der IT-Seite (.itb-bewertung__sterne: var(--accent, #097078)) statt des
   Bündel-Standards var(--stern, #E3A008). Gilt für jede Zeile des Moduls (Kundenbeleg und Betreuung). */
.lv-bewertung { --stern: var(--accent, #097078); }
.bt-termin__fuss .lv-bewertung { margin: 0 0 14px; }

/* Online-Shops: Fußnote direkt im Text „Warum jetzt?“ (BFSG, ohne große Zahl), gleich gestaltet wie bei der Kennzahl */
.lv-jetzt__text sup { font-size: .7em; line-height: 0; }
.lv-jetzt__text p.lv-quelle { font-size: 13px; line-height: 1.55; max-width: 48ch; margin: 14px 0 0; }
.lv-jetzt__text sup a { color: var(--lp-accent, #075b62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; padding-inline: 2px; }

/* Webdesign-Showcase: Hinweis passend zur Eingabe. Mit Maus „Fahren Sie mit der Maus …“, sonst „Tippen Sie …“
   (Tippen fokussiert .ls-fenster__bild, das Bündel fährt die Seite dann über :focus durch). */
.lv-hinweis-maus { display: none; }
@media (hover: hover) {
  .lv-hinweis-maus { display: inline; }
  .lv-hinweis-tippen { display: none; }
}

/* Desktop-Held: Die SEO-H1 liefen mit 84 px über 4–5 Zeilen, der Held-Knopf lag bei 1280 × 720 und 1366 × 768 unter
   dem Falz. H1 wie auf der IT-Seite (Modul leistungen-hub: clamp(40px, 5.2vw, 74px), 18ch), damit klar größer als
   die H2 (Bündel clamp(…, 4.3vw, 60px)). Die große Kennzahl folgte bisher der H1 (6.4vw, 84 px) und bleibt kleiner
   als sie. Auf niedrigen Bildschirmen beginnt der Held näher am Kopf: Abstand oben 128 px (Mindestwert des Bündels
   clamp(128px, 13vw, 184px)), Brotkrumen-Abstand 28 statt 38 px. Unter 861 px Breite bleibt alles wie bisher. */
@media (min-width: 861px) {
  .page-leistungen main .lp-hero h1 { font-size: clamp(40px, 5.2vw, 74px); max-width: 18ch; }
  .lv-kennzahl__wert:not(.lv-kennzahl__wert--datum) { font-size: clamp(40px, 4.8vw, 68px); }
}
@media (min-width: 861px) and (max-height: 900px) {
  .page-leistungen main .lp-hero { padding-top: 128px; }
  .page-leistungen main .lp-hero .lp-breadcrumb { margin-bottom: 28px; }
}

/* r2e (23.10.2026, QA-Vorschau r3 cb951b99) */

/* Bewertungslink: unterstrichen wie die Quellenlinks (QA r3 zugang-leistung, Befund Bewertungslink, WCAG 1.4.1),
   nicht nur fett. Die Sterne stehen als inline-block außerhalb der Unterstreichung, die so erst beim Wert beginnt.
   Das Leerzeichen nach den Sternen steht als   in ihnen (inhalt.BEWERTUNG); den sichtbaren Abstand gibt der
   Außenabstand (bei 1440 px gemessen: Sterne bis Wert 6,7 px vorher, 7,0 px nachher). */
.lv-bewertung a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lv-bewertung a .stars { display: inline-block; margin-right: 6px; }
.lv-bewertung a:hover, .lv-bewertung a:focus-visible { text-decoration-thickness: 2px; }

/* Held auf niedrigen Desktop-Fenstern (QA r3 integritaet-gestaltung, Befund 2): Bei 1366 x 657 (Laptop mit
   Browserleisten) lag der Held-Knopf von Social-Media-Videos und Online-Shops 12,5 px unter der Grenze
   innerHeight − 16. Bis 800 px Höhe dieselbe Verdichtung wie auf den Schwesterseiten (Modul seiten-ta, r2d):
   Held oben 112 px (24 px unter der Kopfleiste), Brotkrumen-Abstand 24 px, H1 clamp(40px, 5vw, 70px)
   (1366 px: 68,3 statt 71 px), Einleitung oben 22 px. Ab 801 px Höhe und unter 861 px Breite unverändert. */
@media (min-width: 861px) and (max-height: 800px) {
  .page-leistungen main .lp-hero { padding-top: 112px; }
  .page-leistungen main .lp-hero .lp-breadcrumb { margin-bottom: 24px; }
  .page-leistungen main .lp-hero h1 { font-size: clamp(40px, 5vw, 70px); }
  .page-leistungen main .lp-hero .lp-intro { margin-top: 22px; }
}