/* ============================================================================
   DIGITALGROWMATIC — S04 Prinzip · S05 Impact · S06 Für wen
   Rhythmus: S01 Farbe/Film · S02 Raum · S03 Ordnung · S04 Verbindung (dunkel)
             · S05 Wirkung (hell) · S06 Zielgruppen (ruhig) → S07 Kontakt (folgt).
   Statischer Zustand = vollständiger Inhalt (ohne JS, Reduced Motion).
   Bewegung nur in S04 (Linie verbindet beim Scrollen) und S05 (Wechsel „Mit DGM“ erscheint).
   ============================================================================ */

.s04, .s05, .s06 {
  --x-pad: var(--pad);
  --x-head: clamp(34px, 3.8vw, 72px);           /* Abschnitts-Headline S04–S07 (02.10. R2; vorher 4.4vw/84px, davor 5.6vw/112px) */
}
.s04 :focus-visible, .s05 :focus-visible, .s06 :focus-visible { outline-offset: 4px; box-shadow: none; }

/* ---------------------------------------------------------------------------
   S04 — Verbindung. Dunkel, weiße Typografie, eine durchgehende Linie.
   --------------------------------------------------------------------------- */
.s04 {
  --d-bg: #121315;
  --d-ink: #f3f2ee;
  --d-mute: rgba(243, 242, 238, .74);   /* ≈ 10:1 */
  --d-faint: rgba(243, 242, 238, .58);  /* ≈ 6,4:1 */
  --d-rule: rgba(243, 242, 238, .2);
  background: var(--d-bg); color: var(--d-ink);
  padding-bottom: clamp(104px, 17vh, 220px);
  overflow: hidden;
}
.s04 ::selection { background: var(--d-ink); color: var(--d-bg); }
.s04 :focus-visible { outline: 2px solid var(--d-ink); }
.s04 .sec-label { color: var(--d-faint); }
.s04__inner { padding: clamp(104px, 17vh, 220px) var(--x-pad) 0; }
.s04__headline, .s05__headline, .s06__headline {
  margin: clamp(26px, 4.6vh, 60px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: var(--x-head); line-height: .98; letter-spacing: -.018em;
  hyphens: none; overflow-wrap: normal;
}
.s04__line, .s05__line, .s06__line, .s04__sline { display: block; }
.s04__support {
  margin: clamp(26px, 4vh, 46px) 0 0;
  font-size: clamp(17px, 1.3vw, 23px); font-weight: 460; line-height: 1.45;
  color: var(--d-mute); max-inline-size: 32em;
}

/* Route: eine Linie von Rand zu Rand — kein Start, kein Ziel (Infrastruktur, kein Trichter) */
.route { position: relative; margin-top: clamp(88px, 15vh, 190px); }
.route__line { position: absolute; background: var(--d-rule); pointer-events: none; }
.route__fill { position: absolute; inset: 0; background: var(--d-ink); }
.route__list { list-style: none; margin: 0; padding: 0; }
.st { position: relative; }
.st__meta, .st__name, .st__term { margin: 0; }
.st__tick { position: absolute; background: var(--c); }
.st__meta {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 12px; line-height: 20px; letter-spacing: .14em; text-transform: uppercase;
}
.st__num { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.st__group { color: var(--d-faint); font-weight: 600; }
.st__name {
  font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35;
  color: var(--d-mute);
}
.st__term {
  font-stretch: 118%; font-weight: 800; text-transform: uppercase; line-height: 1.02; letter-spacing: -.005em;
  hyphens: none; overflow-wrap: normal;
}
.st__term, .st__tick, .st__name { transition: opacity 320ms var(--ease), background-color 320ms var(--ease); }
.s04__note {
  margin: clamp(56px, 9vh, 112px) var(--x-pad) 0;
  font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; color: var(--d-mute); max-inline-size: 44em; text-wrap: pretty;
}

/* Desktop ≥1280: Linie horizontal, sechs Stationen nebeneinander */
@media (min-width: 1280px) {
  .route { --ly: 46px; }                                  /* Linienhöhe unter der Meta-Zeile */
  .route__line { left: 0; right: 0; top: var(--ly); height: 1px; }
  .route__fill { transform-origin: 0 50%; transform: scaleX(var(--rp, 1)); }
  .route__list {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(20px, 2vw, 40px); padding: 0 var(--x-pad);
  }
  .st__tick { left: 0; top: calc(var(--ly) - 13px); width: 3px; height: 27px; }
  .st__name { margin-top: 52px; min-height: 2.7em; }
  .st__term { margin-top: clamp(16px, 2.2vh, 26px); font-size: clamp(17px, 1.36vw, 27px); }
}
/* Unter 1280: Linie vertikal am linken Rand, Stationen untereinander */
@media (max-width: 1279px) {
  .route { --sx: clamp(30px, 6vw, 56px); padding: 0 var(--x-pad); }
  .route__line { left: var(--x-pad); top: -40px; bottom: -40px; width: 1px; }
  .route__fill { transform-origin: 50% 0; transform: scaleY(var(--rp, 1)); }
  .route__list { display: grid; row-gap: clamp(34px, 5vh, 52px); padding-left: var(--sx); }
  .st__tick { left: calc(var(--sx) * -1 - 9px); top: 8px; width: 19px; height: 3px; }
  .st__name { margin-top: 6px; }
  .st__term { margin-top: 10px; font-size: clamp(22px, 6.2vw, 30px); }
}
/* Tablet-Querzeile: Meta | Name | Beitrag */
@media (min-width: 640px) and (max-width: 1279px) {
  .st { display: grid; grid-template-columns: minmax(8.5em, .7fr) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 24px; align-items: baseline; }
  .st__name, .st__term { margin-top: 0; }
  .st__term { font-size: clamp(22px, 3vw, 32px); }
}

/* Bewegung (nur mit JS, ohne Reduced Motion): Linie folgt dem Scrollen, erreichte Stationen leuchten */
.route.is-live .st:not(.is-on) .st__term { opacity: .26; }
.route.is-live .st:not(.is-on) .st__name { opacity: .55; }
.route.is-live .st:not(.is-on) .st__tick { background: var(--d-rule); }

/* ---------------------------------------------------------------------------
   S05 — Wirkung (02.10. neu): dunkel, tiefer als S04 (#0b0b0c), Orange als Licht/Architektur.
   Strukturmarker statt Kennzahlen · Bildfläche (Platzhalter, Motiv folgt) · Technologie-Leiste
   (verwendete Technologien, ausdrücklich keine Partner/Kunden).
   --------------------------------------------------------------------------- */
.s06 {
  --s-bg: #ffffff; --s-ink: #17181a; --s-mute: #5f5e5a; --s-faint: #6b6964;
  --s-rule: rgba(23, 24, 26, .2);
  background: var(--s-bg); color: var(--s-ink);
}
.s06 ::selection { background: var(--s-ink); color: var(--s-bg); }
.s06 :focus-visible { outline: 2px solid var(--s-ink); }

/* S05 — Wirkung (Visual Direction 05.10.2026): hell wie Hero/S02-Familie. Große Typografie,
   breites Systembild (Vorher-Chaos → DGM → geordnete Ergebnisse), Strukturmarker mit Icons,
   CTA + Technologie-Leiste. Keine dunkle Kinofläche mehr. Keine erfundenen Kennzahlen. */
.s05 {
  --i-bg: #ffffff;
  --i-ink: #17181a;
  --i-mute: #4f4e4a;
  --i-faint: #6b6964;
  --i-rule: rgba(23, 24, 26, .14);
  position: relative; overflow: hidden;
  background: var(--i-bg); color: var(--i-ink);
}
.s05 ::selection { background: var(--orange); color: var(--i-ink); }
.s05 :focus-visible { outline: 2px solid var(--i-ink); }
.s05 .sec-label { color: var(--i-faint); }
.s05 .acc { color: #f25c14; }   /* 3,4:1 auf Weiß, nur Display-Größe */
.s04 .acc { color: var(--orange); }
.s05__inner { position: relative; padding: calc(var(--nav-h, 56px) + clamp(40px, 7vh, 88px)) 0 clamp(56px, 9vh, 104px); }
.imp__head {
  position: relative; z-index: 2; padding: 0 var(--x-pad);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 3vh, 28px);
}
.s05 .s05__headline {
  font-stretch: 125%; font-weight: 800; line-height: .92; letter-spacing: -.02em;
  font-size: clamp(36px, 4.3vw, 96px);
}
.s05__line { display: block; }
.imp__support {
  margin: 0; align-self: start;
  font-size: clamp(16px, 1.15vw, 20px); font-weight: 500; line-height: 1.55;
  color: var(--i-mute); max-inline-size: 34em;
}
@media (min-width: 1024px) {
  .imp__head { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 80px); }
  .imp__support { padding-top: calc(13px * 1.6 + clamp(18px, 2.6vh, 28px)); }
}

/* Bildband: volle Breite, natürliches Format; läuft oben/unten weich ins Weiß aus und liegt leicht unter der Headline */
.imp__visual {
  position: relative; z-index: 1;
  margin-top: clamp(-120px, -7vw, -24px);
  aspect-ratio: 2056 / 765;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 86%, transparent 100%);
}
.imp__pic, .imp__pic img { display: block; width: 100%; height: 100%; }
.imp__pic img { object-fit: cover; object-position: 50% 60%; max-width: none; }

/* Strukturmarker: Nummer/Icon + zweizeilige Aussage, durch feine Linien getrennt */
.imp__markers {
  list-style: none; margin: clamp(8px, 2vh, 24px) var(--x-pad) 0; padding: clamp(18px, 3vh, 30px) 0;
  border-top: 1px solid var(--i-rule); border-bottom: 1px solid var(--i-rule);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.imp__marker {
  display: flex; align-items: center; gap: clamp(12px, 1.2vw, 22px);
  padding: 6px clamp(12px, 2vw, 40px);
}
.imp__marker:first-child { padding-left: 0; }
.imp__marker + .imp__marker { border-left: 1px solid var(--i-rule); }
.imp__bignum {
  font-stretch: 125%; font-weight: 800; font-size: clamp(56px, 5.6vw, 104px); line-height: .8;
  letter-spacing: -.04em; color: #f25c14;
}
.imp__icon { flex: none; width: clamp(38px, 3.4vw, 60px); height: auto; }
.imp__icon--gear { color: var(--orange); }
.imp__icon--clock { color: #1f9be6; }
.imp__icon--chart { color: #46c35a; }
.imp__label { display: flex; flex-direction: column; min-width: 0; }
.imp__big, .imp__small {
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 1.32vw, 26px); line-height: 1.04; letter-spacing: -.005em;
  hyphens: none; overflow-wrap: normal; color: var(--i-ink);
}
.imp__marker--num .imp__big { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* „6“ steht groß daneben */

.imp__foot {
  margin: clamp(28px, 5vh, 56px) var(--x-pad) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px clamp(24px, 4vw, 72px);
}
.imp__cta {
  display: inline-flex; align-items: center; gap: .6em; min-height: 54px;
  padding: 0 28px; background: var(--orange); color: var(--i-ink); border-radius: 3px;
  font-size: 14px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.imp__cta:hover { background: var(--i-ink); color: #fff; }
.imp__cta:focus-visible { outline: 2px solid var(--i-ink); outline-offset: 4px; }

/* Technologie-Leiste: Marken-Icons + Namen, gedämpft, monochrom (Graphit) */
.imp__tech { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2.6vw, 44px); }
.imp__techlabel { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--i-faint); }
.imp__techlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 2.2vw, 40px);
  color: #3d3c39;
}
.imp__brand { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(14px, 1vw, 17px); font-weight: 650; letter-spacing: -.005em; white-space: nowrap; }
.imp__logo { width: auto; height: 1.3em; flex: none; }

/* Tablet / kleiner Desktop: Marker 2 × 2 */
@media (max-width: 1279px) {
  .imp__visual { margin-top: clamp(4px, 1vw, 16px); }
  .imp__markers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .imp__marker:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 1023px) {
  .imp__visual { margin-top: clamp(-40px, -4vw, -12px); }
}
/* Mobil: Bild mittig beschnitten (Chaos-Rand · DGM · Ergebnisse bleiben erkennbar), Marker als Zeilen */
@media (max-width: 819px) {
  .s05 .s05__headline { font-size: clamp(25px, 7.2vw, 46px); font-stretch: 112%; }
  .imp__visual { aspect-ratio: 16 / 10; margin-top: 4px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); }
  .imp__pic img { object-position: 50% 62%; }
}
@media (max-width: 519px) {
  .imp__markers { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 4px 0; }
  .imp__marker { padding: 14px 0 !important; border-left: 0 !important; }
  .imp__marker + .imp__marker { border-top: 1px solid var(--i-rule); }
  .imp__bignum { font-size: 56px; min-width: 44px; }
  .imp__icon { width: 40px; }
  .imp__big, .imp__small { font-size: 18px; }
  .imp__label { flex-direction: row; flex-wrap: wrap; column-gap: .35em; }
  .imp__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   S06 — Für wen. Ruhig: drei redaktionelle Blöcke, dann der Übergang zu S07.
   --------------------------------------------------------------------------- */
.s06__inner { padding: clamp(96px, 15vh, 200px) var(--x-pad) clamp(120px, 20vh, 260px); }
.s06__headline { font-size: clamp(30px, 3.5vw, 66px); }   /* 02.10.: ruhiger als S05 */
.aud-list { list-style: none; margin: clamp(64px, 11vh, 140px) 0 0; padding: 0; display: grid; row-gap: clamp(44px, 7vh, 80px); }
.aud { display: flex; flex-direction: column; border-top: 2px solid var(--s-ink); padding-top: clamp(16px, 2.2vh, 24px); }
.aud:first-child { border-top-color: var(--orange); }
.aud p { margin: 0; }
.aud__num { font-size: 13px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--orange-ink); }
.aud__name {
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 2.5vw, 46px); line-height: 1; letter-spacing: -.01em;
  hyphens: none; overflow-wrap: normal; text-wrap: balance;
}
.aud__text { margin-top: clamp(14px, 1.8vh, 20px) !important; font-size: clamp(16px, 1.08vw, 19px); line-height: 1.5; color: var(--s-mute); max-inline-size: 30ch; }
.aud__fit { margin-top: auto !important; padding-top: clamp(24px, 3.4vh, 36px); font-size: 12px; line-height: 1.6; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.aud__fitlabel { display: block; margin-bottom: 6px; color: var(--s-faint); font-weight: 600; }
.aud__systems { color: var(--s-ink); }
.aud__sep { color: var(--s-faint); }
.aud__sys { white-space: nowrap; }

@media (min-width: 1024px) {
  .aud-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 88px); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .aud__num { grid-column: 1; }
  .aud__name { grid-column: 1; grid-row: 2 / span 2; }
  .aud__text { grid-column: 2; grid-row: 2; margin-top: clamp(18px, 2.6vh, 30px) !important; }
  .aud__fit { grid-column: 2; grid-row: 3; margin-top: 0 !important; padding-top: 20px; }
}

.s06__close {
  margin: clamp(104px, 17vh, 220px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 68px); line-height: 1; letter-spacing: -.015em;
  hyphens: none; overflow-wrap: normal;
}
.s06__lead { display: block; color: var(--s-ink); }
.s06__turn { display: block; margin-top: .45em; color: var(--orange-ink); }
.s06__cl { display: block; }

/* Mobil */
@media (max-width: 819px) {
  .s04, .s05, .s06 { --x-head: clamp(26px, 7.6vw, 46px); }
  .s06__headline { font-size: clamp(25px, 7.4vw, 40px); }
  .s06__close { font-size: clamp(26px, 7.8vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .st__term, .st__tick, .st__name { transition: none !important; }
}

/* Label-Nummer auf Dunkel: helles Orange */
.s04 .sec-num { color: var(--orange); }
.s05 .sec-num { color: var(--orange-ink); }
.imp__logo--woocommerce { height: 1.2em; }
.imp__logo--meta { height: 1em; }
/* S06-Aussage (Desktop): eigener, vertikal zentrierter Bildschirm-Abschnitt – wird nie zufällig am unteren Rand angeschnitten */
@media (min-width: 1024px) {
  .s06__close { margin-top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .s06__inner { padding-bottom: 0; }
}
/* ChatGPT: bereitgestellte Bilddatei als Maske, gleiche Farbe/Größe wie die übrigen Icons */
.imp__logo--mask { display: inline-block; width: 1.3em; height: 1.3em; background: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }