/* ==========================================================================
   Simon & Robin Schaugg — Styles
   Aufbau: Tokens → Basis → Layout → Komponenten → Sektionen → Motion → Responsive
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #F5F2EB;
  --paper: #FBFAF6;
  --sand: #ECE7DC;
  --ink: #0E1726;
  --ink-2: #3E4757;
  --muted: #5D6573;
  --line: #D8D2C4;
  --line-strong: #C9C2B2;
  --blue: #2B4C7E;
  --blue-soft: #E3E8F0;
  --orange: #A8461A;

  --navy: #0E1726;
  --navy-2: #121E32;
  --navy-3: #16233A;
  --on-dark: #F5F2EB;
  --on-dark-2: #D5DAE2;
  --on-dark-3: #B9C0CC;
  --on-dark-line: rgba(245, 242, 235, 0.2);
  --peach: #EBA27C;

  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Comic Neue", "Segoe Print", cursive;

  --fs-display: clamp(3.1rem, 1.1rem + 7.4vw, 8rem);
  --fs-h2: clamp(2.35rem, 1.3rem + 3.9vw, 4.75rem);
  --fs-h2-sm: clamp(2.1rem, 1.3rem + 2.8vw, 4.25rem);
  --fs-h3: clamp(1.55rem, 1.15rem + 1.5vw, 2.75rem);
  --fs-lead: clamp(1.2rem, 1.02rem + 0.65vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  --gutter: clamp(16px, 4.5vw, 64px);
  --col-gap: 24px;
  --section-y: clamp(80px, 6vw + 40px, 136px);
  --header-h: 76px;
  --radius: 4px;
  --radius-btn: 6px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

[hidden] { display: none !important; }

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.is-dark :focus-visible { outline-color: var(--peach); }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.is-dark { background: var(--navy); color: var(--on-dark); }
.is-paper { background: var(--paper); }
.is-sand { background: var(--sand); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* ---------- Typo-Bausteine ---------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.is-dark .label { color: var(--on-dark-3); }
.label--strong { color: var(--ink); font-weight: 500; }

.h2 {
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.h2--sm { font-size: var(--fs-h2-sm); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.body-muted { color: var(--ink-2); }
.is-dark .body-muted { color: var(--on-dark-2); }

.section-head {
  row-gap: 28px;
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 88px);
}
.section-head__title { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 20px; }
.section-head__aside { grid-column: 8 / span 5; font-size: 1.1875rem; line-height: 1.55; }

/* ---------- Komponenten ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary { background: var(--ink); color: var(--on-dark); }
.btn--primary:hover { background: var(--blue); }
.btn--ghost { border-color: #B8B09F; color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--sand); }
.btn--light { background: var(--on-dark); color: var(--ink); }
.btn--light:hover { background: #FFFFFF; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.textlink .arrow { transition: translate 0.25s var(--ease-out); }
.textlink:hover .arrow { translate: 4px 0; }
.textlink:hover { color: var(--blue); }
.is-dark .textlink:hover { color: var(--peach); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink-2);
}
.is-dark .tag { border-color: rgba(245, 242, 235, 0.32); color: #E4E8EE; }

.placeholder {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  min-height: 220px;
}
.placeholder::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  background: repeating-linear-gradient(135deg, #E2DCCF 0 1px, transparent 1px 14px);
}
.placeholder__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--ink-2);
  padding: 6px 10px;
}

.person__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.chat {
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat--paper { background: var(--paper); border: 1px solid var(--line); }
.chat__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.chat__note { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); font-weight: 400; text-align: right; }
.chat__langs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.875rem; }
.chat__lang { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 3px; }
.chat__lang.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bubble { max-width: 82%; padding: 13px 15px; border-radius: var(--radius); line-height: 1.45; }
.bubble--user { align-self: flex-end; background: var(--blue-soft); }
.bubble--bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.chat--paper .bubble--bot { background: var(--bg); }
.bubble__trans { font-size: 0.875rem; color: var(--muted); }
.chat__options { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__option { padding: 7px 12px; border: 1px solid var(--ink); border-radius: 3px; font-size: 0.875rem; }
.chat__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.chat__human { padding: 8px 13px; border-radius: var(--radius); background: var(--blue); color: #FFFFFF; font-weight: 500; }

.rows > * { border-top: 1px solid var(--line); }
.row-kv { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-block: 14px; }
.row-kv__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.row-kv__k--accent { color: var(--blue); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark { width: 10px; height: 10px; background: var(--blue); flex: none; }

.primary-nav { display: flex; align-items: center; gap: 36px; }
.primary-nav__list { display: flex; gap: 30px; }
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  position: relative;
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s var(--ease-out);
}
.primary-nav__link:hover::after,
.primary-nav__link[aria-current="true"]::after { scale: 1 1; }

.lang { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-label); }
.lang__current { font-weight: 500; }
.lang__sep, .lang__alt { color: var(--muted); }
.lang__alt { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lang__alt:hover { color: var(--ink); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--blue);
  transform-origin: left;
  scale: 0 1;
  opacity: 0;
}

.mobile-menu {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: 49;
  background: var(--bg);
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu__link {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .lang { margin-top: 12px; }
.mobile-menu .btn { margin-top: auto; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(64px, 7vw, 112px) clamp(64px, 6vw, 104px); }
.hero__top { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.hero__line { display: block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__line > span { display: block; }

.hero__grid {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 40px;
  border-top: 1px solid var(--ink);
  row-gap: 56px;
}
.hero__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 22px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.hero__place { margin-top: 10px; color: var(--muted); letter-spacing: 0.08em; }

.formula { grid-column: 8 / span 5; }
.formula__label { margin-bottom: 14px; color: var(--muted); }
.formula__item { border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding-block: 14px; }
.formula__num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); }
.formula__body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; }
.formula__en { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; }
.formula__de { font-size: var(--fs-small); color: var(--ink-2); }
.formula__times { color: var(--orange); font-size: 1.35rem; line-height: 1; padding-block: 4px; }
.formula__claim { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink); font-weight: 500; }

/* ---------- Aktuell ---------- */
.current {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 56px);
  row-gap: 32px;
}
.current__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 22px; }
.current__status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.status-dot { display: inline-flex; align-items: center; gap: 8px; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.current__title { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.03em; }
.current__partner { font-size: 1.1875rem; line-height: 1.45; font-weight: 500; }
.current__meta { color: var(--muted); line-height: 1.7; }
.current__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 22px; padding-top: 40px; }

/* ---------- Expertise ---------- */
.capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.capability { border-top: 2px solid var(--ink); padding-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.capability__num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); }
.capability__title { font-size: clamp(1.55rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.08; letter-spacing: -0.02em; }
.capability__copy { color: var(--ink-2); flex-grow: 1; }

/* ---------- Thought leadership ---------- */
.thesis__grid { row-gap: 40px; align-items: end; }
.thesis__title {
  grid-column: 1 / span 8;
  font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.thesis__aside { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; }
.thesis__aside p { font-size: 1.25rem; line-height: 1.55; color: var(--on-dark-2); }

/* ---------- Selected work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.work-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, translate 0.35s var(--ease-out);
}
.work-card:hover { translate: 0 -4px; }
.work-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.work-card__title { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1.04; letter-spacing: -0.03em; }
.work-card__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.work-card--flagship { grid-column: 1 / span 7; grid-row: span 2; background: var(--navy); color: var(--on-dark); }
.work-card--flagship:hover { background: #16233A; }
.work-card--flagship .work-card__foot { border-color: var(--on-dark-line); color: var(--on-dark-2); }
.work-card--flagship .chat { flex-grow: 1; }
.work-card--side { grid-column: 8 / span 5; background: var(--paper); border: 1px solid var(--line); }
.work-card--side:hover { border-color: var(--ink); }
.work-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding-block: 24px;
}
.work-card--wide:hover { border-color: var(--ink); }
.work-card__wide-text { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }

.mini-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

/* ---------- Case studies ---------- */
.case-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--on-dark-line); }
.case-title { margin-top: clamp(40px, 4vw, 56px); font-size: clamp(2.6rem, 1.1rem + 5.4vw, 6.5rem); line-height: 0.96; letter-spacing: -0.045em; max-width: 14ch; }
.case-sub { margin-top: 28px; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); color: var(--on-dark-2); letter-spacing: -0.01em; }

.dvv-body { margin-top: clamp(56px, 6vw, 88px); row-gap: 48px; align-items: start; }
.dvv-story { grid-column: 1 / span 8; }
.story-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 12px; padding-block: 32px; border-top: 1px solid var(--on-dark-line); }
.story-row__k { grid-column: 1 / span 2; padding-top: 6px; }
.story-row__v { grid-column: 3 / span 6; font-size: clamp(1.15rem, 1rem + 0.4vw, 1.375rem); line-height: 1.5; }
.story-row--principle .story-row__v { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--peach); text-wrap: balance; }

.facts {
  grid-column: 10 / span 3;
  position: sticky;
  top: calc(var(--header-h) + 32px);
  border: 1px solid rgba(245, 242, 235, 0.24);
  border-radius: var(--radius);
  padding: 28px;
}
.facts dl { display: flex; flex-direction: column; gap: 20px; }
.facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-3); }
.facts dd { margin-top: 6px; font-size: 1.0625rem; line-height: 1.4; }

.dvv-concept { margin-top: clamp(72px, 7vw, 104px); row-gap: 48px; align-items: start; }
.dvv-concept .chat { grid-column: 1 / span 7; }
.intents { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 18px; }
.intents__lead { font-size: 1.375rem; line-height: 1.4; }
.intent { display: grid; grid-template-columns: 40px 1fr; padding-block: 16px; border-top: 1px solid var(--on-dark-line); }
.intent__num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--on-dark-3); padding-top: 3px; }
.intent__title { display: block; font-size: 1.125rem; font-weight: 500; }
.intent__text { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--on-dark-2); }

.process { margin-top: clamp(72px, 7vw, 104px); }
.process__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 24px; padding-top: 24px; }
.process__list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--on-dark); transform-origin: left; }
.process__step { display: flex; flex-direction: column; gap: 10px; }
.process__en { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; }
.process__arrow { color: var(--peach); font-size: 1.3rem; }
.process__de { color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.5; }
.dvv-tags { margin-top: 64px; }

/* NeuHier */
.nh-grid { row-gap: 56px; align-items: start; }
.nh-text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 26px; }
.case-label { display: flex; flex-direction: column; gap: 6px; }
.case-title-sm { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.25rem); line-height: 0.98; letter-spacing: -0.04em; }
.case-name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.case-thesis { padding-top: 24px; border-top: 1px solid var(--ink); font-size: 1.25rem; line-height: 1.45; font-weight: 500; }
.block-title { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.nh-visual { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 56px; position: sticky; top: calc(var(--header-h) + 32px); }
.mio-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #FFFFFF; display: grid; place-items: center; font-size: 0.875rem; font-weight: 600; flex: none; }
.mio-id { display: flex; align-items: center; gap: 12px; }
.mio-id small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.suggest { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 15px; border: 1px dashed #B8B09F; border-radius: var(--radius); font-size: var(--fs-small); color: var(--ink-2); }
.suggest__btn { padding: 8px 12px; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); font-size: 0.875rem; }
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.journey__step { border-top: 2px solid var(--blue); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.journey__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.journey__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.journey__text { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.nh-principle { padding-top: 28px; border-top: 1px solid var(--ink); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }

/* YOLD */
.yold-grid { row-gap: 56px; align-items: start; }
.yold-media { grid-column: 1 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.yold-media .placeholder--hero { grid-column: 1 / -1; min-height: clamp(320px, 38vw, 560px); }
.yold-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 26px; }
.metrics { padding-top: 24px; border-top: 1px solid var(--ink); }
.metrics dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric { display: flex; flex-direction: column-reverse; gap: 6px; }
.metric dt { font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
.metric dd { font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem); line-height: 1; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.metrics__note { margin-top: 14px; font-size: 0.75rem; color: var(--muted); }
.yold .rows > * { border-color: var(--line-strong); }
.pullquote { padding-left: 20px; border-left: 2px solid var(--orange); display: flex; flex-direction: column; gap: 10px; }
.pullquote blockquote { margin: 0; }
.pullquote blockquote p { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; }
.pullquote figcaption { font-size: var(--fs-small); color: var(--ink-2); }
.pullquote a, .yold .rows a, .media__list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pullquote a:hover, .yold .rows a:hover, .media__list a:hover { color: var(--blue); }

.case-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 4px; }
.case-name .textlink, .case-links .textlink { font-size: 1rem; letter-spacing: 0; }
.case-name__sub { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.case-links { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: -14px; }
.yold-text p a { text-underline-offset: 4px; }
.yold-text p a:hover { color: var(--blue); }
.person__links { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 12px; }
.contact-person__links { display: flex; flex-wrap: wrap; column-gap: 18px; }

/* Product experience */
.pe-grid { padding-top: 40px; border-top: 1px solid var(--ink); row-gap: 32px; }
.pe-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 16px; }
.pe-head h2 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em; }
.pe-body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 24px; }

/* ---------- Ansatz ---------- */
.approach-head { row-gap: 48px; align-items: start; }
.approach-title { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 24px; }
.approach-title h2 { font-size: clamp(3rem, 1.4rem + 5.8vw, 7rem); line-height: 0.94; letter-spacing: -0.05em; }
.questions { grid-column: 8 / span 5; padding-top: 40px; }
.questions p { font-size: 1.25rem; font-weight: 500; margin-bottom: 14px; }
.question { display: grid; grid-template-columns: 36px 1fr; padding-block: 11px; border-top: 1px solid var(--line); }
.question span:first-child { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); padding-top: 3px; }
.steps { margin-top: clamp(64px, 7vw, 104px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); }
.step { border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.step__num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); }
.step__en { font-size: clamp(1.7rem, 1.3rem + 0.9vw, 2.1rem); line-height: 1; font-weight: 500; letter-spacing: -0.025em; }
.step__de { min-height: 4.6em; }
.step__label { padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.step__items { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- Team ---------- */
.team { border-block: 1px solid var(--line); }
.people { display: grid; grid-template-columns: 1fr; row-gap: 64px; }
.person { border-top: 2px solid var(--ink); padding-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.person .placeholder, .person .person__photo { min-height: 360px; }
.person__intro { display: flex; flex-direction: column; gap: 12px; }
.person__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--blue); }
.person__name { font-size: clamp(2.2rem, 1.8rem + 1vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; }
.person__title { font-size: 1.125rem; font-weight: 500; }
.person__bio { margin-top: 6px; color: var(--ink-2); }
.person__details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.person__details li.bg-item { padding-block: 9px; border-top: 1px solid var(--line); line-height: 1.4; }

.overlap { margin-top: clamp(72px, 8vw, 120px); row-gap: 40px; align-items: center; }
.overlap__figure { grid-column: 1 / span 7; }
.overlap__figure svg { width: 100%; height: auto; overflow: visible; }
.overlap__text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; }
.overlap__claim { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.overlap__small { padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.7; }
.venn text { font-family: var(--font-sans); fill: var(--ink); }
.venn .venn__label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.5px; fill: var(--muted); }
.venn .venn__label--robin { fill: var(--blue); }
.venn .venn__center { font-weight: 600; font-size: 20px; }

/* ---------- Für wen ---------- */
.audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; }
.audience { border-top: 1px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.audience h3 { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; }
.audience p { color: var(--ink-2); }

/* ---------- Formate ---------- */
.formats__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: 14px; }
.format { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 14px; padding-block: 30px; border-top: 1px solid var(--ink); align-items: start; }
.format__name { grid-column: 1 / span 4; display: grid; grid-template-columns: 44px 1fr; }
.format__name span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); padding-top: 8px; }
.format__name h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; }
.format__for { grid-column: 5 / span 4; }
.format .tags { grid-column: 9 / span 4; }
.format .tag { border-color: #B8B09F; }
.formats__col-a { grid-column: 1 / span 4; }
.formats__col-b { grid-column: 5 / span 4; }
.formats__col-c { grid-column: 9 / span 4; }
.formats__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-strong); color: var(--ink-2); }

/* ---------- Recognition ---------- */
.recognition__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: 14px; }
.rec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 10px; padding-block: 24px; border-top: 1px solid var(--ink); align-items: baseline; }
.rec__type { grid-column: 1 / span 2; }
.rec__type span { display: inline-block; padding: 5px 9px; border: 1px solid var(--blue); border-radius: 3px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--blue); }
.rec__name { grid-column: 3 / span 4; font-size: 1.5rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.rec__text { grid-column: 7 / span 4; color: var(--ink-2); }
.rec__project { grid-column: 11 / span 2; text-align: right; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--ink-2); }
.media { margin-top: 88px; padding-top: 32px; border-top: 1px solid var(--line); row-gap: 20px; }
.media h3 { grid-column: 1 / span 3; font-size: 1.75rem; letter-spacing: -0.02em; }
.media__body { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: 14px; }
.media__list { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 10px; font-size: 1.3rem; letter-spacing: -0.01em; }
.media__note { color: var(--muted); }

/* ---------- Kontakt ---------- */
.contact-grid { row-gap: 56px; align-items: start; }
.contact-intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 26px; }
.contact-intro h2 { font-size: clamp(2.4rem, 1.5rem + 2.8vw, 4.25rem); line-height: 0.98; letter-spacing: -0.04em; }
.contact-people { margin-top: 16px; border-bottom: 1px solid var(--on-dark-line); }
.contact-person { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-block: 14px; border-top: 1px solid var(--on-dark-line); }
.contact-person strong { display: block; font-weight: 500; font-size: 1.125rem; }
.contact-person small { display: block; font-size: var(--fs-small); color: var(--on-dark-3); }
.contact-person a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.contact-person a:hover { color: var(--peach); }

.contact-panel { grid-column: 7 / span 6; background: var(--navy-2); border: 1px solid rgba(245, 242, 235, 0.16); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font-size: var(--fs-small); color: var(--on-dark-2); padding: 0; }
.field__opt { color: #9AA3B2; }
.input {
  width: 100%;
  background: var(--navy-3);
  border: 1px solid rgba(245, 242, 235, 0.28);
  border-radius: var(--radius);
  color: var(--on-dark);
  font: inherit;
  font-size: 1.0625rem;
  padding: 13px 14px;
  min-height: 50px;
}
.input::placeholder { color: #9AA3B2; }
.input:hover { border-color: rgba(245, 242, 235, 0.5); }
.input:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.input:user-invalid { border-color: var(--peach); }
textarea.input { resize: vertical; min-height: 140px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-2) 50%), linear-gradient(135deg, var(--on-dark-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(245, 242, 235, 0.32); border-radius: var(--radius); color: var(--on-dark); font-size: var(--fs-small); transition: background-color 0.2s ease, color 0.2s ease; }
.chip:hover span { border-color: var(--on-dark); }
.chip input:checked + span { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--peach); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--peach); flex: none; }
.consent label { font-size: var(--fs-small); line-height: 1.5; color: var(--on-dark-2); }
.consent a:hover { color: var(--peach); }
.form__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding-top: 6px; }
.form__hint { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: #9AA3B2; }
.form-success { display: flex; flex-direction: column; gap: 18px; }
.form-success h3 { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; }
.form-success p { color: var(--on-dark-2); }
.form-success .label { color: var(--peach); }

/* ---------- Footer ---------- */
.site-footer { padding-block: 88px 40px; }
.footer-grid { row-gap: 40px; }
.footer-brand { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 10px; }
.footer-claim { margin-top: 16px; max-width: 22ch; font-size: 1.6rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.footer-nav { display: flex; flex-direction: column; }
.footer-nav--a { grid-column: 7 / span 3; }
.footer-nav--b { grid-column: 10 / span 3; }
.footer-nav .label { margin-bottom: 8px; color: var(--muted); }
.footer-nav a { min-height: 40px; display: flex; align-items: center; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); }

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.legal { max-width: 760px; }
.legal h1 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.04em; margin-block: 24px 40px; }
.legal h2 { font-size: 1.5rem; margin-block: 36px 12px; letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--ink-2); }
.legal .todo { background: var(--sand); padding: 2px 6px; font-family: var(--font-mono); font-size: 0.875rem; }



/* ---------- Hero mit Illustration ---------- */
.hero { padding-block: clamp(48px, 5vw, 88px) clamp(40px, 4vw, 64px); }
.hero__layout { align-items: center; row-gap: 40px; }
.hero__layout .hero__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero__layout .hero__title { font-size: clamp(2.7rem, 1rem + 4.1vw, 5.25rem); line-height: 0.95; }
.hero__layout .hero__actions { margin-top: 4px; }
.hero__formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.hero__times { color: var(--orange); }
.hero__layout .hero__place { margin-top: 0; }
.hero__art { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hero-art { width: 100%; height: auto; overflow: visible; }
.hero__caption { align-self: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.art-say { font-family: var(--font-hand); font-size: 29px; font-weight: 600; fill: var(--ink); }
.art-bubble, .art-robot, .art-human, .art-spark, .art-bulb, .art-wave, .art-steam, .art-bar { transform-box: fill-box; }
@media (max-width: 900px) {
  .hero__art { max-width: 560px; justify-self: center; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes art-pop { 0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes art-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes art-blink { 0%, 55%, 100% { opacity: 1; } 60%, 75% { opacity: 0.25; } }
  @keyframes art-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
  @keyframes art-steam { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-4px); opacity: 0.4; } }
  @keyframes art-spark { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } }
  @keyframes art-bar { from { transform: scaleX(0.05); } }
  .art-bubble--robot { transform-origin: 30% 100%; animation: art-pop 0.5s var(--ease-out) 0.7s both; }
  .art-bubble--human { transform-origin: 60% 100%; animation: art-pop 0.5s var(--ease-out) 1.9s both; }
  .art-robot { animation: art-bob 3.2s ease-in-out infinite; }
  .art-bulb { animation: art-blink 2.6s ease-in-out infinite; }
  .art-wave { transform-origin: 50% 100%; animation: art-wave 1.6s ease-in-out infinite; }
  .art-steam { animation: art-steam 2.4s ease-in-out infinite; }
  .art-spark { transform-origin: 50% 100%; animation: art-spark 1.4s ease-in-out infinite; }
  .art-bar { transform-origin: 0 50%; animation: art-bar 1.6s var(--ease-out) 0.4s both; }
}


/* ==========================================================================
   Comic-Ebene: Notizen, Sprechblasen, Spielelemente
   Regel: Der versetzte Tuscheschatten (.comic) markiert Dinge, mit denen man spielen kann.
   ========================================================================== */
.comic { border: 2px solid var(--ink) !important; box-shadow: 6px 6px 0 var(--ink); }
.is-dark .comic { box-shadow: 6px 6px 0 var(--peach); }

.note { display: inline-block; font-family: var(--font-hand); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--orange); transform: rotate(-2deg); transform-origin: left center; }
.is-dark .note { color: var(--peach); }
.note-btn { appearance: none; align-self: center; background: none; border: 0; padding: 6px 4px; font-family: var(--font-hand); font-weight: 600; font-size: 1.45rem; color: var(--orange); cursor: pointer; transform: rotate(-1.5deg); text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.note-btn:hover { color: var(--ink); }

.say { position: relative; display: inline-block; margin: 0; padding: 8px 16px; font-family: var(--font-hand); font-weight: 600; font-size: 1.6rem; line-height: 1.15; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
.say::after { content: ""; position: absolute; left: -9px; top: calc(50% - 8px); width: 14px; height: 14px; background: var(--paper); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }

/* Buttons drücken sich wie Comic-Panels */
.btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--orange); }
.btn--ghost:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn--light:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--peach); }
.btn:active { transform: translate(0, 0); box-shadow: none; }

/* Hero-Roboter ist klickbar */
.art-robot { cursor: pointer; }
.art-eyes { transition: transform 0.15s linear; }

/* Spot-Illustrationen (Expertise) */
.spot { width: 100%; max-width: 168px; height: auto; overflow: visible; transition: transform 0.35s var(--ease-out); }
.spot-hand { font-family: var(--font-hand); font-weight: 600; font-size: 17px; fill: var(--ink); }
.capability:hover .spot { transform: rotate(-3deg) translateY(-4px); }

/* These: Knoten */
.knot-fig svg { width: 100%; height: auto; display: block; }
.knot-label { font-family: var(--font-hand); font-weight: 600; font-size: 22px; fill: var(--on-dark-2); }
.knot-label--hi { fill: var(--peach); }
.knot-fig .knot { transition: opacity 0.45s ease; }
.knot-fig .neat { opacity: 0; transition: opacity 0.45s ease; }
.knot-fig .neat path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.knot-fig.is-neat .knot { opacity: 0; }
.knot-fig.is-neat .neat { opacity: 1; }
.knot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.thesis__title { grid-column: 1 / span 7; }
.thesis__aside { grid-column: 8 / span 5; }

/* Chat-Demos */
.chat__log { display: flex; flex-direction: column; gap: 14px; min-height: 236px; }
[data-chat="mio"] .chat__log { min-height: 190px; }
button.chat__lang, button.chat__option, button.chat__q, button.suggest__btn { font: inherit; cursor: pointer; }
button.chat__lang { background: transparent; color: inherit; font-size: 0.875rem; }
button.chat__lang:hover { border-color: var(--ink); }
button.chat__option { background: transparent; color: inherit; }
button.chat__option:hover:not(:disabled) { background: var(--ink); color: var(--on-dark); }
button.chat__option:disabled { opacity: 0.5; cursor: default; }
.bubble--note { align-self: stretch; max-width: none; padding: 4px 0 4px 12px; border-radius: 0; border-left: 2px solid var(--orange); font-size: 0.875rem; color: var(--muted); }
.chat__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.chat__ask-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
button.chat__q { padding: 7px 14px; border: 1px dashed #8C8576; border-radius: 999px; background: transparent; color: var(--ink); font-size: 0.875rem; }
button.chat__q:hover { border-style: solid; border-color: var(--ink); }
button.chat__q[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border: 1px solid var(--ink); }
button.suggest__btn { border: 0; }
.suggest__note { font-size: 0.875rem; color: var(--muted); }
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: block; }
.dvv-note { grid-column: 1 / span 7; margin-bottom: -28px; }

/* YOLD-Würfel */
.dice { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; background: var(--paper); border-radius: var(--radius); }
.dice__art { width: 100%; height: auto; }
.dice__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.dice__out { font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; }
.dice__out strong { font-weight: 600; background: linear-gradient(transparent 62%, rgba(235, 162, 124, 0.55) 62%); }
.dice__die { width: 18px; height: 18px; }
.dice__note { font-size: var(--fs-small); color: var(--muted); }
.dice__note a { text-decoration: underline; text-underline-offset: 3px; }

/* Ansatz: Checkliste mit Roboter */
.bot-check { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.bot-mini { width: 108px; height: auto; flex: none; }
.bot-bulb { fill: var(--sand); transition: fill 0.3s ease; }
.bot-check.is-done .bot-bulb { fill: var(--orange); }
.bot-happy { opacity: 0; }
.bot-check.is-done .bot-happy { opacity: 1; }
.bot-check.is-done .bot-wait { opacity: 0; }
.bot-check__say { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.check-progress { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--muted); }
.check-meter { --p: 0; display: block; width: 180px; height: 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--orange) calc(var(--p) * 100%), var(--paper) 0); transition: background 0.3s ease; }
.question { display: block; padding-block: 0; }
.q-btn { width: 100%; display: grid; grid-template-columns: 30px 32px minmax(0, 1fr); align-items: start; padding: 11px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.q-btn:hover .q-box { border-color: var(--orange); }
.q-box { width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 4px; position: relative; transition: background-color 0.2s ease; }
.q-btn[aria-pressed="true"] .q-box { background: var(--ink); }
.q-btn[aria-pressed="true"] .q-box::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.q-num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); padding-top: 3px; }

/* Kontakt: Papierflieger */
.plane { width: 24px; height: auto; flex: none; }
.contact-intro .note { color: var(--peach); }

@media (max-width: 900px) {
  .dvv-note { margin-bottom: 0; }
  .dice { grid-template-columns: 1fr; }
  .dice__art { max-width: 150px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes dot-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
  .capability:hover .spot-dots circle, .typing i { animation: dot-bounce 0.9s ease-in-out infinite; }
  .capability:hover .spot-dots circle:nth-child(2), .typing i:nth-child(2) { animation-delay: 0.15s; }
  .capability:hover .spot-dots circle:nth-child(3), .typing i:nth-child(3) { animation-delay: 0.3s; }
  .spot-dots circle { transform-box: fill-box; }
  .knot-fig.is-neat .neat path { animation: knot-draw 0.8s var(--ease-out) both; }
  @keyframes knot-draw { from { stroke-dashoffset: 1; } }
  @keyframes plane-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(240px, -160px) rotate(-14deg); opacity: 0; } }
  .form.is-sending .plane { animation: plane-fly 0.7s ease-in forwards; }
  @keyframes bulb-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .bot-check.is-done .bot-bulb { animation: bulb-glow 1.2s ease-in-out infinite; }
}


/* ---------- Selbst gebaut ---------- */
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--col-gap); }
.build { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 28px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.build.comic:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.build__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.build__status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.build__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.build__status--beruflich::before { background: var(--blue); }
.build__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.08; letter-spacing: -0.02em; }
.build__text { color: var(--ink-2); flex-grow: 1; }
.build .textlink, .build__nolink { margin-top: 2px; }
.build__nolink { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1100px) { .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .builds { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .build__status--live::before, .build__status--prototyp::before { animation: live-blink 1.8s ease-in-out infinite; }
}

/* ---------- Marke „Tech & so“ ---------- */
.brand__name { font-weight: 600; letter-spacing: -0.02em; font-size: 1.15rem; }
.brand__amp { color: var(--orange); }
.brand__by { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line-strong); }
.footer-brand .brand__name { font-size: 1.6rem; }
@media (max-width: 480px) { .brand__by { display: none; } }

/* ---------- Presse-Logos (wie auf simonschaugg.de) ---------- */
.press-strip { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.6vw, 30px); margin-bottom: clamp(40px, 5vw, 72px); }
.press-strip__track { display: flex; width: max-content; }
.press-strip__set { display: flex; align-items: center; gap: clamp(30px, 5vw, 64px); padding-right: clamp(30px, 5vw, 64px); flex: none; }
.press-strip__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.press-strip__text { font-size: clamp(17px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; color: var(--ink-2); opacity: 0.7; white-space: nowrap; }
.pl { flex: none; display: block; width: auto; max-width: none; filter: grayscale(1); opacity: 0.7; transition: filter 0.35s ease, opacity 0.35s ease; }
.pl:hover { filter: none; opacity: 1; }

/* ---------- Fotos ---------- */
.photo { display: flex; flex-direction: column; gap: 10px; }
.photo img, .yold-media img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line-strong); object-fit: cover; }
.photo figcaption, .yold-media__caption { font-size: var(--fs-small); color: var(--muted); }
.yold-media img { aspect-ratio: 4 / 3; }
.yold-media .yold-media__hero, .yold-media__caption { grid-column: 1 / -1; }

/* ---------- Presse ---------- */
.press-focus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: clamp(56px, 6vw, 88px); }
.press-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.press-card__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.press-card blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--orange); }
.press-card blockquote p { font-size: 1.125rem; line-height: 1.5; }
.press-card__note { color: var(--ink-2); font-size: var(--fs-small); }
.press-card .textlink { margin-top: auto; align-self: flex-start; }
.press-list { margin-top: 8px; }
.press-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 4px; padding-block: 16px; border-top: 1px solid var(--line-strong); align-items: baseline; }
.press-item__date { grid-column: 1 / span 2; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.press-item__outlet { grid-column: 3 / span 3; font-weight: 500; }
.press-item__title { grid-column: 6 / span 5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.press-item__title:hover { color: var(--blue); text-decoration-color: currentColor; }
.press-item__tag { grid-column: 11 / span 2; text-align: right; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--ink-2); }
.press-list__more { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.nh-visual .photo { margin-top: -16px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes press-marquee { to { transform: translateX(-50%); } }
  .press-strip__track { animation: press-marquee 60s linear infinite; }
  .press-strip:hover .press-strip__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .press-strip__track { width: auto; justify-content: center; padding-inline: var(--gutter); }
  .press-strip__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 20px; padding-right: 0; }
  .press-strip__dup { display: none; }
}
@media (max-width: 900px) {
  .press-focus { grid-template-columns: 1fr; }
  .press-item__date, .press-item__outlet, .press-item__title, .press-item__tag { grid-column: 1 / -1; text-align: left; }
}

/* ==========================================================================
   Motion
   Alles Scroll-gebundene ist Progressive Enhancement: ohne Unterstützung
   (z. B. Firefox) oder mit „Bewegung reduzieren“ bleibt die Seite statisch
   und vollständig sichtbar.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero: einmalige Lade-Sequenz */
  @keyframes line-rise { from { translate: 0 105%; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 16px; } }
  .hero__line > span { animation: line-rise 0.95s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
  .hero .eyebrow { animation: fade-up 0.7s var(--ease-out) both; }
  .hero__grid { animation: fade-up 0.9s var(--ease-out) 0.42s both; }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* Lesefortschritt unter dem Header */
    @keyframes progress-grow { from { scale: 0 1; opacity: 1; } to { scale: 1 1; opacity: 1; } }
    .progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }

    /* Sanftes Einblenden beim Hineinscrollen */
    @keyframes reveal { from { opacity: 0.15; translate: 0 36px; } }
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* Gestaffelte Listen: Kinder erscheinen nacheinander */
    .stagger > * {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(40% + var(--i, 0) * 6%);
    }

    /* These: Wörter „schreiben“ sich beim Scrollen hell */
    @keyframes word-lit { from { color: #46536B; } to { color: var(--on-dark); } }
    .thesis__title { view-timeline: --thesis block; }
    .thesis__title .w {
      animation: word-lit linear both;
      animation-timeline: --thesis;
      animation-range: cover calc(12% + var(--i) * 5%) cover calc(22% + var(--i) * 5%);
    }

    /* Prozesslinie zeichnet sich */
    @keyframes draw-x { from { scale: 0 1; } }
    .process__list { view-timeline: --process block; }
    .process__list::before { animation: draw-x linear both; animation-timeline: --process; animation-range: entry 40% cover 45%; }

    /* Venn: zwei Perspektiven bewegen sich aufeinander zu */
    @keyframes venn-left { from { translate: -70px 0; } }
    @keyframes venn-right { from { translate: 70px 0; } }
    @keyframes venn-center { from { opacity: 0; } }
    .overlap__figure { view-timeline: --venn block; }
    .venn__left { animation: venn-left linear both; animation-timeline: --venn; animation-range: entry 10% cover 50%; }
    .venn__right { animation: venn-right linear both; animation-timeline: --venn; animation-range: entry 10% cover 50%; }
    .venn__center { animation: venn-center linear both; animation-timeline: --venn; animation-range: cover 38% cover 52%; }

    /* Leichte Parallaxe in Bild-Platzhaltern */
    @keyframes drift { from { translate: 0 -30px; } to { translate: 0 30px; } }
    .placeholder { view-timeline: --ph block; }
    .placeholder::before { animation: drift linear both; animation-timeline: --ph; }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .primary-nav__list { gap: 22px; }
  .primary-nav { gap: 24px; }
  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .facts { grid-column: 9 / span 4; }
  .dvv-story { grid-column: 1 / span 8; }
  .process__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .process__list::before { display: none; }
  .process__step { border-top: 2px solid var(--on-dark); padding-top: 18px; }
  .process__list { padding-top: 0; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }

  .grid > * { grid-column: 1 / -1 !important; }
  .section-head__aside { font-size: 1.0625rem; }
  .current__body { padding-top: 0; }

  .work-grid { grid-template-columns: 1fr; }
  .work-card--flagship, .work-card--side, .work-card--wide { grid-column: 1 / -1; grid-row: auto; }

  .facts, .nh-visual { position: static; }
  .story-row { grid-template-columns: 1fr; }
  .story-row__k, .story-row__v { grid-column: 1 / -1; }

  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .formats__head, .recognition__head { display: none; }
  .format__name, .format__for, .format .tags { grid-column: 1 / -1; }
  .rec__type, .rec__name, .rec__text { grid-column: 1 / -1; }
  .rec__project { grid-column: 1 / -1; text-align: left; }

  .media h3, .media__body { grid-column: 1 / -1; }
  .footer-nav--a { grid-column: 1 / span 6 !important; }
  .footer-nav--b { grid-column: 7 / span 6 !important; }
}

@media (max-width: 640px) {
  .capabilities, .audiences, .steps { grid-template-columns: 1fr; }
  .step__de { min-height: 0; }
  .process__list { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person .placeholder, .person .person__photo { min-height: 280px; }
  .person__details { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .metrics dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .yold-media { grid-template-columns: 1fr; }
  .row-kv { grid-template-columns: 1fr; gap: 4px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .brand { font-size: 1rem; }
  .bubble { max-width: 92%; }
  .mini-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
}