/* =====================================================
   PAGES.CSS — Subpage-Module
   Baukasten für alle Unterseiten. Nutzt ausschließlich die Tokens, Fonts,
   Kontur-, Button- und Wellen-Systeme aus home.css (dort im :root definiert).
   home.css bleibt unverändert; diese Datei ergänzt nur neue Modul-Klassen.
   ===================================================== */

/* --- Generic section rhythm (mirrors the home section padding) --- */
.section {
  padding: var(--section-pad-y) 0;
}
/* A section whose next sibling has a rising wave needs extra bottom room so its
   content clears the wave crest (fixes content overlapping the wave). */
.section:has(+ .wave-in),
.steps-section:has(+ .wave-in) {
  padding-bottom: calc(var(--section-pad-y) + clamp(44px, 5.5vw, 92px));
}
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }
.section--offwhite { background: var(--off-white); }
.section--gray { background: var(--gray-100); }
.section--purple { background: var(--brand-purple); color: var(--white); }
.section--orange { background: var(--brand-orange); }
.section--green  { background: var(--brand-green); }
.section--pink   { background: var(--brand-pink); }
.section--yellow { background: var(--brand-yellow); }

/* Section heading — centred eyebrow + display headline + lede */
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
.section-head--left { margin-left: 0; text-align: left; }

/* Produkt-Section auf der Einlagenseite: Hier gibt es keine Welle zum Ueberlappen
   (die Home nutzt dafuer die .trustbar-Kompensation). Der globale Home-"Lift"
   (negativer margin-top) wuerde das Produktmodul sonst ueber den Section-Kopf
   ziehen -> neutralisieren, damit oberhalb genug Luft bleibt. */
#angebot .product-buy { margin-top: 0; }
.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--black);
  margin: 0 0 16px;
  text-wrap: balance;
}
.section-head__intro {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0;
}
.section--purple .section-head__title,
.section--purple .section-head__intro { color: var(--white); }
.section--purple .section-head__intro { color: rgba(255,255,255,0.92); }
.section--purple .eyebrow { color: var(--white); }
/* cat-grid-Karten stehen auf der Kategorieseite direkt auf Lila (kein Off-White-
   Panel wie im Home-Akkordeon) -> schwarzer Text waere unlesbar. Text/Pfeil
   weiss, Body leicht gedimmt, Trennlinien hell. Gilt global auf jeder Lila-
   Section (Kategorie-Uebersichten). */
.section--purple .cat-card__title,
.section--purple .cat-card__arrow { color: var(--white); }
.section--purple .cat-card__body { color: rgba(255, 255, 255, 0.92); }
.section--purple .cat-card + .cat-card { border-top-color: rgba(255, 255, 255, 0.20); }

/* Bodycopy auf hellen Marken-Sections so dunkel wie die Headline (fast schwarz) —
   auf Orange/Grün/Pink/Gelb braucht die Copy vollen Kontrast. Lila bleibt weiß. */
.section--orange .section-head__intro,
.section--green  .section-head__intro,
.section--pink   .section-head__intro,
.section--yellow .section-head__intro,
.section--orange .text-media__lede,
.section--green  .text-media__lede,
.section--pink   .text-media__lede,
.section--yellow .text-media__lede,
.section--orange .fit-list__lead,
.section--green  .fit-list__lead,
.section--pink   .fit-list__lead,
.section--yellow .fit-list__lead { color: var(--black); }

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--gray-700); transition: color var(--dur-xs) var(--ease-smooth); }
.breadcrumb a:hover { color: var(--brand-purple); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--black); }

/* =====================================================
   SUBHERO — mirrors the home hero: a full-bleed motif fills the section and
   scales up BEHIND the floating nav; the cards sit on the right.
   ===================================================== */
.subhero {
  position: relative;
  min-height: min(90svh, 820px);
  /* slide up behind the sticky nav, then pad the content back down */
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
  overflow: hidden;
  background: var(--off-white);
}
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.subhero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* left grid column stays empty so the cards sit in the right half, motif behind */
.subhero__spacer { position: relative; z-index: 0; }
.subhero .hero__cards { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .subhero { grid-template-columns: 1fr; min-height: min(86svh, 680px); align-items: end; }
  .subhero__spacer { display: none; }
}

/* =====================================================
   MEDIA FRAME — reusable framed image
   ===================================================== */
.media-frame {
  position: relative;
  margin: 0;
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--black);
}
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-smooth);
}
.media-frame__cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  background: var(--off-white);
  border: 2px solid var(--black);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

/* =====================================================
   TEXT + MEDIA — two column module (reversible)
   ===================================================== */
.text-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.text-media--reverse .text-media__body { order: 2; }
.text-media__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--black);
  margin: 0 0 18px;
  text-wrap: balance;
}
.text-media__lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 16px;
}
.text-media__lede:last-of-type { margin-bottom: 28px; }
.section--purple .text-media__title { color: var(--white); }
.section--purple .text-media__lede { color: rgba(255,255,255,0.92); }
/* Split-Variante: Spalten oben ausrichten (statt vertikal zentriert) */
.text-media--start { align-items: start; }

/* "Für wen"-Liste: prominente Punkte mit lila Check-Badge + Trennlinien */
.fit-block .media-frame { align-self: start; }
.fit-list__lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 6px;
  text-transform: none;
}
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 2px;
  font-size: clamp(15.5px, 1.15vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--black);
  border-top: 1px solid var(--gray-200);
}
.fit-list__item:first-child { border-top: none; }
.fit-list__item::before {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 58%;
}
@media (max-width: 768px) { .fit-block { grid-template-columns: 1fr; } }

/* --- Prose block (long-form body copy) --- */
.prose { max-width: 65ch; }
.prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0 0 18px;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--black);
  margin: 32px 0 12px;
}

/* --- Offer card (compact, for pages that don't carry the full product module) --- */
.offer-card {
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  background: var(--off-white);
  padding: clamp(28px, 3vw, 40px);
  max-width: 520px;
}
.offer-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--black);
  margin: 0 0 8px;
}
.offer-card__price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 6px 0 4px;
}
.offer-card__note { font-size: 13px; color: var(--gray-500); margin: 0 0 22px; }
.offer-card__note--foot { margin: 16px 0 0; }
.offer-card__list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.offer-card__item { display: flex; gap: 12px; font-size: 15.5px; color: var(--gray-700); line-height: 1.5; }
.offer-card__item::before {
  content: "";
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--black);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
}

/* --- Feature / check grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 820px;
  margin: 0 auto;
}
.feature-item {
  display: flex;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--off-white);
}
.feature-item::before {
  content: "";
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-purple);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 60%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 60%;
}
.feature-item__title { font-weight: 700; font-size: 15.5px; color: var(--black); margin: 0 0 4px; }
.feature-item__body { font-size: 14.5px; line-height: 1.55; color: var(--gray-700); margin: 0; }

/* --- Flow: compact numbered steps (unpinned, for subpages) --- */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  counter-reset: flow;
}
.flow__step {
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--off-white);
  padding: clamp(18px, 1.8vw, 24px);
}
.flow__num {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
}
.flow__title { font-weight: 700; font-size: 15.5px; color: var(--black); margin: 0 0 6px; }
.flow__body { font-size: 14px; line-height: 1.5; color: var(--gray-700); margin: 0; }

/* Inline button row (e.g. primary + secondary CTA next to body copy) */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }

/* Line glyph for the step-card icon panel when there is no dedicated illustration */
.step-card__glyph { width: clamp(66px, 7vw, 92px); height: auto; color: var(--black); display: block; }
/* "Im Preis enthalten": einheitlich grosse Icons mit gleichem Randabstand.
   Bewusst auf diese Liste begrenzt — der Ablauf-Stack nutzt weiter die
   groesseren Anleitungs-Illustrationen aus home.css. */
.steps-stack--included .step-card__icon img { width: clamp(89px, 9.5vw, 124px); height: auto; display: block; }
.steps-stack--included .step-card:nth-child(4) { grid-template-columns: minmax(0, 1fr) clamp(150px, 18vw, 220px); }
.steps-stack--included .step-card:nth-child(4) .step-card__icon { padding: clamp(16px, 1.8vw, 24px); }
.steps-stack--included .step-card:nth-child(4) .step-card__icon img { height: auto; }

/* Centred section footer (e.g. a follow-up link under a module) */
.section-foot { text-align: center; margin-top: clamp(28px, 3vw, 44px); }
/* Linksbuendiger Kopf -> auch der untere CTA (section-foot) linksbuendig,
   wie das Themen-Modul auf der Home. Gilt automatisch fuer alle cat-grid-Sektionen. */
.section-head--left ~ .section-foot { text-align: left; }
/* ... und ein Hinweis (.notice) darunter richtet sich ebenfalls links aus */
.section-head--left ~ .notice { margin-inline: 0; }
.mt-block { margin-top: clamp(40px, 5vw, 72px); }

/* On coloured sections the cards/frames stay off-white and pop; text follows */
.section--orange .text-media__title,
.section--green .text-media__title,
.section--pink .text-media__title { color: var(--black); }
.section--orange .eyebrow,
.section--green .eyebrow,
.section--pink .eyebrow,
.section--yellow .eyebrow { color: var(--black); }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; }
}

/* --- Hero trust line (sits under the CTA card, mirrors the doc's Trust-Zeile) --- */
.hero__trust {
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero__trust::before {
  content: "";
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
}

/* --- Tile grid: informational tiles (usage contexts etc.), non-clickable --- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--off-white);
  padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px) clamp(26px, 2.6vw, 34px);
}
.tile__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
}
.tile__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tile__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--black); margin: 0 0 7px; }
.tile__body { font-size: 14.5px; line-height: 1.55; color: var(--gray-700); margin: 0; }

/* Showcase-Variante: 5 Bildkacheln in einer Reihe, Foto randlos oben in der Karte */
.tile-grid--showcase {
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.1vw, 18px);
  align-items: stretch;
}
.tile-grid--showcase .tile {
  padding: 0 0 clamp(18px, 2vw, 26px);
  overflow: hidden;
}
.tile-grid--showcase .tile__media {
  width: 100%;
  aspect-ratio: 3 / 2;         /* entspricht exakt den 2016×1344-Fotos → randlos, kein Zuschnitt */
  margin-bottom: clamp(14px, 1.5vw, 20px);
  border-radius: 0;            /* obere Ecken werden über overflow:hidden der Karte gerundet */
  background: var(--white);
}
.tile-grid--showcase .tile__media img { object-fit: cover; }
.tile-grid--showcase .tile__title,
.tile-grid--showcase .tile__body {
  padding-inline: clamp(12px, 1.2vw, 18px);
}
@media (max-width: 1024px) { .tile-grid--showcase { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .tile-grid--showcase { grid-template-columns: repeat(2, 1fr); } }

/* --- Check list (e.g. "Für wen geeignet"), two columns of check bullets --- */
.check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  max-width: 860px;
  margin: 0 auto;
}
.check-list__item { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--gray-700); }
.check-list__item::before {
  content: "";
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-purple);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 62%;
}

/* --- Notice box (soft caveat / Hinweis) --- */
.notice {
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--gray-100);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 760px;
  margin: clamp(28px, 3vw, 40px) auto 0;
}
.notice strong { color: var(--black); }

/* FAQ-Seite: schlichte Rubriken auf off-white, nur durch eine feine Linie getrennt */
.faq-rubric { padding-block: clamp(48px, 6vw, 84px); }
.faq-rubric + .faq-rubric { position: relative; }
.faq-rubric + .faq-rubric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), var(--max-w, 1200px));
  border-top: 1px solid var(--gray-200);
}

/* --- Two-column FAQ: left intro + CTA (sticky), right accordion stack.
   Collapses to one column (intro centred above) on tablet. --- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  /* mehr Luft zwischen Intro-Spalte und Fragen */
  gap: clamp(56px, 8vw, 128px);
  align-items: start;
}
.faq-layout__intro { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq-layout__intro .section-head__title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 14px; }
.faq-layout__intro .btn-row { margin-top: 24px; }
.faq-layout .faq { max-width: none; margin: 0; }
@media (max-width: 991px) {
  /* gestapelt: Intro ueber den Fragen — hier braucht es ebenfalls mehr Luft */
  .faq-layout { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 88px); }
  .faq-layout__intro { position: static; text-align: center; max-width: 600px; margin: 0 auto; }
  .faq-layout__intro .btn-row { justify-content: center; }
}

/* --- FAQ accordion (native <details>, no JS, keyboard-accessible) --- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--off-white);
  overflow: hidden;
}
/* Das Home-FAQ-Modul (.faq-section/.faq-list) darf die Pill-Optik oben NICHT erben —
   Unterseiten laden pages.css, die Home nur home.css. Hier zurueck auf die
   linien-getrennte Home-Optik (identisch zur FAQ-Section unten auf der Home). */
.faq-list .faq-item {
  border: none;
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.2vw, 26px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: 0 0 22px;
  width: 22px; height: 22px;
  background: var(--black);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 60%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 60%;
  transition: transform var(--dur-xs, 180ms) var(--ease-smooth, ease);
}
.faq-item[open] > summary::after { transform: rotate(180deg); }
/* Der Body ist der animierte Container: kein eigenes Padding, sonst liesse er
   sich nicht auf Hoehe 0 fahren. Die Innenabstaende sitzen als margin am Text. */
.faq-item__body {
  padding: 0;
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gray-700);
  transition: height var(--dur-md) var(--ease-smooth),
              opacity var(--dur-sm) var(--ease-smooth);
}
.faq-item__body p {
  margin: 0 clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 24px);
}

/* --- Fragen fahren beim Erscheinen nacheinander hoch --- */
.faq[data-faqstagger] .faq-item {
  transform: translateY(26px);
  opacity: 0;
  transition: transform var(--dur-md) var(--ease-smooth),
              opacity var(--dur-md) var(--ease-smooth);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}
.faq[data-faqstagger].is-in .faq-item { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq[data-faqstagger] .faq-item { transform: none; opacity: 1; transition: none; }
  .faq-item__body { transition: none; }
}

@media (max-width: 700px) {
  .check-list { grid-template-columns: 1fr; }
}

/* --- Form (contact & co.) --- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form p { margin: 0; }
/* Breites Formular (Kontaktseite): volle Breite + zweispaltige Felder */
.offer-card--wide { max-width: none; }
.form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.form--grid > .form__full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form--grid { grid-template-columns: 1fr; } }
.form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 7px;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--black);
  background: var(--white);
  border: var(--border-w-sm) solid var(--black);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--dur-xs) var(--ease-smooth), box-shadow var(--dur-xs) var(--ease-smooth);
}
.form textarea { resize: vertical; min-height: 120px; }
.form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--gray-500); }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(98, 80, 255, 0.18);
}
.form small {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gray-500);
}
.form .btn { margin-top: 4px; }

/* --- Split section: one half a full-bleed image (no frame, no divider), the
   other half the text. Full-width, no container padding. --- */
.split-section { overflow: hidden; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(480px, 62vh, 700px);
}
.split__media { position: relative; overflow: hidden; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* --- Auto-Crossfade-Slider im Bildcontainer -----------------------------
   Fuenf Fertigungs-Fotos liegen deckungsgleich uebereinander (die .split__media
   img-Regel macht sie schon absolut + object-fit:cover). Ein gemeinsames
   Keyframe blendet jedes Bild in seinem 6s-Fenster ein und wieder aus; der
   negative animation-delay (--i * -6s) staffelt die fuenf ueber die 30s-Runde
   und sorgt fuer den nahtlosen Loop inkl. sauberem Start. */
.split__media--slider .split-slide {
  opacity: 0;
  animation: splitSlideshow 30s ease-in-out infinite;
  animation-delay: calc(var(--i) * -6s);
  will-change: opacity;
}
@keyframes splitSlideshow {
  0%   { opacity: 1; }   /* aktiv */
  16%  { opacity: 1; }   /* halten bis kurz vor dem Wechsel */
  20%  { opacity: 0; }   /* ausgeblendet (Ende des 6s-Fensters) */
  96%  { opacity: 0; }   /* wartet ausgeblendet */
  100% { opacity: 1; }   /* wieder eingeblendet -> schliesst an 0% an */
}
@media (prefers-reduced-motion: reduce) {
  .split__media--slider .split-slide { animation: none; opacity: 0; }
  .split__media--slider .split-slide:first-child { opacity: 1; }
}

.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(40px, 6vw, 84px) clamp(28px, 6vw, 88px);
}
.split__body > * { max-width: 34rem; margin-top: 0; margin-bottom: 0; }
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: clamp(280px, 56vw, 420px); }
  .split--reverse .split__media { order: 0; }
  .split__body { padding: clamp(32px, 8vw, 56px) var(--pad-x); }
}

/* --- Media cover: full-bleed background image with centred typography over it.
   Layout variance vs. the side-by-side text+image module. --- */
.media-cover {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(460px, 64vh, 660px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
}
.media-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.media-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.68) 100%);
  z-index: -1;
}
.media-cover__content {
  max-width: 660px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 56px);
}
.media-cover .eyebrow,
.media-cover .eyebrow--light { color: var(--white); }
.media-cover__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 20px;
  text-wrap: balance;
}
.media-cover__text {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin: 0 auto 26px;
  max-width: 54ch;
}
.media-cover .check-list {
  grid-template-columns: 1fr;
  max-width: 460px;
  margin: 0 auto 26px;
  text-align: left;
}
.media-cover .check-list__item { color: rgba(255,255,255,0.94); }
.media-cover__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.media-cover__note {
  margin: 22px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.media-cover__note strong { color: var(--white); font-weight: 700; }

/* --- Feature list: single column, each row with an icon (enumerations that read
   better stacked than in a two-column grid) --- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}
.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 26px);
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  background: var(--off-white);
}
.feature-list__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-purple);
  color: var(--white);
}
.feature-list__icon svg { width: 23px; height: 23px; display: block; }
.feature-list__title { font-weight: 700; font-size: 16px; color: var(--black); margin: 0 0 3px; }
.feature-list__body { font-size: 14.5px; line-height: 1.55; color: var(--gray-700); margin: 0; }

/* =====================================================
   ARTICLE — Blog-Detail-Layout (Beschwerden-Detailseiten)
   Grosse Headline + Bild + Intro, dann Sticky-Rail links + Artikelspalte rechts.
   ===================================================== */
/* Illustrations-Hero (Beschwerden-Detailseiten): Markenfarbe vollflaechig,
   Text links (Breadcrumb, Headline 2-zeilig, Copy), Illustration rechts + gross. */
.article-hero {
  background: var(--off-white); /* per Seite inline mit der Markenfarbe ueberschrieben */
  /* unter die schwebende Nav ziehen, damit die Markenfarbe auch HINTER der Nav
     liegt (kein weißer Blitzer oben); Inhalt per padding-top wieder herunterholen */
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(32px, 4.5vw, 72px)) 0 clamp(48px, 6vw, 96px);
  overflow: hidden;
  /* Inhalt vertikal zentriert */
  display: grid;
  align-content: center;
}
/* Einheitliche, kompakte Hero-Höhe auf allen Unterseiten (Desktop): feste
   min-height, damit der Hero beim Seitenwechsel nicht springt. Text-only ->
   deutlich niedriger als zuvor. */
@media (min-width: 861px) {
  /* deckt auch die höchsten Seiten (2-zeilige Headline + Breadcrumb) ab,
     damit alle Detailseiten exakt gleich hoch sind */
  .article-hero { min-height: 480px; }
}
/* Breadcrumb im Hero als kleine Eyebrow über der Headline: klein, in Versalien
   und gesperrt wie .eyebrow, zeigt den Pfad der Unterseite. */
.article-hero .breadcrumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 7px;
  color: var(--black);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.article-hero .breadcrumb a { color: var(--black); }
.article-hero .breadcrumb a:hover { color: var(--brand-purple); }
.article-hero .breadcrumb span[aria-hidden] { opacity: 0.4; }
.article-hero .breadcrumb [aria-current] { color: var(--black); opacity: 0.65; }
/* auf dunklem Grund (lila) hell */
.article-hero--on-dark .breadcrumb,
.article-hero--on-dark .breadcrumb a,
.article-hero--on-dark .breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.92); }

/* Text-only-Variante (Unterseiten ohne Motiv): nur Typo links, farbiger Grund.
   Illustration kann später im Media-Slot ergänzt werden. */
.article-hero--textonly .article-hero__lead { grid-template-columns: 1fr; align-items: start; }
/* Textcontainer breiter nach rechts (linksbündig, mehr Laufweite) */
.article-hero--textonly .article-hero__text { max-width: 70ch; }
.article-hero--textonly .article-hero__intro p { max-width: 64ch; }
/* kompakter: ohne Illustration braucht der Hero weniger Luft */
.article-hero--textonly {
  padding-top: calc(var(--nav-h) + clamp(18px, 2.4vw, 38px));
  padding-bottom: clamp(30px, 3.4vw, 50px);
}
.article-hero__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.article-hero__text { max-width: 34ch; }
.article-hero .breadcrumb { margin-bottom: clamp(14px, 1.8vw, 22px); }
.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--black);
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  text-wrap: balance;
}
.article-hero__intro p {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--black);
  margin: 0;
}
.article-hero__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.article-hero__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.article-hero__media--illus img { padding: 0; }
/* Dunkle (lila) Variante: heller Text */
.article-hero--on-dark .article-hero__title,
.article-hero--on-dark .article-hero__intro p { color: var(--white); }
.article-hero--on-dark .breadcrumb,
.article-hero--on-dark .breadcrumb a,
.article-hero--on-dark .breadcrumb span { color: rgba(255,255,255,0.88); }
@media (max-width: 820px) {
  .article-hero__lead { grid-template-columns: 1fr; gap: 24px; }
  .article-hero__text { max-width: none; }
  .article-hero__media { order: -1; aspect-ratio: 16 / 10; max-width: 480px; }
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.article-rail { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.article-rail__back {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 8px 16px 8px 12px;
  border: var(--border-w-sm) solid var(--black); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; color: var(--black);
  transition: background var(--dur-xs) var(--ease-smooth), color var(--dur-xs) var(--ease-smooth);
}
.article-rail__back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.article-rail__back:hover { background: var(--black); color: var(--white); }
.article-rail__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.22; color: var(--black); }
.article-body { max-width: 68ch; }
.article-body__kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-purple); margin: 0 0 10px; }
.article-body > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--black);
  margin: 0 0 16px;
}
.article-section + .article-section { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--gray-200); }
.article-body p { font-size: 17px; line-height: 1.75; color: var(--gray-700); margin: 0 0 18px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body .faq { max-width: none; margin: 8px 0 0; }
/* Im Article-Kontext überschreibt .article-body p sonst die FAQ-Innenabstände
   (Antwort klebte links an der Kante und unten an der Box). Hier zurückgeholt. */
.article-body .faq-item__body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 22px);
}
.article-body .faq-item__body p:last-child { margin-bottom: clamp(18px, 2vw, 22px); }

/* Kleiner Bildcontainer im Fließtext (z. B. Dennis + Team in „Von Menschen
   gefertigt"). */
.article-figure {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  border: var(--border-w-sm) solid var(--black);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 440px;
}
.article-figure img { display: block; width: 100%; height: auto; }

/* Schlanke Abschluss-Sections der Kategorieseiten ("Der Ablauf" / "Weiter
   stöbern"): deutlich weniger Padding + kleinerer Hinweis-Abstand, damit keine
   großen Leerflächen ("Löcher") entstehen. padding-bottom bleibt groß genug,
   dass die Welle der Folgesection den Inhalt nicht überlappt.
   (.section.section--flow = gleiche Spezifität wie .section:has(+ .wave-in),
   steht später -> gewinnt.) */
.section.section--flow {
  padding-top: clamp(44px, 4.5vw, 68px);
  padding-bottom: clamp(80px, 8vw, 124px);
}
.section--flow .notice-open { margin-top: clamp(26px, 3.4vw, 48px); }
/* Abschluss-Trennung des Team-Blocks zur FAQ */
.article-section--team { padding-bottom: clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--gray-200); }
.article-section--team + .article-section { margin-top: clamp(40px, 5vw, 60px); padding-top: 0; border-top: none; }
@media (max-width: 820px) {
  .article-layout { grid-template-columns: 1fr; gap: 28px; }
  .article-rail { position: static; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* =====================================================
   FINAL CTA band — closing activation for subpages
   ===================================================== */
.page-cta {
  background: var(--brand-purple);
  color: var(--white);
  text-align: center;
}
.page-cta__inner {
  max-width: 680px;
  margin: 0 auto;
  padding-block: clamp(56px, 7vw, 104px);
}
.page-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 12px 0 18px;
  text-wrap: balance;
}
.page-cta__body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 30px;
  max-width: 52ch;
}
.page-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.page-cta .eyebrow { color: var(--white); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  .page-hero__media { order: -1; aspect-ratio: 16 / 10; }
  .text-media { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
  .text-media--reverse .text-media__body { order: 0; }
  .text-media .media-frame,
  .text-media__media { order: -1; }
}
@media (max-width: 560px) {
  .page-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .page-hero__actions .btn,
  .page-cta__actions .btn { width: 100%; justify-content: center; }
}

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

/* =====================================================
   Einsatzbereiche — eine Card, links statischer Intro,
   rechts die Schuh-Slides (Slide-up beim Scrollen).
   Der Scroll-Wrapper pinnt die Card; nur die Slides im
   rechten Container wechseln.
   ===================================================== */
.usecase-scroll {
  /* eine Bildschirmhöhe pro Slide + eine zum Ausrollen */
  height: 600vh;
  position: relative;
}
.usecase-card {
  position: sticky;
  /* Die Hoehe haengt nicht mehr allein am Viewport: auf hohen Bildschirmen
     wuerde die Card sonst extrem hoch und das Motiv (object-fit: cover)
     oben wie unten stark beschnitten. Der Deckel haelt den Schuh im Bild. */
  --card-h: clamp(420px, 60vh, 620px);
  height: var(--card-h);
  /* mittig im Viewport halten, unabhaengig von der konkreten Hoehe */
  top: calc((100vh - var(--card-h)) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* kein Padding auf der Card: die Bühne rechts läuft randlos bis an die
     Kontur; die Innenabstände sitzen allein auf der Intro-Spalte */
  padding: 0;
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  background: var(--off-white);
  overflow: hidden;
}

/* --- Linke Spalte: statisch, bleibt unverändert --- */
.usecase-card__intro {
  color: var(--black);
  align-self: center;
  padding: clamp(28px, 3.6vw, 64px);
}
/* Die Eyebrow sitzt immer auf der off-white Card — unabhaengig davon, welche
   Farbe die umgebende Section gerade traegt, bleibt sie dunkel. */
.usecase-card__intro .eyebrow { color: var(--black); }
.usecase-card__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 54, "WONK" 0, "opsz" 128;
  line-height: 1.08;
  color: var(--black);
  margin: 18px 0 22px;
}
.usecase-card__body {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--black);
  margin: 0;
}

/* --- Rechte Spalte: Bühne, in der die Slides hochfahren.
   Läuft randlos bis an Ober-, Unter- und Aussenkante der Card. --- */
.usecase-card__stage {
  position: relative;
  overflow: hidden;
}
.usecase-slide {
  position: absolute;
  inset: 0;
  background: var(--slide-bg, var(--brand-purple));
  /* Slide-up: der nächste Slide schiebt sich von unten herein */
  transform: translateY(100%);
  transition: transform var(--dur-lg) var(--ease-smooth);
  will-change: transform;
}
.usecase-slide.is-active { transform: translateY(0); }
/* bereits durchlaufene Slides bleiben liegen und werden überdeckt */
.usecase-slide.is-past { transform: translateY(0); }
/* Das Motiv fuellt die Buehne vollflaechig — kein Rand, kein Padding. */
.usecase-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Quellmotive sind portrait, der Bildbereich landscape -> vertikaler Crop.
     ~68% zentriert den Schuh im Container (50% saesse zu tief, 100% zu hoch). */
  object-position: center 68%;
  display: block;
}

/* Label als Overlay über dem unteren Teil des Bildcontainers.
   Der Kasten selbst bleibt statisch — er wird von der Scroll-Animation nicht
   angefasst. Nur die Textblöcke darin rotieren, synchron zum Motiv. */
.usecase-label {
  position: absolute;
  /* Text klar vom Schuh abgesetzt: randloser weisser Bereich unten in der Buehne,
     nur durch eine Konturlinie vom Bild getrennt, buendig an der Karten-Kontur. */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 32px);
  border: none;
  border-top: var(--border-w) solid var(--black);
  border-radius: 0;
  background: var(--off-white);
  /* Alle Textbloecke liegen in EINER Grid-Zelle. Die Hoehe setzt das JS auf den
     gerade aktiven Text (--label-h), damit der Innenabstand rundum gleich
     bleibt — auch wenn der Text mal ein- und mal zweizeilig ist. Die Unterkante
     ist verankert, es wandert nur die Oberkante, und das sanft. */
  display: grid;
  overflow: hidden;
  height: var(--label-h, auto);
  transition: height var(--dur-md) var(--ease-smooth);
}
/* Slide-in/Slide-out: der kommende Text wartet unterhalb, der aktuelle steht,
   der verbrauchte faehrt nach oben aus dem Kasten heraus. So ist immer genau
   ein Text sichtbar — nichts ueberlagert sich. */
.usecase-label__text {
  grid-area: 1 / 1;
  align-self: start;
  transform: translateY(160%);
  opacity: 0;
  transition: transform var(--dur-lg) var(--ease-smooth),
              opacity var(--dur-sm) var(--ease-smooth);
  will-change: transform;
}
.usecase-label__text.is-active { transform: translateY(0); opacity: 1; }
.usecase-label__text.is-past { transform: translateY(-160%); opacity: 0; }
.usecase-label__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 54, "WONK" 0, "opsz" 128;
  line-height: 1.15;
  color: var(--black);
  margin: 0 0 4px;
}
.usecase-label__body {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.45;
  color: var(--black);
  margin: 0;
}

/* Unter 900px stapelt die Card einspaltig: Intro oben, darunter die Bühne.
   Die Bühne bleibt EINE Fläche (kein Stapel), damit der statische Label-Kasten
   weiterhin genau ein Motiv überlagert. */
@media (max-width: 900px) {
  .usecase-scroll { height: 420vh; }
  .usecase-card {
    /* einspaltig auf auto-Hoehe: Intro (variabler, teils langer Text) + Buehne
       passen nicht in eine feste Hoehe -> sonst wird das Motiv gequetscht und
       Bild/Text vom overflow:hidden abgeschnitten. Statt mittig zu pinnen
       raestet die Card unter der Nav ein. */
    height: auto;
    min-height: 0;
    top: var(--nav-h, 116px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .usecase-card__intro { padding: clamp(20px, 5vw, 32px); }
  .usecase-card__stage { aspect-ratio: 4 / 3; min-height: 0; }
  /* Mobil sitzt der Schuh in allen Motiven tiefer im Hochformat -> weiter unten
     ausschneiden (82%), damit die Sohle nicht abgeschnitten wird und der Schuh
     in jedem Slide etwa mittig im Bildausschnitt steht. */
  .usecase-slide__img { object-position: center 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .usecase-slide,
  .usecase-label__text { transition: none; }
}

/* =====================================================
   PARALLAX — das Motiv steht 110% hoch im Rahmen und wandert
   beim Scrollen um die ueberstehenden 10%. Der Rahmen selbst
   bleibt unveraendert, nur das Bild darin bewegt sich.
   --px laeuft von 0 (Bild am oberen Anschlag) bis 1 (unterer).
   ===================================================== */
.media-frame--parallax { overflow: hidden; }
.media-frame--parallax img {
  height: 110%;
  /* Startpunkt oben. Prozente in translateY beziehen sich auf die BILDhoehe,
     der Ueberstand sind aber 10% der RAHMENhoehe — bezogen aufs Bild also
     10/110 = 9.0909%. Sonst laeuft das Motiv unten aus dem Rahmen. */
  transform: translateY(calc(var(--px, 0.5) * -9.0909%));
  /* .media-frame img bringt eine 700ms-Transition auf transform mit — die wuerde
     die Bewegung dem Scroll hinterherziehen lassen */
  transition: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .media-frame--parallax img { transform: translateY(-5%); }
}

/* =====================================================
   FÜR WEN — Introtext links, Bild rechts daneben; darunter die
   Punkte als farbige Karten in drei Spalten.
   ===================================================== */
.fit-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* stretch statt center: das Bild zieht sich auf die Hoehe der Textspalte */
  align-items: stretch;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.fit-head__text .section-head__title { margin-top: 16px; }
/* Kein festes Seitenverhaeltnis — die Rahmenhoehe kommt aus der Grid-Zeile,
   also aus dem Introtext daneben. */
.fit-head__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 260px;
}

/* Drei Spalten, intern sechs — so fuellen die beiden Karten der letzten
   Reihe die Breite zu je anderthalb Spalten auf. */
.fit-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.fit-card {
  grid-column: span 2;
  background: var(--card-bg, var(--brand-pink));
  color: var(--card-fg, var(--black));
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 32px);
  /* deutlich groesser gesetzt als die frueheren Listenpunkte (15.5–17px) */
  font-size: clamp(1.2rem, 1.75vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  align-items: flex-end;
  min-height: clamp(150px, 17vw, 210px);
  /* Startzustand der Scroll-Animation */
  transform: translateY(38px);
  opacity: 0;
  transition: transform var(--dur-md) var(--ease-smooth),
              opacity var(--dur-md) var(--ease-smooth);
  /* Versatz kleiner als die Laufzeit -> die naechste Karte startet, bevor die
     vorherige steht */
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.fit-card--wide { grid-column: span 3; }
.fit-cards.is-in .fit-card { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) {
  .fit-head { grid-template-columns: 1fr; }
  .fit-cards { grid-template-columns: 1fr; }
  .fit-card,
  .fit-card--wide { grid-column: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fit-card { transform: none; opacity: 1; transition: none; }
}

/* Lead ueber den Karten: Serif und eine Stufe groesser als der Kartentext
   (Karten: clamp(1.2rem, 1.75vw, 1.55rem)). Ueberschreibt die schlanke
   Sans-Variante der alten .fit-list__lead-Regel. */
.fit-head + .fit-list__lead,
.fit-list__lead:has(+ .fit-cards) {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 54, "WONK" 0, "opsz" 128;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}

/* --- "Für wen" auf rotem Grund: Karten off-white, Text mittig --- */
.section--pink .fit-head__text .section-head__title,
.section--pink .fit-head__text .section-head__intro,
.section--pink .fit-head__text .eyebrow,
.section--pink .fit-list__lead { color: var(--black); }
.fit-card {
  /* Default-Farbe der Karten: off-white statt der KV-Farbe */
  --card-bg: var(--off-white);
  /* Text mittig — vertikal wie horizontal */
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Lead ueber den Karten noch eine Stufe groesser */
.fit-head + .fit-list__lead,
.fit-list__lead:has(+ .fit-cards) {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

/* --- Hinweis-Karte: mehr Luft nach oben, groesserer Text, und sie zieht
   sich beim Erscheinen horizontal nach links und rechts auf. --- */
.notice--open {
  margin-top: clamp(56px, 7vw, 104px);
  background: var(--off-white);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--black);
  /* clip-path statt scaleX: die Karte oeffnet sich aus der Mitte nach links und
     rechts, ohne dass der Text dabei gestaucht wird */
  clip-path: inset(0 50% 0 50% round var(--r-lg));
  transition: clip-path var(--dur-lg) var(--ease-smooth);
  will-change: clip-path;
}
.notice-open.is-in .notice--open { clip-path: inset(0 0 0 0 round var(--r-lg)); }

/* =====================================================
   WAVE-OUT — spiegelt .wave-in an die UNTERE Kante: die Farbe der
   Sektion laeuft in der Wellenform nach unten aus und schliesst sie ab.
   ===================================================== */
.wave-out { position: relative; }
.wave-out::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  top: 100%;                    /* direkt unter der Sektion */
  margin-top: -1px;             /* Haarlinie am Stoss schliessen */
  height: var(--wave-out-h, clamp(26px, 3.2vw, 48px));
  background: var(--wave-out-fill, var(--off-white));
  -webkit-mask: var(--wave-out-img, url('../Visuals/Grafiken/wave-arc.svg')) no-repeat center top / 100% 100%;
  mask: var(--wave-out-img, url('../Visuals/Grafiken/wave-arc.svg')) no-repeat center top / 100% 100%;
  /* die Maske ist fuer die obere Kante gezeichnet — fuer unten spiegeln */
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 1;
}
.wave-out--arc::after { --wave-out-img: url('../Visuals/Grafiken/wave-arc.svg'); --wave-out-h: clamp(46px, 6vw, 104px); }
/* Platz, damit der Inhalt den Bogen nicht beruehrt */
.wave-out { padding-bottom: calc(var(--section-pad-y) + clamp(46px, 6vw, 104px)); }

@media (prefers-reduced-motion: reduce) {
  .notice--open { clip-path: none; transition: none; }
}
/* der margin sitzt jetzt auf dem Wrapper */
.notice-open { margin-top: clamp(72px, 9vw, 136px); }
.notice-open .notice--open { margin-top: 0; }

/* --- Rotes Band: traegt allein die Farbe, laeuft randlos ueber die volle
   Breite und schliesst oben wie unten mit der Wellenform ab. Der Introteil
   darueber bleibt auf off-white. --- */
.fit-band {
  background: var(--brand-pink);
  /* aus dem .container ausbrechen, ohne horizontales Scrollen zu erzeugen */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(96px, 12vw, 190px);
  padding-top: clamp(40px, 5vw, 72px);
}
/* Der Lead steht jetzt auf Rot */
.fit-band .fit-list__lead { color: var(--black); }

/* --- Zwei-Spalten-Layout im roten Band: links Lead + Wichtig-Kasten,
   rechts die Punkte als Check-Liste --- */
.fit-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}
/* Lead als echte Headline: Display-Schrift, gross, linksbuendig in der Spalte.
   (Die grosse .fit-list__lead-Regel greift nur bei direkt folgenden .fit-cards,
   deshalb hier eigens gesetzt.) */
.fit-split .fit-list__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 54, "WONK" 0, "opsz" 128;
  line-height: 1.15;
}
/* Der Wichtig-Kasten sitzt direkt unter dem Lead — nicht mehr mit dem grossen
   Vertikalabstand der frueheren Einzelplatzierung. */
.fit-split .notice-open { margin-top: clamp(24px, 3vw, 40px); }
.fit-split .notice--open {
  margin-top: 0;
  max-width: none;
}

/* Rechte Spalte: die Check-Liste als einspaltiger Stapel, groesser gesetzt
   und in Schwarz (statt gray-700) fuer Kontrast auf Rot. */
.fit-split__list {
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: none;
  margin: clamp(6px, 0.8vw, 12px) 0 0;
}
.fit-split__list .check-list__item {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--black);
  align-items: flex-start;
}
.fit-split__list .check-list__item::before {
  flex-basis: 26px;
  width: 26px; height: 26px;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .fit-split { grid-template-columns: 1fr; }
}

/* --- Einlagen-Hero: Headline füllt die Kartenbreite -------------------------
   Container-Query: die Schriftgröße skaliert mit der Breite der Headline-Karte,
   sodass die Zeilen die Karte füllen und rechts kein Leerraum bleibt. Greift nur
   über .hero__card--fill (nur die Einlagen-Startseite), nicht auf anderen Heroes. */
/* Headline-Karte umschließt ihren Text (kein Riesen-Kasten mit Leerraum rechts);
   sie wird schmaler, wenn die Headline auf mehrere Zeilen umbricht. Gilt auf den
   Unterseiten (nur pages.css), die Home bleibt unberührt. */
.hero__card--headline { width: fit-content; max-width: 100%; }
/* Ausnahme: die Fill-Variante (/einlagen/) bleibt spaltenbreit — dort füllt die
   Schrift selbst die Kartenbreite. */
.hero__card--fill { width: auto; max-width: none; container-type: inline-size; }
.hero__card--fill .hero__title {
  font-size: clamp(2.1rem, 9cqi, 5.4rem);
}
/* Neue Hero-Grundregel (rechtsbuendig + unten, Boxen hugging) loest die
   Fill-Sonderlogik ab: auf dem Slideshow-Hero umschliesst auch die
   /einlagen/-Headline ihren Text und nutzt eine normale Titelgroesse statt der
   Container-Query — sonst reisst die schmale Box den Text ab. */
.hero--slideshow .hero__card--fill {
  width: fit-content;
  max-width: 100%;
  container-type: normal;
}
.hero--slideshow .hero__card--fill .hero__title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}

/* --- Handwerk + Für wen: ein gemeinsamer grüner Block ----------------------
   Die zwei grünen Sektionen stoßen nahtlos aneinander; eine feine Linie trennt
   sie, unten schließt das Grün mit einer Welle ab. --- */
.fitgreen--top { margin-bottom: -1px; }            /* Haarlinien-Stoss der beiden Grüntöne schließen */

/* Trennlinien auf Grid-Breite (Container-Content) und in Kontur-Stärke (--border-w),
   in Schwarz wie die üblichen Box-/Container-Konturen.
   — fitgreen--bottom::before: Linie zwischen Handwerk und Für wen (im Grün)
   — fit-plain::after: Abschluss-Linie zur FAQ
   (::after von .fitgreen--bottom ist von .wave-out belegt, daher hier ::before) */
.fitgreen--bottom,
.fit-plain { position: relative; }
.fitgreen--bottom::before,
.fit-plain::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--pad-x), var(--max-w) - 2 * var(--pad-x));
  height: 0;
  border-top: var(--border-w) solid var(--black);
  pointer-events: none;
  z-index: 2;
}
.fitgreen--bottom::before { top: 0; }
.fit-plain::after { bottom: 0; }
/* Der Hinweis-Kasten stand vorher auf Rot — auf hellem Grund hebt ihn ein
   leicht getönter Fond ab. */
.fit-plain .notice--open { background: var(--gray-100); }

/* =====================================================
   INTRO-SPLIT — linksbuendiger Textblock, daneben eine Illustration,
   die 120% der Texthoehe misst und oben wie unten ueberragt.
   ===================================================== */
.intro-split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
/* Der Text bestimmt die Zeilenhoehe — die Zentrierung der .section-head
   zuruecknehmen, damit der Block wirklich links steht. */
.intro-split__text {
  margin: 0;
  max-width: none;
  align-self: center;
}
/* Der Media-Container fuellt die Zeile (= Texthoehe). Die Grafik darin ist
   absolut gesetzt, damit ihre 120% die Zeile NICHT weiter aufziehen —
   sonst waere die Bezugshoehe zirkulaer. */
.intro-split__media {
  position: relative;
  height: 100%;
  min-height: 200px;
}
.intro-split__media img {
  position: absolute;
  top: -10%;            /* 20% Ueberstand gleichmaessig auf oben/unten */
  left: 50%;
  transform: translateX(-50%);
  height: 120%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) {
  .intro-split { grid-template-columns: 1fr; }
  .intro-split__media { height: auto; min-height: 0; }
  .intro-split__media img {
    position: static;
    transform: none;
    height: auto;
    width: min(260px, 60%);
    margin: 0 auto;
  }
}

/* Illustration faehrt von rechts herein statt von unten.
   Greift in das bestehende .reveal/.in-view-System ein; der translateX(-50%)
   der Grafik bleibt unberuehrt, weil hier der Container bewegt wird. */
.js .intro-split__media.reveal { transform: translateX(clamp(48px, 8vw, 110px)); }
.js .intro-split__media.reveal.in-view { transform: none; }
@media (max-width: 900px) {
  .js .intro-split__media.reveal { transform: translateY(22px); }
  .js .intro-split__media.reveal.in-view { transform: none; }
}

/* Hoehere Welle: die farbige Flaeche steigt weiter in die Sektion darueber,
   sodass an den tiefer liegenden Wellentaelern keine helle Luecke bleibt.
   --wave-h wird bei .wave--large auf dem ::before gesetzt — die Ueberschreibung
   muss deshalb ebenfalls dort greifen. */
.wave-in.wave--tall::before { --wave-h: clamp(110px, 15vw, 240px); }

/* =====================================================
   Einsatzbereiche-Card, Variante mit Icons statt Fotos
   ("Das Abdruckset" auf der So-funktioniert's-Seite).
   Die Icons sind zentriert statt vollflaechig — object-fit: cover
   wuerde eine SVG-Illustration verzerren.
   ===================================================== */
.usecase-slide__icon {
  position: absolute;
  left: 50%;
  /* oberhalb des Label-Kastens zentriert, damit nichts verdeckt wird */
  top: clamp(24px, 4vw, 56px);
  bottom: clamp(150px, 17vh, 210px);
  transform: translateX(-50%);
  width: auto;
  max-width: 68%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto 0;
}
/* Kein Farbfeld hinter den Icons — die Buehne bleibt off-white wie die Card */
.usecase-card--icons .usecase-slide { background: var(--off-white); }

/* Groessere Schrift im Label-Kasten dieser Variante */
.usecase-card--icons .usecase-label__title {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  margin-bottom: 6px;
}
.usecase-card--icons .usecase-label__body {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .usecase-slide__icon { bottom: clamp(140px, 22vh, 200px); max-width: 58%; }
}

/* Kartenhoehe pro Stapel: Standard sind 310px (home.css). Stapel mit laengeren
   Texten bekommen eine eigene feste Hoehe, damit nichts abgeschnitten wird —
   innerhalb eines Stapels bleiben alle Karten exakt gleich hoch. */
/* Der Wert muss auf dem gemeinsamen Vorfahren stehen: .steps-intro ist ein
   Geschwister des Stapels und wuerde ihn sonst nicht sehen — Intro und Karten
   brauchen aber denselben Wert, damit sie im Gleichschritt kleben. */
/* Kartenhoehe fuer ALLE steps-Module verbindlich = Home (.steps-stack = 310px).
   Die frueheren Modifier-Hoehen (330/380) werden auf den Home-Wert vereinheitlicht. */
.steps-layout:has(.steps-stack--included) { --stack-card-h: 310px; }
.steps-layout:has(.steps-stack--tall)     { --stack-card-h: 310px; }
.steps-layout:has(.steps-stack--roomy)    { --stack-card-h: 310px; }

/* =====================================================
   ABDRUCKSET-LISTE — einspaltiges Akkordeon in einer weissen Kontur-Karte.
   Die Eintraege klappen beim Scrollen nacheinander auf (JS: .is-open),
   Subline + Skizze fahren dabei ein.
   ===================================================== */
/* Zweispaltiger Pin: Intro links (bleibt stehen), Liste rechts; beim Scrollen
   oeffnet der Reihe nach genau ein Eintrag. */
.setscroll { position: relative; }
.setpin__intro { align-self: start; }
@media (min-width: 861px) {
  .setscroll { height: 460vh; }
  .setpin {
    position: sticky;
    top: clamp(100px, 13vh, 150px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
}
.setlist {
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  background: var(--off-white);
  overflow: hidden;
}
.setlist__items { list-style: none; margin: 0; padding: 0; }
.set-item { border-top: var(--border-w-sm) solid var(--black); }
.set-item:first-child { border-top: none; }
.set-item__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(13px, 1.5vw, 19px) clamp(22px, 2.6vw, 40px);
}
/* Nummer im schwarzen Kasten — identisch zur Step-Card-Nummerierung der
   Section darüber (.step-card__num): fester Kasten in x-Höhe der Schrift. */
.set-item__num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  height: 34px;
  min-width: 46px;
  padding-inline: 12px;
  border-radius: var(--r-md);
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}
.set-item__title {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.85rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--black);
  margin: 0;
}
.set-item__plus {
  flex: 0 0 auto;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--black);
  transition: background var(--dur-sm) var(--ease-smooth), border-color var(--dur-sm) var(--ease-smooth);
}
.set-item__plus::before,
.set-item__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--black);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-sm) var(--ease-smooth), background var(--dur-sm) var(--ease-smooth);
}
.set-item__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.set-item.is-open .set-item__plus { background: var(--brand-purple); border-color: var(--brand-purple); }
.set-item.is-open .set-item__plus::before,
.set-item.is-open .set-item__plus::after { background: var(--white); }
.set-item.is-open .set-item__plus::after { transform: translate(-50%, -50%) rotate(0); }

/* Panel: weiche Hoehenanimation ueber grid-template-rows 0fr -> 1fr */
.set-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-lg, 520ms) var(--ease-smooth);
}
.set-item.is-open .set-item__panel { grid-template-rows: 1fr; }
/* Geschlossen wirklich auf 0 kollabieren: der 0fr-Track zaehlt das
   padding-bottom des Inners als Mindesthoehe mit und liess sonst unten mehr
   Luft stehen als oben. Padding nur im offenen Zustand. */
.set-item:not(.is-open) .set-item__panel-inner { padding-bottom: 0; }
.set-item__panel-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding: 0 clamp(22px, 2.6vw, 40px) clamp(22px, 2.5vw, 32px);
}
.set-item__body {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--gray-700);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-md) var(--ease-smooth) 90ms, transform var(--dur-md) var(--ease-smooth) 90ms;
}
.set-item__sketch {
  justify-self: end;
  width: clamp(104px, 13vw, 172px);
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-md) var(--ease-smooth) 150ms, transform var(--dur-md) var(--ease-smooth) 150ms;
}
.set-item.is-open .set-item__body,
.set-item.is-open .set-item__sketch { opacity: 1; transform: none; }

/* --- Zitat (z. B. "Wir fertigen nicht einfach drauflos") --- */
.quote { position: relative; margin: clamp(14px, 1.6vw, 22px) 0 0; }
.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: 0.72;
  color: var(--brand-purple);
  margin-bottom: 0.06em;
}
/* Ab Desktop haengt das Anfuehrungszeichen links neben der ersten Zeile,
   ausserhalb der Textspalte (in den Rinnenbereich der vollbreiten Section). */
@media (min-width: 901px) {
  .quote::before {
    position: absolute;
    top: -0.08em;
    right: 100%;
    margin: 0 0.18em 0 0;
    line-height: 1;
  }
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
  /* Zitat in Markenlila statt Schwarz */
  color: var(--brand-purple);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  text-wrap: pretty;
}
.quote__cite { display: flex; flex-direction: column; gap: 3px; }
.quote__name { font-weight: 700; color: var(--black); font-size: clamp(1rem, 1.2vw, 1.1rem); }
.quote__name::before { content: "\2014\00A0"; color: var(--gray-500); }
.quote__role { color: var(--gray-500); font-size: 0.95rem; padding-left: 1.4em; }
/* Mobil: das Anfuehrungszeichen haengt links neben dem Zitat (statt darueber
   gestapelt), Text und Autor ruecken in die rechte Spalte ein — wirkt
   redaktioneller/persoenlicher und spart vertikalen Platz. */
@media (max-width: 900px) {
  .quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(8px, 2.6vw, 14px);
    align-items: start;
  }
  .quote::before {
    margin: 0;
    font-size: clamp(2.4rem, 11vw, 3.2rem);
    line-height: 0.86;
  }
  .quote__text,
  .quote__cite { grid-column: 2; }
  .quote__text { margin-bottom: clamp(14px, 3.4vw, 20px); }
}
/* Quote auf farbigem Grund (z. B. "Unsere Werte" auf Orange): Lila hätte zu
   wenig Kontrast — Text, Zeichen und Name in Schwarz, Rolle gedämpft. */
.section--orange .quote__text,
.section--orange .quote::before,
.section--orange .quote__name { color: var(--black); }
.section--orange .quote__role,
.section--orange .quote__name::before { color: rgba(0, 0, 0, 0.55); }
/* Quote auf Lila (dunkel): Text/Zeichen/Name weiß, Rolle gedämpft. */
.section--purple .quote__text,
.section--purple .quote::before,
.section--purple .quote__name { color: var(--white); }
.section--purple .quote__role,
.section--purple .quote__name::before { color: rgba(255, 255, 255, 0.6); }
/* „Unser Ansatz": Kopf zweispaltig — links Eyebrow + Headline, rechts Copy. */
.ansatz-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  text-align: left;
}
.ansatz-head__lead .section-head__title { margin-top: 12px; }
.ansatz-head__copy .section-head__intro { margin: 0 0 clamp(12px, 1.4vw, 18px); }
.ansatz-head__copy .section-head__intro:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .ansatz-head { grid-template-columns: 1fr; gap: 18px; }
}
/* Quote-Beleg unter der Copy in „Unser Ansatz" — etwas Abstand zur Copy. */
.ansatz-quote { margin-top: clamp(40px, 5vw, 76px); }

/* Wellen-Peak nach links versetzen, damit die Kurve über der (linken) Headline
   ihren höchsten Punkt hat: die Wellen-Maske breiter ziehen und nach links
   positionieren (der Peak sitzt in der Mitte der Maske). */
.ansatz-purple.wave-in::before {
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position-x: 82%;
  mask-position-x: 82%;
}

/* Section direkt über dem Footer: extra Bodenabstand, damit die aufsteigende
   Footer-Illustration (Rainbow + Lauffigur) den Inhalt/Button nicht überlappt.
   Mehr padding-bottom schiebt Footer + Artwork nach unten, der Button bleibt oben. */
.section--footer-clear { padding-bottom: clamp(200px, 22vw, 380px); }

/* --- Zeitrahmen als reiner Textcontainer (kein Karten-Stapel) ---
   Headline einzeilig über die Grid-Breite; darunter Copy + Highlight zweispaltig. */
.timeframe { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.timeframe__head { max-width: 100%; }
.timeframe__title { margin-bottom: 0; max-width: none; }
.timeframe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.timeframe__grid .steps-section__intro { margin: 0; max-width: 52ch; }
.timeframe__grid .notice { margin: 0; max-width: none; }
@media (max-width: 860px) {
  .timeframe__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .set-item__panel-inner { grid-template-columns: 1fr; }
  .set-item__sketch { justify-self: end; }
}

@media (max-width: 860px) {
  .setpin {
    display: grid;
    gap: clamp(24px, 7vw, 36px);
  }
  .setlist { max-width: 100%; }
  .set-item__head {
    cursor: pointer;
    padding: 16px 18px;
  }
  .set-item__title { font-size: clamp(1.12rem, 5vw, 1.45rem); }
  .set-item__panel-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 18px 18px;
  }
  .set-item__body {
    max-width: none;
    font-size: 0.98rem;
  }
  /* Illustration NICHT mehr ausblenden: einspaltiges Panel, Zeichnung sitzt
     unter dem Text in der rechten Ecke (wie auf dem Desktop). Die Icons sind
     querformatig (~1,5:1) — darum unter statt neben dem Text, moderat gross. */
  .set-item__sketch {
    display: block;
    justify-self: end;
    width: clamp(128px, 42vw, 176px);
    margin-top: 2px;
  }
}

/* =====================================================
   SHOT-SECTION — Motiv vollflaechig im Hintergrund, darueber eine
   Abdunklung fuer die Lesbarkeit. Links steht der Introtext, rechts
   eine Karte pro Hinweis.
   ===================================================== */
.shot-section {
  position: relative;
  overflow: hidden;
  color: var(--off-white);
}
.shot-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.shot-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Schwarze Flaeche mit 15% Deckkraft ueber dem Motiv */
.shot-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* unten deutlich dunkler -> Schrift bleibt auf dem Foto gut lesbar */
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.34) 52%,
    rgba(0, 0, 0, 0.62) 100%);
}
/* Foto randlos: kein weißer Blitzer oben/unten. Das Motiv reicht bis an beide
   Section-Kanten; unten überlappt es die Welle der Folgesection. Der Innenabstand
   des Inhalts kommt aus dem Pin (padding-block), nicht aus der Section.
   Höhere Spezifität als .section:has(+ .wave-in), das sonst Bottom-Padding setzt. */
.shot-section.stepcheck { padding-top: 0; padding-bottom: 0; }
/* Vertikal: Intro oben, das Karten-Raster darunter ueber die volle Breite */
.shot-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
/* Introtext statisch, Schrift off-white; Zeilenlaenge begrenzt, damit der
   Fliesstext ueber die volle Breite nicht ausfranst */
.shot-section__intro {
  color: var(--off-white);
  max-width: 640px;
}
.shot-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--off-white);
  margin: 16px 0 18px;
  /* laeuft auf die volle Intro-Breite wie der Copytext darunter (kein balance,
     das die Headline sonst schmaler umbricht) */
  text-wrap: pretty;
}
.shot-section__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--off-white);
  margin: 0;
}
/* Titel als sauberer Zweizeiler: die Intro-Box (nur noch Eyebrow + Headline,
   die Body-Copy sitzt jetzt unter den Karten) darf breiter werden, damit die
   laengere zweite Zeile nicht erneut umbricht. */
.stepcheck .shot-section__intro { max-width: 820px; }
/* Ausgelagerte Body-Copy unter den 4 Schrittkarten: eigene, begrenzte
   Zeilenlaenge und etwas Abstand nach oben. */
.shot-section__lede--under {
  max-width: 720px;
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* Rechte Spalte: je Textblock eine Karte, ohne Checkmark — 2x2-Raster */
.tip-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}
.tip-card {
  background: var(--off-white);
  color: var(--black);
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  /* groesser gesetzt als die frueheren Listenpunkte */
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
}
/* Grosse schwarze Checkmark im Kreis — Kreis und Haken mit derselben
   Strichstaerke, beide aus einer Maske, damit die Linien exakt gleich sind */
.tip-card::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(38px, 3.6vw, 52px);
  height: clamp(38px, 3.6vw, 52px);
  background: var(--black);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.8'/%3E%3Cpath d='M7.3 12.4l3.2 3.3 6.2-6.8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.8'/%3E%3Cpath d='M7.3 12.4l3.2 3.3 6.2-6.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Slide-up beim Erscheinen, Karte fuer Karte versetzt. Der Versatz ist
   kuerzer als die Laufzeit, die naechste startet also mitten in der Bewegung. */
.tip-cards[data-stagger] .tip-card {
  transform: translateY(34px);
  opacity: 0;
  transition: transform var(--dur-md) var(--ease-smooth),
              opacity var(--dur-md) var(--ease-smooth);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.tip-cards[data-stagger].is-in .tip-card { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) {
  .tip-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tip-cards[data-stagger] .tip-card { transform: none; opacity: 1; transition: none; }
}

/* --- Gepinnte 4-Schritte-Karten mit wanderndem Highlight (Kreis -> Check) ---
   WICHTIG: overflow:hidden darf NICHT auf dem Sticky-Vorfahren liegen, sonst
   pinnt nichts. Das Motiv wird daher im Pin selbst geclippt, die Section gibt
   ihren overflow frei. */
.stepcheck { position: relative; overflow: visible; }
.stepcheck__pin { position: relative; overflow: hidden; }
@media (min-width: 861px) {
  .stepcheck { min-height: 320vh; }
  .stepcheck__pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    align-content: center;
    padding-block: clamp(72px, 9vh, 116px);
  }
  .stepcheck .shot-section__inner { gap: clamp(22px, 3vw, 40px); }
}
.stepcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 24px);
  align-items: stretch;
}
.stepcard {
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  color: var(--black);
  border: none;
  border-radius: var(--r-xl);
  padding: clamp(20px, 1.8vw, 28px) clamp(18px, 1.7vw, 26px);
  min-height: clamp(240px, 30vh, 330px);
  opacity: 0.5;
  transform: scale(0.96);
  transition: transform 0.45s var(--ease-spring), opacity 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}
.stepcard__check {
  flex: 0 0 auto;
  position: relative;
  width: clamp(44px, 3.6vw, 56px);
  height: clamp(44px, 3.6vw, 56px);
  border-radius: 50%;
  border: 2.5px solid var(--black);
  transition: background 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}
.stepcard__check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 52%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 52%;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-spring);
}
.stepcard__label {
  margin: auto 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  transition: color 0.3s var(--ease-smooth);
}
.stepcard__text {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--black);
}
.stepcard.is-checked { opacity: 1; }
.stepcard.is-checked .stepcard__check { background: var(--brand-purple); border-color: var(--brand-purple); }
.stepcard.is-checked .stepcard__check::after { opacity: 1; transform: scale(1); }
.stepcard.is-checked .stepcard__label { color: var(--brand-purple); }
.stepcard.is-active {
  opacity: 1;
  transform: scale(1.045);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
@media (max-width: 860px) {
  .stepcheck { min-height: 0; }
  .stepcheck__pin { padding-block: clamp(56px, 13vw, 84px); }
  .stepcards {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .stepcards::-webkit-scrollbar { display: none; }
  .stepcard {
    flex: 0 0 min(84vw, 340px);
    scroll-snap-align: start;
    min-height: clamp(235px, 62vw, 300px);
    opacity: 1;
    transform: none;
  }
  .stepcard.is-active {
    transform: none;
    box-shadow: none;
  }
}

/* =====================================================
   SPLIT-TEXT — Section-Kopf links, Fliesstext rechts.
   Der Text steht frei, ohne Karten-Rahmen.
   ===================================================== */
.split-text {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Text vertikal: Kopf ueber dem Fliesstext */
.split-text__head { margin: 0 0 clamp(20px, 2.4vw, 32px); }
.split-text__media { align-self: center; }
/* Der Fliesstext startet auf Hoehe der HEADLINE, nicht der Topline: um den
   Eyebrow-Block nach unten versetzt. 38px entspricht Eyebrow-Zeile (19px) plus
   ihrem Abstand (14px) — derselbe Wert, den der Kartenstapel als
   --stack-headline-offset fuehrt. */
.split-text__body { padding-top: var(--stack-headline-offset, 38px); }
.split-text__body p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 18px;
}
.split-text__body p:last-child { margin-bottom: 0; }
.split-text__signature {
  margin-top: clamp(20px, 2.4vw, 32px);
  color: var(--black);
}
.split-text__signature strong { color: var(--black); }

@media (max-width: 900px) {
  .split-text { grid-template-columns: 1fr; }
  .split-text__media { order: -1; }
  /* einspaltig steht der Text unter dem Kopf — kein Versatz noetig */
  .split-text__body { padding-top: 0; }
  /* Zitat-Variante (Rueckfragen): Eyebrow ueber das Bild ziehen —
     Reihenfolge Eyebrow, Bild, Zitat. display:contents loest die Textspalte
     auf, sodass Eyebrow + Zitat einzeln sortierbare Grid-Items werden. */
  .split-text__col { display: contents; }
  .split-text__col > .eyebrow { order: -2; margin-bottom: clamp(12px, 3vw, 16px); }
  .split-text:has(.split-text__col) .split-text__media { margin-bottom: clamp(16px, 4vw, 22px); }
  .split-text__col > .quote { order: 0; }
}

/* =====================================================
   NUM-CARDS — drei Karten nebeneinander unter dem Intro-Container.
   Die Zahl steht als Badge neben der Headline (statt Checkmark).
   ===================================================== */
.num-cards {
  list-style: none;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.num-card {
  background: var(--off-white);
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 32px);
}
.num-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 10px;
}
.num-card__num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  height: 34px;
  min-width: 34px;
  padding-inline: 10px;
  border-radius: var(--r-md);
  background: var(--black);
  color: var(--off-white);
  font-size: 14px;
}
.num-card__body {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--gray-700);
  margin: 0;
}
/* Slide-up beim Erscheinen, Karte fuer Karte versetzt */
.num-cards[data-stagger] .num-card {
  transform: translateY(30px);
  opacity: 0;
  transition: transform var(--dur-md) var(--ease-smooth),
              opacity var(--dur-md) var(--ease-smooth);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.num-cards[data-stagger].is-in .num-card { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) {
  .num-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .num-cards[data-stagger] .num-card { transform: none; opacity: 1; transition: none; }
}

/* =====================================================
   RESULT-LAYOUT — links der gesamte Section-Inhalt (Intro-Container plus
   Karten), rechts daneben die Illustration ueber die volle Hoehe.
   ===================================================== */
.result-layout {
  display: grid;
  /* Linke Spalte etwas breiter -> Headline bricht nicht auf 4 Zeilen um und die
     Karten-Bodys passen einzeilig; die Illustration rückt dafür weiter nach rechts. */
  grid-template-columns: minmax(0, 37rem) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* Die drei Ergebnis-Karten stapeln untereinander (Breite = Textspalte darüber) */
.result-layout .num-cards { grid-template-columns: 1fr; }
/* Das Foto fuellt die Hoehe des Intro-Containers */
.result-layout .text-media { align-items: stretch; }
/* Ohne Bild: Text nimmt die volle Breite der Hauptspalte, linksbuendig */
.text-media--textonly { grid-template-columns: 1fr; }
.text-media--textonly .text-media__body { align-self: start; }
.result-layout .media-frame {
  aspect-ratio: auto;
  height: 100%;
  min-height: 260px;
}
.result-layout .text-media__body { align-self: center; }
/* Illustrationsspalte: volle Hoehe des Inhalts, Motiv darin mittig */
.result-layout__illu {
  display: grid;
  place-items: center;
  height: 100%;
}
.result-layout__illu img {
  width: 100%;
  max-width: 816px;   /* +20% gegenueber 680px */
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .result-layout { grid-template-columns: 1fr; }
  .result-layout__illu img { max-width: 360px; margin: 0 auto; }
}

/* =====================================================
   WERKSTATT-GALERIE — Bild-Collage (ein hohes Motiv + zwei gestapelte,
   alle mit Parallax) links, Text rechts.
   ===================================================== */
.workshop-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.workshop-gallery__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.3vw, 18px);
}
.workshop-gallery__collage .wg-a { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
.workshop-gallery__collage .wg-b { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; }
.workshop-gallery__collage .wg-c { grid-column: 2; grid-row: 2; aspect-ratio: 3 / 4; }
.workshop-gallery__text { max-width: 52ch; }
.workshop-gallery__text .section-head__title { margin: 14px 0 0; }
.workshop-gallery__text .section-head__intro { margin: clamp(14px, 1.6vw, 20px) 0 0; }
.workshop-gallery__text .btn { margin-top: clamp(22px, 2.6vw, 34px); }
@media (max-width: 860px) {
  .workshop-gallery__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .workshop-gallery__collage { order: -1; }
}
@media (max-width: 640px) {
  /* Werkstatt-Bilder-Collage mobil ausblenden — nur der Text bleibt. */
  .workshop-gallery__collage { display: none; }
  /* Abschluss-CTAs (section-foot) mobil untereinander mit Abstand statt fast
     aneinander klebend. */
  .section-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .section-head--left ~ .section-foot { align-items: flex-start; }
  .section-foot .btn { width: fit-content; }
}

/* =====================================================
   MARQUEE — Bilderband, laeuft dauerhaft langsam von rechts nach links.
   Der Bildsatz steht doppelt im Markup; die Spur wandert um -50%, also um
   genau eine Satzbreite — dadurch ist der Rundlauf sprungfrei.
   ===================================================== */
.marquee-section {
  padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 88px);
  overflow: hidden;
}
.marquee {
  /* volle Breite, unabhaengig vom Container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-run 90s linear infinite;
  will-change: transform;
}
.marquee__set {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  padding-right: clamp(14px, 1.6vw, 24px);
}
.marquee__item {
  flex: 0 0 auto;
  margin: 0;
  /* weniger Motive, dafuer groesser */
  width: clamp(320px, 36vw, 560px);
  aspect-ratio: 4 / 3;
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--black);
}
.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes marquee-run {
  to { transform: translateX(-50%); }
}
/* Beim Ueberfahren anhalten, damit ein Motiv betrachtet werden kann */
.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* =====================================================
   BLOOM — das Motiv zieht sich beim Scrollen aus seiner Zelle auf die volle
   Flaeche auf; danach loest sich der gepinnte Block und die naechste Section
   laeuft darueber. Gleiche Mechanik wie das Teamshop-Modul der Startseite,
   aber ueber data-bloom statt fester IDs — dadurch mehrfach einsetzbar.
   ===================================================== */
/* Kein Section-Padding: der gepinnte Block soll buendig am Viewport-Rand
   kleben, sonst startet er versetzt und wird nie wirklich formatfuellend. */
.bloom { position: relative; padding: 0; }
.bloom__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.bloom__content {
  position: relative;
  z-index: 1;
  opacity: var(--intro-o, 1);
}
/* Die vollflaechige Kopie wird per clip-path von der Zellen-Position auf 0
   aufgezogen; --ct/--cr/--cb/--cl kommen aus dem JS. */
.bloom__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--stage-o, 0);
  clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px) round var(--crad, 0px));
}
/* Das Original blendet aus, waehrend die Kopie uebernimmt */
.bloom.is-live .bloom__ref { opacity: var(--ref-o, 1); }
.bloom__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ohne JS bzw. bei reduzierter Bewegung bleibt es die normale Zwei-Spalten-Ansicht */
.bloom:not(.is-live) .bloom__stage { display: none; }
@media (max-width: 900px) {
  .bloom__pin { position: static; min-height: 0; }
  .bloom__stage { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bloom__pin { position: static; min-height: 0; }
  .bloom__stage { display: none; }
}


/* ---------- Zielgruppen-Motiv unter der Themen-Uebersicht ---------- */
/* Breites Motiv, das die Kategorie menschlich erdet. Steht bewusst NACH dem
   Kachel-Raster: erst die Auswahl, dann das Bild als Abbinder. */
.group-shot {
  /* Full-Bleed: bricht aus dem .container aus, ohne dessen Padding zu kennen */
  width: 100vw;
  margin: clamp(48px, 6vw, 88px) 0 0 calc(50% - 50vw);
  height: 70vh;
  position: relative;
  overflow: hidden;
  /* Hintergrund = Wellenfarbe (nicht Hellgrau): so blitzt an den Sub-Pixel-
     Naehten der Wellen-Maske kein heller Strich durch ("Blitzerkante"), sondern
     alles verschmilzt mit der umgebenden Wellen-/Sektionsfarbe. */
  background: var(--wave-fill, var(--gray-100));
}
/* Wellen an Ober- und Unterkante. Die Farbe kommt aus --wave-fill, das die
   umgebende Section ohnehin inline setzt und nach innen vererbt — dadurch passt
   sie auf jeder der vier Seiten von selbst.
   Oben: massiv an der Kante, Welle laeuft ins Bild hinein (gespiegelt wie
   .wave-out). Unten: umgekehrt, wie .wave-in. */
.group-shot::before,
.group-shot::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: var(--shot-wave-h, clamp(40px, 5.5vw, 96px));
  background: var(--wave-fill, var(--off-white));
  -webkit-mask: url('../Visuals/Grafiken/wave-large.svg') no-repeat center bottom / 100% 100%;
  mask: url('../Visuals/Grafiken/wave-large.svg') no-repeat center bottom / 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.group-shot::before { top: -1px; transform: scaleY(-1); }
/* horizontal gespiegelt, damit oben und unten nicht dieselbe Kurve stehen */
.group-shot::after  { bottom: -1px; transform: scaleX(-1); }

.group-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--shot-pos, 50% 50%);
  display: block;
}
@media (max-width: 640px) { .group-shot { margin-top: clamp(32px, 8vw, 48px); } }

/* =====================================================
   KONTUREN-REGEL (global) — Nachtrag
   Karten mit eigener Fuellflaeche (Off-White/Schwarz) brauchen auf einem
   farbig gefuellten Section-Hintergrund keine schwarze Kontur; der Kontrast
   kommt vom Section-Hintergrund. Auf Off-White/Gray/Team/Footer-Sections
   bleiben die Konturen erhalten. Ausgenommen: kleine Bedien-Elemente
   (Toggles/Icons/Caps), Formfelder, sowie farbig gefuellte Karten (.fit-card)
   und der transparente .article-figure-Rahmen.
   ===================================================== */
:is(.section--purple, .section--orange, .section--green, .section--pink, .section--yellow,
    .steps-section, .problem, .categories-section, .handwerk-section,
    .testimonials-section, .teamshop)
  :is(.media-frame, .marquee__item, .notice, .setlist, .num-card, .cat-card,
      .usecase-card, .offer-card, .feature-item, .flow__step, .tile,
      .feature-list__item, .tip-card) {
  border: none;
}

/* ===================== Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) ===================== */
.legal-hero {
  background: var(--off-white);
  padding: clamp(140px, 22vw, 190px) var(--pad-x) clamp(24px, 5vw, 40px);
}
.legal-hero__inner { max-width: 760px; margin: 0 auto; }
.legal-hero .eyebrow { color: var(--brand-purple); }
.legal-hero h1 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.04;
  margin: 8px 0 10px;
}
.legal-hero__meta { color: var(--gray-500); font-size: .95rem; }

/* Standalone information and error pages */
.utility-page {
  min-height: 72svh;
  display: grid;
  align-items: center;
  padding-block: clamp(150px, 18vw, 230px) clamp(80px, 10vw, 140px);
  background: var(--brand-yellow);
}

.utility-page--error { background: var(--brand-orange); }

.utility-page__inner {
  width: min(760px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
  border: var(--border-w) solid var(--black);
  border-radius: var(--r-xl);
  background: var(--off-white);
  box-shadow: 12px 12px 0 var(--black);
}

.utility-page__code {
  margin-bottom: 10px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.utility-page__title {
  max-width: 14ch;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: .96;
}

.utility-page__text {
  max-width: 58ch;
  margin-bottom: 28px;
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.utility-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 600px) {
  .utility-page__inner { box-shadow: 7px 7px 0 var(--black); }
  .utility-page__actions .btn { width: 100%; justify-content: center; }
}

/* Bottom-Padding grosszuegig: auf den kurzen Rechtsseiten wuerde sonst die
   aufsteigende Footer-Grafik (Regenbogen-Huegel + Laeufer, ragt ~400px ueber
   die Footer-Oberkante) in den Text laufen. Der Extra-Raum setzt den Footer
   klar vom Inhalt ab (die Grafik steigt ueber Leerflaeche auf). */
.legal { background: var(--off-white); padding: clamp(8px, 2vw, 16px) var(--pad-x) clamp(130px, 22vw, 240px); }
.legal__inner { max-width: 760px; margin: 0 auto; color: var(--gray-700); }
.legal__inner h2 {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  line-height: 1.22;
  margin: clamp(30px, 6vw, 46px) 0 10px;
  color: #1b1b1a;
}
.legal__inner h3 { font-size: clamp(1.02rem, 3vw, 1.18rem); margin: 22px 0 6px; color: #1b1b1a; }
.legal__inner p, .legal__inner li { line-height: 1.7; }
.legal__inner p { margin: 0 0 14px; }
.legal__inner ul, .legal__inner ol { margin: 0 0 16px; padding-left: 22px; }
.legal__inner li { margin-bottom: 6px; }
.legal__inner a { color: var(--brand-purple); text-decoration: underline; }
.legal__inner address { font-style: normal; line-height: 1.75; margin: 0 0 14px; }
.legal__inner strong { font-weight: 600; color: #1b1b1a; }
.legal__lead { font-size: 1.06rem; color: #1b1b1a; }
.legal__note {
  margin-top: 34px; padding: 16px 18px;
  border-left: 3px solid var(--brand-purple);
  background: #F4F2FF; border-radius: 10px;
  font-size: .92rem; color: var(--gray-700);
}
.legal__note p:last-child { margin-bottom: 0; }

/* ===================== KI-Kennzeichnung (EU AI Act, Art. 50) =====================
   Dezente, gestuerzte Notiz am rechten Bildrand fuer fotorealistische
   KI-generierte Motive (Deepfake-Definition: wirken wie authentische Aufnahmen
   realer Personen/Szenen). Immer sichtbar (Pflicht: wahrnehmbar beim ersten
   Kontakt, nicht nur bei Hover), halbtransparent, damit das Motiv nicht leidet.
   Der Text ist echter Inhalt + aria-label -> von Screenreadern lesbar. */
figure:has(> .ai-tag) { position: relative; }
.ai-tag {
  position: absolute;
  bottom: 12px;          /* unten rechts, nicht in der Mittelachse */
  right: 10px;           /* ein Stueck von der Kante abgerueckt */
  writing-mode: vertical-rl;    /* gestuerzt (Latin um 90 Grad gedreht) */
  transform: rotate(180deg);    /* liest von unten nach oben; Origin = Mitte,
                                   daher bleibt die Box an Ort und Stelle */
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;   /* gemischte Schreibweise -> engeres Tracking */
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 4;
  pointer-events: none;
  user-select: none;
}