/* Richtungen C („Bühne plus“, dunkel beginnend) und D („Galerie plus“, hell beginnend).
   Gemeinsame Bausteine: größere Marke, mitlaufende Bilder und dunkle Kästen,
   Themen-Leiste zum Querscrollen, volle Porträts mit LinkedIn. Baut auf style.css auf. */
html:has(body.cd) { scroll-padding-top: 88px; }

/* Marke größer */
.cd .nav .wrap { height: 64px; }
.cd .brand { font-size: 20px; gap: 12px; letter-spacing: -.01em; }
.cd .brand img { width: 56px; height: auto; object-fit: contain; }
.c .nav { background: var(--night); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255,255,255,.08); }
.c .nav .brand, .c .nav .links a, .c .nav .menu summary { color: var(--on-night); }
.c .nav .brand img { background: #fff; border-radius: 10px; padding: 4px 6px; width: 62px; }
.c .nav .cta-sm { background: #fff; color: var(--night); }
.c .nav .cta-sm:hover { background: #e8e8ed; }
.c .nav .nav-tel { color: var(--on-night); }
.c .nav :focus-visible, .hero-c :focus-visible, .c .topics :focus-visible, .cd .dark :focus-visible, .box :focus-visible { outline-color: var(--on-night); }
.cd .menu ul { top: 56px; }

.lockup { display: flex; align-items: center; gap: 18px; }
.lockup img { width: 88px; height: auto; }
.lockup b { display: block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.lockup span { display: block; color: var(--muted); font-size: 16px; margin-top: 4px; }

/* Hero C: dunkel, linksbündig */
.hero-c { background: var(--night); color: var(--on-night); padding: 88px 0 104px; }
.hero-c .lockup img { background: #fff; border-radius: 18px; padding: 8px 10px; width: 96px; }
.hero-c .lockup span { color: var(--on-night-muted); }
.hero-c h1 { font-size: clamp(44px, 6.6vw, 84px); letter-spacing: -.035em; line-height: 1.02; margin-top: 64px; max-width: 14ch; hyphens: manual; }
.hero-c .lead { color: var(--on-night-muted); margin-top: 28px; }
.hero-c .actions { margin-top: 40px; }
.hero-c .btn { background: #fff; color: var(--night); }
.hero-c .btn:hover { background: #e8e8ed; }
.hero-c .btn-ghost { color: var(--link-night); }

/* Hero D: hell, zentriert, Menschen im ersten Bild */
.hero-d { padding: 80px 0 104px; text-align: center; }
.hero-d .lockup { flex-direction: column; gap: 14px; }
.hero-d .lockup img { width: 120px; }
.hero-d h1 { font-size: clamp(44px, 7vw, 84px); letter-spacing: -.035em; line-height: 1.02; margin: 48px auto 0; max-width: 16ch; hyphens: manual; }
.hero-d .lead { margin: 24px auto 0; }
.hero-d .actions { justify-content: center; margin-top: 36px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 640px; margin: 72px auto 0; text-align: left; }
.duo figure { background: var(--mist); border-radius: var(--radius); overflow: hidden; }
.duo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.duo figcaption { padding: 16px 20px 20px; font-weight: 600; line-height: 1.3; }
.duo figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }

/* Abschnitte */
.cd section { padding: 120px 0; }
.cd .hero-c, .cd .hero-d { padding-bottom: 104px; }
.sec-head { max-width: 760px; }
.sec-head .lead { margin-top: 20px; }
.cd .mist { background: var(--mist); }
.cd .dark { background: var(--night); color: var(--on-night); }

/* Mitlaufendes Bild neben Text (C) */
.stories { margin-top: 56px; }
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: start; padding: 72px 0; border-top: 1px solid var(--line); }
.story-media { position: sticky; top: 104px; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.story-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.story.flip .story-media { order: 2; }
/* C: Text bleibt stehen, das hohe Bild läuft daneben durch. */
.c .story-media { position: static; }
.c .story-media img { aspect-ratio: 4 / 5; }
.c .story-text { position: sticky; top: 104px; }
@media (min-width: 834px) { .c #reporting .story-media img { aspect-ratio: 3 / 4; } }
.c #ki .story-media img { object-position: 20% center; }
.story h3 { font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.025em; }
.story .tagline { font-size: clamp(21px, 2vw, 24px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin-top: 12px; }
.story .body p { color: var(--muted); margin-top: 18px; max-width: 58ch; }
.story .points { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.story .points li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.story .btn-ghost { margin-top: 20px; }

/* D: Überschrift läuft mit, Bild und Text scrollen */
.d .story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.d .story-head { position: sticky; top: 104px; }
.d .story-media { position: static; margin-bottom: 8px; }
.d .story-media img { aspect-ratio: 16 / 10; }

.todo-n { outline: 2px dashed var(--gold); outline-offset: 2px; border-radius: 4px; padding: 0 2px; }

/* Haltung: Text scrollt, dunkler Kasten läuft mit */
.stance-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 56px; }
.stance-grid.flip .box { order: -1; }
.pillar-long { padding: 36px 0; border-top: 1px solid var(--line); }
.pillar-long:first-child { border-top: 0; padding-top: 0; }
.pillar-long h3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.025em; }
.pillar-long p { color: var(--muted); margin-top: 14px; max-width: 60ch; }
.pillar-long p.strong { color: var(--ink); font-weight: 600; }
.box { position: sticky; top: 104px; background: var(--night); color: var(--on-night); border-radius: var(--radius); padding: 48px 44px; }
.box .q { font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.box .q em { display: block; font-style: normal; color: var(--on-night-muted); font-size: 21px; letter-spacing: -.01em; line-height: 1.35; margin-top: 16px; font-weight: 500; }
.box dl { margin-top: 36px; border-top: 1px solid rgba(255,255,255,.14); }
.box dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.box dt { color: var(--on-night-muted); }
.box dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.box dl.todo { padding: 0 12px; }
.box .btn { background: #fff; color: var(--night); margin-top: 32px; }
.box .btn:hover { background: #e8e8ed; }

/* Themen zum Querscrollen */
.topics-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.rail-nav { display: flex; gap: 12px; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e8e8ed; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, opacity .2s; }
.rail-nav button:hover { background: #dcdce1; }
.rail-nav button[aria-disabled="true"] { opacity: .35; cursor: default; }
.rail-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail { display: flex; gap: 20px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(22px, calc((100vw - var(--wrap)) / 2 + 22px)); padding: 40px max(22px, calc((100vw - var(--wrap)) / 2 + 22px)) 24px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: 0 0 clamp(272px, 26vw, 340px); scroll-snap-align: start; }
.card { position: relative; display: flex; flex-direction: column; height: clamp(420px, 36vw, 500px); border-radius: var(--radius); overflow: hidden; background: #fff; color: var(--ink); padding: 32px 30px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.card:hover { text-decoration: none; transform: scale(1.012); }
.card h3 { hyphens: manual; -webkit-hyphens: manual; font-size: clamp(24px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.12; position: relative; }
.card .more { margin-top: 18px; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; color: var(--link); }
.card .more i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.card .more svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.card img { margin: auto -30px -32px; width: calc(100% + 60px); max-width: none; height: 56%; object-fit: cover; }
.card.night { background: var(--night); color: var(--on-night); }
.card.night .more { color: var(--link-night); }
.card.night .more i { background: #fff; color: var(--night); }
.card .big { position: relative; margin-top: 28px; font-size: clamp(48px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.card .faces { position: relative; display: flex; gap: 10px; margin-top: 28px; }
.card .faces { margin-top: auto; }
.card .faces img { margin: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.c .topics { background: var(--night); color: var(--on-night); padding-top: 0; }
.c .topics .rail-nav button { background: var(--night-4); color: var(--on-night); }
.c .topics .rail-nav button:hover { background: var(--night-5); }
.c .topics .card { background: var(--night-3); color: var(--on-night); }
.c .topics .card .more { color: var(--link-night); }
.c .topics .card .more i { background: #fff; color: var(--night); }
.c .topics .card.night { background: #fff; color: var(--ink); }
.c .topics .card.night .more { color: var(--link); }
.c .topics .card.night .more i { background: var(--ink); color: #fff; }
.c .topics .rule { border-top: 1px solid rgba(255,255,255,.12); padding-top: 88px; }

/* Team: volle Porträts, ganzer Text, LinkedIn */
.people { display: grid; gap: 96px; margin-top: 64px; }
.human { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 72px; align-items: start; }
.human.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.human.flip figure { order: 2; }
.human figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.human img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.human h3 { font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.025em; }
.human .role { color: var(--gold-ink); font-weight: 600; margin-top: 8px; }
.human p.bio { color: var(--muted); margin-top: 20px; max-width: 62ch; }
.human .certs { margin-top: 24px; }
.li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; font-weight: 600; color: var(--ink); }
.li svg { width: 1.3em; height: 1.3em; fill: #0a66c2; }
.dark .li, .on-dark .li { color: var(--on-night); }
.d .people { gap: 72px; }
.d .human { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; }
.team-cta { margin-top: 64px; }
.d .human figure { border-radius: 20px; }

/* Standort und Profil */
.place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.place figure { position: sticky; top: 104px; margin: 0; }
.place figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 15%; border-radius: var(--radius); }
.place figcaption { font-size: 13px; color: var(--muted); padding: 10px 4px 0; }
.place h2 { font-size: clamp(32px, 4.2vw, 52px); }
.place .lead { margin-top: 20px; }
.place p.t { color: var(--muted); margin-top: 18px; max-width: 58ch; }
.place .sectors-d { margin-top: 40px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.place address a { display: inline-flex; min-height: 44px; align-items: center; }
.place address { font-style: normal; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); line-height: 1.6; }

/* Referenzen */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.quotes figure { border-radius: var(--radius); padding: 44px 40px; background: var(--night-2); display: flex; flex-direction: column; }
.quotes blockquote { hyphens: auto; -webkit-hyphens: auto; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.quotes cite { font-style: normal; margin-top: auto; padding-top: 28px; color: var(--on-night-muted); font-size: 15px; }
.quotes cite b { display: block; color: var(--on-night); font-size: 17px; }
.d .quotes figure { background: var(--mist); }
.d .quotes cite { color: var(--muted); }
.d .quotes cite b { color: var(--ink); }

/* Abschluss */
.closer { text-align: center; }
.closer .lead { margin: 20px auto 0; }
.closer .actions { justify-content: center; margin-top: 36px; }
.closer .contact-line { margin-top: 28px; }
.closer:not(.dark) .contact-line { color: var(--muted); }
.closer:not(.dark) .contact-line a { color: var(--ink); }
.closer .li { margin-top: 8px; }
.cd footer .li { margin-top: 0; font-weight: 400; }

/* Datencluster im dunklen Kasten: untereinander statt nebeneinander */
.box dl.cluster div { flex-direction: column; gap: 2px; }
.box dl.cluster dd { font-weight: 600; }

/* Projektbeispiele: Titel bleibt stehen, Details laufen daneben */
.cases { margin-top: 56px; border-top: 1px solid var(--line); }
.case { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; padding: 56px 0; border-bottom: 1px solid var(--line); }
.case-head { position: sticky; top: 104px; }
.case .who { color: var(--gold-ink); font-weight: 600; }
.case h3 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.025em; margin-top: 8px; hyphens: auto; -webkit-hyphens: auto; }
.case dl div { padding: 0 0 22px; }
.case dt { font-weight: 600; }
.case dd { color: var(--muted); margin-top: 6px; }
.case dd ul { padding-left: 1.1em; }
.case dd li + li { margin-top: 4px; }
.more-cases { margin-top: 72px; }
.more-cases h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; }
.more-cases ul { margin-top: 20px; columns: 2; column-gap: 56px; padding-left: 1.1em; color: var(--muted); }
.more-cases li { break-inside: avoid; margin-bottom: 10px; }

/* Ablauf im Abschluss */
.steps-cd { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 960px; margin: 48px auto 0; text-align: left; }
.steps-cd b { display: block; margin-bottom: 6px; }
.steps-cd li { color: var(--muted); }
.steps-cd li b { color: var(--ink); }
.closer .actions { margin-top: 40px; }

@media (max-width: 833px) {
  html:has(body.cd) { scroll-padding-top: 72px; }
  .cd .nav .wrap { height: 60px; }
  .cd .brand { font-size: 17px; gap: 10px; }
  .cd .brand img { width: 48px; }
  .c .nav .brand img { width: 54px; }
  .cd section { padding: 80px 0; }
  .hero-c { padding: 56px 0 72px; }
  .hero-c h1 { margin-top: 48px; }
  .hero-d { padding: 56px 0 72px; }
  .lockup img, .hero-c .lockup img { width: 72px; }
  .hero-d .lockup img { width: 96px; }
  .duo { gap: 12px; margin-top: 48px; }
  .duo figcaption { padding: 12px 14px 14px; font-size: 15px; }
  .duo figcaption span { font-size: 13px; }
  .story, .d .story, .stance-grid, .human, .human.flip, .place, .quotes { grid-template-columns: minmax(0, 1fr); }
  .story { gap: 28px; padding: 48px 0; }
  .story-media, .d .story-head, .place figure { position: static; }
  .story.flip .story-media, .human.flip figure { order: 0; }
  .stance-grid { gap: 40px; }
  .stance-grid.flip .box { order: 0; }
  .box { position: static; padding: 36px 28px; }
  .people { gap: 72px; }
  .human { gap: 28px; }
  .human figure { max-width: 360px; }
  .d .human { grid-template-columns: 1fr; }
  .d .human figure { max-width: 240px; }
  .cd .menu ul { top: 52px; }
  .c .story-text { position: static; }
  .case { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 40px 0; }
  .case-head { position: static; }
  .more-cases ul { columns: 1; }
  .steps-cd { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .c .story-media img { aspect-ratio: 4 / 3; }
  .place { gap: 36px; }
  .place figure img { aspect-ratio: 4 / 3; }
  .quotes figure { padding: 32px 28px; }
  .topics-head { flex-wrap: wrap; }
  .rail { gap: 14px; padding-top: 32px; }
  .c .topics .rule { padding-top: 64px; }
}
@media (max-width: 360px) {
  .cd .brand { font-size: 15px; gap: 8px; white-space: nowrap; }
  .cd .brand img, .c .nav .brand img { width: 40px; }
  .rail li { flex-basis: 80vw; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
.sec-head .lead .by { display: block; font-size: 15px; margin-top: 6px; }
.more-cases ul.todo { padding: 16px 20px 6px 36px; }
.steps-cd.todo { padding: 16px 20px; }