/* Modul seiten-ta (22.10.2026): /leistungen/online-terminbuchung/ und /leistungen/automatisierung/.
   Nur auf diesen beiden Seiten geladen. Praefix .page-leistungen main, weil die Leistungsseiten
   ".page-leistungen main p { margin: 0 0 1.2em }" setzen. Farben aus den vorhandenen Variablen,
   keine Animation, logische Eigenschaften fuer spaetere Sprachfassungen (RTL). */

.page-leistungen main .ta-held-bild { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 22px; }

/* Held (r2, QA c9865d79): lange Komposita in der H1 duerfen die Spalte nicht ueber den Bildschirm hinaus
   verbreitern (320 px). Weiche Trennstellen (­) stehen im HTML; break-word bricht nur, wenn ein Wort allein
   nicht passt. Bewusst kein hyphens:auto: trennt je Browser unterschiedlich und ist im Testbrowser nicht
   pruefbar (kein deutsches Trennwoerterbuch). .ta-nobr haelt „KI-Agenten“ zusammen. */
.page-leistungen main .lp-hero-grid > * { min-width: 0; }
.page-leistungen main .lp-hero h1 { overflow-wrap: break-word; }
.page-leistungen main .ta-nobr { white-space: nowrap; }

.page-leistungen main .ta-fn { font-size: .62em; line-height: 0; vertical-align: super; margin-inline-start: 2px; }
/* Links nicht nur ueber die Farbe erkennbar (WCAG 1.4.1): immer unterstrichen */
.page-leistungen main .ta-fn a { color: var(--lp-accent, #075b62); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; padding-inline: 1px; }
.page-leistungen main .ta-fn a:hover, .page-leistungen main .ta-fn a:focus-visible { text-decoration-thickness: 2px; }

.page-leistungen main .ta-kopf { max-width: 780px; }
.page-leistungen main .ta-kopf > p:not(.lp-eyebrow) { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; max-width: 60ch; margin: 22px 0 0; }

/* Uebergang: der klassische Weg endet, das System beginnt */
.page-leistungen main .ta-uebergang { padding-block: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--lp-line, #d3ceca); text-align: center; }
.page-leistungen main .ta-uebergang h2 { margin: 0 auto; max-width: 22ch; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.03em; }
.page-leistungen main .ta-uebergang p { margin: 18px auto 0; max-width: 30ch; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2, #2b2b2f); }
.page-leistungen main .ta-uebergang__pfeil { display: block; width: clamp(88px, 8vw, 116px); height: auto; margin: 22px auto 0; transform: rotate(38deg); }

/* System: drei Schritte mit Zeichnung, abwechselnd */
.page-leistungen main .ta-system { border-top: 0; padding-top: clamp(40px, 5vw, 64px); }
.page-leistungen main .ta-schritte { list-style: none; margin: clamp(36px, 4.4vw, 60px) 0 0; padding: 0; display: grid; gap: clamp(44px, 5.6vw, 80px); }
.page-leistungen main .ta-schritt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.page-leistungen main .ta-schritt:nth-child(even) .ta-schritt__bild { order: 2; }
.page-leistungen main .ta-schritt__bild { display: block; margin: 0; padding: clamp(16px, 2.2vw, 30px); border-radius: 28px; background: var(--ls-cyan, #ddf8fa); }
.page-leistungen main .ta-schritt:nth-child(2) .ta-schritt__bild { background: var(--ls-lila, #eae7ff); }
.page-leistungen main .ta-schritt:nth-child(3) .ta-schritt__bild { background: var(--ls-gruen, #ecf9db); }
.page-leistungen main .ta-schritt__bild img { display: block; width: 100%; height: auto; }
.page-leistungen main .ta-schritt__nr, .page-leistungen main .ta-glied__nr { margin: 0 0 10px; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-accent, #075b62); }
.page-leistungen main .ta-schritt h3 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -.025em; }
.page-leistungen main .ta-schritt__text > p:not(.ta-schritt__nr) { margin: 0; font-size: 18px; line-height: 1.6; max-width: 52ch; }

/* Kennzahl: eine Zahl, ein Satz, sichtbare Quelle mit Kontext */
.page-leistungen main .ta-kennzahl { margin: 24px 0 0; padding-top: 16px; border-top: 2px solid var(--lp-ink, #19191c); max-width: 52ch; }
.page-leistungen main .ta-kennzahl__wert { margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.035em; color: var(--lp-ink, #19191c); }
.page-leistungen main .ta-kennzahl__satz { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--lp-ink, #19191c); }
.page-leistungen main .ta-kennzahl__quelle { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--lp-muted, #57534f); }

.page-leistungen main .ta-einverstaendnis { display: flex; align-items: center; gap: 18px; margin: clamp(44px, 5.6vw, 72px) 0 0; padding: 20px 24px; border-radius: 20px; background: var(--ls-gruen, #ecf9db); max-width: 900px; }
.page-leistungen main .ta-einverstaendnis img { flex: none; width: 40px; height: 40px; }
.page-leistungen main .ta-einverstaendnis p { margin: 0; font-size: 18px; line-height: 1.5; }
.page-leistungen main .ta-einverstaendnis strong { font-weight: 700; }

/* Bild und Text nebeneinander */
.page-leistungen main .ta-bildtext { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.page-leistungen main .ta-bildtext__bild { margin: 0; padding: clamp(16px, 2vw, 28px); border-radius: 28px; background: var(--ls-lila, #eae7ff); }
.page-leistungen main .ta-bildtext__bild img { display: block; width: 100%; height: auto; }
.page-leistungen main .ta-bildtext h2 { margin: 0 0 18px; }
.page-leistungen main .ta-bildtext p:not(.lp-eyebrow) { font-size: 18px; line-height: 1.6; max-width: 56ch; margin: 0; }
.page-leistungen main .ta-bildtext p + p:not(.lp-eyebrow) { margin-top: 14px; }
.page-leistungen main .ta-beleg { color: var(--ink-2, #2b2b2f); }
.page-leistungen main .ta-beleg b { color: var(--lp-ink, #19191c); }
.page-leistungen main .ta-beleg a { color: var(--lp-ink, #19191c); text-decoration: underline; text-underline-offset: 4px; }

/* Warum jetzt / Warum ueberhaupt / Warum acessio */
.page-leistungen main .ta-jetzt__kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.page-leistungen main .ta-jetzt__kopf h2 { margin: 0; }
.page-leistungen main .ta-jetzt__kopf p:not(.lp-eyebrow) { font-size: 18px; line-height: 1.6; max-width: 54ch; margin: 18px 0 0; }
.page-leistungen main .ta-jetzt__bild { display: block; width: 100%; max-width: 280px; height: auto; justify-self: center; }
.page-leistungen main .ta-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(32px, 4vw, 52px); }
.page-leistungen main .ta-drei .ta-kennzahl { margin: 0; max-width: none; }
.page-leistungen main .ta-drei__label { margin: 0 0 10px; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-accent, #075b62); }
.page-leistungen main .ta-drei__aussage { margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.035em; }
.page-leistungen main .ta-schluss { margin: clamp(28px, 3.6vw, 44px) 0 0; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; font-weight: 600; max-width: 60ch; }

/* Kette: ein Schritt loest den naechsten aus */
.page-leistungen main .ta-kette__innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.page-leistungen main .ta-kette__kopf { position: sticky; top: 112px; }
.page-leistungen main .ta-kette__kopf h2 { margin: 0; }
.page-leistungen main .ta-kette__kopf > p:not(.lp-eyebrow) { font-size: 18px; line-height: 1.6; margin: 18px 0 0; }
.page-leistungen main .ta-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--ink-2, #2b2b2f); }
.page-leistungen main .ta-kette__kopf > p.ta-legende { font-size: 14.5px; margin-top: 22px; }
.page-leistungen main .ta-legende span { display: inline-flex; align-items: center; gap: 8px; }
.page-leistungen main .ta-punkt { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lp-accent, #075b62); background: transparent; }
.page-leistungen main .ta-punkt--laeuft { background: var(--lp-accent, #075b62); }
.page-leistungen main .ta-kette__kopf > p.ta-beleg { margin: 26px 0 0; padding-top: 18px; border-top: 2px solid var(--lp-ink, #19191c); font-size: 16.5px; line-height: 1.6; }
.page-leistungen main .ta-glieder { list-style: none; margin: 0; padding: 0; }
.page-leistungen main .ta-glied { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.page-leistungen main .ta-glied__bild { display: block; width: 100%; height: auto; padding: 12px; border-radius: 22px; background: var(--ls-cyan, #ddf8fa); box-sizing: border-box; }
.page-leistungen main .ta-glied:nth-child(3n+2) .ta-glied__bild { background: var(--ls-lila, #eae7ff); }
.page-leistungen main .ta-glied:nth-child(3n) .ta-glied__bild { background: var(--ls-gruen, #ecf9db); }
.page-leistungen main .ta-glied__nr { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.page-leistungen main .ta-glied h3 { margin: 0 0 8px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.page-leistungen main .ta-glied p:not(.ta-glied__nr):not(.ta-glied__folge) { margin: 0; font-size: 17px; line-height: 1.55; max-width: 50ch; }
.page-leistungen main .ta-glied__folge { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding-inline-start: 84px; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-accent, #075b62); }
.page-leistungen main .ta-glied__folge img { width: 28px; height: 35px; }

/* KI-Agenten, aus /leistungen/ uebernommen */
.page-leistungen main .ta-agenten__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(32px, 4vw, 52px); }
.page-leistungen main .ta-agent { margin: 0; }
.page-leistungen main .ta-agent img { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 0 16px; }
.page-leistungen main .ta-agent__glied { margin: 0 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent, #075b62); }
.page-leistungen main .ta-agent h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.page-leistungen main .ta-agent p:not(.ta-agent__glied) { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 38ch; }
.page-leistungen main .ta-hinweis { margin: 24px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--lp-muted, #57534f); }

/* Kundenstimme im Beleg */
.page-leistungen main .ta-zitat { margin: 20px 0 22px; padding-inline-start: 18px; border-inline-start: 3px solid var(--cta, #22c7d6); }
.page-leistungen main .ta-zitat blockquote { margin: 0; }
.page-leistungen main .ta-zitat blockquote p { margin: 0; font-size: 18px; line-height: 1.5; font-style: italic; }
.page-leistungen main .ta-zitat figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--lp-muted, #57534f); }
.page-leistungen main .ta-zitat figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Umfang mit Zeichnung */
.page-leistungen main .ta-umfang-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 32px; align-items: end; }
.page-leistungen main .ta-umfang-kopf .lp-eyebrow { margin-bottom: 24px; }
.page-leistungen main .ta-umfang-kopf h2 { margin: 0; }
.page-leistungen main .ta-umfang-kopf p:not(.lp-eyebrow) { font-size: 18px; line-height: 1.6; max-width: 56ch; margin: 18px 0 0; }
.page-leistungen main .ta-umfang-kopf img { display: block; width: 100%; height: auto; }

/* Zeichnung oben in der linken Spalte (Zusammenarbeit, Fragen) */
.page-leistungen main .ta-abschnitt-bild { display: block; width: clamp(180px, 16vw, 230px); height: auto; margin: 0 0 22px; }

/* Quellen */
.page-leistungen main .ta-quellen__kopf { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; }
.page-leistungen main .ta-quellen__kopf img { flex: none; width: 110px; height: 110px; }
.page-leistungen main .ta-quellen h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 0; }
.page-leistungen main .ta-quellen ol { margin: 0; padding-inline-start: 22px; columns: 2; column-gap: 56px; }
.page-leistungen main .ta-quellen li { break-inside: avoid; margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2, #2b2b2f); scroll-margin-top: 120px; }
.page-leistungen main .ta-quellen li:target { background: var(--ls-cyan, #ddf8fa); }
.page-leistungen main .ta-quellen a { color: var(--lp-accent, #075b62); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.page-leistungen main .ta-quellen a:hover, .page-leistungen main .ta-quellen a:focus-visible { text-decoration-thickness: 2px; }
.page-leistungen main .ta-quellen__hinweis { margin: 16px 0 0; font-size: 13.5px; color: var(--lp-muted, #57534f); max-width: 90ch; }

@media (max-width: 900px) {
  .page-leistungen main .ta-schritt, .page-leistungen main .ta-bildtext, .page-leistungen main .ta-jetzt__kopf,
  .page-leistungen main .ta-kette__innen, .page-leistungen main .ta-umfang-kopf { grid-template-columns: minmax(0, 1fr); }
  .page-leistungen main .ta-schritt:nth-child(even) .ta-schritt__bild { order: 0; }
  .page-leistungen main .ta-kette__kopf { position: static; }
  .page-leistungen main .ta-drei, .page-leistungen main .ta-agenten__reihe { grid-template-columns: minmax(0, 1fr); }
  .page-leistungen main .ta-quellen ol { columns: 1; }
  .page-leistungen main .ta-umfang-kopf img { max-width: 220px; }
  .page-leistungen main .ta-jetzt__bild { justify-self: start; max-width: 220px; }
  .page-leistungen main .ta-schritt__bild, .page-leistungen main .ta-bildtext__bild { max-width: 460px; }
}
@media (max-width: 600px) {
  .page-leistungen main .ta-held-bild { max-width: 200px; margin-bottom: 14px; }
  .page-leistungen main .ta-glied { grid-template-columns: minmax(0, 1fr); }
  .page-leistungen main .ta-glied__bild { max-width: 200px; }
  .page-leistungen main .ta-glied__folge { padding-inline-start: 0; }
  .page-leistungen main .ta-einverstaendnis { align-items: flex-start; padding: 18px; }
  .page-leistungen main .ta-schritt__text > p:not(.ta-schritt__nr), .page-leistungen main .ta-bildtext p:not(.lp-eyebrow) { font-size: 17px; }
  .page-leistungen main .ta-agent img { width: 104px; height: 104px; }
}
/* Held auf sehr schmalen, hohen Bildschirmen (r2b, 23.10.2026): Bei 320 x 700 lag der Held-Knopf bei scrollY 0
   unter dem festen Anrufknopf (unten rechts), weil die H1 dort fuenf bis sechs Zeilen hat. H1 und Abstaende im
   Held leicht verdichtet; die H1 bleibt die groesste Ueberschrift (35 px, Uebergang-H2 dazu 32 px wie die
   uebrigen H2). Erst ab 600 px Hoehe: darunter liegt der Knopf ohnehin unter dem ersten Bildschirm und wuerde
   verdichtet erst unter den Anrufknopf rutschen. Die Anrufknopf-Regel selbst bleibt unveraendert.
   r2e: Einleitung hier 17 statt 18 px; mit Victors Begriffen („Terminerinnerung, Bewertungsbitte und
   Folgetermin-Erinnerung“) hatte sie bei 320 px eine sechste Zeile, der Knopf endete 3 px im Anrufknopf. */
@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; font-size: 17px; }
  .page-leistungen main .ta-uebergang h2 { font-size: 32px; }
}
/* Held am Desktop (r2c, QA r2 gestaltung): Die SEO-H1 liefen mit 84 px auf drei bis fuenf Zeilen, der Held-Knopf
   rutschte bei 1280 x 720 bis 1536 x 864 unter den Falz. Werte wie auf den Schwesterseiten (Module leistungsseiten
   und leistungen-hub, r2c): H1 ab 861 px clamp(40px, 5.2vw, 74px) mit 18ch, damit klar groesser als die H2
   (Buendel clamp(..., 4.3vw, 60px), Faktor 1,2); auf niedrigen Bildschirmen beginnt der Held naeher am Kopf
   (oben 128 px = Mindestwert des Buendels, Brotkrumen-Abstand 28 statt 38 px). In der zweispaltigen Ansicht steht
   die Textspalte oben, damit der hohe Held-Kasten mit Zeichnung sie nicht nach unten zentriert. */
@media (min-width: 861px) {
  .page-leistungen main .lp-hero h1 { font-size: clamp(40px, 5.2vw, 74px); max-width: 18ch; }
}
@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; }
}
@media (min-width: 901px) {
  .page-leistungen main .lp-hero-grid > div { align-self: start; }
}
/* Held auf niedrigen Desktop-Bildschirmen (r2d, Integration r2c): Bei 1280 x 720 blieben unter dem Held-Knopf der
   Terminbuchung nur 4 px bis zur Falzgrenze (Fensterhoehe - 16), bei 1366 x 768 26 px; Ziel mindestens 24 px.
   Bis 800 px Hoehe beginnt der Held 24 statt 40 px unter der Kopfleiste (88 px), Brotkrumen- und
   Einleitungsabstand etwas kleiner, H1 4 % kleiner (1280 px: 64 statt 66,6 px; bleibt mindestens 7 px groesser
   als jede H2). Gemessen: 1280 x 720 41 px, 1366 x 768 63 px Luft. Ab 801 px Hoehe und unter 861 px Breite
   unveraendert. */
@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; }
}
/* r2g (QA Vorschau r4): Die Regeln mit content-visibility und contain-intrinsic-block-size aus r2e sind vollstaendig
   entfernt. Mit sanftem Scrollen landeten Sprungmarken daneben, die Links unter #umfang waren mit Maus und Finger
   nicht erreichbar, im Druck fehlte eine Zeile. Nicht wieder einfuehren, ohne diese drei Faelle zu pruefen
   (README, Korrekturrunde r2g). */
/* Kursive (r2e): Statt der ganzen Figtree-Kursiven (20,9 KB, vorgeladen gegen den Zeilensprung der H1-Auszeichnung,
   CLS 0,0227 ohne) laedt die Seite nur eine Teilmenge mit den Zeichen der H1-Auszeichnung und der beiden
   Kundenzitate (4,5 KB, ebenfalls vorgeladen; Herstellung schrift/baue_kursiv_ta.py, SIL Open Font License).
   Gleiche Schrift, gleiche Achse, gleiche Kerning-Tabellen: pixelgleich gemessen. Zeichen ausserhalb von
   unicode-range kommen wie bisher aus der ganzen Kursiven des Buendels. */
@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; }
.page-leistungen main .lp-hero h1 .mk, .page-leistungen main .ta-zitat blockquote p { font-family: "Figtree Kursiv TA", var(--sans); }