/* =========================================================================
   Eigene Ergänzungen zum Webflow-CSS
   Die Webflow-Datei (public/assets/css/fastlanes.webflow.shared.*.css) bleibt
   unverändert. Alles Neue kommt hierher; diese Datei wird danach geladen.
   ========================================================================= */

/* Hero-Titel ist jetzt die <h1> der Startseite (SEO/Screenreader).
   Standardwerte für h1 neutralisieren, damit die Optik exakt gleich bleibt. */
h1.header105_heading-wrapper {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* =========================================================================
   Rechtstexte (Impressum, Datenschutz, AGB)
   Überschriften bewusst in Manrope: die Druk-Testversion hat keine Umlaute.
   ========================================================================= */
.section_legal .legal-subtitle {
  margin: 0.5rem 0 3.5rem;
  text-align: left;
  font-family: var(--main-text-font);
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.section_legal .w-richtext,
.section_legal .legal-text {
  width: 100%;
  max-width: 50rem;
  text-align: left;
  font-family: var(--main-text-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.section_legal :is(.w-richtext, .legal-text) h2 {
  margin: 3rem 0 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--main-text-font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}
.section_legal :is(.w-richtext, .legal-text) h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.section_legal :is(.w-richtext, .legal-text) h3 {
  margin: 2rem 0 0.5rem;
  font-family: var(--main-text-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.section_legal :is(.w-richtext, .legal-text) p {
  margin: 0 0 1rem;
}

.section_legal :is(.w-richtext, .legal-text) ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.section_legal :is(.w-richtext, .legal-text) li {
  margin-bottom: 0.125rem;
  line-height: 1.6;
  padding-left: 0.25rem;
}
.section_legal :is(.w-richtext, .legal-text) li::marker {
  color: var(--accent-primary);
}

.section_legal :is(.w-richtext, .legal-text) a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.section_legal :is(.w-richtext, .legal-text) strong {
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .section_legal .legal-subtitle {
    margin-bottom: 2.5rem;
    font-size: 1rem;
  }
  .section_legal :is(.w-richtext, .legal-text) {
    font-size: 0.9375rem;
  }
  .section_legal :is(.w-richtext, .legal-text) h2 {
    margin-top: 2.25rem;
    padding-top: 2rem;
    font-size: 1.25rem;
  }
}

/* Desktop mit schmalem Fenster (ca. 992–1260px):
   Navigation (73%) und Logo-Wall (72%) waren hier zu schmal –
   das Header-Logo schrumpfte auf ~20px und die Logo-Reihen liefen rechts raus.
   Mindestbreite ergänzt; auf breiteren Bildschirmen bleibt alles wie vorher. */
@media screen and (min-width: 992px) {
  .nav {
    width: min(95%, max(73%, 930px));
  }
  .section_logos .container {
    width: min(95%, max(72%, 900px));
  }
}

/* Sehr schmale Handys (< 360px): Logos in der Logo-Wall dürfen schmaler als 110px werden. */
@media screen and (max-width: 359px) {
  .logo-list_logo {
    min-width: 0;
    max-width: 100%;
  }
}

/* Impressum: hervorgehobener Kasten „Rechnungen an uns“ (Verlauf wie der Strategie-Kasten der Startseite) */
.section_legal .legal-highlight {
  margin-bottom: 3rem;
  padding: 2rem 2.25rem;
  border-radius: 1rem;
  background-image: linear-gradient(32deg, #103830, var(--accent-primary));
  color: #fff;
}
.section_legal .legal-text .legal-highlight h2 {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
.section_legal .legal-highlight_grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1.5rem 3rem;
}
.section_legal .legal-highlight_label {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.section_legal .legal-text .legal-highlight p {
  margin: 0;
  color: #fff;
}
.section_legal .legal-text .legal-highlight a {
  color: #fff;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .section_legal .legal-highlight {
    padding: 1.5rem;
  }
  .section_legal .legal-highlight_grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* =========================================================================
   Leistungen: Produktkarten (Startseite) + Leistungs-Unterseiten
   Druk-Überschriften hier immer ohne Umlaute formulieren (Testversion).
   ========================================================================= */

/* Sanftes Einblenden neuer Bausteine (Steuerung: public/js/custom.js) */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.offer-grid {
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  position: relative;
}

.offer-card {
  display: flex;
  text-align: left;
  flex-direction: column;
  padding: 0.75rem;
  border: 1px solid rgba(75, 197, 172, 0.18);
  border-radius: 24px;
  background-image: linear-gradient(32deg, #1a1b1a, #1c3b34);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  border-color: rgba(75, 197, 172, 0.55);
  box-shadow: 0 20px 60px -30px rgba(75, 197, 172, 0.45);
  color: #fff;
}

.offer-card_media {
  position: relative;
  overflow: hidden;
  /* Breitenabfragen (@container) der Ads-Wand und Content-Bühne beziehen sich auf diese Fläche */
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
}
.offer-card_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.offer-card:hover .offer-card_image {
  transform: scale(1.04);
}
.offer-card_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(18, 18, 18, 0.55));
}
.offer-card_chip {
  z-index: 1;
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100vw;
  /* bewusst ohne backdrop-filter: Weichzeichner über laufenden Videos/bewegter Wand kostet bei jedem Bild Rechenzeit */
  background-color: rgba(18, 18, 18, 0.72);
  font-family: var(--main-text-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer-card_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem 1.25rem 1.25rem;
}
.offer-card .offer-card_title {
  margin: 0 0 0.5rem;
  padding-top: 0;
  text-align: left;
}
.offer-card_lead {
  margin: 0 0 0.75rem;
  font-family: var(--main-text-font);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-primary);
}
.offer-card .offer-card_text {
  margin-bottom: 1.25rem;
  padding-top: 0;
}

.check-list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--main-text-font);
  font-size: 0.95rem;
  line-height: 1.45;
  color: #fff;
}
/* kein Flex: sonst werden Textstücke um <strong> herum zu eigenen Spalten */
.check-list li {
  position: relative;
  padding-left: calc(20px + 0.75rem);
}
.check-list li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(75, 197, 172, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234bc5ac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.offer-card_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}
.offer-card_arrow {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.offer-card:hover .offer-card_arrow {
  background-color: var(--accent-primary);
  transform: translateX(4px);
}

/* Leistungs-Unterseiten */
.service-hero {
  padding-top: 11rem;
}
.service-hero .text-wrap {
  margin-bottom: 2.5rem;
}
.service-hero .check-list {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0 0 2.5rem;
  text-align: left;
}
.service-hero_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.pillar-grid {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  position: relative;
}
.pillar {
  padding: 2rem;
  text-align: left;
  border: 1px solid rgba(75, 197, 172, 0.18);
  border-radius: 24px;
  background-image: linear-gradient(32deg, #1a1b1a, #1c3b34);
}
.pillar_number {
  margin-bottom: 1.5rem;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
}
.pillar .pillar_title {
  margin: 0 0 0.75rem;
  padding-top: 0;
  font-size: 2.25rem;
  text-align: left;
}
.pillar .main-text {
  margin-bottom: 0;
  text-align: left;
  font-size: 1rem;
}

/* Zeitstrahl-Karten auf Unterseiten nutzen h3 statt h2 */
.cards-content h3.main-heading {
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  #services .container {
    width: min(95%, max(72%, 900px));
  }
}
@media screen and (max-width: 991px) {
  .offer-grid,
  .pillar-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-hero {
    padding-top: 9rem;
  }
}
@media screen and (max-width: 767px) {
  .service-hero .check-list {
    grid-template-columns: 1fr;
  }
  .offer-card_body {
    padding: 1.5rem 0.75rem 0.75rem;
  }
}

/* KI-Haltung (Hinweis-Kasten auf den Leistungs-Unterseiten) */
.ai-note {
  z-index: 1;
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.5rem 2rem;
  border: 1px dashed rgba(75, 197, 172, 0.45);
  border-radius: 24px;
  background-color: rgba(75, 197, 172, 0.06);
  text-align: left;
}
.ai-note_label {
  flex: none;
  padding: 0.4rem 0.9rem;
  border-radius: 100vw;
  background-color: var(--accent-primary);
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1f1b;
}
.ai-note_text {
  margin: 0;
  font-family: var(--main-text-font);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* längerer KI-Kasten (mehrere Absätze): Label oben statt mittig */
.ai-note.is-long {
  align-items: flex-start;
}
.ai-note.is-long .ai-note_label {
  margin-top: 0.15rem;
}

/* Leistungen im Detail (Social First Ads) */
.detail-grid {
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}
.detail {
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.detail .detail_title {
  margin: 0 0 1rem;
  font-family: var(--main-text-font);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.detail .check-list {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 991px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ai-note {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .ai-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}

/* =========================================================================
   Logo-Wall: EINE Liste für alle Bildschirmgrößen (20 Logos)
   Desktop 5 × 4 (wie im Original 5 pro Reihe), Tablet 4 × 5, Handy 2 × 10 – immer ohne Lücke.
   Neue Logos liegen bereits weiß in /img/logos/ (Klasse .is-white = kein Farbfilter).
   ========================================================================= */
.logo-list.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3rem 24px;
  align-items: center;
  width: 100%;
  max-width: none;
}
.logo-wall .logo-list_item {
  position: relative;
  min-width: 0;
}
/* Trennlinien zwischen den Logos einer Reihe (wie im Original) */
.logo-wall .logo-list_item:not(:nth-child(5n))::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12.5px;
  width: 1px;
  height: 32px;
  background-color: #fff6;
  transform: translateY(-50%);
}
.logo-wall .logo-list_logo {
  min-width: 0;
  min-height: 0;
  max-width: min(120px, 100%);
  max-height: 100%;
}
.logo-wall .logo-list_logo.is-white {
  filter: none;
}
/* Feinabstimmung einzelner Logos (optische Größe angleichen; Werte der alten Logos wie im Original) */
.logo-wall .logo-list_logo.large { max-width: 100%; max-height: 125%; }
.logo-wall .logo-list_logo.kleineherzen { max-width: min(108px, 100%); } /* CLAAS: fett und kursiv, deshalb kleiner */
.logo-wall .logo-list_logo.hannohyp,
.logo-wall .logo-list_logo.dalgakiran { max-width: min(140px, 100%); }
.logo-wall .logo-list_logo.thinx { max-width: 100px; }
/* Neue Logos bewusst kleiner: fette bzw. flächige Marken (IKEA, Durex, bom, Joyn) wirken sonst wuchtiger als die feinen Schriftzüge */
.logo-wall .logo-list_logo.is-vw { max-height: 80%; }
.logo-wall .logo-list_logo.is-ikea { max-width: min(94px, 100%); }
.logo-wall .logo-list_logo.is-koelln { max-width: 56px; max-height: 53px; } /* Kölln: Logo mit Quadrat in Grautönen */
.logo-wall .logo-list_logo.is-joyn { max-width: 68px; }
.logo-wall .logo-list_logo.is-bom { max-width: 78px; }
.logo-wall .logo-list_logo.is-db { max-width: min(116px, 100%); }

@media screen and (max-width: 991px) {
  .logo-list.logo-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 1.75rem;
  }
  .logo-wall .logo-list_item::after {
    display: none;
  }
}
@media screen and (max-width: 599px) {
  .logo-list.logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
  }
  .logo-wall .logo-list_logo {
    max-width: min(110px, 100%);
  }
}

/* =========================================================================
   Call-to-Actions
   ========================================================================= */
/* lange Fassung auf großen Bildschirmen, kurze auf dem Handy */
.cta-short { display: none; }
@media screen and (max-width: 479px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* Kasten am Seitenende: Drohne und Kamera sitzen fest in den Ecken und schweben nur leicht.
   (Vorher: Webflow-Flugbahn mit festen Pixelwerten -> überlagerte je nach Breite den Text.)
   Größen und Abstände hängen an der Kastenbreite (Prozent), nicht an der Bildschirmbreite. */
@media screen and (min-width: 992px) {
  /* Kasten mittig (Original: links 326px / rechts 239px Innenabstand ab 1440px -> 43px aus der Mitte) */
  .section_benefit.wunschanalyse {
    padding-left: 0;
    padding-right: 0;
  }
  .section_benefit.wunschanalyse .container.is-rental-block {
    width: min(88%, 860px);
  }
}
.container.is-rental-block .rental-block {
  position: static;
  padding: 0 17%;
}
.container.is-rental-block .text-wrap {
  position: static;
  width: 100%;
}
.container.is-rental-block .rental-block .main-heading,
.container.is-rental-block .rental-block .button_primary {
  position: relative;
  z-index: 2;
}
/* Drohne und Kamera: scroll-gekoppelte Webflow-Flugbahn wie im Original (data-w-id, per transform):
   Drohne +100px -> -50px, Kamera -60px -> +45px mit Drehung. Damit sie den Text nie treffen:
   Drohne fliegt in einer eigenen Spur ÜBER der Überschrift, Kamera bleibt im freien Rand links unten.
   Das leichte Schweben läuft über die Eigenschaft translate und stört die Flugbahn nicht. */
.rental-block .rental-block_image.cta-box_drone,
.rental-block .rental-block_image.cta-box_camera {
  z-index: 1;
  position: absolute;
  inset: auto;
  max-width: none;
  pointer-events: none;
  animation: cta-float 5s ease-in-out infinite;
  will-change: transform;
}
.rental-block .rental-block_image.cta-box_drone {
  top: -18px;
  right: 24px;
  width: clamp(84px, 15%, 129px);
}
.rental-block .rental-block_image.cta-box_camera {
  bottom: 1rem;
  left: 10px;
  width: clamp(48px, 9.5%, 82px);
  animation-duration: 6.5s;
  animation-delay: -2s;
}
@media screen and (min-width: 641px) {
  /* Platz für die Flugspur der Drohne über der Überschrift */
  .section_benefit.wunschanalyse .container.is-rental-block {
    padding-top: 3.75rem;
  }
}
@media screen and (max-width: 640px) {
  /* schmaler Kasten: kein Platz für Bilder neben dem Text */
  .container.is-rental-block .rental-block {
    padding: 0;
  }
  .rental-block .rental-block_image.cta-box_drone,
  .rental-block .rental-block_image.cta-box_camera {
    display: none;
  }
}
@keyframes cta-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .rental-block .rental-block_image.cta-box_drone,
  .rental-block .rental-block_image.cta-box_camera { animation: none; }
}

/* Agentur-Feld unter dem Kasten (Startseite) */
.section_partner {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -6.5rem; /* näher an den Kasten darüber (dessen Sektion hat 10rem Abstand nach unten) */
  padding: 0 0 6rem;
}
.section_partner .container {
  width: min(88%, 860px); /* gleiche Breite wie der Kasten darüber */
}
.partner-note {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.partner-note_label {
  margin-bottom: 0.5rem;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.partner-note .partner-note_title {
  margin: 0 0 0.35rem;
  font-family: var(--main-text-font);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.partner-note_p {
  margin: 0;
  font-family: var(--main-text-font);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.partner-note .button_secondary {
  flex: none;
  width: auto;
}
@media screen and (max-width: 991px) {
  .section_partner {
    margin-top: 0;
  }
  .section_partner .container {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .section_partner {
    padding-bottom: 4rem;
  }
  .section_partner .container {
    width: 88%;
  }
  .partner-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .partner-note .button_secondary {
    width: 100%;
  }
}

/* Im grünen Kasten ist die türkise Hervorhebung kaum lesbar -> weiß */
.container.is-rental-block .main-heading .text-span {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-image: none;
}
.container.is-rental-block .main-heading {
  text-wrap: balance; /* gleichmäßige Zeilen statt einzelner Restwörter */
}

/* CTA-Kasten auch auf dem Handy zeigen (im Original per .hide-mobile ausgeblendet) –
   sonst stünde dort nur das Agentur-Feld ohne die eigentliche Anfrage darüber. */
@media screen and (max-width: 479px) {
  .section_benefit.wunschanalyse.hide-mobile {
    display: flex;
    padding: 2rem 0 2.5rem;
  }
  .section_benefit.wunschanalyse .container.is-rental-block {
    width: 88%;
    padding: 2.25rem 1.25rem;
  }
  .container.is-rental-block .main-heading.is-card {
    padding-top: 0;
    font-size: 2rem;
  }
  .container.is-rental-block .button_primary.is-rental-block {
    width: 100%;
    margin-top: 1rem;
  }
}

/* Leistungen im Detail: breite Kachel über die ganze Zeile (Analyse) */
.detail.is-wide {
  grid-column: 1 / -1;
}
.detail.is-wide .check-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.6rem 2rem;
}

/* FAQ (Leistungs-Unterseiten) */
.faq {
  z-index: 1;
  position: relative;
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 52rem;
  text-align: left;
}
.faq_item {
  border: 1px solid rgba(75, 197, 172, 0.18);
  border-radius: 20px;
  background-image: linear-gradient(32deg, #1a1b1a, #1c3b34);
  overflow: hidden;
}
.faq_item[open] {
  border-color: rgba(75, 197, 172, 0.45);
}
.faq_q {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-family: var(--main-text-font);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.faq_q::-webkit-details-marker {
  display: none;
}
.faq_icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.faq_icon::before,
.faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.faq_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 0.3s ease;
}
.faq_item[open] .faq_icon {
  background-color: var(--accent-primary);
  transform: rotate(180deg);
}
.faq_item[open] .faq_icon::after {
  opacity: 0;
}
.faq_a {
  padding: 0 1.5rem 1.5rem;
  font-family: var(--main-text-font);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}
.faq_a p {
  margin: 0 0 0.9rem;
}
.faq_a p:last-child {
  margin-bottom: 0;
}
/* KI-Kasten steht jetzt unter dem Ablauf */
#ablauf .ai-note {
  margin-top: 3rem;
}

/* Team: lange Jobbezeichnung. Wo die Karte zu schmal für eine Zeile ist, steht die Kurzform (GF). */
.job-short { display: none; }
.team_card { container-type: inline-size; }
@container (max-width: 240px) {
  .job-long { display: none; }
  .job-short { display: inline; }
}
/* Team: am Desktop sechs nebeneinander (Wunsch Inhaber 15.10.: 3 × 2 war zu groß) */
@media screen and (min-width: 1200px) {
  .team_grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-column-gap: 1.25rem;
  }
  .team_name {
    font-size: 1rem;
  }
}

/* =========================================================================
   Social First Ads Karte (Startseite): Wand aus Ad-Beispielen (9:16), leicht schräg in 3D,
   Spalten bewegen sich beim Scrollen gegenläufig (abwechselnd hoch/runter).
   Bewegung: public/js/custom.js (Abschnitt "Reel-Wall"). Bilder: /img/reels/ (bewusst ohne „ad“ im Namen: Werbeblocker sperren /ads/- und ad-Pfade)
   8 Spalten, in schmalen Karten (≤ 400 px) 6 (äußere ausgeblendet). Anordnung der Bilder: gleiche Motive bewusst weit auseinander.
   ========================================================================= */
.reel-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1100px;
  background: radial-gradient(circle at 50% 40%, #1f4a40, #121312 75%);
  transition: transform 0.6s ease;
}
.offer-card:hover .reel-wall {
  transform: scale(1.04);
}
.reel-wall_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8%;
  transform: translate(-50%, -50%) rotateX(20deg) rotateZ(-11deg);
}
.reel-wall_col {
  flex: 0 0 10.6%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.8vw, 9px);
  will-change: transform;
}
/* Kachel = Bild + Instagram-Ad-Oberfläche (Profil, Gesponsert, Icons, Button) als SVG darüber */
.reel-tile {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
}
.reel-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 191 / 374;
  object-fit: cover;
}
.reel-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/reels/ui-1.svg") center / 100% 100% no-repeat;
}
/* JYSK-Motive (Employer Branding) mit „Jetzt bewerben“, alle anderen „Mehr dazu“ */
.reel-tile.is-job::after {
  background-image: url("/img/reels/ui-bewerben.svg");
}
/* nach Kartenbreite statt Bildschirmbreite: schmale Karte = 6 Spalten */
@container (max-width: 400px) {
  .reel-wall_col:first-child,
  .reel-wall_col:last-child {
    display: none;
  }
  .reel-wall_col {
    flex-basis: 14.6%;
  }
  .reel-wall_inner {
    gap: 2%;
  }
}

/* =========================================================================
   Social First Content Karte (Startseite): Bühne mit Content-Beispielen je Plattform.
   Links YouTube (Querformat), rechts drei Hochkant-Formate (Shorts, TikTok, Instagram).
   Videos laufen stumm in Schleife, nur solange die Karte sichtbar ist (custom.js "Content-Bühne").
   ========================================================================= */
.content-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 52fr 48fr;
  align-items: center;
  gap: 3%;
  padding: 0 3.8%;
  perspective: 900px;
  background: radial-gradient(circle at 30% 35%, #1f4a40, #121312 75%);
  transition: transform 0.6s ease;
}
.offer-card:hover .content-stage {
  transform: scale(1.03);
}
.content-stage figure {
  margin: 0;
}
.cs-screen {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background-color: #0b0c0b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cs-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* leichte 3D-Schräge: beide Seiten zur Mitte hin gedreht; translate = Scroll-Bewegung (custom.js) */
.cs-yt {
  transform: rotateY(16deg) rotateX(4deg);
  translate: 0 var(--cs-y, 0px);
}
.cs-yt .cs-screen {
  aspect-ratio: 16 / 9;
}
/* drei Hochkant-Formate leicht aufgefächert, mittleres vorne */
.cs-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(-16deg) rotateX(4deg);
}
.cs-phone {
  position: relative;
  flex: 0 0 39%;
  translate: 0 var(--cs-y, 0px);
}
.cs-phone + .cs-phone {
  margin-left: -8%;
}
/* deutlich versetzt: außen tiefer, Mitte höher */
.cs-shorts {
  transform: rotate(-4deg) translateY(13%);
}
.cs-tiktok {
  z-index: 1;
  transform: translateY(-13%);
}
.cs-insta {
  transform: rotate(4deg) translateY(13%);
}
.cs-phone .cs-screen {
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.cs-logo {
  position: absolute;
  top: 6%;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.cs-logo svg {
  display: block;
  width: clamp(11px, 1.3vw, 17px);
  height: auto;
}
/* rechtes Telefon: linke Kante liegt unter dem mittleren, Logo deshalb rechts */
.cs-insta .cs-logo {
  left: auto;
  right: 8%;
}
.cs-logo-yt {
  top: 7%;
  left: 4.5%;
}
.cs-logo-yt svg {
  width: clamp(14px, 1.6vw, 22px);
}
.cs-logo b {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(8px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
/* roter YouTube-Fortschrittsbalken */
.cs-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
}
.cs-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--cs-progress, 35%);
  background-color: #ff0033;
}

/* schmale Karten (Handy): unten Platz für das Label „Organischer Content“ lassen */
@container (max-width: 400px) {
  .content-stage {
    padding-bottom: 46px;
  }
  .cs-shorts {
    transform: rotate(-4deg) translateY(8%);
  }
  .cs-tiktok {
    transform: translateY(-8%);
  }
  .cs-insta {
    transform: rotate(4deg) translateY(8%);
  }
}

/* =========================================================================
   Team: Fotos sind quadratisch. Die Bildfläche war breiter als hoch (min-height 240px),
   dadurch wurde unten ein Viertel abgeschnitten und die E-Mail saß am Kinn.
   Ab Tablet-Breite quadratisch = ganzes Foto sichtbar.
   ========================================================================= */
@media screen and (min-width: 768px) {
  .team_image-wrap {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}

/* =========================================================================
   Case Studies: Startseite (#projekte) und Unterseiten /case-studies/…
   Runde 2 (Feedback 15.10.): keine Kästen, Medien schweben frei, viel Luft zwischen den Cases.
   Videos mit data-inview laufen stumm, nur im Sichtbereich (custom.js "Videos im Sichtbereich").
   Medien: /video/cases/ (gebaut mit ../tools/case-loops.sh und ../tools/casusquo-kurzfassung.sh)
   ========================================================================= */
@media screen and (min-width: 992px) {
  #projekte.section_cases .container {
    width: min(95%, max(72%, 900px));
  }
}
.case-list {
  z-index: 1;
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
  margin-top: 2rem;
}
/* ein Case: Medien und Text nebeneinander, abwechselnd links/rechts, getrennt durch feine Linie + viel Abstand */
.case-item {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: left;
}
.case-item + .case-item {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent) 1;
}
.case-item.is-flipped .case-item_media {
  order: 2;
}
.case-item_media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  text-decoration: none;
}
/* weiches Leuchten hinter den Medien statt Kasten */
.case-item_media::before,
.case-hero_media::before,
.case-row_visual::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 197, 172, 0.22), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.case-item_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
  font-family: var(--main-text-font);
}
/* deutlich als Case Study erkennbar (Wunsch Inhaber: Übergang von allgemeinen Infos zu Fallbeispielen klar machen) */
.case-item_index {
  padding: 0.45rem 0.9rem;
  border-radius: 100vw;
  background-color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0b1f1b;
}
.case-item_label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.case-item .case-item_title {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: left;
}
.case-item_text {
  max-width: 34rem;
  margin-bottom: 0;
}
.case-item_link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: #fff;
  text-decoration: none;
}
.case-more {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Medien: Hochkant-Videos frei nebeneinander, Mitte höher */
.case-phones {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4%;
}
.case-phone {
  position: relative;
  overflow: hidden;
  width: min(29cqw, 48cqh);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background-color: #0b0c0b;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateY(6%);
}
.case-phone:nth-child(2) {
  transform: translateY(-6%);
}
.case-phones.is-two .case-phone {
  width: min(36cqw, 48cqh);
}
.case-phone video,
.case-wide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-wide {
  position: absolute;
  inset: 8% 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Kennzahlen ohne Kästen: große Zahl, kleiner Text, feine Trennlinien */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 2rem 0;
}
.case-stats {
  column-gap: 1.25rem;
}
.case-stat {
  padding: 0 0 0 1rem;
  border-left: 1px solid rgba(75, 197, 172, 0.35);
  text-align: left;
}
.case-stat_value {
  font-family: var(--main-text-font);
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--accent-primary);
}
.case-stat_label {
  margin-top: 0.4rem;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Unterseiten ---------- */
.case-hero_media {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  aspect-ratio: 16 / 10;
  margin: 3rem auto 0;
}
.case-stats.is-hero {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  margin: 2.5rem auto 0;
}
.case-stats.is-hero .case-stat {
  text-align: center;
}

.case-story {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(5rem, 10vw, 8.5rem);
  width: min(100%, 1080px);
  margin: 0 auto;
}
.case-index {
  margin-bottom: 0.75rem;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
}
.case-story .case-h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-align: left;
}
.case-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  text-align: left;
}
.case-row.is-flipped .case-row_visual {
  order: -1;
}
.case-row_text .main-text {
  margin-bottom: 1rem;
}
.case-row_text .main-text:last-child {
  margin-bottom: 0;
}
.case-row_visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.case-row_visual > * {
  position: relative;
  z-index: 1;
}
.case-row_visual .case-phones.is-inline {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 4 / 3.4;
}
.case-single {
  margin: 0;
  width: min(48%, 250px);
  text-align: center;
}
.case-single .case-phone {
  width: 100%;
  transform: none;
}
.case-single figcaption {
  margin-top: 1rem;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.case-full {
  text-align: center;
}
.case-full_head {
  width: min(100%, 680px);
  margin: 0 auto 2.5rem;
}
.case-full_head .case-h2 {
  text-align: center;
}
/* Zeitleiste (Paulberger) */
.case-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 2.25rem 0 0;
  list-style: none;
  text-align: left;
}
.case-timeline::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-primary), rgba(75, 197, 172, 0.15));
}
.case-timeline li {
  position: relative;
}
.case-timeline li::before {
  content: "";
  position: absolute;
  top: -2.1rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: var(--accent-primary);
  box-shadow: 0 0 0 6px rgba(75, 197, 172, 0.15);
}
.case-timeline_month {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.case-timeline p {
  margin: 0;
  font-family: var(--main-text-font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
/* große Zahlen (Ergebnisse) */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  text-align: left;
}
.case-number_value {
  font-family: var(--main-text-font);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-primary);
}
.case-number_label {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--main-text-font);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
/* Galerie: Hochkant-Videos frei nebeneinander */
.case-gallery {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.case-gallery .case-phone {
  width: min(28%, 230px);
}
/* Zitate */
.case-bigquote {
  margin: 0;
  text-align: left;
}
.case-bigquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--main-text-font);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.case-bigquote figcaption {
  margin-top: 1rem;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}
.case-bigquote figcaption strong {
  display: block;
  color: var(--accent-primary);
}
.case-testimonial {
  display: grid;
  gap: 3rem;
  text-align: left;
}
.case-testimonial_video video {
  display: block;
  width: 100%;
  border-radius: 18px;
  background-color: #000;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.75);
}
.case-testimonial_quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.case-testimonial_quotes blockquote {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
/* Zielgruppen-Tags, vorher probiert */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 26rem;
}
.case-tags_label {
  width: 100%;
  margin-bottom: 0.5rem;
  font-family: var(--main-text-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.case-tags span {
  padding: 0.55rem 1rem;
  border: 1px solid rgba(75, 197, 172, 0.35);
  border-radius: 100vw;
  font-family: var(--main-text-font);
  font-size: 0.9rem;
  color: #fff;
}
.case-tried {
  width: min(100%, 22rem);
}
.case-tried ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-tried li {
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.04);
  font-family: var(--main-text-font);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.case-tried_result {
  margin-top: 1rem;
  font-family: var(--main-text-font);
  font-weight: 700;
  text-align: center;
  color: var(--accent-primary);
}
/* Lernweg (casusQuo) und Funnel (Neukunden) */
.case-path,
.case-funnel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.case-funnel {
  grid-template-columns: repeat(4, 1fr);
}
.case-path li,
.case-funnel li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.25rem;
  text-align: left;
}
.case-path li + li::before,
.case-funnel li + li::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -0.85rem;
  font-family: var(--main-text-font);
  font-weight: 700;
  color: var(--accent-primary);
  transform: translateY(-50%);
}
.case-path strong,
.case-funnel strong {
  font-family: var(--main-text-font);
  font-size: 1.15rem;
  color: #fff;
}
.case-funnel strong {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--accent-primary);
}
.case-funnel li:first-child strong {
  font-size: 1.15rem;
  color: #fff;
}
.case-path span,
.case-funnel span {
  font-family: var(--main-text-font);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.case-path li:last-child strong {
  color: var(--accent-primary);
}
/* Rechnung (Neukunden) */
.case-equation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.75rem;
}
.case-equation > span:not(.case-equation_op) {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.case-equation strong {
  font-family: var(--main-text-font);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.case-equation .is-result strong {
  color: var(--accent-primary);
}
.case-equation_op {
  font-family: var(--main-text-font);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.4);
}
.case-equation_note {
  margin-top: 1.5rem;
}
/* großer Abschlusssatz statt Kasten */
.case-statement {
  width: min(100%, 820px);
  margin: 0 auto;
  text-align: center;
}
.case-statement_label {
  margin-bottom: 1rem;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.case-statement p {
  margin: 0;
  font-family: var(--main-text-font);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
/* weitere Cases */
.case-next {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  margin: clamp(5rem, 10vw, 8rem) auto 0;
  text-align: left;
}
.case-next_label {
  margin-bottom: 1.25rem;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.case-next_links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.case-next_link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--main-text-font);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.case-next_link:hover {
  border-color: var(--accent-primary);
}
.case-next_link span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.case-next_link strong {
  font-size: 1rem;
  line-height: 1.35;
}

@media screen and (max-width: 991px) {
  .case-item,
  .case-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .case-item.is-flipped .case-item_media {
    order: 0;
  }
  .case-row.is-flipped .case-row_visual {
    order: 0;
  }
  .case-item_media {
    width: min(100%, 560px);
    margin: 0 auto;
  }
  .case-timeline {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 0 0 0 2.25rem;
  }
  .case-timeline::before {
    top: 0;
    bottom: 0;
    left: 0.45rem;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--accent-primary), rgba(75, 197, 172, 0.15));
  }
  .case-timeline li::before {
    top: 0.2rem;
    left: -2.25rem;
  }
  .case-numbers {
    grid-template-columns: 1fr 1fr;
  }
  .case-testimonial_quotes {
    grid-template-columns: 1fr;
  }
  .case-path,
  .case-funnel {
    grid-template-columns: 1fr;
  }
  .case-path li + li::before,
  .case-funnel li + li::before {
    content: "↓";
    top: -0.9rem;
    left: 1.25rem;
    transform: none;
  }
  .case-next_links {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  .case-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .case-stat,
  .case-stats.is-hero .case-stat,
  .case-stats.is-hero .case-stat:first-child {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0;
    border-left: 0;
    text-align: left;
  }
  .case-stat_label {
    margin-top: 0;
  }
  .case-numbers {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .case-gallery .case-phone {
    width: 31%;
  }
  .case-single {
    width: 60%;
  }
}

/* casusQuo: Testimonial oben links, zwei Ads (4:5) rechts, leicht überlappend.
   Positionen so gewählt, dass die Untertitel des Testimonials (unten mittig) und die Texte der Ads frei bleiben:
   Ad A (Data Scientist) oben rechts vorne, Ad B (weißer Balken) darunter versetzt, überlappt nur eine Bildecke. */
.case-combo {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.case-combo .case-wide {
  inset: 4% 30% 28% 0;
}
.case-combo_ads {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.case-ad {
  position: relative;
  overflow: hidden;
  width: 48%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background-color: #0b0c0b;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.case-combo_ads .case-ad {
  position: absolute;
}
.case-combo_ads .case-ad.is-a {
  z-index: 2;
  top: 0;
  right: 0;
  width: 23%;
}
.case-combo_ads .case-ad.is-b {
  z-index: 1;
  top: 38%;
  right: 8%;
  width: 25%;
}
.case-ad video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-gallery.is-ads .case-ad {
  width: min(30%, 280px);
}
.case-gallery.is-ads .case-ad:nth-child(2) {
  transform: translateY(-6%);
}

/* Runde 3: neue Bausteine der Case-Seiten */
.case-landscape {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.case-landscape video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-trio {
  width: 100%;
  margin: 0;
  text-align: center;
}
.case-trio figcaption {
  margin-top: 0.75rem;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.case-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.case-process li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(75, 197, 172, 0.35);
}
.case-process_n {
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
}
.case-process strong {
  font-family: var(--main-text-font);
  font-size: 1.1rem;
  color: #fff;
}
.case-process li > span:last-child {
  font-family: var(--main-text-font);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.case-iteration_label {
  margin-bottom: 1rem;
  font-family: var(--main-text-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.case-gallery.is-ads {
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.case-gallery.is-ads .case-ad {
  width: min(18%, 210px);
}
.case-gallery.is-ads .case-ad:nth-child(2),
.case-gallery.is-ads .case-ad:nth-child(4) {
  transform: translateY(-6%);
}
.case-ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Interview: lädt erst beim Klick */
.case-player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background-color: #000;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.75);
}
.case-player img,
.case-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-player_play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--accent-primary);
  color: #0b1f1b;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.case-player_play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.case-player_play svg {
  width: 2rem;
  height: 2rem;
  margin-left: 0.2rem;
}
.case-player_meta {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 100vw;
  background-color: rgba(18, 18, 18, 0.72);
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  color: #fff;
}
.case-player.is-playing .case-player_play,
.case-player.is-playing .case-player_meta {
  display: none;
}
/* Zitat mit rundem Profilbild */
.case-bigquote.has-face figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.case-bigquote.has-face figcaption img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(75, 197, 172, 0.5);
}
@media screen and (max-width: 991px) {
  .case-process {
    grid-template-columns: 1fr 1fr;
  }
  .case-gallery.is-ads .case-ad {
    width: min(30%, 200px);
  }
}
@media screen and (max-width: 479px) {
  .case-process {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .case-gallery.is-ads .case-ad {
    width: 44%;
  }
  .case-gallery.is-ads .case-ad:nth-child(2),
  .case-gallery.is-ads .case-ad:nth-child(4) {
    transform: none;
  }
}

/* casusQuo „Die Ads“: Collage, Ränder laufen weich aus (es geht ums Gefühl, nicht um einzelne Ads) */
.case-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 100%);
}
.case-collage_item {
  position: absolute;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  z-index: var(--z);
  overflow: hidden;
  width: calc(var(--w) * 1%);
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background-color: #0b0c0b;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: var(--o);
  transform: rotate(var(--r));
}
.case-collage_item img,
.case-collage_item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .case-collage {
    aspect-ratio: 1 / 1;
  }
  .case-collage_item {
    width: calc(var(--w) * 1.55%);
  }
}

/* Zitate im Testimonial-Bereich: als Zitat abgehoben, Profilbild rund, Name linksbündig */
.case-testimonial_quotes .case-bigquote.has-face {
  position: relative;
  padding: 3rem 1.75rem 1.75rem;
  border: 1px solid rgba(75, 197, 172, 0.2);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(75, 197, 172, 0.12), rgba(75, 197, 172, 0.02) 70%);
}
.case-testimonial_quotes .case-bigquote.has-face::before {
  content: "“";
  position: absolute;
  top: -0.35rem;
  left: 1.4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--accent-primary);
}
.case-testimonial_quotes .case-bigquote.has-face blockquote {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
}
.case-bigquote.has-face figcaption {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.case-bigquote.has-face figcaption span {
  display: block;
  text-align: left;
}
.case-bigquote.has-face figcaption img {
  width: 64px;
  height: 64px;
}

/* Runde 5 */
/* Collage: Scroll-Bewegung (--py aus custom.js) + Hover-Video über dem Standbild */
.case-collage_item {
  transform: translateY(var(--py, 0px)) rotate(var(--r));
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}
.case-collage_item video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.case-collage_item.is-playing {
  z-index: 10;
  opacity: 1;
  box-shadow: 0 26px 50px -10px rgba(0, 0, 0, 0.85), 0 0 0 2px var(--accent-primary);
}
.case-collage_item.is-playing video {
  opacity: 1;
}
@media (hover: hover) {
  .case-collage_item[data-hover-video] {
    cursor: pointer;
  }
}

/* Iteration: kein eigener Block, nur die Überschrift etwas kräftiger als die übrigen Mini-Labels */
.case-iteration .case-iteration_label {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
}

/* Zitatkarten gleich hoch, Profilbild und Name auf einer Linie */
.case-testimonial_quotes {
  align-items: stretch;
}
.case-testimonial_quotes .case-bigquote.has-face {
  display: flex;
  flex-direction: column;
}
.case-testimonial_quotes .case-bigquote.has-face figcaption {
  margin-top: auto;
}
.case-testimonial_quotes .case-bigquote.has-face blockquote {
  margin-bottom: 1.5rem;
}

/* Cloudflare-Stream-Player */
.case-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Projekte: Video-Library (/projekte), gebaut mit tools/projekte-library.mjs */
/* Desktop: 12 Spalten, Zeilenhöhe so, dass eine Kachel mit 4 Spalten genau 16:9 ist (große Kachel = 8 Spalten x 2 Zeilen) */
.lib-wrap {
  width: 100%;
  container-type: inline-size;
}
.projekte_grid.lib-grid {
  --lib-gap: 24px;
  --lib-row: calc(((100cqw - 11 * var(--lib-gap)) / 3 + 3 * var(--lib-gap)) / 1.7778);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(var(--lib-row), auto);
  grid-auto-flow: dense;
  gap: var(--lib-gap);
}
.lib-grid > .w4 {
  grid-column: span 4;
}
.lib-grid > .w8 {
  grid-column: span 8;
}
.lib-grid > .w12,
.lib-grid > .lib-group {
  grid-column: 1 / -1;
}
.lib-grid > .h2 {
  grid-row: span 2;
}
.lib-grid > .w8.is-right {
  grid-column: 5 / -1;
}
.lib-item {
  height: auto;
  min-height: 0;
  cursor: pointer;
}
.lib-item .projekte_grid-item_heading {
  font-size: 1.2rem;
  text-align: left;
}
.lib-item.has-logo .projekte_grid-item_overlay {
  padding-right: 150px;
}
.lib-item .projekte_grid-item_play-button {
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  margin-bottom: 3.5rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.lib-item:hover .projekte_grid-item_play-button,
.lib-item .projekte_grid-item_play-button:focus-visible {
  transform: scale(1.12);
  background-color: rgba(255, 255, 255, 0.6);
}
.lib-item .projekte_grid-item_image {
  transform: scale(var(--zoom, 1));
  transition: transform 0.6s ease;
}
.lib-item:hover .projekte_grid-item_image {
  transform: scale(calc(var(--zoom, 1) * 1.04));
}
.lib-item .projekte_grid-item_logo.is-color {
  filter: none;
  max-height: 56px;
  border-radius: 6px;
}
.lib-item .projekte_grid-item_logo.is-hdi {
  max-width: 84px;
  max-height: 34px;
}
/* Kleine Kacheln: kompakter, Play-Button in die Ecke */
.lib-item.w4 .projekte_grid-item_overlay,
.lib-item.is-vertical .projekte_grid-item_overlay {
  padding: 1.25rem;
}
.lib-item.w4.has-logo .projekte_grid-item_overlay {
  padding-right: 115px;
}
.lib-item.w4 .projekte_grid-item_heading {
  font-size: 1rem;
}
.lib-item.w4 .projekte_grid-item_logo {
  max-width: 90px;
  max-height: 40px;
}
.lib-item.w4 .projekte_grid-item_play-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  margin: 0;
}

/* Kennzahlen-Karte */
.lib-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 1rem;
  row-gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.04);
}
.lib-stat {
  display: contents;
}
.lib-card .case-number_value {
  align-self: center;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  white-space: nowrap;
}
.lib-card .case-number_label {
  align-self: center;
  margin: 0;
  padding: 0 0 0 1rem;
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Kundenstimme über FASTLANES: eigene Gestaltung in Türkis (anders als Kunden-Testimonials mit Kundenlogo) */
.lib-item.is-voice .projekte_grid-item_image {
  z-index: 0;
}
.lib-item.is-voice .projekte_grid-item_overlay {
  z-index: 1;
  padding: 1.75rem;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--accent-primary);
  background-image: linear-gradient(rgba(6, 18, 16, 0) 35%, rgba(6, 18, 16, 0.92));
}
.lib-voice_mark {
  position: absolute;
  top: 1.5rem;
  left: 1.75rem;
  z-index: 2;
  width: 44px;
  height: 33px;
  color: var(--accent-primary);
}
.lib-item.is-voice .projekte_grid-item_label {
  margin-bottom: 0.9rem;
  background-color: var(--accent-primary);
  color: #0b1f1b;
  font-weight: 700;
}
.lib-item.is-voice .projekte_grid-item_heading {
  margin: 0;
  font-size: 1.4rem;
}
.lib-voice_role {
  margin: 0.35rem 0 0;
  font-family: var(--main-text-font);
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

/* Kampagne: Spot + Hochformate in einer Zeile, alle gleich hoch */
.lib-group {
  display: grid;
  grid-template-columns: 16fr 5.0625fr 5.0625fr 5.0625fr;
  gap: 16px;
}
.lib-group .lib-item:first-child {
  aspect-ratio: 16 / 9;
}
.lib-group .lib-item.is-vertical {
  height: 100%;
}
.lib-item.is-vertical .projekte_grid-item_heading {
  font-size: 0.9rem;
}
.lib-item.is-vertical .projekte_grid-item_label {
  margin-top: 0.4rem;
  font-size: 0.7rem;
}
.lib-item.is-vertical .projekte_grid-item_play-button {
  width: 44px;
  height: 44px;
  margin-bottom: 45%;
}

/* Tablet und kleine Laptops: zwei Spalten, große Kacheln über die ganze Breite */
@media screen and (max-width: 1199px) {
  .projekte_grid.lib-grid {
    --lib-gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row;
  }
  .lib-grid > .w4 {
    grid-column: span 1;
  }
  .lib-grid > .w8,
  .lib-grid > .w8.is-right,
  .lib-grid > .is-voice,
  .lib-grid > .is-tablet-wide {
    grid-column: 1 / -1;
  }
  .lib-grid > .h2 {
    grid-row: auto;
  }
  .lib-grid > .lib-item {
    aspect-ratio: 16 / 9;
  }
  .lib-group {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .lib-group .lib-item:first-child {
    grid-column: 1 / -1;
  }
  .lib-group .lib-item.is-vertical {
    aspect-ratio: 9 / 16;
    height: auto;
  }
}
/* Handy: eine Spalte */
@media screen and (max-width: 767px) {
  .projekte_grid.lib-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lib-grid > .w4 {
    grid-column: 1 / -1;
  }
  .lib-grid > .lib-item.is-voice {
    aspect-ratio: 4 / 5;
  }
  .lib-item .projekte_grid-item_play-button {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  .lib-item.has-logo .projekte_grid-item_overlay,
  .lib-item.w4.has-logo .projekte_grid-item_overlay {
    padding-right: 120px;
  }
  .lib-item .projekte_grid-item_heading,
  .lib-item.w4 .projekte_grid-item_heading {
    font-size: 1.05rem;
  }
  .lib-card {
    padding: 1.5rem;
  }
  .lib-item .projekte_grid-item_logo.is-hdi {
    max-width: 56px;
    max-height: 23px;
  }
  .lib-group {
    gap: 10px;
  }
  .lib-item.is-vertical .projekte_grid-item_overlay {
    padding: 0.6rem;
  }
  .lib-item.is-vertical .projekte_grid-item_heading {
    font-size: 0.68rem;
  }
  .lib-item.is-vertical .projekte_grid-item_label {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  .lib-item.is-vertical .projekte_grid-item_play-button {
    width: 36px;
    height: 36px;
    margin-top: 0;
    margin-bottom: 60%;
  }
}

/* Player-Fenster: Video lädt erst beim Klick */
.lib-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background-color: rgba(8, 8, 8, 0.92);
}
.lib-modal[hidden] {
  display: none;
}
.lib-modal_box {
  position: relative;
  width: min(92vw, calc(84vh * 16 / 9), 1400px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background-color: #000;
}
.lib-modal.is-vertical .lib-modal_box {
  width: min(92vw, calc(84vh * 9 / 16));
  aspect-ratio: 9 / 16;
}
.lib-modal_box iframe,
.lib-modal_box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lib-modal_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lib-modal_close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
html.lib-open {
  overflow: hidden;
}

/* Kontaktseite (16.10.2026) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Druk hat kein Ü: zwei Punkte im Stil der Schrift über dem U */
.uml {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.uml::before,
.uml::after {
  content: "";
  position: absolute;
  top: 0.03em;
  width: 0.1em;
  height: 0.1em;
  background-color: currentColor;
}
.uml::before {
  left: 0.07em;
}
.uml::after {
  right: 0.07em;
}
.form-req {
  color: var(--accent-primary);
}
.form-hint {
  width: 100%;
  margin: 0.6rem 0 0;
  text-align: left;
  font-family: var(--main-text-font);
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.form-promise {
  margin: 0.9rem 0 0;
  font-family: var(--main-text-font);
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}
.m-contact-checkbox-label {
  text-align: left;
}
.m-contact-checkbox-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.m-contact-checkbox-label a:hover {
  color: var(--accent-primary);
}

/* Übergang zum Footer (Feedback Basel 16.10.): Der Hauptbereich schnitt die Lichtscheine der letzten Sektion hart ab,
   dadurch entstand eine dunkle Kante über dem Footer. Jetzt nur noch seitlich kappen, nach unten laufen sie weich in den Footer aus. */
@supports (overflow: clip) {
  .main-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }
}