/* ---------- Section-Überschriften zentriert, wie auf der Startseite ----------
   Nutzerwunsch 11.09.2026: dieselbe Regel wie .page-home (H2.section-title
   samt Kicker/Lead zentriert), 1:1 übernommen inkl. der dortigen Ausnahme
   für zweispaltige Layouts mit Überschrift in schmaler Seitenspalte (bei
   den Leistungsseiten betrifft das "Warum AS Concepts" via .problem__layout). */
.page-leistungen [data-reveal]:has(> .section-title) {
  text-align: center;
}

.page-leistungen .section-title {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.page-leistungen .section-lead {
  margin-inline: auto;
}

.page-leistungen .problem__layout [data-reveal]:has(> .section-title) {
  text-align: left;
}

.page-leistungen .problem__layout .section-title {
  margin-inline: 0;
  text-align: left;
}

/* ---------- Inbound/Outbound ---------- */

.io-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .io-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.io-card {
  display: flex;
  align-items: stretch;
  border-radius: 6px;
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.io-card--inbound {
  background: var(--color-band);
}

.io-card--outbound {
  background: var(--color-ink);
  color: var(--color-cream);
}

.io-card__media {
  position: relative;
  flex: 0 0 8rem;
  overflow: hidden;
  background: var(--color-teal-deep);
}

.io-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  /* Ganzes Bild zeigen statt anzuschneiden - der schmale Streifen ist
     schmaler als die Bildkomposition, daher contain statt cover. */
  object-fit: contain;
  mix-blend-mode: luminosity;
  filter: grayscale(1) brightness(0.55) contrast(1.15);
}

.io-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem;
}

.io-card__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-deep);
}

.io-card--outbound .io-card__label {
  color: var(--color-cyan);
}

.io-card__title {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .io-card__title {
    font-size: 1.5rem;
  }
}

.io-card--outbound .io-card__title {
  color: var(--color-cream);
}

.io-card__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.io-card--outbound .io-card__list {
  color: var(--color-cream-soft);
}

.io-combine {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .io-combine {
    font-size: 1.875rem;
  }
}

/* ---------- Leistungssystem ---------- */

.discipline-list {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .discipline-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.discipline {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 1.75rem;
}

.discipline__index {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-teal-deep);
}

.discipline__title {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: color 0.15s ease;
}

a.discipline__title:hover {
  color: var(--color-teal-deep);
}

.discipline__text {
  margin-top: 0.75rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.discipline__points {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-ink-mute);
}

.discipline__point {
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.discipline__point-dot {
  margin-top: 0.5rem;
  height: 0.25rem;
  width: 0.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-teal-deep);
}

.discipline__point-link {
  color: var(--color-ink-soft);
  transition: color 0.15s ease;
}

.discipline__point-link:hover {
  color: var(--color-teal-deep);
}

/* ---------- Chain (Strategie-Prozess) ---------- */

.chain-box {
  margin-top: 3rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.06);
  padding: 2rem 1.75rem;
}

@media (min-width: 768px) {
  .chain-box {
    padding: 2.25rem;
  }
}

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.75rem;
}

.chain__step {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-cream);
}

@media (min-width: 768px) {
  .chain__step {
    font-size: 1.25rem;
  }
}

.chain__arrow {
  font-size: 1.125rem;
  color: var(--color-teal);
}

/* ---------- Lead-Flow-Diagramm (Prozessgrafik als Bild) ---------- */

.lead-flow-image {
  display: block;
  margin: 3.5rem auto 0;
  max-width: 30rem;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Nutzerwunsch 12.09.2026: Überschrift einzeilig, Grafik größer */
.page-leistungen .section-title--flow {
  max-width: 68rem;
}

@media (min-width: 1024px) {
  .lead-flow-image--large {
    max-width: 38rem;
  }
}

/* ---------- Hero zentriert (Nutzerwunsch 12.09.2026, nur /leistungen/ Uebersichtsseite) ---------- */

.service-hero--centered .service-hero__eyebrow-row,
.service-hero--centered .service-hero__breadcrumb {
  justify-content: center;
}

.service-hero--centered .service-hero__title,
.service-hero--centered .service-hero__lead {
  margin-inline: auto;
  text-align: center;
}

.service-hero--centered .service-hero__cta {
  text-align: center;
}

/* ---------- Hero zweispaltig mit Video (Nutzerwunsch 12.09.2026, nur online-marketing.html) ---------- */

@media (min-width: 1024px) {
  .service-hero__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
    gap: 3.5rem;
  }

  /* Online Marketing: Querformat-Video, breitere Spalte */
  .service-hero__inner--video-large {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }
}

.service-hero__inner--video-large .video-teaser {
  max-width: 30rem;
}

.service-hero__col-video {
  margin-top: 3rem;
}

/* Video mittig im einspaltigen Hero (Sales Outsourcing) */
.service-hero__video-inline {
  margin-top: 2.5rem;
}

.service-hero__video-inline .video-teaser {
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .service-hero__col-video {
    margin-top: 0;
  }
}

.service-hero__col-video .video-teaser {
  margin: 0 auto;
}

/* ---------- Smarketing-Flow (jetzt im Hero, siehe Nutzerwunsch 12.09.2026) ---------- */

.smarketing-flow {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.5rem;
}

.smarketing-flow__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.smarketing-flow__stage {
  border-radius: 6px;
  border: 1px solid var(--color-line-dark);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-cream-mute);
  transition: all 0.5s ease;
}

@media (min-width: 640px) {
  .smarketing-flow__stage {
    font-size: 1rem;
  }
}

.smarketing-flow__stage.is-active {
  transform: scale(1.05);
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: var(--color-dark);
  box-shadow: 0 10px 25px rgba(0, 240, 255, 0.2);
}

.smarketing-flow__arrow {
  color: var(--color-cream-mute);
}

/* ---------- Leistungsseiten: durchgehend dunkler Hintergrund wie im Hero,
   plus eine Sektion pro Viewport (Chef-Vorgabe, wie auf der Startseite) ----------
   Auf Nutzerwunsch 11.09.2026 ("Hintergrund dunkel wie auf der Startseite,
   pro Sektion einen Viewport"). Alles auf .page-leistungen gescoped (Body-
   Klasse der Leistungen-Übersicht + der 5 Unterseiten), weil einige der
   Komponenten hier (numbered-list, faq-item, results, closing-cta) geteilte
   Klassen sind, die auch auf anderen, weiterhin hellen Seiten vorkommen. */

.page-leistungen {
  background: var(--color-dark);
}

.page-leistungen .section--surface,
.page-leistungen .section--band {
  background: var(--color-dark);
  color: var(--color-cream);
}

.page-leistungen .section--surface .kicker,
.page-leistungen .section--band .kicker {
  color: var(--color-cyan);
}

.page-leistungen .section--surface .kicker .kicker__dot,
.page-leistungen .section--band .kicker .kicker__dot {
  background: var(--color-cyan);
}

.page-leistungen .section--surface .section-title,
.page-leistungen .section--band .section-title {
  color: var(--color-cream);
}

.page-leistungen .section--surface .section-lead--light,
.page-leistungen .section--band .section-lead--light {
  color: var(--color-cream-soft);
}

/* Das Grundprinzip (Inbound/Outbound) */
.page-leistungen .io-card {
  border-color: var(--color-line-dark);
}

.page-leistungen .io-card--inbound {
  background: var(--color-dark-2);
}

.page-leistungen .io-card--inbound .io-card__label {
  color: var(--color-cyan);
}

.page-leistungen .io-card--inbound .io-card__title {
  color: var(--color-cream);
}

.page-leistungen .io-card--inbound .io-card__list {
  color: var(--color-cream-soft);
}

.page-leistungen .io-combine {
  color: var(--color-cream);
}

/* Unser Leistungssystem */
.page-leistungen .discipline {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-leistungen .discipline__index {
  color: var(--color-cyan);
}

.page-leistungen .discipline__title {
  color: var(--color-cream);
}

.page-leistungen a.discipline__title:hover {
  color: var(--color-cyan);
}

.page-leistungen .discipline__text {
  color: var(--color-cream-soft);
}

.page-leistungen .discipline__points {
  color: var(--color-cream-mute);
}

.page-leistungen .discipline__point-dot {
  background: var(--color-cyan);
}

.page-leistungen .discipline__point-link {
  color: var(--color-cream-soft);
}

.page-leistungen .discipline__point-link:hover {
  color: var(--color-cyan);
}

/* Warum AS Concepts / Warum-Gründe / Wie-wir-vorgehen (nummerierte Liste,
   geteilte Komponente mit der Startseiten-Sektion "Die Ausgangslage") */
.page-leistungen .numbered-list__item {
  border-top-color: var(--color-line-dark);
}

.page-leistungen .numbered-list__index {
  color: var(--color-cyan);
}

.page-leistungen .numbered-list__title {
  color: var(--color-cream);
}

.page-leistungen .numbered-list__text {
  color: var(--color-cream-soft);
}

/* Karten-Variante (numbered-list--grid): heller Card-Hintergrund aus
   components.css passt nicht zur dunklen Leistungsseite, hier wie bei
   .point-card auf dunkle Karten umstellen. */
.page-leistungen .numbered-list--grid .numbered-list__item {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

/* Häufige Fragen */
.page-leistungen .faq-item {
  border-top-color: var(--color-line-dark);
}

.page-leistungen .faq-item__question {
  color: var(--color-cream);
}

.page-leistungen .faq-item__icon {
  border-color: var(--color-line-dark);
  color: var(--color-cream-mute);
}

.page-leistungen .faq-item[open] .faq-item__icon {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.page-leistungen .faq-item__answer {
  color: var(--color-cream-soft);
}

/* Kontakt (geteiltes Partial, Außenfläche standardmäßig hell mit dunklem
   Panel darin — Panel auf color-dark-2 angehoben, damit es sich von der
   jetzt ebenfalls dunklen Außenfläche noch abhebt) */
.page-leistungen .closing-cta {
  background: var(--color-dark);
}

/* Warum-Karten (Telesales, Online Marketing, Sales Outsourcing) — die
   HTML-Instanzen hatten bisher ein inline background:var(--color-band),
   das am 11.09.2026 entfernt wurde (inline schlägt sonst jede Klassenregel). */
.page-leistungen .point-card {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-leistungen .point-card__index {
  color: var(--color-cyan);
}

.page-leistungen .point-card__title {
  color: var(--color-cream);
}

.page-leistungen .point-card__text {
  color: var(--color-cream-soft);
}

/* Step-Listen ohne --dark-Modifier (Digital Sales, Leadgenerierung haben den
   Modifier am 11.09.2026 direkt im Markup ergänzt — diese Regel greift nur,
   falls doch mal eine Instanz ohne Modifier auf einer Leistungsseite landet) */
.page-leistungen .step-label {
  color: var(--color-cream-mute);
}

.page-leistungen .step-rule {
  border-top-color: rgba(0, 240, 255, 0.4);
}

.page-leistungen .step-title {
  color: var(--color-teal);
}

.page-leistungen .step-text {
  color: var(--color-cream-soft);
}

/* Testimonial (Digital Sales) */
.page-leistungen .testimonial-card {
  border-color: var(--color-line-dark);
  border-top-color: var(--color-teal);
  background: var(--color-dark-2);
}

.page-leistungen .testimonial-card__quote {
  color: var(--color-cream);
}

.page-leistungen .testimonial-card__byline {
  border-top-color: var(--color-line-dark);
  color: var(--color-cream-mute);
}

.page-leistungen .testimonial-card__byline strong {
  color: var(--color-cream);
}

/* Differenzierung (Online Marketing) */
.page-leistungen .differentiator__text {
  color: var(--color-cream-soft);
}

/* Tag-Liste (Sales Outsourcing, Leistungsportfolio) */
.page-leistungen .tag {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
  color: var(--color-cream-soft);
}

.page-leistungen a.tag {
  color: var(--color-cream);
}

.page-leistungen a.tag:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.page-leistungen .closing-cta__panel {
  background: var(--color-dark-2);
}

/* Eine Sektion pro Viewport (Chef-Vorgabe). "safe center" statt "center":
   läuft der Inhalt einer Sektion (z. B. Leistungssystem mit 3 Karten, FAQ mit
   geöffneten Panels) auf kleineren Laptops doch über, richtet er sich oben
   aus statt oben und unten abgeschnitten zu werden. Nur ab Desktop-Breite,
   auf Mobil/Tablet bleibt die natürliche Höhe. */
@media (min-width: 1024px) {
  .page-leistungen .section {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: calc(100vh - var(--header-height));
  }

  /* Der Hero selbst hat keine .section-Klasse und blieb bisher kürzer als
     ein Viewport (~630px) - dadurch war der Anfang von "Das Grundprinzip"
     schon ohne Scrollen sichtbar, obwohl jede andere Sektion jetzt genau
     einen Bildschirm füllt. Hero bekommt dieselbe Regel. */
  .page-leistungen .service-hero {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: calc(100vh - var(--header-height));
  }

  /* Einzelne Leistungsseiten (bisher: Strategie, Prozessoptimierung,
     Marketing, Performance Marketing): Zwangshöhe pro Sektion auf
     Nutzerwunsch wieder entfernt. Sektionen haben stattdessen mehr eigenen
     Inhalt bekommen (Lead-Absätze, Zusatz-Sektionen), die künstliche
     Zentrierung erzeugte trotzdem noch zu viel dunkle Leerfläche zwischen
     den Sektionen. Gemeinsame Utility-Klasse `leistungen-flow` statt
     einer Regel pro Seite, einfach auf dem body zusätzlich zu
     `page-leistungen` ergänzen, um eine weitere Seite aufzunehmen. Alle
     nicht so markierten Leistungsseiten behalten die Viewport-Regel. */
  .leistungen-flow .section,
  .leistungen-flow .service-hero {
    display: block;
    min-height: 0;
  }
}

/* Sektionsabstände auf `leistungen-flow`-Seiten gestrafft (gleiche Werte
   wie auf der Startseite, siehe .page-home .section), weil ohne die
   Zwangshöhe sonst allein das Standard-Padding (7rem oben + 7rem unten)
   einen ~224px breiten Leerraum zwischen den Sektionen ergibt. */
.leistungen-flow .section {
  padding-block: 4rem;
}

.leistungen-flow .service-hero {
  padding-block: 4rem 4.5rem;
}

@media (min-width: 768px) {
  .leistungen-flow .section,
  .leistungen-flow .service-hero {
    padding-block: 4.5rem;
  }
}

@media (min-width: 1024px) {
  /* Dichtere Varianten der größten Überlauf-Sektionen (11.09.2026, nach
     Vermessung: mehrere Sektionen liefen 90-628px über den Viewport hinaus).
     Nur ab Desktop-Breite, Mobil behält die bisherige, großzügigere Spacing. */

  /* Das Grundprinzip */
  .page-leistungen .io-grid {
    margin-top: 2.5rem;
  }

  .page-leistungen .io-card {
    padding: 1.75rem;
  }

  .page-leistungen .io-combine {
    margin-top: 1.5rem;
  }

  /* Unser Leistungssystem */
  .page-leistungen .discipline-list {
    margin-top: 2rem;
  }

  .page-leistungen .discipline {
    padding: 1.5rem;
  }

  /* Warum AS Concepts / Warum-Gründe (nummerierte Liste) */
  .page-leistungen .numbered-list__item {
    padding-block: 1.25rem;
  }

  /* Warum-Karten (Telesales, Online Marketing, Sales Outsourcing) */
  .page-leistungen .point-grid {
    margin-top: 2.5rem;
  }

  .page-leistungen .point-card {
    padding: 1.5rem;
  }

  /* Die beiden 6-Karten-Grids (Telesales, Online Marketing) laufen mit nur
     2 Spalten auf 3 Zeilen und sprengen dadurch den Viewport am stärksten
     - 3 Spalten -> 2 Zeilen. Modifierklasse analog zu .step-grid--cols-N,
     im Markup ergänzt. Das 4-Karten-Grid (Sales Outsourcing) bleibt bei 2
     Spalten, weil 4 Karten in 3 Spalten unausgeglichen aussähen (3+1). */
  .page-leistungen .point-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* So entsteht ein Termin */
  .page-leistungen .lead-flow-image {
    margin-top: 2rem;
  }

  /* Kontakt: nur unsere eigene Panel-Umrandung lässt sich stauchen - das
     eingebettete Pipedrive-Formular selbst ist ~893px hoch (eigenes Skript,
     nicht per CSS beeinflussbar) und bleibt damit der mit Abstand größte,
     nicht lösbare Überlauf auf jeder Leistungsseite. */
  .page-leistungen .closing-cta__panel {
    padding: 3.5rem 3rem;
  }

  .page-leistungen .closing-cta__info {
    padding-top: 1.5rem;
  }
}


/* ---------- Vertriebsberatung: Karten-Raster (fuenf Wege, Beratungsleistungen) ---------- */
/* 5 Karten als 3+2 auf Desktop, 2 Spalten mit durchgehender letzter Karte auf
   Tablet, 1 Spalte mobil. */

.wege-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.wege-grid--check {
  margin-top: 3.5rem;
}

@media (min-width: 640px) {
  .wege-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 640px) and (max-width: 1023px) {
  .wege-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .wege-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .wege-grid > * {
    grid-column: span 2;
  }

  .wege-grid > :nth-child(4),
  .wege-grid > :nth-child(5) {
    grid-column: span 3;
  }
}

.wege-card {
  display: flex;
  flex-direction: column;
}

.wege-card .point-card__title {
  margin-top: 0.5rem;
}

.wege-card__tag {
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-cream-mute);
}

.wege-card .point-card__text {
  margin-bottom: 1.25rem;
}

.wege-card__fazit {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line-dark);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-cream);
}

.wege-card__fazit strong {
  color: var(--color-cyan);
}

/* Skala "Passiv bis Aktiv" ueber den Karten */
.wege-scale {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-mute);
}

.wege-scale__line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-line-dark), var(--color-cyan));
}

.wege-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  color: var(--color-cyan);
  font-size: 0.9rem;
}

.wege-grid--check .point-card__title {
  margin-top: 1rem;
}

/* ---------- Leistungen-Startseite: Überblick auf den ersten Blick (19.10.2026) ---------- */

/* Sprunglinks zu den drei Leistungen direkt im Hero */
.leistungen-chips {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.leistungen-chips__link {
  border: 1px solid var(--color-line-dark);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-cream);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.leistungen-chips__link:hover,
.leistungen-chips__link:focus-visible {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* Nutzensatz je Leistungskarte */
.discipline__benefit {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-cream);
}

.discipline__benefit-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.discipline__benefit + .discipline__text {
  margin-top: 0.5rem;
}

/* Leistungsüberblick direkt unter dem Hero: kompakter, damit die Sektion mit
   den Nutzensätzen weiter in einen Viewport passt. */
@media (min-width: 1024px) {
  .page-leistungen .section--overview {
    padding-block: 5rem;
  }
}

/* Sprunglinks aus dem Hero: Karte nicht unter den festen Header scrollen */
.page-leistungen .discipline[id] {
  scroll-margin-top: 8rem; /* 6rem + 2rem Versatz der Einblend-Animation */
}

/* ---------- "Warum AS Concepts": zentriert, 3x2 Karten (19.10.2026) ---------- */

.leistungen-centered-intro {
  text-align: center;
}

.leistungen-centered-intro .section-title {
  max-width: 60rem;
  margin-inline: auto;
}

.page-leistungen .section--why .numbered-list--grid {
  margin-top: 2.5rem;
}

.page-leistungen .section--why .numbered-list__item {
  text-align: center;
}

.page-leistungen .section--why .numbered-list__text {
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .page-leistungen .section--why {
    padding-block: 4.75rem;
  }

  .page-leistungen .section--why .numbered-list--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-leistungen .section--why .numbered-list__item {
    padding: 1.5rem;
  }
}

/* Titel mit Bindestrich-Komposita ("Sales-", "Marketing-Agenturen") brechen
   an den Bindestrichen; automatische Silbentrennung (base.css) trennt hier
   unschön ("Sa-les-"). */
.leistungen-centered-intro .section-title {
  hyphens: manual;
}

/* ---------- "Das Grundprinzip": große Foto-Kacheln statt schmalem Foto-Streifen (19.10.2026) ---------- */

.page-leistungen .io-grid {
  position: relative;
  gap: 1.5rem;
}

/* padding: 0 übersteuert das Kartenpadding aus dem Viewport-Fit-Block (Foto soll randlos sein) */
.page-leistungen .io-card {
  padding: 0;
  flex-direction: column;
  border-radius: 12px;
}

/* Foto: randlos, Bild füllt die Fläche (cover statt contain) */
.page-leistungen .io-card__media {
  flex: 0 0 auto;
  height: 14rem;
}

.page-leistungen .io-card__photo {
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) brightness(0.8) contrast(1.1);
}

.page-leistungen .io-card__body {
  padding: 1.5rem;
}

.page-leistungen .io-card__title {
  font-size: 1.5rem;
}

/* Listen als Chips */
.page-leistungen .io-card__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

.page-leistungen .io-card__list li {
  border: 1px solid var(--color-line-dark);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
}

/* Ab Tablet: Foto als linke Spalte über die ganze Kachelhöhe */
@media (min-width: 640px) {
  .page-leistungen .io-card {
    flex-direction: row;
  }

  .page-leistungen .io-card__media {
    flex: 0 0 42%;
    height: auto;
  }

  .page-leistungen .io-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem;
  }
}

/* Verbindendes "+" zwischen den beiden Kacheln (Wir kombinieren beides) */
@media (min-width: 1024px) {
  .page-leistungen .io-grid::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-cyan);
    color: var(--color-dark);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
  }

  .page-leistungen .section--principle {
    padding-block: 5rem;
  }
}

/* ---------- Leitgedanke-Panel mit Segelboot-Szene (Vertriebsberatung) ----------
   Zitat oben, darunter eine Szene, die per Umschalter zwischen richtigem und
   falschem Wind wechselt (js/wind.js setzt data-wind). */
.coop-panel {
  display: grid;
  gap: 2rem;
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
  border-radius: 1.5rem;
  background: linear-gradient(160deg, var(--color-dark-2), #1b2a30);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.coop-panel__text {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.coop-panel__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-cream);
}

.coop-panel__quote::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.25rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-teal);
}

.coop-panel__byline {
  margin: 1.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-mute);
}

.coop-panel__byline::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: 0 auto 1rem;
  background: var(--color-teal);
}

.coop-panel__byline strong {
  color: var(--color-cream);
}

.coop-panel__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Umschalter */
.coop-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-line-dark);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.coop-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-cream-soft);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.coop-toggle__btn:hover {
  color: var(--color-cream);
}

.coop-toggle__btn.is-active {
  background: var(--color-cyan);
  color: var(--color-dark);
}

.coop-toggle__btn--wrong.is-active {
  background: var(--color-cream-soft);
}

.coop-toggle__btn:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

.coop-panel__caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-cream-soft);
}

[data-wind="right"] .coop-panel__caption--wrong,
[data-wind="wrong"] .coop-panel__caption--right {
  display: none;
}

.coop-sail {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.coop-sail__wave {
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 3;
  stroke-linecap: round;
}

.coop-sail__wave--back {
  opacity: 0.4;
}

/* Wind: Linien zeichnen sich nacheinander ein. */
.coop-sail__wind {
  fill: none;
  stroke: var(--color-cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s ease-out;
}

.coop-sail__wind--wrong {
  stroke: var(--color-cream-mute);
}

.coop-sail__wind--2 {
  transition-delay: 0.2s;
}

.coop-sail__wind--3 {
  transition-delay: 0.4s;
}

.is-visible .coop-sail__wind {
  stroke-dashoffset: 0;
}

/* Nur der Wind des gewählten Zustands ist sichtbar. */
[data-wind="right"] .coop-sail__windset--wrong,
[data-wind="wrong"] .coop-sail__windset--right {
  display: none;
}

/* Boot: richtiger Wind bringt es zum Hafen, falscher lässt es abtreiben. */
.coop-sail__boat {
  transform: translateX(0);
  transition: transform 5.5s cubic-bezier(0.4, 0.1, 0.3, 1) 0.6s, filter 0.4s ease;
}

.is-visible [data-wind="right"] .coop-sail__boat {
  transform: translateX(176px);
}

.is-visible [data-wind="wrong"] .coop-sail__boat {
  transform: translateX(-40px);
}

/* Lichtkegel nur beim richtigen Wind, sobald das Boot angelegt hat. */
.coop-sail__beam {
  opacity: 0;
  transition: opacity 1.2s ease-out 6.2s;
}

.is-visible [data-wind="right"] .coop-sail__beam {
  opacity: 1;
}

/* Falscher Wind: Boot und Hafen werden grau und blass. */
[data-wind="wrong"] .coop-sail__jib,
[data-wind="wrong"] .coop-sail__pennant {
  fill: var(--color-cream-mute);
}

[data-wind="wrong"] .coop-sail__hull {
  fill: rgba(255, 255, 255, 0.35);
}

[data-wind="wrong"] .coop-sail__harbor,
[data-wind="wrong"] .coop-sail__label--small {
  opacity: 0.4;
}

/* Beim Umschalten: alles ohne Übergang zurück auf den Start, dann abspielen. */
.is-reset .coop-sail__boat,
.is-reset .coop-sail__wind,
.is-reset .coop-sail__beam {
  transition: none;
}

.is-visible .is-reset .coop-sail__boat {
  transform: translateX(0);
}

.is-visible .is-reset .coop-sail__wind {
  stroke-dashoffset: 1;
}

.is-visible .is-reset .coop-sail__beam {
  opacity: 0;
}

.coop-sail__main {
  fill: var(--color-cream);
}

.coop-sail__jib {
  fill: var(--color-cyan);
}

.coop-sail__pennant {
  fill: var(--color-teal);
}

.coop-sail__mast {
  stroke: var(--color-cream-soft);
  stroke-width: 3;
  stroke-linecap: round;
}

.coop-sail__hull {
  fill: var(--color-teal);
}

.coop-sail__sail-text {
  fill: var(--color-dark);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.coop-sail__tower {
  fill: var(--color-cream);
}

.coop-sail__stripe {
  fill: var(--color-dark-2);
}

.coop-sail__lamp {
  fill: var(--color-cyan);
}

.coop-sail__roof {
  fill: var(--color-teal);
}

.coop-sail__ray {
  stroke: var(--color-cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.coop-sail__mole {
  stroke: var(--color-teal);
  stroke-width: 6;
  stroke-linecap: round;
}

.coop-sail__tag rect {
  fill: var(--color-cyan);
}

.coop-sail__tag text {
  fill: var(--color-dark);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.coop-sail__tag--wrong rect {
  fill: rgba(255, 255, 255, 0.16);
}

.coop-sail__tag--wrong text {
  fill: var(--color-cream-soft);
}

.coop-sail__label {
  fill: var(--color-cream);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.coop-sail__label--small {
  font-size: 14px;
}

/* ---------- Leistungsfarben je Kategorie ---------- */
.discipline--strategie { --cat: var(--color-cat-strategie); }
.discipline--marketing { --cat: var(--color-cat-marketing); }
.discipline--vertrieb { --cat: var(--color-cat-vertrieb); }

.discipline[class*="discipline--"] {
  border-top: 4px solid var(--cat);
}

.discipline[class*="discipline--"] .discipline__index,
.discipline[class*="discipline--"] .discipline__benefit-label {
  color: var(--cat);
}

.discipline[class*="discipline--"] .discipline__point-dot {
  background: var(--cat);
}

.discipline[class*="discipline--"] .discipline__point-link:hover {
  color: var(--cat);
}

.leistungen-chips__link--strategie { border-color: var(--color-cat-strategie); }
.leistungen-chips__link--marketing { border-color: var(--color-cat-marketing); }
.leistungen-chips__link--vertrieb { border-color: var(--color-cat-vertrieb); }

.leistungen-chips__link--strategie:hover,
.leistungen-chips__link--strategie:focus-visible { color: var(--color-cat-strategie); border-color: var(--color-cat-strategie); }
.leistungen-chips__link--marketing:hover,
.leistungen-chips__link--marketing:focus-visible { color: var(--color-cat-marketing); border-color: var(--color-cat-marketing); }
.leistungen-chips__link--vertrieb:hover,
.leistungen-chips__link--vertrieb:focus-visible { color: var(--color-cat-vertrieb); border-color: var(--color-cat-vertrieb); }

/* ---------- Mehr Farbe: Warum-Karten ---------- */
.page-leistungen .section--why .numbered-list__item:nth-child(4n+1) { --tint: var(--color-purple); }
.page-leistungen .section--why .numbered-list__item:nth-child(4n+2) { --tint: var(--color-mint); }
.page-leistungen .section--why .numbered-list__item:nth-child(4n+3) { --tint: var(--color-orange); --tint-mix: 74%; --tint-l: 0.58; --tint-c: 0.175; }
.page-leistungen .section--why .numbered-list__item:nth-child(4n+4) { --tint: var(--color-cyan); }

.page-leistungen .section--why .numbered-list--grid .numbered-list__item {
  border-color: var(--tint);
  background: oklch(from color-mix(in oklch, var(--tint) var(--tint-mix, 52%), var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}

.page-leistungen .section--why .numbered-list__index {
  color: var(--color-cream);
}


/* ---------- Breiter Hero für Leistungs-Unterseiten ----------
   Ahmed: Pyramidenform (oben wenige, unten viele Wörter) wirkt schlecht, zu
   viel Text. Neu: breitere Überschrift mit gefüllten Zeilen (kein Balance),
   kürzerer Lead und drei Kernpunkte als Icon-Chips statt weiterer Sätze.
   Opt-in per Klasse service-hero--wide, Farbe je Kategorie. */
/* Strategie-Heros nutzen den Farbton des Menüs (siehe .site-nav__dropdown-label--strategie in layout.css). */
.service-hero--strategie { --cat: var(--color-cat-strategie); }
/* Marketing-Heros nutzen den Farbton des Menüs (siehe .site-nav__dropdown-label--marketing in layout.css). */
.service-hero--marketing { --cat: var(--color-cat-marketing); }
.service-hero--vertrieb { --cat: var(--color-cat-vertrieb); }

.page-leistungen .service-hero--wide .service-hero__title {
  max-width: 62rem;
  margin-inline: auto;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  text-wrap: pretty;
}

.page-leistungen .service-hero--wide .service-hero__lead {
  max-width: 46rem;
  text-wrap: pretty;
}

.service-hero__points {
  margin: 2.25rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  list-style: none;
}

.service-hero__point {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  border: 1px solid var(--cat, var(--color-teal));
  border-radius: 999px;
  background: oklch(from color-mix(in oklch, var(--cat, var(--color-teal)) 48%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-cream);
}

.service-hero__point-icon {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cat, var(--color-teal));
  color: var(--color-dark);
}

.service-hero__point-icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

/* Hero füllt den Viewport: Direkt unter dem Header ist nur der Hero zu
   sehen, die nächste Sektion beginnt erst beim Scrollen. Gilt für die
   breite Hero-Variante (Leistungsseiten ohne Video im Hero). */
.page-leistungen :is(.service-hero--wide, .service-hero--video) {
  display: flex;
  align-items: center;
  /* Die Menüleiste ist real ca. 73 px hoch (Token --header-height: 80 px).
     4,5 rem lassen den Hero minimal höher als das Fenster, damit unten
     kein Streifen der nächsten Sektion sichtbar wird. */
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
}

.page-leistungen :is(.service-hero--wide, .service-hero--video) > .service-hero__inner {
  width: 100%;
}

/* ---------- Leistungs-Hero: Design-Politur (02.11.2026) ----------
   Ziel: modern, einladend, Besucher zum Scrollen und Kontakt bewegen.
   Bausteine: Akzentwort in der H1,
   gestaffelter Einstieg, Vertrauenszeile, Scroll-Hinweis. */
.page-leistungen :is(.service-hero--wide, .service-hero--video) {
  padding-bottom: 6rem;
}

/* Akzentwort in der Überschrift */
.hero-accent {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cat, var(--color-teal)) 86%, #fff),
    color-mix(in srgb, var(--cat, var(--color-teal)) 100%, #fff) 50%,
    color-mix(in srgb, var(--cat, var(--color-teal)) 78%, #fff)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Chips etwas präsenter */
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cat, var(--color-teal)) 14%, transparent);
}

/* Button: größer, mit Pfeil und ruhigem Leuchten */
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta {
  margin-top: 2.5rem;
}

.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta .btn {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  animation: hero-cta-glow 3.2s ease-in-out 2.4s infinite;
}

.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta .btn::before {
  content: none;
}

@keyframes hero-cta-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(94, 234, 212, 0.4); }
  60% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 14px rgba(94, 234, 212, 0); }
}

/* Vertrauenszeile unter dem Button */
.service-hero__trust {
  margin: 1.75rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-cream-soft);
}

.service-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.service-hero__trust li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cat, var(--color-teal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--color-teal)) 30%, transparent);
}

/* Scroll-Hinweis am unteren Rand des Heros */
.service-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color-cream-mute);
  text-decoration: none;
  transition: color 0.2s ease;
}

.service-hero__scroll:hover,
.service-hero__scroll:focus-visible {
  color: var(--color-cream);
}

.service-hero__scroll svg {
  width: 1.5rem;
  height: 1.5rem;
  animation: hero-bounce 2s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-height: 620px) {
  .service-hero__scroll { display: none; }
}

/* Gestaffelter Einstieg */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__breadcrumb,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__title,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__lead,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__trust,
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__scroll svg + span {
  animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__title { animation-delay: 0.08s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__lead { animation-delay: 0.2s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point:nth-child(1) { animation-delay: 0.34s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point:nth-child(2) { animation-delay: 0.44s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point:nth-child(3) { animation-delay: 0.54s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta { animation-delay: 0.68s; }
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__trust { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .page-leistungen :is(.service-hero--wide, .service-hero--video) *,
  .service-hero__scroll svg {
    animation: none !important;
  }
}

/* Keine "Sanduhr": Lead, Chips und Überschrift sollen eine ähnliche Breite
   haben, damit der Hero nicht in der Mitte schmal wird. Der Lead ist
   deshalb so breit wie die Überschrift und nutzt volle Zeilen statt
   ausgeglichener (balance) Zeilen. */
.page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__lead {
  max-width: 54rem;
  text-wrap: pretty;
}



/* Mini-Video im Hero: kleine Vorschau neben dem Button, öffnet das Video
   groß im Lightbox-Overlay (js/video-lightbox.js). */
.service-hero__cta--video {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
}

.video-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 1.125rem 0.3rem 0.3rem;
  border: 1px solid var(--cat, var(--color-teal));
  border-radius: 12px;
  background: oklch(from color-mix(in oklch, var(--cat, var(--color-teal)) 46%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.video-mini:hover {
  transform: translateY(-2px);
  border-color: var(--cat, var(--color-teal));
}

.video-mini:focus-visible {
  outline: 2px solid var(--cat, var(--color-teal));
  outline-offset: 3px;
}

.video-mini__thumb {
  position: relative;
  display: block;
  width: 6rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 8px;
}

.video-mini__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-mini__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.25rem;
  color: var(--color-dark);
}

.video-mini__play svg {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3rem 0.25rem 0.3rem 0.35rem;
  border-radius: 50%;
  background: var(--color-cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Vorschaubild mit Person: Ausschnitt von oben, damit der Kopf nicht
   abgeschnitten wird (Bild ist fast quadratisch, die Vorschau flach). */
.video-mini__img--kopf {
  object-position: 50% 4%;
}

/* Telesales: Hochformat-Video, der Kopf liegt im oberen Mittelteil des
   Bildes. Ausschnitt dort ansetzen, damit er nicht abgeschnitten wird. */
.video-mini__thumb--hochformat {
  width: 4.25rem;
}

.video-mini__img--telesales {
  object-position: 50% 46%;
}

/* Niedrige Fenster (typische Laptops, ca. 700 bis 860 px Höhe): Abstände im
   Hero straffen, damit Button, Vertrauenszeile und Scroll-Hinweis noch im
   ersten Bild stehen. */
@media (min-width: 768px) and (max-height: 860px) {
  .page-leistungen :is(.service-hero--wide, .service-hero--video) {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }

  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__points {
    margin-top: 1.5rem;
  }

  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__cta {
    margin-top: 1.75rem;
  }
}

/* Handy: Hero-Überschrift ohne automatische Silbentrennung und etwas
   kleiner, Chips und Lead kompakter, damit der Hero nicht unnötig lang wird. */
@media (max-width: 480px) {
  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__title {
    font-size: 1.75rem;
    hyphens: manual;
    -webkit-hyphens: manual;
  }

  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__lead {
    font-size: 1rem;
    hyphens: manual;
    -webkit-hyphens: manual;
  }

  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__points {
    margin-top: 1.5rem;
    gap: 0.625rem;
  }

  .page-leistungen :is(.service-hero--wide, .service-hero--video) .service-hero__point {
    font-size: 0.875rem;
  }

  .service-hero__trust {
    gap: 0.375rem 1rem;
    font-size: 0.8125rem;
  }
}

/* ---------- Sales Outsourcing: Sektionen unter dem Hero (02.11.2026) ----------
   Ziel: weniger schwarze Fläche zwischen den Sektionen, mehr Farbe, moderner.
   Nur diese Seite (Body-Klasse page-sales-outsourcing, zusätzlich leistungen-flow
   für kürzere Sektionen). Farben: Strategie grün als Leitfarbe, dazu die
   Karten-Farben der übrigen Seiten (Mint, Cyan, Lila, Magenta). */
/* Leitfarbe der Seite: Strategie-Grün aus dem Menü, dazu sechs ähnliche Grüntöne (--so-1 bis --so-6, von frischem Grün bis Mintgrün), die sich in Karten, Kacheln und Panels abwechseln (Nutzerin, 02.11.2026). */
.page-sales-outsourcing {
  --so-1: var(--color-cat-strategie-1);
  --so-2: var(--color-cat-strategie-2);
  --so-3: var(--color-cat-strategie-3);
  --so-4: var(--color-cat-strategie-4);
  --so-5: var(--color-cat-strategie-5);
  --so-6: var(--color-cat-strategie-6);
}

/* Hintergrund, Trennlinien und Eyebrows (Kicker) der Sektionen bleiben unverändert (Nutzerin, 02.11.2026): keine Hintergründe ändern, keine Striche zwischen den Sektionen, Eyebrows wie vorher. */
.page-sales-outsourcing .so-sec .section-title { margin-bottom: 0; }

/* 1. Definition: drei Bausteine */
.page-sales-outsourcing .so-takes {
  margin: 2.5rem auto 0;
  padding: 0;
  max-width: 48rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}
.page-sales-outsourcing .so-take {
  --t: var(--so-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--t);
  border-radius: 16px;
  background: oklch(from color-mix(in oklch, var(--t) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-cream);
  text-align: center;
}
.page-sales-outsourcing .so-take:nth-child(2) { --t: var(--so-4); }
.page-sales-outsourcing .so-take:nth-child(3) { --t: var(--so-6); }
.page-sales-outsourcing .so-take svg { width: 2.5rem; height: 2.5rem; color: var(--t); }
@media (max-width: 560px) {
  .page-sales-outsourcing .so-takes { grid-template-columns: 1fr; }
  .page-sales-outsourcing .so-take { flex-direction: row; justify-content: flex-start; text-align: left; padding: 1rem 1.25rem; }
  .page-sales-outsourcing .so-take svg { width: 2rem; height: 2rem; flex-shrink: 0; }
}

/* 2. Passt das zu dir: sechs farbige Kacheln */
.page-sales-outsourcing .reason-list {
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.page-sales-outsourcing .reason-list li {
  --t: var(--so-1);
  align-items: center;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--t);
  border-radius: 14px;
  background: oklch(from color-mix(in oklch, var(--t) 48%, var(--color-dark)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}
.page-sales-outsourcing .reason-list li:nth-child(2) { --t: var(--so-2); }
.page-sales-outsourcing .reason-list li:nth-child(3) { --t: var(--so-3); }
.page-sales-outsourcing .reason-list li:nth-child(4) { --t: var(--so-4); }
.page-sales-outsourcing .reason-list li:nth-child(5) { --t: var(--so-5); }
.page-sales-outsourcing .reason-list li:nth-child(6) { --t: var(--so-6); }
.page-sales-outsourcing .reason-list__mark {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: var(--t);
  color: var(--color-dark);
  font-weight: 700;
}
@media (min-width: 1024px) {
  .page-sales-outsourcing .reason-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 3. Vier Gründe: eine Reihe, farbige Karten mit großer Nummer */
.page-sales-outsourcing .point-grid { margin-top: 2.5rem; gap: 1rem; }
.page-sales-outsourcing .point-card {
  --t: var(--so-1);
  position: relative;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--t);
  border-radius: 16px;
  background: oklch(from color-mix(in oklch, var(--t) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  overflow: hidden;
}
.page-sales-outsourcing .point-card:nth-child(2) { --t: var(--so-3); }
.page-sales-outsourcing .point-card:nth-child(3) { --t: var(--so-4); }
.page-sales-outsourcing .point-card:nth-child(4) { --t: var(--so-6); }
.page-sales-outsourcing .point-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--t);
}
.page-sales-outsourcing .point-card .point-card__index {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--t);
}
@media (min-width: 1024px) {
  .page-sales-outsourcing .point-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 4. Leistungsportfolio: drei farbige Panels */
.page-sales-outsourcing .faq-columns { margin-top: 2.5rem; gap: 1rem; }
.page-sales-outsourcing .faq-columns > .faq-list {
  --t: var(--so-2);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--t);
  border-top: 4px solid var(--t);
  border-radius: 16px;
  background: oklch(from color-mix(in oklch, var(--t) 46%, var(--color-dark)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}
.page-sales-outsourcing .faq-columns > .faq-list:nth-child(2) { --t: var(--so-4); }
.page-sales-outsourcing .faq-columns > .faq-list:nth-child(3) { --t: var(--so-6); }
.page-sales-outsourcing .faq-columns .faq-item { border-top-color: color-mix(in srgb, var(--t) 30%, transparent); }
.page-sales-outsourcing .faq-columns .faq-item:first-child { padding-top: 1.5rem; }


/* ---------- Farbfamilie je Kategorie auf den übrigen Leistungsseiten (02.11.2026) ----------
   Muster von Sales Outsourcing: Karten, Kacheln, Icons und Nummern nutzen nur die sechs ähnlichen
   Farben der Kategorie (Tokens --color-cat-<kategorie>-1 bis -6 in base.css) statt des früheren
   Regenbogens. Body-Klassen: page-cat plus page-cat-strategie, -marketing oder -vertrieb.
   Hintergründe, Trennlinien und Eyebrows bleiben unverändert (Nutzerin). */
.page-cat-strategie { --f1: var(--color-cat-strategie-1); --f2: var(--color-cat-strategie-2); --f3: var(--color-cat-strategie-3); --f4: var(--color-cat-strategie-4); --f5: var(--color-cat-strategie-5); --f6: var(--color-cat-strategie-6); }
.page-cat-marketing { --f1: var(--color-cat-marketing-1); --f2: var(--color-cat-marketing-2); --f3: var(--color-cat-marketing-3); --f4: var(--color-cat-marketing-4); --f5: var(--color-cat-marketing-5); --f6: var(--color-cat-marketing-6); }
.page-cat-vertrieb { --f1: var(--color-cat-vertrieb-1); --f2: var(--color-cat-vertrieb-2); --f3: var(--color-cat-vertrieb-3); --f4: var(--color-cat-vertrieb-4); --f5: var(--color-cat-vertrieb-5); --f6: var(--color-cat-vertrieb-6); }

/* Reihenfolge in einer Reihe von Karten: abwechselnd, damit benachbarte Karten sich unterscheiden */
.page-cat { --c1: var(--f1); --c2: var(--f3); --c3: var(--f4); --c4: var(--f6); --c5: var(--f2); --c6: var(--f5); }

.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li) { --t: var(--c1); }
.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li):nth-child(6n+2) { --t: var(--c2); }
.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li):nth-child(6n+3) { --t: var(--c3); }
.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li):nth-child(6n+4) { --t: var(--c4); }
.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li):nth-child(6n+5) { --t: var(--c5); }
.page-cat :is(.point-card, .reason-card, .reason-list > li, .numbered-list__item, .step-grid > li):nth-child(6n+6) { --t: var(--c6); }

/* Karten (point-card): getönt, farbiger Rand, Linie oben, große Nummer */
.page-cat .point-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--t);
  border-radius: 16px;
  background: oklch(from color-mix(in oklch, var(--t) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}
.page-cat .point-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--t);
}
.page-cat .point-card .point-card__index {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--t);
}

/* Kachelliste (reason-list): farbige Kacheln mit gefülltem Haken */
.page-cat .reason-list {
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.page-cat .reason-list > li {
  align-items: center;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--t);
  border-radius: 14px;
  background: oklch(from color-mix(in oklch, var(--t) 48%, var(--color-dark)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}
.page-cat .reason-list__mark {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: var(--t);
  color: var(--color-dark);
  font-weight: 700;
}
@media (min-width: 1024px) {
  .page-cat .reason-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Icons mit Titel (reason-card): Icon in der Familienfarbe */
.page-cat .reason-card .reason-card__icon { background-color: var(--t); }

/* Nummerierte Listen: Nummer in der Familienfarbe, Rasterkacheln getönt */
.page-cat .numbered-list__item .numbered-list__index { color: var(--t); }
.page-cat .numbered-list--grid .numbered-list__item {
  border: 1px solid var(--t);
  border-radius: 16px;
  background: oklch(from color-mix(in oklch, var(--t) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}

/* Schritte: Icon, Titel und Linie in der Familienfarbe */
.page-cat .step-grid > li .step-icon {
  border-color: var(--t);
  background: color-mix(in oklch, var(--t) 30%, transparent);
  color: var(--t);
}
.page-cat .step-grid--dark > li .step-title { color: var(--t); }
.page-cat .step-grid--dark > li .step-rule { border-top-color: color-mix(in srgb, var(--t) 45%, transparent); }

/* Vertriebsberatung: Untertitel der Wege-Karten auf den getönten Karten heller (hatte 3,9:1) */
.page-cat .wege-card .wege-card__tag { color: rgba(255, 255, 255, 0.82); }

/* "Passt das zu dir?": die sechs Kacheln laufen harmonisch durch die Farbfamilie (Farbton 1 bis 6 in Leserichtung),
   statt abwechselnd zu springen (Nutzerin, 02.11.2026). */
.page-cat .reason-list > li:nth-child(6n+1) { --t: var(--f1); }
.page-cat .reason-list > li:nth-child(6n+2) { --t: var(--f2); }
.page-cat .reason-list > li:nth-child(6n+3) { --t: var(--f3); }
.page-cat .reason-list > li:nth-child(6n+4) { --t: var(--f4); }
.page-cat .reason-list > li:nth-child(6n+5) { --t: var(--f5); }
.page-cat .reason-list > li:nth-child(6n+6) { --t: var(--f6); }


/* ---------- Warum-Sektionen: Icons statt Nummern in den Karten (02.11.2026) ----------
   Gilt für die Karten, die statt .point-card__index ein .point-card__icon haben. */
.page-cat .point-card .point-card__icon,
.page-sales-outsourcing .point-card .point-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--t);
  border-radius: 14px;
  background: color-mix(in oklch, var(--t) 40%, transparent);
  color: var(--t);
}
.page-cat .point-card .point-card__icon svg,
.page-sales-outsourcing .point-card .point-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}


/* Karteninhalt zentriert (Nutzerin, 02.11.2026): Icon, Nummer bzw. Etikett, Titel und Text */
.page-cat .point-card,
.page-sales-outsourcing .point-card {
  text-align: center;
}
.page-cat .point-card .point-card__icon,
.page-sales-outsourcing .point-card .point-card__icon {
  margin-inline: auto;
}
.page-cat .point-card .point-card__text,
.page-sales-outsourcing .point-card .point-card__text {
  margin-inline: auto;
}

/* Etikett statt Nummer (z. B. "Inbound-Marketing" bei "Zwei Ansätze"): klein und in Großbuchstaben unter dem Icon */
.page-cat .point-card .point-card__icon + .point-card__index {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Fünf Karten in drei Spalten: letzte Reihe mittig statt linksbündig (marketing, Outreach-Maßnahmen) */
@media (min-width: 1024px) {
  .page-cat .point-grid--cols-3:has(> :nth-child(5):last-child):not(.wege-grid) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .page-cat .point-grid--cols-3:has(> :nth-child(5):last-child):not(.wege-grid) > * { grid-column: span 2; }
  .page-cat .point-grid--cols-3:has(> :nth-child(5):last-child):not(.wege-grid) > :nth-child(4) { grid-column: 2 / span 2; }
  .page-cat .point-grid--cols-3:has(> :nth-child(5):last-child):not(.wege-grid) > :nth-child(5) { grid-column: 4 / span 2; }
}

/* Fünf Kacheln (Guerilla-Marketing): unvollständige letzte Reihe mittig, ab Tablet zwei, ab Desktop drei Spalten */
.page-cat .reason-list:has(> :nth-child(5):last-child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page-cat .reason-list:has(> :nth-child(5):last-child) > li { flex: 0 0 100%; }
@media (min-width: 640px) {
  .page-cat .reason-list:has(> :nth-child(5):last-child) > li { flex-basis: calc((100% - 1rem) / 2); }
}
@media (min-width: 1024px) {
  .page-cat .reason-list:has(> :nth-child(5):last-child) > li { flex-basis: calc((100% - 2rem) / 3); }
}



/* ---------- Prozess-Grafik "Von der Strategie zum Termin" (Ahmed, 03.11.2026) ----------
   Baumdiagramm nah am Original der alten Seite, neu gebaut. Die Teile erscheinen von oben nach unten
   (js/lead-tree.js setzt .is-in). Hintergrund bleibt das ruhige Dunkel. */

    .lt { --c-str: var(--color-cat-strategie); --c-dat: var(--color-cyan); --c-out: var(--color-cat-vertrieb); --c-in: var(--color-orange); --c-mid: #ffffff; --c-end: var(--color-mint); margin: 2.5rem auto 0; }

    
.lt--js .lt-t { opacity: 0; transform: translateY(-14px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * .45s); }
.lt--js.is-in .lt-t { opacity: 1; transform: none; }
.lt-chip { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

    .lt { max-width: 60rem; text-align: center; }
    .lt__bar { position: relative; display: block; margin: 0 auto; padding: 1rem 2rem; color: #0f1214; font-size: 1.15rem; background: var(--bc);
      clip-path: polygon(1% 18%, 6% 4%, 24% 10%, 48% 2%, 74% 9%, 94% 3%, 99% 20%, 97% 52%, 100% 82%, 90% 96%, 64% 90%, 40% 99%, 16% 92%, 3% 97%, 0 70%, 2% 40%); }
    .lt__bar--str { --bc: var(--c-str); width: 100%; }
    .lt__bar--dat { --bc: var(--c-dat); width: 56%; }
    .lt__bar--mid { --bc: var(--c-mid); width: 40%; }
    .lt__bar--end { --bc: var(--c-end); width: 62%; }
    .lt__bar--str, .lt__bar--dat, .lt__bar--mid, .lt__bar--end { text-transform: uppercase; }
    .lt__arrow { display: block; width: 100%; height: 3.2rem; overflow: visible; }
    .lt__arrow--short { height: 2.4rem; }
    .lt__arrow path { fill: none; stroke: var(--color-cream); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .lt__arrow path.head { fill: none; }
    .lt__groups { display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
    .lt__group { padding: 1.5rem 1rem 1.25rem; border-radius: 14px; background: oklch(from color-mix(in oklch, var(--gc) 48%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h); border: 1px solid var(--gc); }
    .lt__group--in { --gc: var(--c-in); }
    .lt__group--out { --gc: var(--c-out); }
    .lt__group-title { margin-bottom: .9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 75%, #fff); }
    .lt__chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .75rem; }
    .lt__chip { padding: .8rem .6rem; border-radius: 4px; background: var(--gc); color: #0f1214; font-size: .9rem; clip-path: polygon(0 12%, 4% 0, 96% 6%, 100% 20%, 98% 88%, 93% 100%, 5% 94%, 0 80%); }
    .lt__tele { position: relative; display: inline-block; padding: 1.1rem 3rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: .03em; text-transform: uppercase;
      background: linear-gradient(0deg, rgba(255,120,40,.85), rgba(255,200,80,.25) 70%, transparent); border-bottom: 3px solid #ff9a3c; }
    .lt__item { margin: 0 auto; }
    .lt__cap { margin: .55rem auto 0; max-width: 34rem; font-size: .88rem; line-height: 1.5; color: var(--color-cream-soft); }
    .lt__chip small { display: block; margin-top: .3rem; font-family: var(--font-sans, inherit); font-weight: 500; font-size: .72rem; letter-spacing: 0; text-transform: none; line-height: 1.35; opacity: .85; }
    .lt__tipwrap { position: relative; }
    .lt__tip { position: absolute; bottom: -1px; width: 12px; height: 12px; margin-left: -6px; border-right: 2.5px solid var(--color-cream); border-bottom: 2.5px solid var(--color-cream); transform: rotate(45deg) translate(-3px,-3px); border-radius: 1px; }
    .lt__note { margin: .6rem auto 0; max-width: 34rem; color: var(--color-cream-soft); font-size: .9rem; }
    @media (max-width: 720px) { .lt__groups { grid-template-columns: 1fr; } .lt__chips { grid-auto-flow: row; } .lt__bar--dat, .lt__bar--mid, .lt__bar--end { width: 90%; } .lt__tipwrap { height: 2.4rem; } .lt__tipwrap .lt__arrow { display: none; } .lt__tipwrap .lt__tip:not(:first-of-type) { display: none; } .lt__tipwrap .lt__tip { left: 50% !important; } .lt__tipwrap::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; width: 2.5px; margin-left: -1.25px; background: var(--color-cream); border-radius: 2px; } .lt__groups { margin-top: 0; } .lt__tele { padding-inline: 1.5rem; font-size: 1.5rem; } }

    
@media (prefers-reduced-motion: reduce) { .lt--js .lt-t { opacity: 1; transform: none; transition: none; } }


/* ---------- Prozess-Grafik: Feinschliff (Design-Verbesserung 03.11.2026) ---------- */
.lt { max-width: 62rem; margin-top: 3rem; }
.lt__item { padding-inline: 1rem; }
.lt__bar { padding: 1.15rem 2.25rem; font-size: 1.3rem; letter-spacing: 0.04em; box-shadow: none; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--bc) 30%, transparent)); }
.lt__cap { margin-top: 0.85rem; max-width: 34rem; font-size: 1rem; line-height: 1.55; text-wrap: balance; color: var(--color-cream-soft); }

/* Pfeile zwischen den Balken: sauber gezeichnet statt gestreckt */
.lt__down { position: relative; height: 3.1rem; }
.lt__down i { position: absolute; left: 50%; top: 0.45rem; bottom: 0.35rem; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: var(--color-cream); }
.lt__down i::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 11px; height: 11px; margin-left: -5.5px; border-right: 2.5px solid var(--color-cream); border-bottom: 2.5px solid var(--color-cream); border-radius: 1px; transform: rotate(45deg) translate(-3px, -3px); }
.lt__tipwrap .lt__arrow { height: 3.4rem; }
.lt__arrow path { stroke-width: 2.5; }

/* Inbound- und Outbound-Kaesten */
.lt__groups { gap: 1.25rem; }
.lt__group { padding: 1.5rem 1.1rem 1.35rem; border-radius: 16px; }
.lt__group-title { margin-bottom: 1rem; font-size: 1.1rem; letter-spacing: 0.1em; }
.lt__chips { align-items: stretch; }
.lt__chip { display: flex; flex-direction: column; justify-content: center; padding: 0.95rem 0.7rem; font-size: 0.95rem; }
.lt__chip small { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 500; line-height: 1.4; opacity: 1; }
.lt__group--in .lt__chip { color: #fff; }

/* Telefon-Balken: Glut-Kante, wie auf der alten Grafik */
.lt__tele { padding: 1.25rem 3.25rem 1.2rem; font-size: 2rem; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255, 170, 60, 0) 0%, rgba(255, 150, 50, 0.38) 55%, rgba(255, 110, 30, 0.95) 100%);
  box-shadow: 0 18px 40px -14px rgba(255, 120, 30, 0.7), inset 0 -3px 0 #ffb25c; }
.lt__note { margin-top: 0.9rem; max-width: 36rem; font-size: 1rem; line-height: 1.55; text-wrap: balance; }

@media (max-width: 720px) {
  .lt__item { padding-inline: 0; }
  .lt__bar { font-size: 1.1rem; padding: 1rem 1.25rem; }
  .lt__cap, .lt__note { font-size: 0.95rem; }
  .lt__tele { font-size: 1.45rem; padding-inline: 1.5rem; }
}

/* Weniger Leerraum zwischen Prozess-Grafik und Haeufigen Fragen: beide Sektionen haben
   denselben dunklen Hintergrund, die Zwangshoehe der FAQ-Sektion erzeugte zusaetzlich
   einen grossen schwarzen Streifen. */
.page-leistungen .section--flow-end { padding-bottom: 3rem; }
.page-leistungen .section--after-flow { min-height: 0; padding-top: 3.5rem; }

/* "Wir kombinieren beides." sass vorher direkt unter den Karten. Jetzt mit Luft wie zwischen den anderen Elementen. */
.page-leistungen .io-combine { margin-top: 3rem; }

/* Guerilla-Marketing, Sektion "Was ist das?": Kernaussage unter der Ueberschrift, darunter drei Kacheln (.point-card). */
.gm-claim {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-cream);
}
.gm-claim__accent {
  color: var(--f3);
  background: linear-gradient(90deg, var(--f1), var(--f6));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Bei zwei Spalten steht die dritte Kachel mittig unter den beiden anderen. */
@media (min-width: 640px) and (max-width: 1023px) {
  .gm-what-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gm-what-grid > * { grid-column: span 2; }
  .gm-what-grid > :nth-child(3) { grid-column: 2 / span 2; }
}

/* ---------- Guerilla: Geschichten zum Aufklappen ---------- */
.gm-stories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 2.5rem;
  text-align: left;
}
@media (min-width: 900px) { .gm-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-story {
  --t: var(--color-cat-marketing-1);
  border: 1px solid var(--t);
  border-radius: 14px;
  background: oklch(from color-mix(in oklch, var(--t) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  color: #fff;
}
.gm-story:nth-child(2) { --t: var(--color-cat-marketing-3); }
.gm-story:nth-child(3) { --t: var(--color-cat-marketing-4); }
.gm-story:nth-child(4) { --t: var(--color-cat-marketing-6); }
.gm-story__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.75rem;
  cursor: pointer;
  list-style: none;
}
.gm-story__head::-webkit-details-marker { display: none; }
.gm-story__head:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 14px; }
.gm-story__tag {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.page-cat .gm-story .gm-story__title,
.gm-story__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.gm-story__who { font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.gm-story__teaser { margin-top: 0.25rem; font-size: 1.0625rem; line-height: 1.5; color: #fff; }
.gm-story__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
}
.gm-story__more svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.gm-story__more-open { display: none; }
.gm-story[open] .gm-story__more-closed { display: none; }
.gm-story[open] .gm-story__more-open { display: inline; }
.gm-story[open] .gm-story__more svg { transform: rotate(180deg); }
.gm-story__body { padding: 0 1.75rem 1.75rem; font-size: 1.0625rem; line-height: 1.6; color: #fff; }
.gm-story__body p + p { margin-top: 0.875rem; }
.gm-story__lesson {
  margin-top: 1.25rem !important;
  padding: 1rem 1.125rem;
  border-radius: 10px;
  background: rgba(16, 18, 20, 0.45);
}

/* ---------- Guerilla: Kanaele kombinieren ---------- */
.gm-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .gm-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gm-chain { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gm-chain__step {
  --t: var(--color-cat-marketing-1);
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--t);
  border-radius: 12px;
  background: oklch(from color-mix(in oklch, var(--t) 48%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  text-align: center;
}
.gm-chain__step:nth-child(2) { --t: var(--color-cat-marketing-2); }
.gm-chain__step:nth-child(3) { --t: var(--color-cat-marketing-3); }
.gm-chain__step:nth-child(4) { --t: var(--color-cat-marketing-4); }
.gm-chain__step:nth-child(5) { --t: var(--color-cat-marketing-6); }
.gm-chain__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--t);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 700;
}
.gm-chain__title { margin: 0.75rem 0 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: #fff; }
.gm-chain__text { margin-top: 0.5rem; font-size: 0.9688rem; line-height: 1.5; color: #fff; }
.gm-factors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .gm-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-factor {
  padding: 1.75rem;
  border: 2px solid var(--color-cat-marketing);
  border-radius: 12px;
  background: oklch(from color-mix(in oklch, var(--color-cat-marketing) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  text-align: center;
}
.gm-factor__title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; }
.gm-factor__text { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.55; color: #fff; }
.gm-factors__claim {
  grid-column: 1 / -1;
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
}

/* Kraeftigere Kartenfarben: Text und Nummern auf getoenten Karten weiss, damit alles gut lesbar bleibt. */
.page-cat .point-card__title,
.page-cat .point-card__text,
.page-cat .point-card__index,
.page-cat .numbered-list__title,
.page-cat .numbered-list__text,
.page-cat .numbered-list__index,
.page-leistungen .section--why .numbered-list__title,
.page-leistungen .section--why .numbered-list__text,
.page-leistungen .section--why .numbered-list__index,
.page-sales-outsourcing .point-card__title,
.page-sales-outsourcing .point-card__text,
.page-sales-outsourcing .point-card__index,
.lt__group-title,
.discipline[class*="discipline--"] .discipline__benefit-label,
.page-cat .point-card .point-card__index,
.page-cat .numbered-list__item .numbered-list__index,
.wege-card__fazit strong {
  color: #fff;
}

.gm-story .point-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  border-radius: 12px;
  background: var(--t);
  color: var(--color-dark);
}
.gm-story .point-card__icon svg { width: 1.75rem; height: 1.75rem; }

/* Icons auf den kraeftigeren Karten: gefuellt, sonst verschwinden sie in der Kartenfarbe. */
.page-cat .point-card .point-card__icon,
.page-sales-outsourcing .point-card .point-card__icon {
  background: var(--t);
  border-color: var(--t);
  color: var(--color-dark);
}

.page-sales-outsourcing .faq-item__answer,
.page-sales-outsourcing .faq-item__link,
.wege-card__tag {
  color: #fff;
}

.lt .lt__group--in .lt__chip,
.lt .lt__group--in .lt__chip small {
  color: #0f1214;
}

.page-leistungen .wege-card .wege-card__tag {
  color: #fff;
}

.gm-story__source {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Guerilla-Geschichten: Inhalt der Kacheln zentriert */
.gm-story { text-align: center; }
.gm-story__head { align-items: center; }

/* Guerilla, Sektion "Was bringt es mir?": Inhalt der Kacheln zentriert */
.gm-benefits .numbered-list__item { text-align: center; }

/* Guerilla-Geschichten: geschlossene Kacheln gleich hoch, auch wenn Titel oder Einstieg kürzer sind */
@media (min-width: 900px) {
  .gm-story__title { min-height: 2lh; display: flex; align-items: center; justify-content: center; }
  .gm-story__teaser { min-height: 3lh; }
}

/* Neon-Lila und -Blau tragen keine dunklen Ziffern: Marken in Weiß, Ziffer dunkel */
.page-cat-marketing .gm-chain__num,
.page-cat-marketing .reason-list__mark { background: #fff; color: var(--color-dark); }
.gm-story__title { text-wrap: balance; }