/* acessio.de /leistungen/it-betreuung/ · Modul „leistungen-hub“, Release 2026-10-22-verkaufsstark.
   Ergänzt das Leistungsseiten-Bündel (lp-*) um die Bauteile dieser Seite: Held mit Zeichnung,
   Bild-Text-Abschnitte, eine belegte Kennzahl mit sichtbarer Quelle, Victor als Ansprechpartner und
   drei gezeichnete Schritte. Nur Tokens der Seite (Figtree, Tinte, Papier, Sand, Türkis als Akzent),
   keine Rahmenkästen, Raum statt Rahmen. Präfix itb-, damit nichts mit anderen Seiten kollidiert. */

.itb h2 { text-wrap: balance; }
.itb .lp-hero h1 { max-width: 16ch; text-wrap: balance; }

/* Held: Text links, rechts der Überblick „Was sich für Sie ändert“ (lp-scope wie auf den Schwesterseiten)
   mit der Zeichnung obenauf; am Phone steht er direkt unter dem Knopf, die Zeichnung im ersten Bildschirm. */
.itb .itb-held .lp-caption { margin-top: 14px; }
.itb .itb-held__bild { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 22px; }
@media (max-width: 899px) {
  .itb .itb-held__bild { max-width: 200px; margin-bottom: 14px; }
}
/* Korrekturrunde r2c (QA r2 gestaltung): Am Desktop lag der Held-Knopf bei 1280 × 720 und 1366 × 768 unter dem
   Falz. Ursache: Die Textspalte stand neben dem hohen Überblickskasten senkrecht zentriert (H1 67 px unter dem
   Rasteranfang) und die H1 lief mit 84 px über drei Zeilen. Jetzt beginnt der Text oben am Raster, die H1 ist
   kleiner und bleibt mit dem Faktor 1,2 klar größer als die H2 (Bündel: clamp(32px, 4.3vw, 60px)). Die große
   Kennzahl „58 %“ (bisher bis 120 px) bleibt am Desktop kleiner als die H1, Werte wie auf den Schwesterseiten
   (leistungsseiten.css: H1 clamp(40px, 5.2vw, 74px), Kennzahl clamp(40px, 4.8vw, 68px) ab 861 px).
   Unter 861 px bleibt alles wie bisher. */
@media (min-width: 861px) {
  .itb .lp-hero h1 { font-size: clamp(40px, 5.2vw, 74px); max-width: 18ch; }
}
@media (min-width: 901px) {
  .itb .itb-held { align-items: start; }
}
/* r2c: Bis 340 px Breite Abstände im Held verdichtet wie auf den Schwesterseiten (leistungsseiten/ta-seiten, r2b);
   die H1 behält ihre Größe. Damit liegt der Held-Knopf auch bei 320 × 568 frei vom festen Anrufknopf unten rechts
   (vorher dort am rechten Ende überdeckt). */
@media (max-width: 340px) {
  .page-leistungen main.itb .lp-hero { padding-top: 96px; }
  .page-leistungen main.itb .lp-hero .lp-breadcrumb { margin-bottom: 22px; }
  .page-leistungen main.itb .lp-hero .lp-intro { margin-top: 20px; margin-bottom: 10px; line-height: 1.5; }
}
/* r2d: Am Desktop beginnt der Held auf niedrigen Bildschirmen so hoch wie auf den Schwesterseiten
   (leistungsseiten.css und ta-seiten.css, r2c): oben 128 px (Mindestwert des Bündels clamp(128px, 13vw, 184px)),
   Brotkrumen-Abstand 28 statt 38 px. Vorher stand die Brotkrume bei 1280 × 720 38 px tiefer (166 statt 128 px). */
@media (min-width: 861px) and (max-height: 900px) {
  .page-leistungen main.itb .lp-hero { padding-top: 128px; }
  .page-leistungen main.itb .lp-hero .lp-breadcrumb { margin-bottom: 28px; }
}

/* Bild und Text nebeneinander (Warum das wichtig ist). */
.itb-bildtext { display: grid; gap: 26px; align-items: center; }
.itb-bildtext__bild { margin: 0; }
.itb-bildtext__bild img { display: block; width: 100%; max-width: 500px; height: auto; }
.itb-bildtext__text > p:last-child,
.itb-person__text > p:not([class]) {
  max-width: 52ch; margin: 18px 0 0;
  color: var(--ink-2, #3B3940); font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6;
}
@media (min-width: 900px) {
  .itb-bildtext { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }
}
@media (max-width: 899px) {
  .itb-bildtext__bild img { max-width: 320px; }
}

/* Warum jetzt: Überschrift links, Kennzahl rechts, Quelle direkt darunter sichtbar. */
.itb-jetzt { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .itb-jetzt { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 70px; align-items: start; }
}
/* Zeichnung (Schild und abgehakte Liste) eröffnet den Abschnitt über der Überschrift, am Phone kleiner. */
.itb-jetzt__bild { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 26px; }
@media (max-width: 899px) {
  .itb-jetzt__bild { max-width: 200px; margin-bottom: 16px; }
}
.itb .itb-kennzahl__zahl {
  margin: 0; color: var(--ink, #19191C);
  font-size: clamp(68px, 8.4vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -.045em;
}
/* r2c: am Desktop kleiner als die H1 (siehe Held oben). */
@media (min-width: 861px) {
  .itb .itb-kennzahl__zahl { font-size: clamp(40px, 4.8vw, 68px); }
}
.itb .itb-kennzahl__satz {
  max-width: 34ch; margin: 14px 0 0;
  color: var(--ink, #19191C); font-size: clamp(19px, 1.6vw, 23px); font-weight: 650; line-height: 1.35;
}
.itb-kennzahl sup, .itb-quelle sup { font-size: .62em; line-height: 0; }
/* Fußnotenverweise nicht nur über die Farbe erkennbar (WCAG 1.4.1): unterstrichen. */
.itb-kennzahl sup a { color: var(--accent, #097078); text-decoration: underline; text-underline-offset: 2px; padding-inline: 2px; }
.itb-kennzahl sup a:focus-visible { outline: 2px solid var(--accent, #097078); outline-offset: 2px; border-radius: 2px; }
.itb-kennzahl > p:not([class]) {
  max-width: 52ch; margin: 24px 0 0;
  color: var(--ink-2, #3B3940); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6;
}
.itb .itb-quelle {
  max-width: 64ch; margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-2, rgba(25, 25, 28, .14));
  color: #5E5A57; font-size: 13.5px; line-height: 1.55;
}
/* Korrekturrunde r2c (QA r2, WCAG 1.4.1): Quellenlink und Links in den FAQ-Antworten haben die Farbe des Textes,
   das Bündel nimmt allen Links die Unterstreichung (a { text-decoration: none }). Erkennbar sind sie daher nur
   mit Unterstreichung. */
.itb-quelle a { color: inherit; }
.itb-quelle a,
.itb-faq details p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Ein Ansprechpartner: Foto auf Sandfläche, daneben Text. */
.itb-person { display: grid; gap: 30px; align-items: center; }
.itb-person__bild {
  position: relative; margin: 0; display: flex; justify-content: center; align-items: flex-end;
  max-width: 420px; padding-top: 18px; overflow: hidden;
  border-radius: 28px; background: var(--canvas-3, #E7E0D8);
}
.itb-person__bild img { display: block; width: auto; max-width: 92%; height: 400px; object-fit: contain; object-position: bottom; }
.itb .itb-person__name { margin: 22px 0 0; color: var(--muted, #6E6A66); font-size: 15px; line-height: 1.5; }
.itb-person__name b { color: var(--ink, #19191C); }
/* Bewertungszeile: Absender außerhalb des Links; sichtbarer Linktext = Anfang des zugänglichen Namens, den
   google-reviews-*.js setzt („5,0 Sterne aus 38 Bewertungen auf Google“, WCAG 2.5.3). */
.itb .itb-bewertung { margin: 14px 0 0; color: var(--ink-2, #3B3940); font-size: 15px; line-height: 1.5; }
/* r2e (QA r3, WCAG 1.4.1): Der Link hat die Farbe des Textes und war nur fett; unterstrichen wie die Quellenlinks.
   Die Sterne (inline-block) bleiben ohne Linie, unterstrichen ist der Linktext; der Abstand zum Text ist ein Rand
   der Sterne statt eines Leerzeichens im Link, damit die Linie nicht schon davor beginnt. */
.itb-bewertung a {
  color: var(--ink, #19191C); font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.itb-bewertung a:hover, .itb-bewertung a:focus-visible { color: var(--accent, #097078); }
.itb-bewertung__sterne { display: inline-block; margin-right: .3em; color: var(--accent, #097078); letter-spacing: .06em; }
.itb-bewertung .google-reviews-date { margin-left: 6px; font-weight: 400; color: #5E5A57; }
.itb .itb-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 0; font-size: 15px; font-weight: 650; }
.itb-links a { color: var(--ink, #19191C); text-underline-offset: 5px; }
@media (min-width: 900px) {
  .itb-person { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 96px); }
  .itb-person__bild { order: 2; justify-self: end; width: 100%; }
}
@media (max-width: 899px) {
  .itb-person__bild { max-width: 300px; }
  .itb-person__bild img { height: 280px; }
}

/* Was wir umsetzen: Zeichnung (Plan) links, Überschrift und drei Punkte rechts untereinander. */
.itb-umfang { display: grid; gap: 28px; align-items: center; }
.itb-umfang__bild { margin: 0; }
.itb-umfang__bild img { display: block; width: 100%; max-width: 460px; height: auto; }
.itb .itb-umfang .lp-deliverables { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
.itb .itb-umfang .lp-deliverable { padding-top: 18px; }
.itb .itb-umfang .lp-deliverable h3 { margin-bottom: 8px; }
@media (min-width: 900px) {
  .itb-umfang { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }
}
@media (max-width: 899px) {
  .itb-umfang__bild img { max-width: 320px; }
}

/* Drei gezeichnete Schritte. */
.itb-schritte { display: grid; gap: 30px; margin: 40px 0 0; padding: 0; list-style: none; }
.itb-schritte > li { min-width: 0; }
.itb-schritte img { display: block; width: 160px; height: auto; }
.itb-schritte__nr { display: block; margin-top: 14px; color: var(--muted, #6E6A66); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.itb .itb-schritte h3 { margin: 6px 0 8px; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.2; }
.itb .itb-schritte p { max-width: 34ch; margin: 0; color: var(--ink-2, #3B3940); font-size: 16px; line-height: 1.55; }
@media (min-width: 760px) {
  .itb-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 52px); }
}
@media (max-width: 759px) {
  .itb-schritte > li { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .itb-schritte img { width: 104px; grid-row: 1 / span 3; }
  .itb-schritte__nr { margin-top: 0; }
}

/* Fragen: Zeichnung unter der Überschrift (füllt am Desktop die linke Spalte). */
.itb-faq__bild { display: block; width: 100%; max-width: 200px; height: auto; margin-top: 28px; }
@media (max-width: 899px) {
  .itb-faq__bild { max-width: 120px; margin-top: 18px; }
}

/* r2g (QA r4 zugang-leistung, CLS 0,0179): Die H1-Auszeichnung „durchdachtem Konzept“ steht in einer eigenen Teilmenge
   der Figtree-Kursiven (2,6 KB, vorgeladen; bisher kam die ganze Kursive ohne Preload erst nach dem ersten Bild und
   die Zeilen darunter sprangen). Herstellung werkzeug/baue_kursiv.py aus figtree-italic-latin.woff2 (SIL Open Font
   License 1.1). Zeichen außerhalb der unicode-range kommen wie bisher aus der ganzen Kursiven des Bündels. */
@font-face { font-family: "Figtree Kursiv IT"; src: url("/assets/fonts/figtree-kursiv-it-035da12a8635.woff2") format("woff2-variations"), url("/assets/fonts/figtree-kursiv-it-035da12a8635.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+20, U+2D, U+4B, U+61, U+63-65, U+68, U+6D-70, U+72, U+74-75, U+7A, U+A0, U+AD; }
.itb .lp-hero h1 .mk { font-family: "Figtree Kursiv IT", var(--sans); }