/* =========================================================
   Waldemar Pöchhacker — Personal Expert Website
   Design system: editorial, reduced, self-assured — dark theme
   ========================================================= */

:root {
  /* Base theme: dark page, white text. --ink/--paper keep their names
     from the original light-first system but now hold inverted values —
     every component below was re-audited against this inversion (see
     the .section-dark / .cta-band overrides further down), so treat
     --ink as "primary text colour" and --paper as "page background",
     not literally "ink" and "paper" any more. */
  --ink: #FFFFFF;
  --paper: #111111;
  --white: #FFFFFF;
  --accent: #F5B335;

  --ink-85: rgba(255,255,255,.85);
  --ink-70: rgba(255,255,255,.70);
  --ink-55: rgba(255,255,255,.55);
  --ink-40: rgba(255,255,255,.40);
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.26);

  /* Used inside the light "bands" (.section-dark, .cta-band) where the
     background flips to white and text needs to go dark again. */
  --paper-85: rgba(17,17,17,.85);
  --paper-70: rgba(17,17,17,.70);
  --paper-60: rgba(17,17,17,.60);

  --font-head: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  --ease: cubic-bezier(.16,.8,.32,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The off-canvas mobile drawer (.nav-mobile) sits just off the right
     edge via transform: translateX(100%). Some engines still count that
     off-screen box toward document scrollWidth, which would otherwise
     create a phantom horizontal scrollbar. */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure { margin: 0; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--paper); }

/* Focus visibility (accessibility requirement) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Inside the light bands the page background flips to white, so a white
   focus ring would disappear — flip the ring colour there too. */
.section-dark a:focus-visible, .section-dark button:focus-visible, .section-dark input:focus-visible, .section-dark textarea:focus-visible,
.cta-band a:focus-visible, .cta-band button:focus-visible {
  outline-color: var(--paper);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.eyebrow {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding-bottom: 12px;
}
/* Small recurring animation: the accent underline draws in once the
   eyebrow label scrolls into view (paired with .reveal/.is-visible). */
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease) .15s;
}
.eyebrow.is-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .eyebrow::after { transition: none; transform: scaleX(1); }
}
.h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  text-transform: uppercase;
}
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  text-transform: uppercase;
}
/* One accent word per headline, picked out in the site's existing
   gold/amber accent colour. */
.accent-word { color: var(--accent); }
.section-dark .accent-word, .cta-band .accent-word { color: var(--accent); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.h4 { font-size: 1.1rem; }
.hero-signature {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-bottom: 22px;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 46ch;
}
.body-l { font-size: 1.1rem; line-height: 1.7; color: var(--ink-85); }
.muted { color: var(--ink-55); }
.kpi-number {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
}
section { position: relative; }
.section {
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(64px, 9vw, 128px);
}
.section-tight { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.section-border-top { border-top: 1px solid var(--line); }

/* .section-dark is now the LIGHT band: a white/off-white panel that
   punctuates the otherwise dark page. The name is kept from the
   original light-first design so generate.py doesn't need touching. */
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark .eyebrow, .cta-band .eyebrow { color: var(--paper-60); }
.section-dark .lede, .cta-band .lede { color: var(--paper-85); }
.section-dark .muted, .cta-band .muted { color: var(--paper-60); }
.section-dark .body-l, .cta-band .body-l { color: var(--paper-85); }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: .98rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #e5e5e5; }
.btn-accent { background: var(--accent); color: var(--paper); }
.btn-accent:hover { background: #e3a324; }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.section-dark .btn-outline, .cta-band .btn-outline { border-color: rgba(17,17,17,.35); color: var(--paper); }
.section-dark .btn-outline:hover, .cta-band .btn-outline:hover { background: var(--paper); color: var(--ink); }
.btn-arrow { transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper-85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Homepage only: the header starts invisible over the full-bleed hero
   photo and fades in once the visitor scrolls (see main.js). Fixed
   instead of sticky so it takes no layout space while hidden. */
.site-header--float {
  position: fixed;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.site-header--float.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-header--float { transition: opacity .01s linear; }
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.logo span { color: var(--accent); }
.nav-desktop {
  display: none;
}
.nav-desktop ul {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-desktop a {
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-70);
  padding: 6px 2px;
  position: relative;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: right .25s var(--ease);
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--ink); }
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { right: 0; }

.nav-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

.nav-mobile {
  position: fixed;
  inset: 0;
  top: 72px;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  z-index: 99;
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile ul { display: flex; flex-direction: column; padding: 24px var(--gutter) 40px; }
.nav-mobile li { border-bottom: 1px solid var(--line); }
.nav-mobile a {
  display: block;
  padding: 18px 2px;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
}
.nav-mobile .nav-cta-mobile { margin-top: 24px; }

@media (min-width: 900px) {
  .nav-desktop { display: block; }
  .nav-toggle { display: none; }
  .nav-cta { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(48px, 7vw, 90px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

/* Home hero: the portrait is a large, full-bleed background rather than
   a boxed image — more presence, and it sits behind the text instead of
   next to it. Gradient is horizontal on wide screens (dark on the left
   for the text, the face left clear on the right) and switches to a
   vertical scrim on narrow screens where a side-by-side crop doesn't work. */
.home-hero {
  background-image:
    linear-gradient(100deg, rgba(17,17,17,.97) 0%, rgba(17,17,17,.92) 32%, rgba(17,17,17,.6) 56%, rgba(17,17,17,.18) 80%, rgba(17,17,17,.05) 100%),
    var(--hero-bg);
  background-size: cover;
  background-position: right center;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding-top: clamp(100px, 11vw, 150px);
  padding-bottom: clamp(64px, 8vw, 110px);
}
.home-hero > .container { width: 100%; }
.home-hero .hero-copy { max-width: 620px; }
@media (max-width: 900px) {
  .home-hero {
    background-image:
      linear-gradient(180deg, rgba(17,17,17,.25) 0%, rgba(17,17,17,.72) 62%, rgba(17,17,17,.98) 100%),
      var(--hero-bg);
    background-position: top center;
    min-height: 88vh;
    align-items: flex-end;
  }
}
/* Leadership hero: same full-bleed-background technique as the home
   hero, but "massiv vergrößern... ganz leicht verdunkeln" — noticeably
   bigger and only lightly darkened, since this page carries less text
   over it. background-position keeps the face in frame while the rest
   of the portrait crops off naturally via cover sizing. */
.leadership-hero {
  background-image:
    linear-gradient(100deg, rgba(17,17,17,.6) 0%, rgba(17,17,17,.42) 30%, rgba(17,17,17,.22) 55%, rgba(17,17,17,.08) 80%),
    var(--hero-bg);
  background-size: cover;
  background-position: center 22%;
  min-height: min(98vh, 960px);
  display: flex;
  align-items: center;
  padding-top: clamp(100px, 11vw, 150px);
  padding-bottom: clamp(64px, 8vw, 110px);
}
.leadership-hero > .container { width: 100%; }
.leadership-hero .hero-copy { max-width: 620px; }
@media (max-width: 900px) {
  .leadership-hero {
    background-image:
      linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,.55) 55%, rgba(17,17,17,.9) 100%),
      var(--hero-bg);
    background-position: top center;
    min-height: 90vh;
    align-items: flex-end;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lede { margin-bottom: 30px; max-width: 52ch; }
.hero-trustline {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--ink-55);
  text-transform: uppercase;
  font-weight: 600;
}
.hero-media {
  position: relative;
}
.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
.hero-media-tag {
  position: absolute;
  left: -14px; bottom: -14px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .85rem;
  padding: 10px 16px;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 60px; }
  .hero-grid.is-reverse { grid-template-columns: 5fr 7fr; }
  .hero-grid.is-reverse .hero-media { order: -1; }
}

/* Small hero used on sub-pages (no portrait) */
.page-hero { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(40px, 6vw, 64px); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { max-width: 18ch; margin-bottom: 18px; }

/* Kontakt page: portrait as a full-bleed hero background instead of an
   inline image (dark scrim gradient — set inline alongside the photo
   URL — keeps the small-caps heading readable and fades into the page). */
.kontakt-hero {
  background-size: cover;
  background-position: top center;
  padding-top: clamp(64px, 11vw, 130px);
  padding-bottom: clamp(90px, 13vw, 170px);
}
.kontakt-hero h1, .kontakt-hero .lede { max-width: 32ch; }
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: .85rem; color: var(--ink-55);
  margin-bottom: 28px;
}
.breadcrumb a:hover { color: var(--ink); }

/* ---------- KPI grid ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.kpi-cell {
  background: var(--paper);
  padding: clamp(24px, 3vw, 42px) clamp(18px, 2.4vw, 30px);
}
.section-dark .kpi-cell, .cta-band .kpi-cell { background: var(--ink); }
.kpi-cell .kpi-number { display: block; margin-bottom: 10px; }
.kpi-cell .kpi-label { font-size: .95rem; color: var(--ink-70); max-width: 26ch; }
.section-dark .kpi-cell .kpi-label, .cta-band .kpi-cell .kpi-label { color: var(--paper-85); }
.kpi-cell .kpi-number { color: var(--ink); }
.section-dark .kpi-cell .kpi-number, .cta-band .kpi-cell .kpi-number { color: var(--paper); }
@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pillar cards ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar-card {
  background: var(--paper);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-dark .pillar-card, .cta-band .pillar-card { background: var(--ink); }
.pillar-index {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--accent);
  font-size: .95rem;
  letter-spacing: .06em;
}
.section-dark .pillar-index, .cta-band .pillar-index { color: var(--paper); }
.pillar-card h3 { max-width: 20ch; }
.pillar-card p { color: var(--ink-70); }
.section-dark .pillar-card p, .cta-band .pillar-card p { color: var(--paper-70); }
@media (min-width: 900px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Four-statement variant (e.g. Leadership principles) — same card look,
   different column count/breakpoints, no icons either way. */
@media (min-width: 700px) {
  .pillar-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .pillar-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Principle word as a prominent gold badge instead of small kicker text —
   scoped to the 4-statement grid only, doesn't touch the 3-pillar cards
   used elsewhere on the site. */
.pillar-grid-4 .pillar-index {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
  padding: 7px 16px;
  border-radius: 999px;
}
.section-dark .pillar-grid-4 .pillar-index, .cta-band .pillar-grid-4 .pillar-index {
  background: var(--accent);
  color: var(--paper);
}

/* Large centered pull-quote (Leadership statement) */
.leadership-statement {
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---------- Method stepper ---------- */
.method-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}
.method-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.section-dark .method-step, .cta-band .method-step { border-color: rgba(17,17,17,.3); }
.method-step-num { color: var(--accent); font-weight: 800; }
.method-arrow { color: var(--ink-40); font-size: 1.1rem; }
.section-dark .method-arrow, .cta-band .method-arrow { color: var(--paper-60); }

/* ---------- Awards marquee ---------- */
.marquee {
  overflow: hidden;
  margin-top: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  flex: 0 0 auto;
  width: 130px;
  height: 92px;
  background: var(--white);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.marquee-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Case cards ---------- */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 900px) {
  .case-grid { grid-template-columns: repeat(3, 1fr); }
}
.case-grid-auto { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .case-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.case-card {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  transition: transform .3s var(--ease);
}
.case-card:hover { transform: translateY(-4px); }
.section-dark .case-card, .cta-band .case-card { border-top-color: var(--paper); }
.case-media {
  aspect-ratio: 4/3;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  /* Always a dark tile, regardless of the surrounding section's theme —
     these stand in for real project photos later. */
  background: linear-gradient(135deg, #1b1b1b 0%, #2b2b2b 60%, var(--accent) 145%);
}
.case-media { transition: transform .5s var(--ease); }
.case-card:hover .case-media { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .case-card, .case-media { transition: none; }
  .case-card:hover { transform: none; }
  .case-card:hover .case-media { transform: none; }
}
.case-media-photo { background: none; }
.case-media-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-media-logo {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
}
.case-media-logo img { width: 100%; height: 100%; object-fit: contain; }
.case-media span {
  position: absolute;
  left: 18px; bottom: 16px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.case-card .case-eyebrow { font-size: .82rem; color: var(--ink-55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.section-dark .case-card .case-eyebrow, .cta-band .case-card .case-eyebrow { color: var(--paper-60); }
.case-card h3 { margin-bottom: 12px; }
.case-card p { color: var(--ink-70); margin-bottom: 16px; }
.section-dark .case-card p, .cta-band .case-card p { color: var(--paper-70); }
.case-results { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; }
.case-results li { font-size: .85rem; font-weight: 600; color: var(--ink); }
.section-dark .case-results li, .cta-band .case-results li { color: var(--paper); }
.case-results li::before { content: '— '; color: var(--accent); }
.case-link { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
.case-link .btn-arrow { transition: transform .25s var(--ease); }
.case-card:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Expertise tags ---------- */
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.tag {
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-85);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tag:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.section-dark .tag, .cta-band .tag { border-color: rgba(17,17,17,.3); color: var(--paper); }
.section-dark .tag:hover, .cta-band .tag:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
}
.testi-grid-auto { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .testi-grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.testi-card {
  border: 1px dashed var(--line-strong);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.section-dark .testi-card, .cta-band .testi-card { border-color: rgba(17,17,17,.35); }
.testi-quote { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.testi-meta { font-size: .85rem; color: var(--ink-55); }
.section-dark .testi-meta, .cta-band .testi-meta { color: var(--paper-60); }
.testi-source-flag {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 4px 10px;
}

/* ---------- Article cards ---------- */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 780px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1150px) {
  .article-grid.article-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.article-card {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-dark .article-card, .cta-band .article-card { border-top-color: rgba(17,17,17,.18); }
.article-card .eyebrow { font-size: .78rem; }
.article-card h3 { max-width: 28ch; }
.article-card p { color: var(--ink-70); }
.section-dark .article-card p, .cta-band .article-card p { color: var(--paper-70); }
.article-read { font-weight: 700; font-size: .88rem; margin-top: auto; }

/* Article detail */
.article-detail-head { max-width: 68ch; }
.article-body { max-width: 68ch; display: flex; flex-direction: column; gap: 22px; }
.article-body p { font-size: 1.08rem; line-height: 1.75; color: var(--ink-85); }
.article-body h2 { font-size: 1.5rem; margin-top: 12px; }

/* ---------- CTA band ---------- */
/* Deliberately the same "light band" treatment as .section-dark — the
   closing call-to-action becomes a bright, punctuating panel against
   the otherwise dark page. */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 8vw, 108px) 0;
}
.cta-band .h2 { max-width: 20ch; margin-bottom: 20px; }
.cta-band p { color: var(--paper-85); max-width: 52ch; margin-bottom: 32px; }

/* ---------- Footer ---------- */
/* Stays dark, matching the page default — after the bright .cta-band,
   this is the closing "bookend". */
.site-footer {
  background: var(--paper);
  color: var(--ink-85);
  padding: 60px 0 30px;
  border-top: 1px solid var(--line);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-brand .logo { color: var(--ink); margin-bottom: 14px; }
.footer-brand p { max-width: 34ch; color: var(--ink-55); font-size: .92rem; }
.footer-col h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .94rem; color: var(--ink-85); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: .82rem;
  color: var(--ink-55);
}
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Editorial split (used on sub-pages) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: 64px; }
  .split.is-narrow-right { grid-template-columns: 7fr 5fr; }
}

/* Brand model — three levels */
.model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 20px;
}
@media (min-width: 780px) { .model-grid { grid-template-columns: repeat(3, 1fr); } }
.model-card { background: var(--paper); padding: 30px 26px; }
.section-dark .model-card, .cta-band .model-card { background: var(--ink); }
.model-card .model-num { font-family: var(--font-head); font-weight: 800; color: var(--accent); margin-bottom: 14px; display: block; }
.model-card h4 { margin-bottom: 10px; }
.model-card p { color: var(--ink-70); font-size: .96rem; }
.section-dark .model-card p, .cta-band .model-card p { color: var(--paper-70); }

/* Criteria (MUSS / AHA) */
.criteria-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (min-width: 700px) { .criteria-grid { grid-template-columns: 1fr 1fr; } }
.criteria-card { padding: 26px; background: var(--paper); border: 1px solid var(--line); }
.criteria-card h4 { color: var(--ink); margin-bottom: 8px; }
.criteria-card p { color: var(--ink-70); font-size: .96rem; }

/* Simple content list (arbeitsfelder etc as inline text list) */
.field-list { columns: 1; gap: 24px; margin-top: 8px; }
@media (min-width: 700px) { .field-list { columns: 2; } }
.field-list li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
  color: var(--ink-85);
}
.section-dark .field-list li, .cta-band .field-list li { border-bottom-color: rgba(17,17,17,.18); color: var(--paper-85); }

/* Case detail */
.case-hero-result {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 800;
}
.case-section { max-width: 68ch; }
.case-section + .case-section { margin-top: 40px; }
.case-section h2 { margin-bottom: 14px; }
.case-section p { color: var(--ink-85); font-size: 1.05rem; line-height: 1.72; }
.case-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 40px 0;
}
@media (min-width: 700px) {
  .case-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .case-photo-grid-single { grid-template-columns: 1fr; }
}
.case-photo-tile {
  aspect-ratio: 3/2;
  border: 1px solid var(--line);
  overflow: hidden;
}
.case-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-photo-contain {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}
.case-photo-contain img { width: 100%; height: 100%; object-fit: contain; }
.kpi-band {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 44px;
}
@media (min-width: 700px) { .kpi-band { grid-template-columns: repeat(4,1fr); } }
.learnings { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.learnings li { padding-left: 28px; position: relative; color: var(--ink-85); font-size: 1.02rem; }
.learnings li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Note / disclosure boxes */
.note-box {
  border: 1px dashed var(--line-strong);
  padding: 20px 24px;
  font-size: .92rem;
  color: var(--ink-70);
  margin-top: 28px;
}
.note-box strong { color: var(--ink); }
.section-dark .note-box, .cta-band .note-box { border-color: rgba(17,17,17,.3); color: var(--paper-70); }
.section-dark .note-box strong, .cta-band .note-box strong { color: var(--paper); }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact-channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-channel .label { flex: 0 0 auto; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); white-space: nowrap; }
.linkedin-badge-wrap { margin-top: 14px; }
.linkedin-badge-wrap .badge-base { max-width: 100%; }
.linkedin-badge-wrap iframe { max-width: 100%; }
.contact-channel .value {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
}
@media (max-width: 480px) {
  .contact-channel .value { text-align: left; flex-basis: 100%; }
}
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.form-field label { font-size: .88rem; font-weight: 600; }
.form-field input, .form-field textarea {
  border: 1px solid rgba(17,17,17,.25);
  background: var(--white);
  padding: 14px 16px;
  font: inherit;
  color: #131313;
  border-radius: var(--radius);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; font-size: .88rem; color: var(--ink-70); }
.form-check input { margin-top: 4px; }
.form-note { font-size: .82rem; color: var(--ink-55); margin-top: 14px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* Legal pages */
.legal-body { max-width: 74ch; display: flex; flex-direction: column; gap: 22px; }
.legal-body h2 { font-size: 1.35rem; margin-top: 10px; }
.legal-body p, .legal-body li { color: var(--ink-85); font-size: 1rem; line-height: 1.7; }
.legal-body ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }

/* Utility */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.max-w-prose { max-width: 62ch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}