/* ---------- Kicker ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-teal-deep);
}

.kicker__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: var(--color-teal-deep);
}

.kicker--dark {
  color: var(--color-cyan);
}

.kicker--dark .kicker__dot {
  background: var(--color-cyan);
}

.kicker--purple {
  color: var(--color-purple);
}

.kicker--purple .kicker__dot {
  background: var(--color-purple);
}

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Gefuellte Buttons teilen sich die 3D-Glanz-Optik der Hero-CTAs
   (.hero__cta) und des Header-Kontakt-Buttons (.site-header__cta):
   weicher Verlauf, Innenkanten-Highlight, Schlagschatten, Anheben beim Hover,
   Eindruecken beim Klick. Gleiche Schatten-Rezeptur wie dort. */
.btn--solid-on-dark {
  background: linear-gradient(180deg, #2bffd0, #00f5c4);
  color: var(--color-dark);
  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);
}

.btn--solid-on-dark:hover {
  background: linear-gradient(180deg, #5cffdc, #1ffbd0);
  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);
}

.btn--solid-on-dark: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);
}

.btn--solid-on-light {
  background: linear-gradient(180deg, #2a2f35, var(--color-ink));
  color: var(--color-cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.18);
}

.btn--solid-on-light:hover {
  background: linear-gradient(180deg, #363c44, var(--color-dark-2));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

.btn--solid-on-light:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.btn--ghost-on-dark {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-cream);
}

.btn--ghost-on-dark:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.btn--ghost-on-dark:active {
  transform: translateY(0);
}

.btn--ghost-on-light {
  border-color: var(--color-line);
  color: var(--color-ink);
}

.btn--ghost-on-light:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.btn--ghost-on-light:active {
  transform: translateY(0);
}

/* ---------- FAQ (natives <details>/<summary>, keine JS-Logik nötig) ---------- */

.faq-list {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--color-line);
  padding-block: 1.5rem;
}

.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}

.faq-item__summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__question {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}

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

.faq-item__icon {
  position: relative;
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.faq-item[open] .faq-item__icon {
  border-color: var(--color-teal-deep);
  color: var(--color-teal-deep);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.faq-item__icon::before {
  height: 1.5px;
  width: 0.75rem;
}

.faq-item__icon::after {
  height: 0.75rem;
  width: 1.5px;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__icon::after {
  transform: rotate(90deg);
}

.faq-item__answer {
  margin-top: 1rem;
  max-width: 48rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

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

/* ---------- Reason-Liste (z. B. "Warum solltest du es mit uns umsetzen?", Sales Outsourcing) ---------- */

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

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

.reason-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-cream);
}

.reason-list__mark {
  display: flex;
  flex-shrink: 0;
  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;
}

/* Mehrspaltiges FAQ-Akkordeon (z. B. Leistungsportfolio Sales Outsourcing) */
.faq-columns {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

.faq-columns .faq-list {
  margin-top: 0;
}

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

/* ---------- Dunkler Seiten-Hero (Leistungen, Karriere, Service-Unterseiten) ---------- */

.service-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  padding-block: 5rem 6rem;
  color: var(--color-cream);
}

@media (min-width: 768px) {
  .service-hero {
    padding-block: 7rem;
  }
}

.service-hero__inner {
  position: relative;
}

.service-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.service-hero__breadcrumb-link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-mute);
  transition: color 0.15s ease;
}

.service-hero__breadcrumb-link:hover {
  color: var(--color-cream);
}

.service-hero__breadcrumb-sep {
  color: var(--color-cream-mute);
}

.service-hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.service-hero__title {
  margin-top: 2rem;
  max-width: 48rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}

.service-hero__title--sub {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.06;
}

.service-hero__lead {
  margin-top: 2rem;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-cream-soft);
}

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

.service-hero__cta {
  margin-top: 2.5rem;
}

/* ---------- CTA-Panel (dunkles, abgerundetes Panel: Karriere-CTA, Case-Study-CTA) ---------- */

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

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

.cta-panel__layout {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .cta-panel__layout {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
  }
}

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

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

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

.cta-panel__btn {
  margin-top: 2rem;
}

.cta-panel__aside {
  border-top: 1px solid var(--color-line-dark);
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .cta-panel__aside {
    border-top: none;
    border-left: 1px solid var(--color-line-dark);
    padding-top: 0;
    padding-left: 2.5rem;
  }
}

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

.cta-panel__aside-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cta-panel__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-cream);
  transition: color 0.15s ease;
}

.cta-panel__aside-link:hover {
  color: var(--color-teal);
}

/* ---------- Fact-Grid (Kennzahlen-Leiste im Hero, z. B. Karriere/Über uns) ---------- */

.fact-grid {
  margin-top: 5rem;
  display: grid;
  max-width: 42rem;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--color-line-dark);
  padding-top: 2rem;
}

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

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

.fact-grid__value {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-cream);
}

/* ---------- Service points (Karten-Grid, z. B. Leistungen-Unterseiten) ---------- */

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

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

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

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

/* Eigene Akzentfarbe je Karte statt einer Farbe fürs ganze Grid. */
.point-card:nth-child(5n+1) .point-card__index { color: var(--color-teal); }
.point-card:nth-child(5n+2) .point-card__index { color: var(--color-cyan); }
.point-card:nth-child(5n+3) .point-card__index { color: var(--color-mint); }
.point-card:nth-child(5n+4) .point-card__index { color: #ab75ff; }
.point-card:nth-child(5n+5) .point-card__index { color: var(--color-orange); }

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

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

/* ---------- Step list (Prozess-Sektionen, wiederverwendbar hell/dunkel) ---------- */

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

@media (min-width: 768px) {
  .step-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Vier Spalten erst ab 1024 px, davor zwei: bei 768 bis 1023 px ragten lange Titel (z. B. "Qualifizierung") seitlich über den Rand. */
  .step-grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Fünf Spalten erst ab 1024 px, davor drei: bei 768 bis 1023 px ragte das Raster seitlich über den Rand. */
  .step-grid--cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .step-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .step-grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.step-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.step-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--color-ink-mute);
}

.step-rule {
  display: none;
  height: 1px;
  flex: 1;
  border-top: 1px dotted rgba(63, 130, 136, 0.4);
}

@media (min-width: 768px) {
  .step-rule {
    display: block;
  }
}

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

.step-text {
  margin-top: 0.75rem;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.step-grid--dark .step-label {
  color: var(--color-cream-mute);
}

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

.step-grid--dark .step-title {
  color: var(--color-teal);
}

.step-grid--centered .step-head {
  justify-content: center;
}

.step-grid--centered .step-rule {
  display: none;
}

.step-grid--centered .step-title,
.step-grid--centered .step-text {
  text-align: center;
}

.step-grid--centered .step-text {
  margin-inline: auto;
}

.step-icon {
  display: flex;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-teal);
  background: rgba(0, 240, 255, 0.12);
  color: var(--color-teal);
}

.step-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Eigene Akzentfarbe je Schritt statt einer Farbe für alle Icons. */
.step-grid > li:nth-child(5n+1) .step-icon { border-color: var(--color-teal); background: color-mix(in oklch, var(--color-teal) 28%, transparent); color: var(--color-teal); }
.step-grid > li:nth-child(5n+2) .step-icon { border-color: var(--color-cyan); background: color-mix(in oklch, var(--color-cyan) 28%, transparent); color: var(--color-cyan); }
.step-grid > li:nth-child(5n+3) .step-icon { border-color: var(--color-mint); background: color-mix(in oklch, var(--color-mint) 28%, transparent); color: var(--color-mint); }
.step-grid > li:nth-child(5n+4) .step-icon { border-color: var(--color-purple); background: color-mix(in oklch, var(--color-purple) 28%, transparent); color: var(--color-purple); }
.step-grid > li:nth-child(5n+5) .step-icon { border-color: var(--color-orange); background: color-mix(in oklch, var(--color-orange) 28%, transparent); color: var(--color-orange); }

.step-grid--dark .step-text {
  color: var(--color-cream-soft);
}

/* ---------- Testimonial ---------- */

.testimonial-card {
  margin-inline: auto;
  max-width: 42rem;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-teal);
  background: var(--color-surface);
  padding: 2.5rem;
  text-align: left;
}

@media (min-width: 768px) {
  .testimonial-card {
    padding: 3rem 3.5rem;
  }
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
}

.testimonial-card__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-teal);
  margin-bottom: 0.25rem;
}

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

  .testimonial-card__quote::before {
    font-size: 4.25rem;
  }
}

.testimonial-card__byline {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-ink-mute);
}

.testimonial-card__byline strong {
  color: var(--color-ink);
}

.testimonial-card--photo {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 48rem;
}

.testimonial-card--photo .testimonial-card__byline {
  border-top: none;
  padding-top: 0;
}

.testimonial-card__photo {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  object-fit: cover;
}

@media (min-width: 768px) {
  .testimonial-card--photo {
    flex-direction: row;
    gap: 2.5rem;
  }

  .testimonial-card--photo .testimonial-card__byline {
    margin-top: 1rem;
  }

  .testimonial-card__photo {
    width: 8rem;
    height: 8rem;
  }
}

/* ---------- Differenzierung (Foto + Text zweispaltig, z. B. Online Marketing) ---------- */

.differentiator {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

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

.differentiator__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--color-line-dark);
  object-fit: cover;
}

.differentiator__text {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- Method-Banner (Foto-Hintergrund + rotierendes Wort, z. B. Telesales) ---------- */

.method-banner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-size: cover;
  background-position: 50% 20%;
  padding-block: 3.5rem;
  text-align: center;
}

.method-banner__arrow {
  width: 28px;
  height: 14px;
  margin: -1px auto 3rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.method-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.6), rgba(10, 12, 14, 0.8));
}

.method-banner__inner {
  position: relative;
}

.method-banner__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-cream);
}

.method-banner__word {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: #fff;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* ---------- Reason-Grid (Icon + Titel, z. B. Telesales "Warum funktioniert unsere Methode") ---------- */

.reason-grid {
  margin-top: 4rem;
  display: grid;
  gap: 4rem 2.5rem;
  text-align: center;
}

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

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

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

.reason-card__icon {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1.25rem;
  background-color: var(--color-teal);
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

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

.reason-card__title {
  max-width: 18rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.4;
}

/* ---------- Tag list (Leistungsportfolio, Sales Outsourcing) ---------- */

.tag-list {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag {
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

a.tag {
  color: var(--color-ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}

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

/* ---------- Status-Badge (z. B. "Aktuell 1 offene Position", "In Vorbereitung") ---------- */

.status-badge {
  border-radius: 4px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 0.25rem 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-mute);
}

.status-badge--purple {
  border-color: rgba(138, 77, 255, 0.4);
  background: rgba(138, 77, 255, 0.1);
  color: var(--color-purple);
}

.link-btn--purple {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(138, 77, 255, 0.5);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.link-btn--purple:hover {
  border-color: var(--color-purple);
  background: rgba(138, 77, 255, 0.1);
}

/* ---------- Numbered list (Problem-Sektion u. ä.) ---------- */

.numbered-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--color-line);
  padding-block: 2rem;
}

.numbered-list__item:first-child {
  border-top: none;
  padding-top: 0;
}

/* Modifier: die 4 Punkte nebeneinander statt untereinander (Ueberschrift
   sitzt bei dieser Variante als eigener Block darueber, volle Breite). Ab
   640px 2 Spalten, ab 1024px alle 4 in einer Zeile. Kein Zeilentrenner mehr
   noetig, da die Punkte nicht mehr in einer einzelnen Spalte stehen. */
.numbered-list--grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.numbered-list--grid .numbered-list__item {
  display: block;
  border-top: none;
  padding: 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
}

.numbered-list--grid .numbered-list__index {
  display: block;
  margin-bottom: 0.75rem;
}

.numbered-list--grid .numbered-list__text {
  margin-inline: 0;
}

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

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

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

/* Jeder Punkt bekommt eine eigene Akzentfarbe aus der Markenpalette statt
   einer einzigen Farbe für die ganze Liste (Vorbild: die Akzentfarben je
   Karte auf "9 Gründe gegen uns"). Wirkt nur in dunklen Sektionen, wo diese
   Komponente aktuell überall eingesetzt wird; die Spezifität übersticht die
   Seiten-Overrides (.page-home / .page-leistungen / ueberuns.css). */
.numbered-list__item:nth-child(5n+1) .numbered-list__index { color: var(--color-teal); }
.numbered-list__item:nth-child(5n+2) .numbered-list__index { color: var(--color-cyan); }
.numbered-list__item:nth-child(5n+3) .numbered-list__index { color: var(--color-mint); }
.numbered-list__item:nth-child(5n+4) .numbered-list__index { color: var(--color-purple); }
.numbered-list__item:nth-child(5n+5) .numbered-list__index { color: var(--color-orange); }

.numbered-list__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
}

.numbered-list__text {
  margin-top: 0.625rem;
  max-width: 32rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* ---------- Foto-Platzhalter (bis echtes Bildmaterial vorliegt) ---------- */
/* Details je Platz: FOTOBRIEFING.md im Projektstammverzeichnis. */

.photo-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 1rem;
  border: 1px dashed var(--color-line);
  background: var(--color-band);
  padding: 1.75rem;
  text-align: center;
  color: var(--color-ink-mute);
  overflow: hidden;
}

.photo-slot--dark {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
}

.photo-slot__icon {
  opacity: 0.55;
}

.photo-slot__id {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.photo-slot__label {
  max-width: 26rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.photo-slot__brief {
  max-width: 26rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  opacity: 0.8;
}

.photo-slot--16x9 {
  aspect-ratio: 16 / 9;
}

.photo-slot--3x2 {
  aspect-ratio: 3 / 2;
}

.photo-slot--4x5 {
  aspect-ratio: 4 / 5;
  max-width: 18rem;
  margin-inline: auto;
}

.photo-slot--1x1 {
  aspect-ratio: 1 / 1;
}

.photo-fill {
  border-radius: 1rem;
  overflow: hidden;
}

.photo-fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foto-Banner direkt unter einem dunklen Seiten-Hero */
.photo-band {
  background: var(--color-dark);
  padding: 0 0 4rem;
}

.photo-band .photo-slot {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Kleines rundes Porträt (z. B. Ansprechpartner:in neben Kontaktformular) */
.photo-avatar-slot {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.photo-avatar-slot__circle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 7.5rem;
  width: 7.5rem;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
}

.photo-avatar-slot__text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.photo-avatar-slot__photo {
  flex-shrink: 0;
  height: 7.5rem;
  width: 7.5rem;
  border-radius: 999px;
  object-fit: cover;
}

.photo-avatar-slot__text strong {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* ---------- Video-Teaser + Lightbox (generische, wiederverwendbare Video-Vorschau) ---------- */

.video-teaser {
  display: flex;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem auto 0;
  border-radius: 12px;
  border: 1px solid var(--color-line-dark);
  background: linear-gradient(160deg, var(--color-dark-2), var(--color-dark));
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

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

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

.video-teaser__play {
  display: flex;
  height: 4rem;
  width: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-teal);
  background: rgba(0, 240, 255, 0.12);
  color: var(--color-teal);
}

.video-teaser__play svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.15rem;
}

.video-teaser__label {
  max-width: 24rem;
  padding-inline: 1.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cream-soft);
}

/* Foto-Variante: echtes Vorschaubild statt reiner CSS-Flaeche, Play-Button
   als Overlay mittig auf dem Bild statt als eigenstaendiges Element */
.video-teaser--photo {
  max-width: 20rem;
  aspect-ratio: auto;
  background: none;
  border: none;
  padding: 0;
}

.video-teaser__frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-line-dark);
}

.video-teaser__poster {
  display: block;
  width: 100%;
  height: auto;
}

/* Hochformat-Video (z. B. VideoAsk-Selfie-Clips): Rahmen bekommt ein festes
   9:16-Seitenverhaeltnis, das <video>-Element (statt <img>) deckt es per
   object-fit ab, da "height: auto" bei <video> nicht wie bei <img> greift. */
.video-teaser--vertical .video-teaser__frame {
  aspect-ratio: 9 / 16;
}

.video-teaser--vertical .video-teaser__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-teaser--photo .video-teaser__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 12, 14, 0.55);
  color: var(--color-cream);
}

.video-teaser--photo:hover .video-teaser__play {
  background: rgba(10, 12, 14, 0.75);
}

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.video-lightbox[hidden] {
  display: none;
}

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, 0.9);
}

.video-lightbox__panel {
  position: relative;
  max-width: 90vw;
}

.video-lightbox__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  background: #000;
}

.video-lightbox__video[hidden] {
  display: none;
}

.video-lightbox__embed {
  width: min(90vw, calc(85vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
}

.video-lightbox__embed[hidden] {
  display: none;
}

.video-lightbox__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lightbox__consent {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-cream-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.video-lightbox__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
  color: var(--color-cream);
}

.video-lightbox__close svg {
  height: 1rem;
  width: 1rem;
}

.video-lightbox__close:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* ---------- Kacheln beim Darueberfahren (seitenweit) ----------
   Die Kachel bleibt an ihrem Platz und behaelt ihre Flaechenfarbe (keine Anhebung,
   Wunsch von Ahmed): Der Rand leuchtet in der Kachelfarbe auf, das Icon reagiert leicht.
   Die Selektoren beginnen mit "html body", damit sie die Seiten-CSS ueberstimmen.
   Nicht dabei: .refcard (dreht sich) und .services__card (eigener Effekt). */
html body :is(.point-card, .reason-card, .channels__card, .testimonial-card, .hurdle, .trust__point, .insights-card, .case-glance__item, .kt-examples__item, .case-point-list__item, .ueberuns-timeline__card, .numbered-list--grid .numbered-list__item,
  .learnings-card, .gruende-card, .bento__card, .job-card, .wege-card, .io-card, .case-kpi, .case-result) {
  --card-glow: var(--hurdle, var(--gruende-accent, var(--tint, var(--t, var(--accent, var(--color-teal))))));
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  html body :is(.point-card, .reason-card, .channels__card, .testimonial-card, .hurdle, .trust__point, .insights-card, .case-glance__item, .kt-examples__item, .case-point-list__item, .ueberuns-timeline__card, .numbered-list--grid .numbered-list__item,
    .learnings-card, .gruende-card, .bento__card, .job-card, .wege-card, .io-card, .case-kpi, .case-result):hover {
    border-color: color-mix(in oklch, var(--card-glow) 60%, white);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--card-glow) 60%, white),
      0 0 22px -3px color-mix(in oklch, var(--card-glow) 75%, transparent);
  }
}

/* Handy und Tablet ohne Maus: derselbe Glow, ausgeloest beim Scrollen durch die
   Bildschirmmitte (Klasse is-glow aus js/site.js, Wunsch der Nutzerin 10.11.2026).
   Etwas weicher ein- und ausgeblendet als beim Darueberfahren. */
@media not ((hover: hover) and (pointer: fine)) {
  html body :is(.point-card, .reason-card, .channels__card, .testimonial-card, .hurdle, .trust__point, .insights-card, .case-glance__item, .kt-examples__item, .case-point-list__item, .ueberuns-timeline__card, .numbered-list--grid .numbered-list__item,
    .learnings-card, .gruende-card, .bento__card, .job-card, .wege-card, .io-card, .case-kpi, .case-result).is-glow {
    border-color: color-mix(in oklch, var(--card-glow) 60%, white);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--card-glow) 60%, white),
      0 0 22px -3px color-mix(in oklch, var(--card-glow) 75%, transparent);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.45s ease, border-color 0.45s ease;
  }
}

:is(.point-card__icon, .reason-card__icon, .channels__icon, .hurdle__icon, .bento__icon, .wert__icon, .kt-icon) {
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.point-card, .reason-card, .channels__card, .hurdle, .bento__card, .numbered-list--grid .numbered-list__item, .case-glance__item, .kt-examples__item):hover
    :is(.point-card__icon, .reason-card__icon, .channels__icon, .hurdle__icon, .bento__icon, .wert__icon, .kt-icon) {
    transform: scale(1.08) rotate(-4deg);
  }
}

/* ---------- Kurze Kacheln mittig (seitenweit, Wunsch der Nutzerin 05.11.2026) ----------
   Nur Kacheln mit wenig Text. Links bleiben Blog-Kacheln, Zitate, FAQ, Formulare, die
   aufgeklappten Antworten der 9 Gruende und Kacheln mit Aufzaehlungen oder Zeitleiste. */
html body :is(.trust__point, .brands__card, .case-result, .messe-fact, .week-split__card,
  .numbered-list--grid .numbered-list__item, .point-card, .job-card--open) {
  text-align: center;
}
html body .brands__card {
  align-items: center;
}

/* Kicker-Punkt pulsiert ganz leicht, um Sektionen zu markieren. */
@keyframes kicker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.35); }
}

.kicker__dot {
  animation: kicker-pulse 3s ease-in-out infinite;
}

/* Header bekommt beim Scrollen einen weichen Schatten (Klasse aus js/site.js). */
.site-header {
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ---------- Bewegung: Variante 2 (siehe js/motion.js) ---------- */

/* Buttons: translate fuer den Magnet-Effekt, Glanz-Streifen beim Hover. */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, translate 0.2s ease;
}

.btn--solid-on-dark,
.btn--solid-on-light {
  position: relative;
  overflow: hidden;
}

.btn--solid-on-dark::after,
.btn--solid-on-light::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.btn--solid-on-dark:hover::after,
.btn--solid-on-light:hover::after {
  opacity: 1;
  left: 130%;
  transition: left 0.7s ease, opacity 0.2s ease;
}

/* Logo-Band: einzelnes Logo hebt sich beim Hover ab (Marquee pausiert dabei). */
.logo-marquee__logo {
  transition: opacity 0.2s ease, scale 0.2s ease;
}

.logo-marquee__logo:hover {
  opacity: 1;
  scale: 1.1;
}

/* Scroll-Fortschritt am unteren Rand des Headers. */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---------- Scroll-to-Top ---------- */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-dark);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(25, 28, 32, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.15s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.scroll-top:hover {
  background: var(--color-purple);
  color: #fff;
}

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

/* ---------- Handy: Texte links, Kacheln und Buttons mittig (Chef ueber die Nutzerin, 11.11.2026) ----------
   Ersetzt die Regel vom 10.11.2026. Unter 600 px stehen alle normalen Ueberschriften,
   Eyebrows, Einleitungen und Fliesstexte ausserhalb von Kacheln linksbuendig.
   Kacheln (Liste unten) und Buttons bleiben mittig, auch die Schrift darin.
   Bewusst ausgenommen: der Hero der Startseite (eigene Regeln in home.css), die Heros
   der Unterseiten (.service-hero, abgenommen) und die Bildkarten Strategie, Marketing,
   Vertrieb (.services__card, Wunsch des Chefs: vorerst so lassen).
   Ausnahme in den Kacheln: Der aufgeklappte Text der Guerilla-Geschichten bleibt links,
   weil er 10 bis 14 Zeilen lang wird. Ab 600 px bleibt alles wie bisher. */
@media (max-width: 599px) {
  html body main :is(h2, h3, h4, p, li, dd, dt, figcaption, blockquote, .section-title, .section-lead,
    [class*="__title"], [class*="claim"], .io-combine, .lt__cap, .step-title, .step-text):not(:is(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take, .btn, button, .service-hero, .hero) *):not(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take) {
    text-align: left;
  }
  html body main :is(p, li, dd, .section-lead):not(:is(.service-hero, .hero) *) {
    text-wrap: pretty;
  }
  /* Ueberschriften mit .balance behalten den ausgeglichenen Umbruch,
     damit kein einzelnes Wort allein in der letzten Zeile steht. */
  html body main .balance:not(:is(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take, .service-hero, .hero) *) {
    text-wrap: balance;
  }
  /* Sektionsueberschriften auf dem Handy etwas kleiner (36 auf hoechstens 32 px,
     bei 360 px 30 px), damit kurze Woerter wie "Die" oder "für" nicht allein in einer
     Zeile stehen (Beispiel des Chefs: "Die Stellschrauben für deinen Erfolg"). */
  html body main h2:not(:is(.service-hero, .hero) *) {
    font-size: min(32px, calc((100vw - 48px) / 10.4));
    text-wrap: balance;
  }
  /* Eyebrows sind inline-flex und folgen sonst der Ausrichtung ihres Elternblocks. */
  html body main .kicker:not(:is(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take, .service-hero, .hero) *) {
    display: flex;
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
  }

  /* Buttons mittig: die Abschluss-Buttons im Kontaktbereich standen links. */
  html body main :is(.closing-cta__btn, .cta-panel__btn) {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Kacheln mittig, auch die Schrift darin. */
  html body main :is(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take):not(.services__card, .closing-cta__form),
  html body main :is(.point-card, .reason-card, .channels__card, .hurdle, .numbered-list__item, .bento__card, .case-glance__item, .kt-examples__item, .gm-story, .gm-chain__step, .gm-factor, .trust__point, .trust__video, .brands__card, .case-result, .case-kpi, .messe-fact, .week-split__card, .job-card, .method-banner, .ueberuns-timeline__card, .refcard, .gruende-card, .coop-panel, .services__card, .closing-cta__form, .learnings-card, .wege-card, .smarketing-flow__stage, .chain-box, .so-take):not(.services__card, .closing-cta__form) :is(h3, h4, p, li, dd, dt, span) {
    text-align: center;
  }
  html body main .gm-story :is(.gm-story__body, .gm-story__body p, .gm-story__lesson, .gm-story__source) {
    text-align: left;
  }
}

/* ---------- Einheitliche Rundung fuer Kacheln, Karten und Fotos (10.11.2026) ----------
   Vorher 6, 8, 10, 14 oder 16 px je nach Baustein. Jetzt ueberall 12 px, auf allen
   Geraeten gleich (gaengiger Wert, z. B. Material Design 3 fuer Karten). Nicht dabei:
   Buttons (8 px), Chips und Pillen (rund), Icon-Kaesten, Navigation, grosse Panels.
   Die Liste enthaelt einige seitenspezifische Selektoren, damit die Regel deren
   eigene Rundung sicher ueberstimmt. */
html body :is(
  .point-card, .reason-card, .channels__card, .testimonial-card, .hurdle, .trust__point,
  .insights-card, .case-glance__item, .kt-examples__item, .case-point-list__item,
  .ueberuns-timeline__card, .numbered-list--grid .numbered-list__item, .learnings-card,
  .gruende-card, .bento__card, .job-card, .wege-card, .io-card, .case-kpi, .case-result,
  .services__card, .brands__card, .refcard, .refcard__front, .refcard__back, .messe-fact,
  .week-split__card, .case-goal, .case-process > li, .gm-story, .gm-story__lesson, .lt__group,
  .so-take, .about__values, .discipline, .chain-box, .smarketing-flow__stage,
  .legal-article__block, .article-body blockquote,
  .about__photo, .trust__video, .ueberuns-zusammenarbeit-photo, .lead-flow-image,
  .video-mini__thumb, .photo-slot, .photo-fill,
  .page-kt .case-start .case-point-list__item, .page-kt .case-goal--quote,
  .page-cat .numbered-list--grid .numbered-list__item, .page-cat .reason-list > li,
  .page-sales-outsourcing .reason-list li, .page-sales-outsourcing .faq-columns > .faq-list
) {
  border-radius: 12px;
}

/* ---------- Handy: Heros der Unterseiten nach derselben Regel (Wunsch der Nutzerin, 11.11.2026) ----------
   Unter 600 px stehen Breadcrumb, Eyebrow, H1, Einleitung und die Haekchen-Liste links.
   Mittig bleiben die Buttons, die Chips mit Icon, die Leistungs-Chips, der
   Smarketing-Ablauf, das Video und die Kennzahlen-Kacheln (Kachel-Regel). */
@media (max-width: 599px) {
  html body main .service-hero.service-hero :is(.service-hero__title, .service-hero__lead, .ueberuns-hero__copy, .service-hero__trust li) {
    text-align: left;
  }
  html body main .service-hero.service-hero :is(.service-hero__breadcrumb, .service-hero__eyebrow-row, .service-hero__trust) {
    justify-content: flex-start;
  }
  html body main .service-hero.service-hero :is(.service-hero__title, .service-hero__lead) {
    margin-left: 0;
    margin-right: 0;
  }
  html body main .service-hero.service-hero .service-hero__lead {
    text-wrap: pretty;
  }
  html body main .service-hero.service-hero .service-hero__cta {
    justify-content: center;
    text-align: center;
  }
}