/* ---------- Hero ---------- */
/* 1:1 nach Design-Vorlage des Nutzers (Downloads/index.html) umgesetzt:
   feste px-Werte und Farben statt der sonst im Projekt üblichen rem/Tokens,
   damit das Ergebnis optisch exakt der Vorlage entspricht. Navigation bleibt
   unverändert die bestehende partials/header.html. */

.hero {
  /* Hero ist abgenommen: behaelt seine bisherigen Farben, auch wenn die Tokens kraeftiger werden. */
  --color-teal: #70cad1;
  --color-cyan: #5ce1e6;
  --color-mint: #44dba6;
  --color-purple: #7f5beb;
  --hero-bg: var(--color-dark);
  --hero-accent: #5eead4;
  --hero-accent-light: #7ff3d4;
  /* Auf .hero statt .hero__headline definiert, damit .hero__visual (anderer
     Teilbaum unter .hero__inner) die Headline-Groesse fuer die Ausrichtung
     seiner Oberkante an der Wortoberkante mitlesen kann (s.u.). */
  --hero-headline-fs: clamp(2.75rem, calc(15vw - 90px), 148px);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: calc(100svh - var(--header-height));
  /* Flacher Hintergrund in exakt derselben Farbe wie alle uebrigen
     Startseiten-Sektionen (--color-dark), ohne den frueheren radialen
     Glow-Verlauf. */
  background: var(--color-dark);
  color: #fff;
}

.hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  /* Schmaler als frueher (1480px), damit der Abstand zwischen dem laengsten
     rotierenden Wort ("Neukunden") und dem Handy nicht zu breit wirkt - das
     Handy bleibt an der rechten Kante, rueckt dadurch aber naeher an den Text. */
  max-width: 1345px;
  margin-inline: auto;
  padding: 40px 64px;
}

@media (max-width: 1080px) {
  .hero__inner {
    padding: 50px 24px;
  }
}

/* Oberer Bereich: Eyebrow + grosses rotierendes Wort, zentriert ueber die volle Hero-Breite. */
.hero__top {
  width: 100%;
  text-align: center;
}

/* Unterer Bereich: Text/CTAs/Trust links, Kalender rechts. */
.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

@media (max-width: 1080px) {
  .hero__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Breit genug, damit der lange Eroeffnungssatz ("Der Weg zu Umsatz und
     Neukunden fuehrt ueber Termine mit echten Entscheidern.") in einer
     Zeile bleibt statt umzubrechen. */
  max-width: 870px;
  text-align: left;
}

/* Auf Handy und Tablet linksbuendig wie am Computer (Wunsch der Nutzerin, 10.11.2026). */
@media (max-width: 1080px) {
  .hero__content {
    align-items: flex-start;
    max-width: 100%;
    text-align: left;
  }
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.hero__eyebrow-swap {
  display: inline-grid;
}

.hero__eyebrow-swap-word {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.hero__eyebrow-swap-word--out {
  animation: hero-eyebrow-swap-out 0.4s ease-out 1.6s forwards;
}

.hero__eyebrow-swap-word--in {
  opacity: 0;
  animation: hero-eyebrow-swap-in 0.4s ease-out 1.6s forwards;
}

@keyframes hero-eyebrow-swap-out {
  to {
    opacity: 0;
  }
}

@keyframes hero-eyebrow-swap-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-swap-word--out {
    display: none;
  }

  .hero__eyebrow-swap-word--in {
    opacity: 1;
    animation: none;
  }
}

.hero__headline {
  position: relative;
  display: block;
  margin-bottom: 8px;
  /* overflow:hidden wuerde den Glow (text-shadow reicht ueber die Buchstaben-
     Box hinaus) an der Element-Kante hart abschneiden - sichtbare Kante statt
     weichem Verlauf in den Hintergrund. Deshalb bewusst sichtbar lassen. */
  overflow: visible;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--hero-headline-fs);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .hero__headline {
    white-space: normal;
    /* Feste Hoehe fuer 2 Zeilen: laengere Woerter (z.B. "Neukunden") koennen
       hier umbrechen, kuerzere (z.B. "Umsatz") nicht - ohne reservierte
       Hoehe wuerde die Zeile bei jedem Wortwechsel springen und alles
       darunter (inkl. Phone-Mockup) mit verschieben. */
    min-height: calc(var(--hero-headline-fs) * 2.1);
  }
}

/* Klassischer Neon-Roehren-Look: weisser Buchstabenkern (die gluehende
   Glasroehre) mit goldgelbem Schein drumherum (das farbige Umgebungslicht) -
   pro Buchstabe abgegrenzt statt als zusammenhaengender Balken. */
.hero__word {
  display: inline-block;
  color: #ffffff;
  /* Viele fein abgestufte Schichten statt weniger grosser Spruenge, damit
     der Schein stufenlos in den Hintergrund verlaeuft statt sichtbar
     abgesetzte Ringe zu bilden. */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 244, 214, 0.7), 0 0 9px rgba(255, 211, 110, 0.55), 0 0 15px rgba(250, 187, 72, 0.44), 0 0 24px rgba(240, 161, 41, 0.34), 0 0 36px rgba(224, 137, 26, 0.24), 0 0 52px rgba(204, 114, 18, 0.16), 0 0 72px rgba(184, 96, 14, 0.09), 0 0 96px rgba(164, 82, 12, 0.05);
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__word--fading {
  opacity: 0;
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .hero__word {
    transition: none;
  }
}

.hero__support {
  display: flex;
  flex-direction: column;
  /* So gewaehlt, dass der Abstand zu den CTA-Buttons genauso gross wirkt
     wie der Abstand vom rotierenden Wort zur ersten Zeile darueber. */
  margin-bottom: 50px;
  max-width: 870px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 44px;
}

@media (max-width: 1080px) {
  .hero__cta-row {
    justify-content: flex-start;
  }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 71px;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--hero-accent-light), var(--hero-accent));
  padding: 0 35px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--hero-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.hero__cta:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 71px;
  background: linear-gradient(180deg, var(--color-paper), var(--color-band));
  padding: 0 35px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero__cta-secondary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.22), 0 14px 26px rgba(0, 0, 0, 0.32);
}

.hero__cta-secondary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.22);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  gap: 32px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 32px;
}

@media (max-width: 1080px) {
  .hero__trust {
    justify-content: center;
  }
}

.hero__trust-stat {
  display: flex;
  flex-direction: column;
}

.hero__trust-num {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
}

.hero__trust-label {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.hero__trust-divider {
  width: 1px;
  height: 37px;
  background: rgba(255, 255, 255, 0.1);
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Handy-Oberkante buendig mit der Oberkante des rotierenden Worts: Groesse
   und Zentrierung des Phone-Mockups bleiben unveraendert (siehe
   .hero__phone-frame/.hero__phone), nur die Position innerhalb der Zeile
   wird nach oben verschoben - um genau die Hoehe von Headline + Zeilenabstand
   (.hero__inner-gap), die sonst oberhalb der Visual-Spalte liegt. */
@media (min-width: 1081px) {
  .hero__visual {
    align-self: flex-start;
    margin-top: calc(-1 * (var(--hero-headline-fs) + 8px + 20px));
  }

  /* Erster Buchstabe des rotierenden Worts auf gleicher Linie wie
     "Echte Menschen" darunter: beide starten an der linken Kante von
     .hero__inner statt das Wort ueber die volle Breite zu zentrieren. */
  .hero__headline {
    text-align: left;
  }
}

.hero__phone-frame {
  position: relative;
  width: 215px;
  height: 465px;
}

@media (max-width: 1080px) {
  .hero__visual {
    width: 100%;
  }
}

/* Smartphone-Mockup mit Kalender-App als Hero-Visual. Feste px-Werte
   (Referenzgroesse 290x628, ~0.76x eines echten iPhone-Renders), damit
   Rahmen, Dynamic Island und UI-Elemente im Massstab zueinander passen. */
.hero__phone {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 628px;
  border-radius: 48px;
  background: linear-gradient(155deg, #4c4f55 0%, #2a2c30 45%, #17181b 100%);
  box-shadow: 0 35px 70px -18px rgba(0, 0, 0, 0.6), 0 18px 40px -12px rgba(94, 234, 212, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.07);
  transform: translate(-50%, -50%) scale(0.74);
}

.hero__phone-btn {
  position: absolute;
  background: #111214;
  border-radius: 2px;
}

.hero__phone-btn--right {
  right: -2px;
  top: 114px;
  width: 2px;
  height: 56px;
}

.hero__phone-btn--left1 {
  left: -2px;
  top: 90px;
  width: 2px;
  height: 27px;
}

.hero__phone-btn--left2 {
  left: -2px;
  top: 128px;
  width: 2px;
  height: 44px;
}

.hero__phone-btn--left3 {
  left: -2px;
  top: 183px;
  width: 2px;
  height: 44px;
}

.hero__phone-screen {
  position: absolute;
  inset: 9px;
  border-radius: 39px;
  background: var(--color-paper);
  overflow: hidden;
}

.hero__phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #050505;
  border-radius: 16px;
  z-index: 5;
}

.hero__phone-statusbar {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

.hero__phone-statusicons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero__phone-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: 46px;
  font-family: var(--font-sans);
}

.hero__phone-appheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
}

.hero__phone-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.hero__phone-iconrow {
  display: flex;
  gap: 6px;
}

.hero__phone-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-band);
}

.hero__phone-weekstrip {
  display: flex;
  justify-content: space-between;
  padding: 8px 17px 7px;
}

.hero__phone-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.hero__phone-day em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--color-ink-mute);
}

.hero__phone-day b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.hero__phone-day--active em {
  color: var(--color-teal-deep);
}

.hero__phone-day--active b {
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 700;
}

.hero__phone-divider {
  height: 1px;
  background: var(--color-line);
  margin: 0 17px;
}

.hero__phone-timeline {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 17px 2px;
}

.hero__phone-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.hero__phone-row--last {
  margin-bottom: 0;
}

.hero__phone-time {
  width: 34px;
  flex-shrink: 0;
  padding-top: 8px;
  font-size: 8px;
  font-weight: 600;
  color: var(--color-ink-mute);
}

.hero__phone-time--free {
  color: #c3c8cc;
}

/* Termin-Slot: startet leer (nur die gestrichelte Freizeit-Linie sichtbar)
   und wird per JS (hero-phone-calendar.js) nach und nach befuellt - die
   Kartenhoehe waechst per grid-template-rows 0fr->1fr, waehrend die
   Freizeit-Linie ausblendet und die Karte einblendet. */
.hero__phone-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__phone-slot .hero__phone-freeline {
  transition: opacity 0.35s ease;
}

.hero__phone-eventwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__phone-eventwrap > .hero__phone-event {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__phone-row.is-filled .hero__phone-slot .hero__phone-freeline {
  opacity: 0;
}

.hero__phone-row.is-filled .hero__phone-eventwrap {
  grid-template-rows: 1fr;
}

.hero__phone-row.is-filled .hero__phone-event {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.15s;
  animation: hero-phone-event-glow 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

/* Kurzer heller Aufblitzer beim Erscheinen, der zu einem dezenten
   Teal-Schein absinkt - das Pendant zum Wort-Glow, nur farblich passend
   zum weissen Kalender-Screen statt zum dunklen Hero-Hintergrund. */
@keyframes hero-phone-event-glow {
  0% {
    box-shadow: 0 1px 2px rgba(154, 100, 8, 0.1);
  }
  55% {
    box-shadow: 0 0 0 1px rgba(251, 199, 95, 0.45), 0 4px 14px rgba(251, 199, 95, 0.55), 0 10px 34px rgba(247, 176, 60, 0.35);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(251, 199, 95, 0.28), 0 3px 10px rgba(251, 199, 95, 0.32), 0 8px 24px rgba(247, 176, 60, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__phone-slot .hero__phone-freeline,
  .hero__phone-eventwrap,
  .hero__phone-eventwrap > .hero__phone-event {
    transition: none;
  }

  .hero__phone-row.is-filled .hero__phone-event {
    animation: none;
    box-shadow: 0 0 0 1px rgba(251, 199, 95, 0.28), 0 3px 10px rgba(251, 199, 95, 0.32), 0 8px 24px rgba(247, 176, 60, 0.18);
  }
}

.hero__phone-event {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff3d6, #fce3a8);
  border-radius: 11px;
  padding: 5px 9px;
  box-shadow: 0 1px 2px rgba(154, 100, 8, 0.1);
}

.hero__phone-event--tall {
  padding: 8px 9px;
}

.hero__phone-event-time {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 1px;
}

.hero__phone-event-company {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.hero__phone-event-address {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  color: var(--color-ink-soft);
}

.hero__phone-freerow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.hero__phone-freeline {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--color-line) 0px, var(--color-line) 4px, transparent 4px, transparent 8px);
}

.hero__phone-navbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 8px 5px;
  border-top: 1px solid var(--color-line);
}

.hero__phone-navitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 600;
  color: var(--color-ink-mute);
}

.hero__phone-navitem--active {
  color: var(--color-teal-deep);
  font-weight: 700;
}

.hero__phone-homebar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 102px;
  height: 4px;
  border-radius: 2px;
  background: #c7cbcf;
}

/* ---------- Video-Intro (zentriert, 2-zeilige Überschrift) ---------- */

.video-intro {
  text-align: center;
}

.video-intro .kicker {
  justify-content: center;
}

.video-intro .section-title--video {
  max-width: 34rem;
  margin-inline: auto;
}

/* Der feste Zeilenumbruch greift erst, wenn die Spalte breit genug fuer
   genau 2 saubere Zeilen ist. Darunter (Tablet/Mobile) wird er ausgeblendet
   und text-wrap: balance verteilt den Satz selbst gleichmaessig - dadurch
   kein hart abgeschnittenes "B2B ..." mehr bei mittleren Fensterbreiten. */
.video-intro .section-title--video .section-title__br-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .video-intro .section-title--video {
    max-width: none;
  }

  .video-intro .section-title--video .section-title__br-desktop {
    display: inline;
  }
}

.video-intro .section-lead {
  max-width: 32rem;
  margin-inline: auto;
}

/* "Weitere Lösungen": breiter, damit die Einleitung auf Desktop in zwei
   gleichmäßigen Zeilen steht (balance verteilt den Satz). */
#marken .section-lead {
  max-width: 48rem;
}

/* ---------- Kundenlogos (eigene Sektion direkt unter dem Hero) ---------- */

.logo-band {
  margin-top: 2.75rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-line-dark);
  color: var(--color-cream);
  text-align: center;
}

/* Eigenstaendige Sektion direkt unter dem Hero. Ab 1024px fuellt sie - wie
   jede andere Startseiten-Sektion - einen Viewport (siehe Block am Dateiende)
   und zentriert Titel + Logo-Marquee darin. Die frueher hier genutzte
   Container-Haarlinie faellt weg: der eigene Viewport ist die Trennung zum
   Hero, eine kurze Linie mitten im gleichfarbigen Schwarz wirkte wie ein
   vergessenes Element. */
.page-home .logo-strip {
  padding-block: 0;
}

/* Kompakter Uebergang. Die Trennlinie zum Hero laeuft jetzt ueber die volle
   Breite (auf der .section, nicht im .container) - eine kurze Linie mitten
   im gleichfarbigen Schwarz wirkte wie ein vergessenes Element. */
.page-home .logo-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.page-home .logo-band--standalone {
  padding-block: 3rem;
  border-top: 0;
}

.page-home .logo-band__title {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.page-home .logo-marquee {
  margin-top: 2.5rem;
}

.logo-band--standalone {
  margin-top: 0;
  padding-block: 3rem;
}

.logo-band__title {
  display: inline-block;
  margin-inline: auto;
  max-width: none;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
  /* Cyan-Hintergrund eng um die Ueberschrift statt fuer die ganze Sektion -
     hebt nur den Satz hervor, Logos darunter bleiben auf dem durchgehenden
     Dunkel der Startseite. Gleicher Cyan-Ton wie die Kicker-Labels (z. B.
     "Die Ausgangslage"), Text dunkel fuer Kontrast auf dem hellen Grund. */
  background: var(--color-cyan);
  padding: 0.4rem 1.1rem;
  border-radius: 8px;
}

/* Ueberschrift auf breiten Viewports einzeilig, darunter normaler Umbruch. */
@media (min-width: 900px) {
  .logo-band__title {
    white-space: nowrap;
  }
}

.logo-marquee {
  margin-top: 2.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 3.5rem;
  animation: logo-marquee-scroll 24s linear infinite;
}

.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

.logo-marquee__logo {
  /* Jedes Logo passt sich in eine feste Box ein (Seitenverhaeltnis bleibt),
     statt fixer Hoehe - so werden sehr breite Wortmarken nicht uebergross
     und quadratische/kompakte Logos nicht winzig. */
  max-height: 34px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.75;
}

/* Referenz-Logos, die als Case-Study-Icon farbig vorliegen (Spryker,
   Gymondo, mk) - fuer den einheitlichen weissen Look im Marquee auf
   Weiss reduziert statt eine zweite Bildvariante zu pflegen. */
.logo-marquee__logo--mono {
  filter: brightness(0) invert(1);
}

/* Marken, deren Bild nur ein Icon ohne Schriftzug ist (Spryker, Gymondo),
   bekommen wie in den Referenz-Karten einen Namen daneben, sonst waeren
   sie im Marquee nicht als Firma erkennbar. */
.logo-marquee__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.logo-marquee__item .logo-marquee__logo {
  max-height: 30px;
  max-width: 30px;
}

.logo-marquee__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-cream);
  opacity: 0.75;
  white-space: nowrap;
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
  }
}

/* ---------- Problem ---------- */

.problem__title {
  margin-top: 1.25rem;
}

/* ---------- Section heading (wiederverwendet: Trust/Process/Results/Services/About) ---------- */

.section-title {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-title--narrow {
  max-width: 28rem;
  hyphens: auto;
}

/* Nutzerwunsch: Section-Überschriften (H2.section-title) samt Kicker/Lead
   generell zentriert. Etwas mehr max-width, damit kürzere Überschriften
   in einer Zeile stehen; lange brechen weiter über text-wrap: balance um. */
.page-home [data-reveal]:has(> .section-title) {
  text-align: center;
}

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

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

.section-lead {
  margin-top: 1.25rem;
  max-width: 36rem;
  line-height: 1.7;
}

.section-lead--light {
  color: var(--color-ink-soft);
}

.section-lead--dark {
  color: var(--color-cream-soft);
}

/* ---------- Trust / Haltung ---------- */

/* Die Haltungs-Punkte sitzen seit dem 09.09.2026-Merge als volle Breite
   unter dem zweispaltigen "Über AS Concepts"-Layout (siehe .about__stance).
   .trust__video wird weiter von der eigenständigen Kundenstimmen-Sektion
   genutzt. */

.trust__video {
  margin-top: 2.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
}

/* Auf dem Desktop das Video schmaler und zentriert halten, damit Kicker,
   Überschrift, Lead und Player der Video-Sektion zusammen in einen
   Viewport passen (auf einen Blick erfassbar). Darunter bleibt es volle
   Breite. */
@media (min-width: 1024px) {
  .trust__video {
    max-width: 720px;
    margin-top: 2rem;
    margin-inline: auto;
  }
}

.trust__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Platzhalter, solange fuer das Vimeo-Video noch keine Cookie-Einwilligung
   vorliegt (siehe partials/cookie-consent.html) */
.trust__video-consent {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}

.trust__video-consent-text {
  max-width: 24rem;
  color: var(--color-cream-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.trust__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }
}

/* Drei Haltungs-Punkte nebeneinander unter dem "Über AS Concepts"-Layout. */
@media (min-width: 768px) {
  .trust__grid--triple {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Haltungs-Punkte als eigene Zeile unter der .about__split-Zeile. */
.about__stance {
  margin-top: 3rem;
}

.page-home .about__stance .trust__grid {
  margin-top: 0;
}

.trust__point {
  border-top: 1px solid var(--color-line);
  padding-top: 1.25rem;
}

.trust__point-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.trust__point-text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* ---------- Kanäle ---------- */

.channels__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}

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

.channels__card {
  padding: 2rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
}

.channels__icon {
  display: inline-flex;
  color: var(--color-teal-deep);
}

.channels__icon svg {
  width: 2rem;
  height: 2rem;
}

/* Eigene Akzentfarbe je Karte statt einer Farbe für das ganze Grid. */
.channels__card:nth-child(5n+1) .channels__icon { color: var(--color-teal); }
.channels__card:nth-child(5n+2) .channels__icon { color: var(--color-cyan); }
.channels__card:nth-child(5n+3) .channels__icon { color: var(--color-mint); }
.channels__card:nth-child(5n+4) .channels__icon { color: var(--color-purple); }
.channels__card:nth-child(5n+5) .channels__icon { color: var(--color-orange); }

.channels__title {
  margin-top: 1.125rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
}

.channels__text {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* ---------- Referenz-Karten (Flip) ----------
   Nach dem Vorbild der Sektion "So sehen erfolgreiche Telesales Kampagnen aus"
   von asconcepts.de: Vorderseite = Kundenbild + Logo + Name, beim Hover klappt
   die Karte auf die Rückseite mit Kennzahl + Kurztext + Case-Study-Link.
   Ohne Hover (Touch) werden beide Seiten gestapelt gezeigt (kein Flip). */

.refcards {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}

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

@media (min-width: 1024px) {
  .refcards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.refcard {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
}

/* Vorderseite */
.refcard__front {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1.75rem;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
}

.refcard__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 15, 0.15) 0%, rgba(11, 13, 15, 0.55) 55%, rgba(11, 13, 15, 0.9) 100%),
    rgba(34, 224, 234, 0.4);
}

.refcard__logo {
  position: relative;
  z-index: 1;
  max-width: 58%;
  max-height: 40%;
  object-fit: contain;
  /* Alle Kundenlogos einheitlich in Weiß über dem getönten Bild. */
  filter: brightness(0) invert(1);
}

/* Karten, deren Logo bereits die Wortmarke enthält (USC, mk): kein
   zusätzliches Namens-Label, dafür das Logo etwas größer. */
.refcard--wordmark .refcard__logo {
  max-width: 64%;
  max-height: 48%;
}

.refcard__name {
  position: absolute;
  z-index: 1;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* Rückseite */
.refcard__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.refcard__metric {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-cream);
  white-space: nowrap;
}

.refcard__unit {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: normal;
  color: var(--color-cream-soft);
}

.refcard__caption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-cream-soft);
}

.refcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-cyan);
}

.refcard__link-arrow {
  transition: transform 0.2s ease;
}

.refcard__link:hover .refcard__link-arrow {
  transform: translateX(3px);
}

/* --- Flip nur wo Hover verfügbar ist --- */
@media (hover: hover) and (min-width: 640px) {
  .refcard {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
  }

  .refcard__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
  }

  .refcard:hover .refcard__inner,
  .refcard:focus-within .refcard__inner {
    transform: rotateY(180deg);
  }

  .refcard__front,
  .refcard__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-line-dark);
    overflow: hidden;
  }

  .refcard__front {
    aspect-ratio: auto;
  }

  /* Umgedrehte Vorderseite faengt sonst die Klicks ab (Hit-Test trifft das
     Logo statt den Case-Study-Link auf der Rueckseite). */
  .refcard:hover .refcard__front,
  .refcard:focus-within .refcard__front {
    pointer-events: none;
  }

  .refcard__back {
    transform: rotateY(180deg);
    background: var(--color-dark-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .refcard__inner {
    transition: none;
  }
}

/* Platzhalter-Kachel für eine kommende Case Study: kein Bild, kein Flip,
   nur Ankündigungstext in gestricheltem Rahmen. */
.refcard--soon {
  border-style: dashed;
}

.refcard--soon .refcard__front {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

.refcard--soon .refcard__front::after {
  content: none;
}

.refcard--soon .refcard__back {
  display: none;
}

.refcard__soon-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
}

.refcard__soon-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-cream-soft);
}

@media (hover: hover) and (min-width: 640px) {
  .refcard--soon .refcard__front {
    border-style: dashed;
  }

  .refcard--soon:hover .refcard__inner,
  .refcard--soon:focus-within .refcard__inner {
    transform: none;
  }
}

/* ---------- Services ---------- */

.services__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.services__card {
  scroll-margin-top: 6rem;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.services__card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* Ton, in den die entsättigten Fotos verrechnet werden (Duoton). */
  background: var(--color-teal-deep);
}

.services__card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Alle drei Freisteller auf denselben Kopf-/Schulter-Ausschnitt bringen. */
  object-position: 50% 6%;
  /* Die drei knalligen Freisteller-Hintergründe (Cyan / Lila / Grün) werden
     entsättigt, abgedunkelt und über den teal-deep-Hintergrund der
     .services__card-media zu einem einheitlichen, dunklen Duoton verrechnet -
     so wirken alle drei Karten wie aus einem Guss und der harte Farbbruch
     gegen die ruhige dunkle Seite ist weg. Die Person tritt durch die helle
     Freisteller-Kontur (Rim-Light) aus dem dunklen Grund hervor. Die
     Grundhelligkeit ist pro Karte gesetzt (s. u.), da die drei Original-
     Hintergründe sehr unterschiedlich hell sind. */
  /* Originalfarben der Freisteller (Duoton-Verrechnung entfernt). */
  mix-blend-mode: normal;
}

/* Unterkante des Fotos weich in den Kartenkörper übergehen lassen. */
.services__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(32, 38, 44, 0) 78%, var(--color-dark-2) 100%);
}

/* Zielbild: alle drei gleich dunkel und moody, im selben Duoton-Ton wie der
   Rest der Seite. Cyan (hell) muss am stärksten runter, Lila (dunkel) darf
   leicht hoch. Werte haengen am Originalfoto (Cyan/Gruen), nicht an der
   Karten-Position - Strategie und Vertrieb haben ihre Fotos getauscht, die
   Filter wandern mit dem jeweiligen Foto mit. */
#leistungen-marketing .services__card-photo {
  object-position: 50% 2%;
}

/* Fotos von Strategie und Vertrieb gespiegelt (Blickrichtung/Koerperhaltung
   gedreht), nachdem sie ihre Kartenposition getauscht haben. */
#leistungen-strategie .services__card-photo,
#leistungen-vertrieb .services__card-photo {
  transform: scaleX(-1);
}

.services__card-body {
  padding: 2.25rem;
}

@media (min-width: 768px) {
  .services__card-body {
    padding: 2.75rem;
  }
}

.services__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

.services__text {
  margin-top: 0.75rem;
  max-width: 28rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.services__list {
  margin-top: 2rem;
  border-top: 1px solid var(--color-line);
}

.services__list-item {
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
}

/* Punkte ohne eigene Unterseite: kein Link, kein Pfeil. */
.services__list-item--plain {
  padding-block: 1rem;
}

.services__list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  color: inherit;
  transition: color 0.15s ease;
}

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

.services__list-arrow {
  color: var(--color-teal-deep);
  transition: transform 0.15s ease;
}

.services__list-link:hover .services__list-arrow {
  transform: translateX(3px);
}

/* ---------- Marken (Unsere Marken) ---------- */
/* Gleicher Karten-Aufbau wie .channels__card/.services__card (Rahmen,
   Radius, Hintergrund), gleicher Pfeil-Link wie .refcard__link. Eigene
   Klassen, damit diese Sektion unabhaengig von Kanaele/Leistungen bleibt. */

.brands__grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 2rem;
}

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

@media (min-width: 1024px) {
  .brands__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.brands__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
  text-align: left;
}

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

.brands__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
}

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

.brands__link {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-teal-deep);
}

.brands__link-arrow {
  transition: transform 0.2s ease;
}

.brands__link:hover .brands__link-arrow {
  transform: translateX(3px);
}

/* ---------- About ---------- */

/* Vertikaler Fluss: Intro (Text) -> Split (Foto + Werte nebeneinander) ->
   Haltungs-Punkte. Bewusst kein hohes 2-Spalten-Layout mehr, damit rechts
   neben dem Foto keine toten Flaechen entstehen. */
.about__layout {
  display: flex;
  flex-direction: column;
}

/* Intro (Kicker + Überschrift + Absatz) zentriert wie die übrigen
   Startseiten-Sektionen. */
.about__intro {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.about__split {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .about__split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    gap: 2rem;
  }
}

.about__text {
  margin-top: 1.25rem;
  max-width: none;
  margin-inline: 0;
  text-align: center;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.about__text + .about__text {
  margin-top: 1rem;
}

.about__values {
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background: var(--color-band);
  padding: 2rem;
}

.about__values-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-mute);
}

.about__values-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about__value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-ink);
}

.about__value:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about__value-dot {
  height: 0.375rem;
  width: 0.375rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-teal);
}

/* Team-Foto sitzt in der .about__split-Zeile neben der Werte-Karte und
   fuellt deren Hoehe (kein Leerraum daneben). Auf Mobil ein flaches 3:2. */
.about__photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* Ab 900px fuellt das Foto die Hoehe der Werte-Karte: absolut positioniertes
   Bild, damit es die Zeilenhoehe nicht selbst bestimmt. */
@media (min-width: 900px) {
  .about__photo {
    aspect-ratio: auto;
    position: relative;
    min-height: 22rem;
  }

  .about__photo img {
    position: absolute;
    inset: 0;
  }
}

/* Platzhalter, solange noch kein echtes Team-Foto geliefert wurde. */
.about__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-line);
  background: var(--color-band);
}

.about__photo-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

/* ---------- Closing CTA ---------- */

.closing-cta {
  background: var(--color-surface);
}

.closing-cta__panel {
  border-radius: 1.5rem;
  background: var(--color-dark);
  padding: 3.5rem 2rem;
  color: var(--color-cream);
}

@media (min-width: 768px) {
  .closing-cta__panel {
    padding: 5rem 4rem;
  }
}

.closing-cta__layout {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .closing-cta__layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.closing-cta__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-cream);
}

@media (min-width: 768px) {
  .closing-cta__title {
    font-size: 3rem;
  }
}

.closing-cta__text {
  margin-top: 1.5rem;
  max-width: 28rem;
  line-height: 1.7;
  color: var(--color-cream-soft);
}

.closing-cta__btn {
  margin-top: 2rem;
}

.closing-cta__info {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--color-line-dark);
  padding-top: 2rem;
}

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

.closing-cta__info-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.closing-cta__info-value {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  color: var(--color-cream);
}

.closing-cta__fields {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-line-dark);
  padding-top: 2rem;
}

.closing-cta__fields-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.closing-cta__fields-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .closing-cta__fields-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.closing-cta__fields-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-cream);
}

.closing-cta__fields-list {
  margin-top: 0.625rem;
  display: grid;
  gap: 0.4rem;
}

.closing-cta__fields-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-cream-soft);
}

.closing-cta__fields-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-cyan);
}

.closing-cta__form {
  border-radius: 1rem;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .closing-cta__form {
    padding: 2rem;
  }
}

/* Mobil: Das Pipedrive-Formular braucht Breite, sonst werden Felder und
   Button rechts abgeschnitten (Embed hat overflow: hidden). */
@media (max-width: 599px) {
  .closing-cta__panel,
  .page-home .closing-cta__panel {
    padding: 2.5rem 1rem;
  }

  .closing-cta__form {
    padding: 1rem;
  }
}

.closing-cta__form-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.closing-cta__form-embed {
  margin-top: 1rem;
}

/* Platzhalter, solange fuer das Pipedrive-Formular noch keine
   Cookie-Einwilligung vorliegt (siehe partials/cookie-consent.html) */
.closing-cta__form-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* `display: flex` oben übersteuert sonst das per JS gesetzte hidden-Attribut
   (partials/cookie-consent.html), sodass der Platzhalter nach Zustimmung
   weiterhin neben dem echten Pipedrive-Formular sichtbar bliebe. */
.closing-cta__form-consent[hidden] {
  display: none;
}

.closing-cta__form-consent-text {
  max-width: 22rem;
  color: var(--color-cream-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- Startseite: durchgehend dunkler Hintergrund wie im Hero ---------- */
/* Nur ueber .page-home (Body-Klasse von index.html) scoped, weil home.css
   auch auf anderen Seiten (Leistungen, Ueber uns, Karriere, Case Studies)
   eingebunden ist und dort unveraendert bleiben soll. Die Video-Sektion
   ist inzwischen ebenfalls dunkel (siehe unten). */

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

.page-home .closing-cta {
  background: var(--color-dark);
}

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

/* Kicker (in den dunklen Sektionen) */
.page-home .section--surface .kicker,
.page-home .section--band .kicker {
  color: var(--color-cyan);
}

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

/* Ueberschrift/Lead (wiederverwendet ueber mehrere Sektionen) */
.page-home .section--surface .section-title,
.page-home .section--band .section-title {
  color: var(--color-cream);
}

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

/* Haltungs-Punkte-Grid unter "Über AS Concepts" (.trust__video bleibt aussen
   vor, das liegt in der eigenständigen Kundenstimmen-Sektion) */
.page-home .trust__point {
  border-top-color: var(--color-line-dark);
}

.page-home .trust__point-title {
  color: var(--color-cream);
}

.page-home .trust__point-text {
  color: var(--color-cream-soft);
}

/* Kanäle */
.page-home .channels__card {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-home .channels__icon {
  color: var(--color-cyan);
}

.page-home .channels__title {
  color: var(--color-cream);
}

.page-home .channels__text {
  color: var(--color-cream-soft);
}

/* Marken */
.page-home .brands__card {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-home .brands__label {
  color: var(--color-cyan);
}

.page-home .brands__title {
  color: var(--color-cream);
}

.page-home .brands__text {
  color: var(--color-cream-soft);
}

.page-home .brands__link {
  color: var(--color-cyan);
}

/* Services */
.page-home .services__card {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-home .services__title {
  color: var(--color-cream);
}

.page-home .services__text {
  color: var(--color-cream-soft);
}

.page-home .services__list {
  border-top-color: var(--color-line-dark);
}

.page-home .services__list-item {
  border-bottom-color: var(--color-line-dark);
  color: var(--color-cream);
}

.page-home .services__list-arrow {
  color: var(--color-cyan);
}

.page-home .services__list-link:hover {
  color: var(--color-cyan);
}

/* Problem (nummerierte Liste) */
.page-home .numbered-list__item {
  border-top-color: var(--color-line-dark);
}

.page-home .numbered-list--grid .numbered-list__item {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

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

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

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

/* Ueber uns */
.page-home .about__text {
  color: var(--color-cream-soft);
}

.page-home .about__values {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-home .about__values-label {
  color: var(--color-cream-mute);
}

.page-home .about__value {
  border-bottom-color: var(--color-line-dark);
  color: var(--color-cream);
}

.page-home .about__photo--placeholder {
  border-color: var(--color-line-dark);
  background: var(--color-dark-2);
}

.page-home .about__photo-label {
  color: var(--color-cream-mute);
}

/* FAQ */
.page-home .faq-item {
  border-top-color: var(--color-line-dark);
}

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

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

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

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

/* ---------- Branchen-Slider (Sektion "Branchenerfahrung") ---------- */

.industry-slider {
  margin-top: 3rem;
}

.industry-slider__viewport {
  position: relative;
  overflow: hidden;
  height: clamp(26rem, 62vh, 44rem);
  background: var(--color-dark);
}

.industry-slider__stage {
  position: absolute;
  inset: 0;
}

.industry-slider__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.industry-slider__slide.is-active {
  opacity: 1;
}

/* Dunkler Verlauf: an den Rändern kräftig (Nachbar-Labels treten zurück),
   in der Mitte genug für das aktive Label, unten für Pfeile und Zähler. */
.industry-slider__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25, 28, 32, 0.85) 0%, rgba(25, 28, 32, 0.42) 30%, rgba(25, 28, 32, 0.42) 70%, rgba(25, 28, 32, 0.85) 100%),
    linear-gradient(0deg, rgba(25, 28, 32, 0.6), rgba(25, 28, 32, 0) 45%);
  pointer-events: none;
}

.industry-slider__grid {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.industry-slider__grid span {
  flex: 1 1 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.industry-slider__grid span:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.industry-slider__labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  /* Nachbar-Labels zu den Rändern hin ausblenden, damit sie das aktive
     Label nicht mehr anschneiden/überlagern. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 72%, transparent 97%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 72%, transparent 97%);
}

.industry-slider__label-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 8vw, 7rem);
  padding-inline: 2rem;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.1, 1);
  will-change: transform;
}

.industry-slider__label {
  flex: 0 0 auto;
  /* Einzeilig: kein Baseline-Sprung mehr zwischen ein- und zweizeiligen
     Branchennamen. */
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 3rem);
  line-height: 1.1;
  /* Nachbarn deutlich zurücknehmen (blass + kleiner), aktives Label tritt
     klar hervor. */
  color: rgba(255, 255, 255, 0.13);
  transform: scale(0.78);
  transform-origin: center;
  transition: color 0.5s ease, transform 0.5s ease;
}

.industry-slider__label.is-active {
  color: var(--color-cream);
  transform: scale(1);
  /* Lesbarkeit über den unterschiedlich hellen Branchenbildern absichern. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.industry-slider__nav {
  position: absolute;
  left: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  gap: 0.875rem;
}

.industry-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(25, 28, 32, 0.4);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.industry-slider__arrow svg {
  width: 2.5rem;
  height: auto;
}

.industry-slider__arrow:hover {
  color: #fff;
  background: rgba(25, 28, 32, 0.75);
  border-color: rgba(255, 255, 255, 0.55);
}

.industry-slider__arrow:active {
  transform: scale(0.94);
}

.industry-slider__arrow:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.industry-slider__count {
  position: absolute;
  right: clamp(1.5rem, 5vw, 3rem);
  bottom: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 4.5rem;
  font-family: var(--font-display);
}

.industry-slider__count-current {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-cream);
}

.industry-slider__count-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.industry-slider__count-total {
  align-self: flex-end;
  font-size: 0.95rem;
  color: var(--color-cream-soft);
}

@media (max-width: 600px) {
  .industry-slider__labels {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 85%, transparent 99%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 85%, transparent 99%);
  }

  .industry-slider__nav {
    gap: 0.625rem;
  }

  .industry-slider__arrow {
    padding: 0.6rem 0.8rem;
  }

  .industry-slider__arrow svg {
    width: 2rem;
  }
}

/* ---------- Startseite: Rhythmus - eine Sektion pro Viewport ---------- */
/* Chef-Vorgabe (09.09.2026): jede Sektion soll auf einen Bildschirm passen,
   ohne dass man innerhalb einer Sektion scrollen muss - dabei aber sauber
   gestaltet, nicht als harte Praesentations-Slides. Umsetzung:

   - Design-Review-Punkt 8: die seitenweit sehr grosszuegigen vertikalen
     Abstaende gestrafft (padding-block 6/7rem -> 4/4.5rem, innere Kopf-zu-
     Inhalt-Abstaende 3.5rem -> 2.75rem). Gilt auf allen Breiten.
   - Ab 1024px bekommt jede inhaltliche Sektion mindestens die Hoehe des
     sichtbaren Bereichs unter dem (sticky) Header und zentriert ihren Inhalt
     vertikal. "safe center": laeuft der Inhalt auf kleinen Laptops doch
     ueber (Kontaktformular, FAQ mit vielen offenen Panels), richtet er sich
     oben aus statt oben + unten abgeschnitten zu werden.
   - Der duenne Kundenlogo-Streifen und das Foto-Band sind bewusst KEINE
     vollhohen Sektionen (ein bildschirmfuellendes Logo-Band / Einzelfoto
     waere viel Leere ohne Mehrwert) - sie bleiben kompakte Interstitials
     und passen als solche ohnehin auf einen Viewport.

   Alles auf .page-home gescoped, weil home.css auch auf anderen Seiten
   eingebunden ist (Leistungen, Ueber uns, Karriere, Case Studies). */

/* Die Startseite ist durchgehend dunkel - den Body-Grund mitziehen, damit
   an keiner Sektionsfuge der weisse Standard-Body-Hintergrund durch eine
   Sub-Pixel-Luecke blitzt (entsteht durch das Stapeln vieler Sektionen mit
   calc(100vh - ...)-Mindesthoehe). */
.page-home {
  background: var(--color-dark);
}

.page-home .section {
  padding-block: 4rem;
}

/* Logo-Streifen behaelt seinen Null-Eigenabstand (Band traegt ihn selbst). */
.page-home .logo-strip {
  padding-block: 0;
}

@media (min-width: 768px) {
  .page-home .section {
    padding-block: 4.5rem;
  }

  .page-home .services__grid,
  .page-home .channels__grid,
  .page-home .trust__grid,
  .page-home .refcards {
    margin-top: 2.75rem;
  }
}

@media (min-width: 1024px) {
  /* Der Kundenlogo-Streifen (.logo-strip) ist bewusst ausgenommen: ein Titel
     plus eine schmale Logo-Reihe in einem bildschirmhohen Schwarz wirkt leer.
     Er bleibt ein kompakter Uebergang (Abstand kommt von .logo-band--
     standalone, s. o.) und sitzt am oberen Rand des zweiten Screens direkt
     unter dem Hero. Das Foto-Band ist ohnehin kein .section. */
  .page-home .section:not(.logo-strip) {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: calc(100vh - var(--header-height));
  }

  /* Leistungen ist die inhaltsreichste Sektion (3 Karten mit Foto, Text und
     Unterpunkt-Liste). Auf dem Desktop kompakter, damit sie moeglichst auf
     einen Viewport passt: flacheres Kartenbild, engeres Body-Padding und
     engere Listenzeilen. */
  .page-home .services__card-media {
    /* Fast quadratisch statt 16:9, damit bei den hochformatigen Freistellern
       auch Schultern, Oberkörper und Arme zu sehen sind. */
    aspect-ratio: 9 / 10;
  }

  .page-home .services__card-photo,
  .page-home #leistungen-marketing .services__card-photo {
    object-position: 50% 0;
  }

  .page-home .services__card-body {
    padding: 2rem;
  }

  .page-home .services__list {
    margin-top: 1.25rem;
  }

  .page-home .services__list-link,
  .page-home .services__list-item--plain {
    padding-block: 0.8rem;
  }

  /* Kontakt: Panel-Innenabstand gestrafft. Die Sektion bleibt wegen des
     Pipedrive-Formulars (feste Feldhoehen, externes Embed) hoeher als ein
     Viewport - das ist bei einem Kontaktformular als Schluss-Sektion
     vertretbar; safe center richtet sie oben aus, sodass man normal
     hineinscrollt. */
  .page-home .closing-cta__panel {
    padding: 3.5rem 3rem;
  }

  .page-home .closing-cta__info {
    margin-top: 2rem;
    padding-top: 1.75rem;
    gap: 1.25rem;
  }
}

/* ---------- Leads wie am Fließband (Hintergrundvideo-Band) ---------- */
.fliessband {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(18rem, 38vw, 34rem);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-dark-2), var(--color-dark));
}

/* Video deckt die Fläche wie object-fit: cover ab (16:9-iframe). */
.fliessband__media {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}

.fliessband__media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
  transform: translate(-50%, -50%);
  border: 0;
}

.fliessband__overlay {
  position: absolute;
  inset: 0;
  background: rgba(25, 28, 32, 0.62);
  pointer-events: none;
}

.fliessband__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.fliessband__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-cream);
}

/* Button zum Laden nur sichtbar, solange das Video nicht läuft. */
.fliessband.is-video .fliessband__consent {
  display: none;
}

/* Pause-Knopf (WCAG 2.2.2: automatisch startende Bewegung muss anhaltbar sein). */
.fliessband__toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(25, 28, 32, 0.6);
  cursor: pointer;
}

.fliessband__toggle-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.75rem;
  height: 0.875rem;
  border-inline: 0.25rem solid var(--color-cream);
}

.fliessband__toggle.is-paused .fliessband__toggle-icon {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 0.4375rem solid transparent;
  border-left: 0.75rem solid var(--color-cream);
  margin-left: 0.8rem;
}

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

/* ---------- Vier Hürden: Icon-Badge und eigene Farbe je Karte ---------- */
.page-home .numbered-list--grid .hurdle {
  border: 1px solid var(--hurdle);
  background: oklch(from color-mix(in oklch, var(--hurdle) 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);
}

.hurdle__head {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.hurdle__icon {
  display: inline-flex;
  height: 3.25rem;
  width: 3.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--hurdle);
  color: var(--color-dark);
}

.hurdle__icon svg {
  height: 1.75rem;
  width: 1.75rem;
}


/* ---------- Mehr Farbe: gefärbte Karten auf der Startseite ----------
   Gleiche Logik wie bei den Hürden: Kartenfläche in der Akzentfarbe,
   Icons als gefüllte Kästchen. Reihenfolge: Lila, Mint, Orange, Cyan. */

.page-home .channels__card:nth-child(4n+1),
.page-home .trust__point:nth-child(4n+1) { --tint: var(--color-purple); }
.page-home .channels__card:nth-child(4n+2),
.page-home .trust__point:nth-child(4n+2) { --tint: var(--color-mint); }
.page-home .channels__card:nth-child(4n+3),
.page-home .trust__point:nth-child(4n+3) { --tint: var(--color-orange); --tint-mix: 74%; --tint-l: 0.58; --tint-c: 0.175; }
.page-home .channels__card:nth-child(4n+4),
.page-home .trust__point:nth-child(4n+4) { --tint: var(--color-cyan); }

.page-home .channels__card,
.page-home .trust__point {
  border: 1px solid 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-home .channels__card .channels__icon {
  padding: 0.8rem;
  border-radius: 12px;
  background: var(--tint);
  color: var(--color-dark);
}

.page-home .trust__point {
  border-radius: 6px;
  padding: 1.5rem;
}

/* Leistungskarten: Kategorie-Farbe (Strategie grün, Marketing lila, Vertrieb türkis) */
.page-home #leistungen-strategie { --cat: var(--color-cat-strategie); }
.page-home #leistungen-marketing { --cat: var(--color-purple); }
.page-home #leistungen-vertrieb { --cat: var(--color-cat-vertrieb); }

/* Bildunterkante geht in die getönte Kartenfläche über */
.page-home .services__card[id^="leistungen-"] .services__card-media::after {
  background: linear-gradient(180deg, transparent 78%, color-mix(in oklch, var(--cat) 52%, var(--color-dark-2)) 100%);
}

/* Gleiche Logik wie bei den Hürden- und Kanal-Kacheln: Rahmen und getönte Fläche in der Kartenfarbe */
.page-home .services__card[id^="leistungen-"] {
  border: 1px solid var(--cat);
  background: oklch(from color-mix(in oklch, var(--cat) 52%, var(--color-dark-2)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
}

.page-home .services__card[id^="leistungen-"] .services__title,
.page-home .services__card[id^="leistungen-"] .services__list-arrow {
  color: var(--cat);
}

/* Titel und Pfeile „Marketing": hellere Variante des Foto-Lilas, weil #342562 auf dem dunklen Kartenkörper nicht lesbar wäre */
.page-home #leistungen-marketing .services__title,
.page-home #leistungen-marketing .services__list-arrow {
  color: #a089e6;
}

/* Titel „Strategie" im Grün des Foto-Hintergrunds der Karte */
.page-home #leistungen-strategie .services__title {
  color: #44dba6;
}

/* Links beim Darueberfahren in der Farbe ihrer Oberkategorie, gleich wie der
   Kartentitel (Wunsch der Nutzerin, 10.11.2026). */
.page-home #leistungen-strategie { --cat-link: #44dba6; }
.page-home #leistungen-marketing { --cat-link: #a089e6; }
.page-home #leistungen-vertrieb { --cat-link: var(--color-cat-vertrieb); }

.page-home .services__card[id^="leistungen-"] .services__list-link:hover,
.page-home .services__card[id^="leistungen-"] .services__list-link:focus-visible {
  color: var(--cat-link);
}

/* Werte-Punkte (Was uns leitet): einfarbig türkis, siehe .about__value-dot (Wunsch 02.11.2026) */

/* Vier Hürden: Karteninhalt zentriert */
.page-home .numbered-list--grid .hurdle {
  text-align: center;
}

.page-home .hurdle .hurdle__head {
  justify-content: center;
}

.page-home .numbered-list--grid .hurdle .numbered-list__text {
  margin-inline: auto;
}

/* Test: Titel oben, dann Foto, dann Text und Links */
.page-home .services__card-head {
  padding: 1.5rem 2rem 1.1rem;
  text-align: center;
}

.page-home .services__card-head .services__title {
  margin: 0;
}

.page-home .services__card-body--after-media {
  padding-top: 0.5rem;
}

/* Bereich unter dem Foto wieder ohne Tönung (dunkler Kartengrund) */
.page-home .services__card[id^="leistungen-"] {
  background: var(--color-dark-2);
}

.page-home .services__card[id^="leistungen-"] .services__card-media::after {
  background: linear-gradient(180deg, transparent 78%, var(--color-dark-2) 100%);
}

/* Leistungskarten: Foto-Hover. Die Person zoomt leicht heran, die Pfeile der Links schieben sich nacheinander nach rechts. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .services__card-photo {
    transform-origin: 50% 100%;
    transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .page-home .services__card:hover .services__card-photo,
  .page-home .services__card:focus-within .services__card-photo {
    scale: 1.06;
  }

  .page-home .services__list-arrow {
    display: inline-block;
    transition: translate 0.35s ease;
  }

  .page-home .services__card:hover .services__list-arrow,
  .page-home .services__card:focus-within .services__list-arrow {
    translate: 6px 0;
  }

  .page-home .services__list-item:nth-child(2) .services__list-arrow { transition-delay: 0.06s; }
  .page-home .services__list-item:nth-child(3) .services__list-arrow { transition-delay: 0.12s; }
  .page-home .services__list-item:nth-child(4) .services__list-arrow { transition-delay: 0.18s; }
}

/* Case-Studies-Überschrift: ab Desktop in einer Zeile */
@media (min-width: 1024px) {
  .page-home #ergebnisse .section-title {
    max-width: none;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .page-home #ergebnisse .section-lead {
    max-width: 62rem;
    text-wrap: balance;
  }
}

/* Kundentypen-Kacheln (4 Stück): Modifier auf .refcards, Flip-Verhalten
   bleibt unverändert. Vorderseite zeigt ein Linien-Icon statt Logo, die
   Rückseite nur den Link "So gehen wir vor". */
@media (min-width: 1024px) {
  .refcards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.refcard__icon {
  position: relative;
  z-index: 1;
  width: 48%;
  max-width: 8rem;
  height: auto;
  color: var(--color-cyan);
  fill: rgba(34, 224, 234, 0.16);
  filter: drop-shadow(0 0 14px rgba(34, 224, 234, 0.35));
}

.refcards--4 .refcard__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.refcards--4 .refcard__name {
  position: static;
  z-index: 1;
  font-size: 0.9rem;
}

.refcards--4 .refcard__link {
  margin-top: 0;
  font-size: 1.05rem;
}

/* Jede Kundentyp-Kachel hat ihre eigene Markenfarbe (--tile). */
.refcards--4 .refcard:nth-child(1) { --tile: var(--color-cyan); }
.refcards--4 .refcard:nth-child(2) { --tile: var(--color-mint); }
.refcards--4 .refcard:nth-child(3) { --tile: var(--color-orange); --tint-mix: 74%; --tint-l: 0.58; --tint-c: 0.175; }
.refcards--4 .refcard:nth-child(4) { --tile: var(--color-purple); }

.refcards--4 .refcard__front {
  background: oklch(from color-mix(in oklch, var(--tile) var(--tint-mix, 52%), var(--color-dark)) min(l, var(--tint-l, 0.52)) min(calc(c * 1.6), var(--tint-c, 0.4)) h);
  border-color: var(--tile);
}

.refcards--4 .refcard__front::after {
  content: none;
}

.refcards--4 .refcard__icon {
  color: var(--tile);
  fill: color-mix(in srgb, var(--tile) 22%, transparent);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tile) 55%, transparent));
}

.refcards--4 .refcard__back {
  background: oklch(from color-mix(in oklch, var(--tile) 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);
  border-color: var(--tile);
}

.refcards--4 .refcard__link {
  color: #fff;
}

/* Über-uns-Block: Der Reveal "von rechts" (data-reveal=right) verschiebt das Element im Ausgangszustand um 40 px nach rechts. Ohne Beschneiden wird die Seite auf dem Handy waagerecht scrollbar (16 px bei 390 px Breite). */
.page-home #ueber-uns {
  overflow-x: clip;
}

/* Was uns leitet: nur noch vier Werte, dafuer groesser (Ahmed, 03.11.2026) */
.page-home .about__values-list {
  gap: 1rem;
}
.page-home .about__value {
  gap: 1rem;
  padding-bottom: 1rem;
  font-size: 1.375rem;
  font-weight: 500;
}
.page-home .about__value-dot {
  height: 0.5rem;
  width: 0.5rem;
}

/* So gehen wir vor: Vorne und hinten bilden Symbol (Icon bzw. Fragezeichen)
   und Text eine Gruppe in der Kachelmitte, der Text steht direkt unter dem
   Symbol. Beide Textzeilen reservieren zwei Zeilen Hoehe, damit Symbol und
   Text vorne und hinten exakt auf gleicher Hoehe liegen. Text und Symbol
   wechseln beim Umdrehen die Farbe (vorne weiss, hinten Kachelfarbe). */
.refcards--4 .refcard__link {
  color: var(--tile);
}
.refcards--4 .refcard__back > .refcard__q {
  display: none;
}
@media (hover: hover) and (min-width: 640px) {
  .refcards--4 .refcard__front,
  .refcards--4 .refcard__back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 1rem;
  }
  .refcards--4 .refcard__name,
  .refcards--4 .refcard__link {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 2.6em;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .refcards--4 .refcard__name {
    display: block;
  }
  .refcards--4 .refcard__back > .refcard__q {
    display: block;
    flex: none;
    width: 48%;
    max-width: 8rem;
    height: auto;
    aspect-ratio: 1;
    color: var(--tile);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tile) 55%, transparent));
  }
}

/* So finden wir deinen nächsten Kunden: vier Schritte als System
   (Daten, Signale, Ansprache, Kanal), darunter die Kanäle im Überblick. */
.page-home .channels__flow {
  counter-reset: none;
}
@media (min-width: 720px) {
  .page-home .channels__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .page-home .channels__flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}
.channels__step {
  position: relative;
}
.channels__flow .channels__card,
.channels__tiles .channels__card {
  text-align: center;
}
.channels__flow .channels__icon,
.channels__tiles .channels__icon {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
/* "Unser System": alle vier Titel einzeilig. Der Titel darf etwas in das Karten-Padding
   ragen, der Fliesstext behaelt seine Breite. Bei schmalen Vierspaltern wird er kleiner. */
@media (min-width: 1100px) {
  .channels__flow .channels__title {
    margin-inline: -0.75rem;
    font-size: clamp(1rem, 2.05vw - 8px, 1.25rem);
    white-space: nowrap;
  }
}
@media (min-width: 1100px) {
  .channels__step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -1.65rem;
    transform: translateY(-50%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--tint);
  }
}



/* ---------- Hero: Flamme am Handy, farbige Textzeilen, Kennzahlen (Ahmed, 03.11.2026) ---------- */
/* Canvas für die Flamme: Handy ist 215 px breit (entspricht 510 Canvas-Pixel), Oberkante des Handys
   liegt 480 Canvas-Pixel über dem Unterrand des Canvas. Faktor: 215 / 510 = 0,4216 */
.hero__phone-frame canvas.fire { position: absolute; z-index: 3; left: 50%; top: -304px; transform: translateX(-50%); width: 303.5px; height: 506px; pointer-events: none; mix-blend-mode: screen; filter: blur(1.8px); }
/* Grosses Auflodern: eigene Flaeche um das ganze Handy, im Ruhezustand leer (js/hero-flame.js). */
.hero__phone-frame canvas.fire-blaze { position: absolute; z-index: 4; left: -110px; top: -170px; width: 435px; height: 700px; pointer-events: none; filter: blur(1.2px); }
.hero__phone::after { content: ""; position: absolute; inset: 0; border-radius: 48px; pointer-events: none; z-index: 8;
  box-shadow: inset 0 0 0 2px rgba(255, 176, 80, calc(var(--lvl, 0) * 0.85)), inset 0 0 14px 2px rgba(255, 120, 40, calc(var(--lvl, 0) * 0.55)), inset 0 30px 36px -14px rgba(255, 150, 50, calc(var(--lvl, 0) * 0.6)); }
.hero__phone.is-hot { box-shadow: 0 35px 70px -18px rgba(0, 0, 0, 0.6), 0 0 60px 6px rgba(255, 138, 43, var(--heat, .4)), 0 0 130px 22px rgba(255, 77, 46, calc(var(--heat, .4) * 0.55)), inset 0 0 0 1.5px rgba(255, 255, 255, 0.07); transition: box-shadow .6s ease; }

/* Kennzahlen: gleiches Format, aber farbig. Sie leuchten nach der Flamme nacheinander kurz auf (Klasse is-lit, js/hero-flame.js). */
.hero__trust-stat { transition: transform 0.5s ease, filter 0.5s ease; }
.hero__trust-stat.is-lit { transform: scale(1.12); transform-origin: left center; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.35)); }
.hero__trust-num { font-size: 26px; }
.hero__trust-stat:nth-child(1) .hero__trust-num { color: #22e0ea; }
.hero__trust-stat:nth-child(3) .hero__trust-num { color: #14e0a0; }
.hero__trust-stat:nth-child(5) .hero__trust-num { color: #ff7a00; }
.hero__trust-stat:nth-child(1) .hero__trust-label,
.hero__trust-stat:nth-child(3) .hero__trust-label,
.hero__trust-stat:nth-child(5) .hero__trust-label { color: rgba(255, 255, 255, 0.7); }

/* Kennzahlen auf dem Handy: drei Spalten nebeneinander, ohne Trennstriche */
@media (max-width: 600px) {
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .hero__trust-divider { display: none; }
  .hero__trust-stat { align-items: center; text-align: center; }
  .hero__trust-stat.is-lit { transform-origin: center; }
  .hero__trust-num { font-size: 19px; white-space: nowrap; }
  .hero__trust-label { font-size: 12px; }
}

/* Hero auf Handy und Tablet wie am Computer: alles in einer linken Spalte
   (Wunsch der Nutzerin, 10.11.2026). Das rotierende Wort waechst mit der
   Breite, so dass das laengste Wort ("Neukunden", 5,84 x Schriftgroesse breit)
   immer in eine Zeile passt. Darum reicht eine reservierte Zeile statt zwei. */
@media (max-width: 1080px) {
  .hero {
    --hero-headline-fs: min(calc((100vw - 48px) / 6.25), 110px);
  }
  .hero__top,
  .hero__headline {
    text-align: left;
  }
  .hero__headline {
    min-height: calc(var(--hero-headline-fs) * 1.05);
  }
  .hero__word {
    transform-origin: left center;
  }
}

@media (max-width: 600px) {
  /* Brennendes Handy frueher sichtbar (Wunsch der Nutzerin, 10.11.2026):
     Kennzahlen wandern unter das Handy, Abstaende werden enger. Dafuer
     werden Text, Buttons, Kennzahlen und Handy zu Geschwistern im Raster. */
  .hero__inner {
    padding-top: 28px;
  }
  .hero__bottom {
    justify-items: start;
    row-gap: 0;
  }
  .hero__content {
    display: contents;
  }
  .hero__support {
    margin-bottom: 30px;
  }
  /* Reihenfolge auf dem Handy: Wort, Text, brennendes Handy, Buttons,
     Kennzahlen (Buttons unter dem Handy, Wunsch der Nutzerin, 10.11.2026). */
  .hero__visual {
    order: 3;
    justify-self: center;
  }
  .hero__cta-row {
    order: 4;
    margin-top: 36px;
    margin-bottom: 0;
  }
  .hero__trust {
    order: 5;
    justify-self: stretch;
  }
  /* Alle drei Zeilen gleich: eine Groesse, eine Staerke, eine Farbe
     (Wunsch der Nutzerin, 10.11.2026; die Hervorhebung des ersten Satzes
     ist zurueckgenommen). */
  .hero__support {
    font-size: 18px;
    line-height: 1.55;
    gap: 6px;
  }
  .hero__support-line {
    text-wrap: pretty;
  }
  .hero__headline {
    margin-bottom: 4px;
  }
  .hero__trust {
    padding-top: 24px;
    margin-top: 32px;
  }
  .hero__trust-num {
    font-size: 24px;
    line-height: 1.15;
  }
  .hero__trust-label {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
  }
  .hero__trust-stat {
    align-items: flex-start;
    text-align: left;
  }
  .hero__trust-stat.is-lit {
    transform-origin: left center;
  }
}

/* Sehr schmale Handys (360 px und weniger): Der Hero-Button darf umbrechen und
   wird etwas kompakter, damit er nicht ueber den Rand hinausragt. */
@media (max-width: 400px) {
  .hero__cta {
    white-space: normal;
    max-width: 100%;
    padding: 0 20px;
    font-size: 18px;
    text-align: center;
  }
  .hero__cta-secondary {
    max-width: 100%;
    padding: 0 24px;
    font-size: 18px;
  }
}


/* Kanaele als eigene Sektion: vier Karten im selben Stil wie "Unser System", mit versetzter Farbreihenfolge,
   damit zwei aufeinanderfolgende Sektionen nicht dieselbe Farbe untereinander haben. */
@media (min-width: 720px) {
  .page-home .channels__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .page-home .channels__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}
.page-home .channels__tiles .channels__card:nth-child(1) { --tint: var(--color-orange); --tint-mix: 74%; --tint-l: 0.58; --tint-c: 0.175; }
.page-home .channels__tiles .channels__card:nth-child(2) { --tint: var(--color-cyan); }
.page-home .channels__tiles .channels__card:nth-child(3) { --tint: var(--color-purple); }
.page-home .channels__tiles .channels__card:nth-child(4) { --tint: var(--color-mint); }

/* Laengere Zielgruppen-Namen (Wunsch des Chefs, 04.11.2026): bis zu vier Zeilen Platz */
.refcards--4 .refcard__name { line-height: 1.3; text-wrap: balance; }
@media (hover: hover) and (min-width: 640px) {
  .refcards--4 .refcard__name { min-height: 5.2em; }
}

/* Kraeftigere Kartenfarben: Text auf getoenten Karten durchgehend weiss, damit er gut lesbar bleibt. */
.page-home .hurdle .numbered-list__text,
.page-home .hurdle .numbered-list__title,
.page-home .trust__point-text,
.page-home .trust__point-title,
.page-home .channels__text,
.page-home .channels__title,
.refcards--4 .refcard__link,
.refcards--4 .refcard__name {
  color: #fff;
}

/* Auf den kraeftigeren Kacheln waeren Icons in der Kachelfarbe kaum sichtbar: Symbole weiss. */
.refcards--4 .refcard .refcard__icon,
.refcards--4 .refcard .refcard__q {
  color: #fff;
  fill: rgba(255, 255, 255, 0.14);
  filter: none;
}

/* Vier schmale Kacheln: Schrift etwas kleiner, damit die Namen dreizeilig bleiben und kein Wort allein unten steht. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .refcards--4 .refcard__name { font-size: 0.74rem; letter-spacing: 0.04em; }
}

/* Die ganze Rueckseite der Zielgruppen-Kacheln ist klickbar, auch das Fragezeichen (Wunsch des Chefs). */
.refcards--4 .refcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
@media not all and (hover: hover) and (min-width: 640px) {
  .refcards--4 .refcard__back { position: relative; }
}

/* Sehr schmale Handys: Schrift etwas kleiner, damit die Zeilen der Zielgruppen-Kacheln nicht umbrechen. */
@media (max-width: 380px) {
  .refcards--4 .refcard__name { font-size: 0.8rem; letter-spacing: 0.04em; }
}


/* Hero ist abgenommen: Hauptbutton behält seine bisherige Farbe */
.hero .btn--solid-on-dark { background: linear-gradient(180deg, #7ff3d4, #5eead4); }
.hero .btn--solid-on-dark:hover { background: linear-gradient(180deg, #8bf6da, #6bf0d8); }

/* Ausgangslage: In jeder Kachel steht zuerst die Ueberschrift, danach erscheint der Text.
   Greift nur, wenn js/reveal.js die Kachel animiert (data-reveal). Ohne JS bleibt der Text sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hurdle[data-reveal] .numbered-list__text {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .page-home .hurdle[data-reveal].is-visible .numbered-list__text {
    opacity: 1;
    transform: none;
    transition-delay: 0.75s;
  }
  .page-home .hurdle[data-reveal].is-visible:nth-child(2) .numbered-list__text { transition-delay: 0.85s; }
  .page-home .hurdle[data-reveal].is-visible:nth-child(3) .numbered-list__text { transition-delay: 0.95s; }
  .page-home .hurdle[data-reveal].is-visible:nth-child(4) .numbered-list__text { transition-delay: 1.05s; }
}

/* Hero-Text vor dem Feuer lesbar (Chef ueber die Nutzerin, 11.11.2026):
   kraeftigere Schrift und ein duenner schwarzer Rand. paint-order legt den
   Rand hinter die Fuellung, die Buchstaben werden dadurch nicht duenner. */
.hero__support {
  font-weight: 500;
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  /* Text liegt ueber dem Feuer, das Feuer lodert dahinter weiter. */
  position: relative;
  z-index: 10;
}

/* Sprungziel der Buttons "Erstgespraech vereinbaren": Formular nicht unter
   der klebenden Kopfzeile verstecken (11.11.2026). */
.closing-cta__form { scroll-margin-top: 6.5rem; }

/* Zielgruppen-Kacheln (Chef ueber die Nutzerin, 11.11.2026):
   1. Ohne Umdrehen (Handy, Tablet, Touch) bestehen die Kacheln aus zwei Teilen.
      Der untere Teil ist jetzt dunkler getoent und durch eine helle Linie
      abgesetzt, damit die Trennung klar erkennbar ist.
   2. "So gehen wir vor" ist ueberall als Button erkennbar: weisser Rahmen,
      2 px wie die Strichstaerke der Schrift, Rundung 8 px wie alle Buttons. */
.refcards--4 .refcard__link {
  justify-content: center;
  width: auto;
  min-height: 0;
  padding: 0.6rem 1.1rem;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}
.refcards--4 .refcard__link:hover,
.refcards--4 .refcard__link:focus-visible {
  background: #fff;
  color: var(--color-dark);
}
.refcards--4 .refcard__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) and (min-width: 640px) {
  .refcards--4 .refcard__link {
    width: auto;
    min-height: 0;
    align-items: center;
  }
}
@media not ((hover: hover) and (min-width: 640px)) {
  .refcards--4 .refcard__back {
    background: oklch(from color-mix(in oklch, var(--tile) 30%, var(--color-dark)) min(l, 0.4) min(calc(c * 1.4), 0.3) h);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    padding: 1.25rem;
  }
  .refcards--4 .refcard__front {
    border-radius: 0;
  }
  .refcards--4 .refcard {
    border-color: var(--tile);
  }
}

/* Hero-Buttons auf dem Handy mittig (Wunsch der Nutzerin, 11.11.2026). */
@media (max-width: 599px) {
  .hero__cta-row {
    justify-self: stretch;
    justify-content: center;
  }
}