/* ============================================================
   KOMPONENTEN
   Reihenfolge: Header, Buttons, Hero, Arbeiten, Cursor.
   Alle Werte kommen aus tokens.css.
   ============================================================ */

/* ---- Header ------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

/* Logo-Bildmarke (OKR) ohne Claim — offizielles SVG */
.wordmark {
  display: inline-flex;
  align-items: center;
}
.wordmark__img {
  display: block;
  height: 1.75rem;   /* ~28px, passt zur Header-Höhe */
  width: auto;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-3); }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* Menügriff — existiert nur schmal. Drei Striche, die beim Öffnen
   zum Kreuz werden; rein dekorativ, den Zustand trägt
   aria-expanded am Knopf. */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;   /* 44px — Mindestgröße für den Daumen */
  height: 2.75rem;
  margin-right: -0.5rem;   /* optisch an die Gutter-Kante */
  color: var(--ink);
}
.nav-toggle__bar {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 1px;
  margin-left: -0.625rem;
  background: currentColor;
  transition:
    transform var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: calc(50% - 0.375rem); }
.nav-toggle__bar:nth-child(2) { top: 50%; }
.nav-toggle__bar:nth-child(3) { top: calc(50% + 0.375rem); }

.site-nav[data-open="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}
.site-nav[data-open="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav[data-open="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* Breit: der Auszug ist einfach die Zeile, die er immer war. */
.site-nav__menu { display: contents; }

@media (max-width: 767px) {
  /* Schmal bleiben Wortmarke, CTA und Griff in der Zeile; die
     Seitenlinks klappen darunter auf. Der Griff steht rechts
     außen, im Quelltext aber vor den Links — so läuft der Tab-Weg
     Griff → Links → CTA, und der geschlossene Auszug ist über
     visibility ganz aus dem Fokus genommen. */
  .nav-toggle { display: block; order: 3; }
  .site-nav__cta { order: 2; }
  .site-nav { gap: var(--sp-2); }

  .site-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--sp-1) var(--gutter) var(--sp-2);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease),
      visibility var(--dur-fast);
  }
  .site-nav[data-open="true"] .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav__menu a {
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--line);
  }
  .site-nav__menu a:last-child { border-bottom-color: transparent; }
  .site-nav__menu a:hover,
  .site-nav__menu a[aria-current="page"] { border-bottom-color: var(--ink); }

  /* Der CTA trägt schmal nur das Verb — „Erstgespräch anfragen"
     passt neben Wortmarke und Griff nicht mehr in die Zeile. */
  .site-nav__cta-long { display: none; }
}

/* Ohne JS öffnet der Griff nichts — dann steht die Navigation
   schmal wieder in der Zeile und darf umbrechen. */
.no-js .nav-toggle { display: none; }
@media (max-width: 767px) {
  .no-js .site-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sp-1); }
  .no-js .site-nav__menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0;
    border-bottom: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .no-js .site-nav__menu a { padding-block: 0.5rem; border-bottom-color: transparent; }
}

/* ---- Buttons ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.btn:active { transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; }

/* Textlink mit Pfeil — für "Alle Projekte" etc. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.35em;
}
.arrow-link .arr { transition: transform var(--dur-fast) var(--ease); }
.arrow-link:hover .arr { transform: translateX(0.35em); }

/* ---- Hero --------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92svh, 1100px);
  display: flex;
  flex-direction: column;
  overflow: clip;
  /* Farbstufe 1: Sektion als Fläche, harte Kante zum Header */
  background: var(--tint);
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-4) var(--sp-5);
}

.hero__title {
  font-size: var(--text-2xl);
  max-width: 18ch; /* hält auch längere CMS-Zeilen, ohne die Maske zu sprengen */
}
/* Das eine Wort in Kobalt — Akzent als Interpunktion */
.hero__title em { font-style: normal; color: var(--accent-text); }

.hero__lower {
  margin-top: auto;
  padding-block: var(--sp-5) 0;
  align-items: end;
}
.hero__copy   { grid-column: 1 / span 4; }
.hero__actions {
  grid-column: 9 / span 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
  align-items: center;
}
/* Einordnung der Marke, rechts unter den Aktionen */
.hero__tags {
  grid-column: 9 / span 4;
  justify-self: end;
  text-align: right;
  margin-top: var(--sp-3);
}
@media (max-width: 1023px) {
  .hero__copy { grid-column: 1 / span 7; }
  .hero__actions, .hero__tags { grid-column: 8 / span 5; }
}
@media (max-width: 767px) {
  .hero__copy, .hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hero__actions { margin-top: var(--sp-3); }
  .hero__tags { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* Typo als Bild: läuft bewusst aus dem Format.
   aria-hidden — rein visuell, Inhalt steht in h1. */
.bleed-word {
  display: block;
  /* Seitlich beschneiden, vertikal nicht — die Versalien laufen
     bewusst über die Zeilenhöhe (line-height 0.78) hinaus. */
  overflow-x: clip;
  overflow-y: visible;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-stretch: 118%;
  font-size: var(--text-bleed);
  line-height: 0.78;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  white-space: nowrap;
  /* Farbstufe 2: Kobalt als gefüllte Fläche — Typo ist das Bild */
  color: var(--accent);
  user-select: none;
  pointer-events: none;
  margin-top: var(--sp-4);
  margin-bottom: -0.12em; /* Unterkante schneidet ins Sektionsende */
}

/* Laufband: die Kopien legt main.js an — so viele, wie die Fläche
   in jeder Bewegungslage braucht. Ohne JS bleibt die einfache
   Wortmarke stehen: lesbar, nur ohne Band und ohne Bewegung. */
.bleed-word__track {
  display: flex;
  width: max-content;
  /* Kein Trennzeichen: die Kopien stehen dicht beieinander und
     lesen sich als eine durchlaufende Zeile. Etwas weiter als der
     Wortzwischenraum, damit „OK ROGER“ als Einheit erkennbar
     bleibt und nicht in „ROGER OK“ zerfällt. */
  gap: 0.3em;
  will-change: transform;
}
.bleed-word__word { flex: none; }

/* ---- Sektion: Arbeiten -------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-head__title {
  font-size: var(--text-xl);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.section-head__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mobil: Titel und Zusatz stapeln. Der Zusatz steht auf `nowrap`,
   damit er neben dem Titel nicht mitten im Wort bricht — auf
   schmalen Flächen lief er dadurch aber aus dem Bild. */
@media (max-width: 767px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .section-head__title { flex-wrap: wrap; }
  .section-head__count { white-space: normal; }
}

.work-grid { row-gap: var(--sp-6); }

/* Case-Card — bewusst nur Fläche, Titel, Meta.
   Varianten steuern Spannweite + Seitenverhältnis:
   .case--wide  = 7 Spalten, 16:9
   .case--tall  = 5 Spalten, 4:5
   Versatz entsteht über margin-top der geraden Karten.  */
.case { position: relative; }
.case--wide { grid-column: span 7; }
.case--tall { grid-column: span 5; }
.case--push { margin-top: var(--sp-7); } /* Asymmetrie: hängende Karte */

@media (max-width: 1023px) {
  .case--wide { grid-column: span 12; }
  .case--tall { grid-column: span 8; }
  .case--push { margin-top: 0; }
}
@media (max-width: 767px) {
  .case--wide, .case--tall { grid-column: 1 / -1; }
}

.case__media {
  position: relative;
  overflow: clip;
  background: var(--paper-raise);
}

/* Farbstufe 3: Jede Case-Karte trägt die Farbwelt ihres Projekts.
   Bis echte Bilder kommen, steht die Fläche selbst dafür ein.
   CMS: Feld "tone" (kobalt | hot | tint | ink) pro Case. */
.case__media[data-tone="kobalt"] { background: var(--accent); }
.case__media[data-tone="hot"]    { background: var(--signal-hot); }
.case__media[data-tone="tint"]   { background: var(--tint); }
.case__media[data-tone="ink"]    { background: var(--inv-paper); }

.case__media[data-tone="kobalt"] .ph span,
.case__media[data-tone="ink"] .ph span {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
.case__media[data-tone="hot"] .ph span,
.case__media[data-tone="tint"] .ph span {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
/* 16:9 statt 16:10 — die Übersichtsmotive liegen als 16:9 vor und
   laufen so ohne Beschnitt in die Karte. */
.case--wide .case__media { aspect-ratio: 16 / 9; }
.case--tall .case__media { aspect-ratio: 4 / 5; }

/* Platzhalterfläche für Bild — wird später durch <img>/<video>
   ersetzt, Seitenverhältnis bleibt durch aspect-ratio stabil. */
.case__media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform var(--dur-slow) var(--ease);
}
.case__media .ph span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  padding: 0.5em 1em;
}
.case a:hover .ph, .case a:focus-visible .ph { transform: scale(1.035); }

/* Echtes Bild in der Case-Karte — füllt die Fläche, Seitenverhältnis
   kommt weiterhin vom Container (16:9 bzw. 4:5). */
.case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.case a:hover .case__media img,
.case a:focus-visible .case__media img { transform: scale(1.035); }

.case__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-2);
}
.case__title {
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  max-width: 30ch; /* lange Titel brechen kontrolliert um */
}
.case a:hover .case__title { color: var(--accent-text); }
.case__title { transition: color var(--dur-fast) var(--ease); }

.case__tags { text-align: right; }
@media (max-width: 767px) {
  .case__caption { grid-template-columns: 1fr; }
  .case__tags { text-align: left; }
}

/* ---- Cursor (nur Feinzeiger-Geräte) ------------------------- */

.cursor-dot {
  position: fixed;
  z-index: 200;
  left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width var(--dur-fast) var(--ease),
    height var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
  opacity: 0;
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-big { width: 34px; height: 34px; opacity: 0.55; }
@media (pointer: coarse) { .cursor-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot { display: none; } }

/* ============================================================
   FLÄCHEN — Sektionen wechseln die Farbwelt über Token-Override.
   Alle Komponenten erben automatisch die richtige Stimmung.
   ============================================================ */

.surface-ink {
  --paper:       var(--inv-paper);
  --ink:         var(--inv-ink);
  --ink-soft:    var(--inv-ink-soft);
  --line:        var(--inv-line);
  /* Auf dem dunklen Band traegt das Kobalt als Wort nicht — dieselbe
     Antwort wie in der Farbwelt „Ink". Ersetzt die fruehere
     Einzelregel `.surface-ink .statement em`. */
  --accent-text: var(--signal-hot);
  /* Auch diese beiden kommen aus den invertierten Stufen: In der
     Farbwelt „Ink" dreht sich das Band selbst um und wird hell —
     feste Hexwerte wären dort unsichtbar. */
  --line-strong: var(--inv-line-strong);
  --paper-raise: var(--inv-paper-raise);
  background: var(--paper);
  color: var(--ink);
}

.surface-tint { background: var(--tint); }

/* ============================================================
   STARTSEITE — weitere Sektionen
   ============================================================ */

/* ---- Positionierung: Statement + Prinzipien ----------------- */

.statement {
  font-size: var(--text-xl);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--accent-text); }

.principles {
  list-style: none;
  margin-top: var(--sp-6);
}
.principle {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.principle__no {
  grid-column: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  padding-top: 0.5em;
}
.principle__title {
  grid-column: 3 / span 4;
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.principle__text {
  grid-column: 8 / span 5;
  color: var(--ink-soft);
  max-width: 52ch;
}
@media (max-width: 767px) {
  .principle { grid-template-columns: repeat(4, 1fr); row-gap: var(--sp-2); }
  .principle__no { grid-column: 1 / -1; padding-top: 0; }
  .principle__title { grid-column: 1 / -1; }
  .principle__text { grid-column: 1 / -1; }
}

/* ---- Leistungen: große Zeilen statt Karten ------------------ */

.services { list-style: none; }
.service {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  position: relative;
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service__link {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--sp-2);
}

.service__no {
  grid-column: 1 / span 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-soft);
  padding-top: 0.9em;
}
.service__name {
  grid-column: 2 / span 6;
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-stretch: 110%;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-fast) var(--ease);
}
.service__body { grid-column: 8 / span 5; }
.service__text { color: var(--ink-soft); max-width: 48ch; }
.service a:hover .service__name,
.service a:focus-visible .service__name { color: var(--accent-text); }
@media (max-width: 1023px) {
  .service__no { grid-column: 1 / -1; padding-top: 0; }
  .service__name { grid-column: 1 / -1; }
  .service__body { grid-column: 1 / -1; }
}

/* ---- Prozess: nummerierte Schritte, asymmetrisch ------------ */

.steps { list-style: none; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.step__no {
  grid-column: 1 / span 2;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-stretch: 118%;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 1.2px var(--line-strong);
}
.step__title {
  grid-column: 3 / span 4;
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}
.step__meta {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.step__text { grid-column: 8 / span 5; color: var(--ink-soft); max-width: 52ch; }
@media (max-width: 767px) {
  .step { grid-template-columns: repeat(4, 1fr); row-gap: var(--sp-2); }
  .step__no, .step__title, .step__text { grid-column: 1 / -1; }
}

/* ---- Team --------------------------------------------------- */

.team-grid { row-gap: var(--sp-5); }
.person { grid-column: span 3; }
.person--push { margin-top: var(--sp-5); }
@media (max-width: 1023px) { .person { grid-column: span 6; } .person--push { margin-top: 0; } }
@media (max-width: 767px)  { .person { grid-column: span 2; } }

.person__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: clip;
  background: var(--paper-raise);
}
.person__media .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.person__media .ph span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  padding: 0.5em 1em;
}
.person__name {
  margin-top: var(--sp-2);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--line);
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
}
.person__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.35em;
}

/* ---- Kontakt-CTA (Startseite) + Bleed-Bookend --------------- */

.contact-cta { position: relative; overflow: clip; }
.contact-cta .container { position: relative; }
.contact-cta__title {
  font-size: var(--text-2xl);
  max-width: 16ch;
}
.contact-cta__row {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.contact-cta__mail {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.3em;
  transition: color var(--dur-fast) var(--ease);
}
.contact-cta__mail:hover { color: var(--signal-hot); border-color: currentColor; }

/* ---- Footer: gestaltetes Element, kein Abstellraum ---------- */

.site-foot {
  padding-top: var(--sp-6);
  overflow: clip;
}
.site-foot__grid {
  padding-bottom: var(--sp-6);
  row-gap: var(--sp-4);
}
.site-foot__claim {
  grid-column: 1 / span 5;
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  max-width: 22ch;
}
.site-foot__col {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.site-foot__col:first-of-type { grid-column: 7 / span 2; }
.site-foot__col a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.3em;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-foot__col a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-foot__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 1023px) {
  .site-foot__claim { grid-column: 1 / -1; }
  .site-foot__col:first-of-type { grid-column: 1 / span 4; }
  .site-foot__col { grid-column: span 4; }
}
@media (max-width: 767px) {
  .site-foot__col:first-of-type, .site-foot__col { grid-column: 1 / -1; }
  .site-foot__meta { flex-direction: column; gap: var(--sp-1); }
}

/* Wortmarke als Typo-Bild am Seitenende — Gegenstück zum Hero */
.site-foot .bleed-word {
  color: var(--ink);
  margin-top: 0;
  opacity: 0.98;
}

/* ============================================================
   UNTERSEITEN
   ============================================================ */

/* ---- Seitenkopf (Case, Leistung, Kontakt) ------------------- */

.page-head { padding-block: var(--sp-6) var(--sp-5); }
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.page-head__title {
  font-size: var(--text-2xl);
  max-width: 18ch;
}
/* Akzentwort wie im Hero: Kobalt, nicht kursiv */
.page-head__title em { font-style: normal; color: var(--accent-text); }
.page-head__lead {
  margin-top: var(--sp-4);
  max-width: 38ch;
}

/* ---- Volle Medienfläche (Case-Hero, Zwischenbilder) --------- */

.media-full {
  position: relative;
  overflow: clip;
  background: var(--paper-raise);
}
.media-full--wide  { aspect-ratio: 21 / 9; }
/* Case-Keyvisuals liegen als 16:9 vor — volle Breite, kein Beschnitt. */
.media-full--hero  { aspect-ratio: 16 / 9; }
.media-full--half  { aspect-ratio: 4 / 3; }
.media-full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-full .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.media-full .ph span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  padding: 0.5em 1em;
}
.media-full[data-tone="kobalt"] { background: var(--accent); }
.media-full[data-tone="hot"]    { background: var(--signal-hot); }
.media-full[data-tone="tint"]   { background: var(--tint); }
.media-full[data-tone="ink"]    { background: var(--inv-paper); }
.media-full[data-tone="kobalt"] .ph span,
.media-full[data-tone="ink"] .ph span {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent);
}

figcaption.media-caption {
  padding-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Editorial-Textblöcke (Case-Study) ---------------------- */

.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--sp-3);
  padding-block: var(--sp-6);
}
/* Enger getaktet für Faktenlisten wie das Impressum: kurze
   Blöcke brauchen nicht den Atem einer Case-Study. */
.editorial--tight { padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.editorial__label { grid-column: 1 / span 3; }
.editorial__body  { grid-column: 5 / span 7; }
.editorial__body > * + * { margin-top: var(--sp-3); }
.editorial__body h3 {
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
}
.editorial__body p { color: var(--ink-soft); max-width: 62ch; }
/* Anschriften im Fließtext (Impressum) stehen aufrecht, nicht
   kursiv — wie im Kontaktblock. */
.editorial__body address {
  font-style: normal;
  color: var(--ink-soft);
  line-height: 1.9;
}
.editorial__body a { color: inherit; }
@media (max-width: 767px) {
  .editorial__label, .editorial__body { grid-column: 1 / -1; }
}

/* Faktenliste im Case (Kunde, Jahr, Leistungen) */
.fact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
}
.fact-list dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5em;
}
.fact-list dd { font-weight: var(--w-medium); }
@media (max-width: 767px) {
  .fact-list { grid-template-columns: 1fr; row-gap: var(--sp-3); }
}

/* Nächstes Projekt — großer Abbinder */
.next-case { display: block; padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.next-case__label { margin-bottom: var(--sp-2); }
.next-case__title {
  font-size: var(--text-xl);
  transition: color var(--dur-fast) var(--ease);
}
.next-case:hover .next-case__title { color: var(--accent-text); }

/* ---- Formular (Kontakt) ------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--gutter);
}
.field--full { grid-column: 1 / -1; }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6em;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6em 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: 0.6; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--accent);
}
.field textarea { resize: vertical; min-height: 7em; }
.form-hint {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 44ch;
}

/* Zwei Medien nebeneinander (Case-Study) */
.media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
@media (max-width: 767px) { .media-duo { grid-template-columns: 1fr; } }

/* Drei Motive nebeneinander (Case mit drittem Bild) */
.media-duo--trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .media-duo--trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .media-duo--trio { grid-template-columns: 1fr; } }

/* Kontaktseite: linke Spalte (aktuell die Begründung, warum es
   kein Formular gibt — .contact-form bleibt für ein späteres
   Formular gültig), direkte Wege rechts. */
.contact-form,
.contact-why   { grid-column: 1 / span 7; }
.contact-aside { grid-column: 9 / span 4; }
.contact-aside address { font-style: normal; line-height: 2; }
@media (max-width: 1023px) {
  .contact-form,
  .contact-why   { grid-column: 1 / -1; }
  .contact-aside { grid-column: 1 / -1; margin-top: var(--sp-5); }
}

/* Sachliche Listen (Angebote, Konditionen, Abgrenzung) */
.dash-list { list-style: none; }
.dash-list li {
  position: relative;
  padding-left: 1.6em;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 0.6em;
}
.dash-list li::before { content: "—"; position: absolute; left: 0; opacity: 0.45; }
.dash-list strong { color: var(--ink); font-weight: var(--w-medium); }

/* Eignungs-Check (Kontaktseite): zwei Spalten Passt / Passt nicht */
.fit-col { grid-column: span 6; }
.fit-col .dash-list { margin-top: var(--sp-2); }
@media (max-width: 767px) { .fit-col { grid-column: 1 / -1; } }
.fit-col + .fit-col { position: relative; }

/* Einleitungs- und Schlussabsätze innerhalb von Sektionen */
.section-intro {
  max-width: 46ch;
  margin-bottom: var(--sp-5);
}
.section-note {
  max-width: 44ch;
  margin-block: var(--sp-4);
}

/* Credits unter einem Case: mit wem zusammen gearbeitet wurde */
.credits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-4);
}
.credits__item strong {
  color: var(--ink);
  font-weight: var(--w-medium);
}

/* ============================================================
   ANGEBOTSSEITE — farbcodierte Angebots-Panels + Faktenleiste
   ============================================================ */

/* Kobalt-Fläche als vierte Sektionswelt (neben tint/ink) */
.surface-accent {
  --paper:       var(--accent);
  --ink:         var(--accent-ink);
  --ink-soft:    color-mix(in srgb, var(--accent-ink) 72%, var(--accent));
  --line:        color-mix(in srgb, var(--accent-ink) 28%, transparent);
  --line-strong: color-mix(in srgb, var(--accent-ink) 55%, transparent);
  background: var(--paper);
  color: var(--ink);
}

/* Ein Angebot = ein Panel. Große Nummer + Name links, Inhalt rechts. */
.offer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  align-items: start;
}
.offer__head { grid-column: 1 / span 5; }
.offer__body { grid-column: 7 / span 6; }
@media (max-width: 900px) {
  .offer__head, .offer__body { grid-column: 1 / -1; }
}

.offer__no {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-stretch: 118%;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.offer__name {
  font-size: var(--text-2xl);
  margin-top: var(--sp-2);
}
.offer__meta {
  margin-top: var(--sp-3);
  display: block;
}

.offer__lead {
  font-size: var(--text-lg);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.offer__note {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Hervorgehobene Zeile (z. B. „wird voll verrechnet") */
.offer__hook {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 0.5em 0.9em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

/* Deliverables als Chips statt Fließtext */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: var(--sp-3);
  list-style: none;
}
.chips li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.55em 0.95em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

/* Faktenleiste — drei kompakte Spalten statt drei Textblöcke */
.factsheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--gutter);
}
@media (max-width: 900px) {
  .factsheet { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.factsheet__col h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.factsheet__col .dash-list li { max-width: none; margin-bottom: 0.5em; }

/* Kurzes Statement zwischen den Flächen (z. B. „mehr als drei Stufen") */
.offer-more {
  font-size: var(--text-xl);
  font-weight: var(--w-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
}
.offer-more em { font-style: normal; color: var(--accent-text); }

/* ============================================================
   BLOB-BANNER — schmaler, vollbreiter Formsprache-Streifen.
   Rote Metaball-Blobs auf Papier; Höhe bewusst schmal.
   Zeichenlogik (weiche, verschmolzene Formen) als Fläche,
   nicht als Dekor-Ornament. Rein visuell.
   ============================================================ */
.blob-banner {
  --blob: var(--signal-hot);   /* Farbe zentral steuerbar */
  background: var(--paper);
  overflow: clip;
  line-height: 0;              /* kein Inline-Whitespace unter dem SVG */
}
.blob-banner svg {
  display: block;
  width: 100%;
  /* Höhe = Bandstärke. Das SVG steht auf preserveAspectRatio
     "slice": Es skaliert immer auf die volle Breite, ein
     schmaleres Band schneidet die Formen also stärker an, statt
     sie zu verkleinern. Genau das ist gewollt — der Streifen ist
     ein Ausschnitt aus einem größeren Formenfeld. */
  height: clamp(62px, 9vw, 110px);
}
.blob-banner__fill circle { fill: var(--blob); }

/* ============================================================
   CLAIM-BAND + RANDNOTIZ
   Die englischen Claims als eigenes grafisches Moment.
   Gestaltungsmittel ist der Bruch zwischen den zwei Stimmen:
   Zeile 1 gesetzt (Archivo, hart), Zeile 2 mit der Hand notiert
   und leicht schräg — Behauptung und Nachsatz, wie auf einem
   kommentierten Ausdruck. Kein Ornament: der Stern hängt in den
   Rand, die Notiz steht auf der Grundlinie des Rasters.
   ============================================================ */

/* Flacher als eine normale Sektion: Das Band trägt nur zwei
   Zeilen und soll als Zäsur wirken, nicht als eigenes Kapitel. */
.claim-band {
  position: relative;
  padding-block: var(--sp-6);
}
.claim-band__title {
  font-size: var(--text-2xl);
  max-width: 15ch;
}

/* Sternchen am Wort „Collective" — verweist auf die Randnotiz
   darunter, die denselben Stern trägt. Kobalt wie die Notiz. */
.claim-band__mark {
  font-size: 0.4em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.08em;
  color: var(--accent);
}

/* Die Notiz rückt an die rechte Kante — die Zeile steht links
   oben, die Notiz rechts unten. Standen beide links, drängten
   sie sich in der linken Hälfte, während rechts eine leere
   Fläche blieb.
   Block statt Flex und rechtsbündig: Sonst klebt der Stern am
   linken Kastenrand, während der Text rechts steht — und der
   Flattersatz ließe die Notiz 128 px vor der Kante enden. */
.claim-band .hand-note {
  display: block;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
  /* Gemessen: `balance` trennt hier „Strong brands / are never
     built alone." — `pretty` bei 20ch bricht nach „are" und hält
     die Zeilen fast gleich lang (280/252 px). */
  max-width: 20ch;
  text-wrap: pretty;
}
.claim-band .hand-note__mark {
  display: inline;
  margin-right: 0.1em;
}
@media (max-width: 767px) {
  /* Schmal ist kein Platz für zwei Lager — die Notiz steht wieder
     links unter der Zeile, mit dem Stern voran. Vollständig zurück
     auf die Basiswerte, sonst bliebe der engere Desktop-Satz
     stehen. */
  .claim-band .hand-note {
    display: flex;
    margin-left: 0;
    text-align: left;
    max-width: 22ch;
    text-wrap: balance;
  }
  .claim-band .hand-note__mark { margin-right: 0; }
}
/* Akzentwort wie in Hero und Seitenkopf: Kobalt, nicht kursiv.
   Bewusst OHNE Sonderregel für dunkle Flächen: Der Claim trägt
   auf jedem Grund das Logo-Kobalt — Markenentscheidung. Auf
   --inv-paper sind das 2,5:1; wer die Lesbarkeit dort erhöhen
   will, hellt die FLÄCHE auf, nicht das Blau. */
.claim-band__title em { font-style: normal; color: var(--accent); }

/* ---- Randnotiz ---------------------------------------------
   Immer das Logo-Kobalt, auf jedem Grund — sie gehört zum Claim
   und trägt dessen Farbe. Keine Sonderregel für dunkle Flächen. */

.hand-note {
  display: flex;
  align-items: flex-start;
  gap: 0.26em;
  max-width: 22ch;
  margin-top: var(--sp-4);
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-hand);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--accent);
  text-wrap: balance;
  /* eigene Achse: `rotate` ist unabhängig von `transform` und
     kollidiert deshalb nicht mit dem Reveal der Basis. */
  rotate: -1.6deg;
  transform-origin: 0 50%;
}

/* Der Stern: gesetzt, nicht geschrieben — er markiert die Notiz
   als Fußnote zur Zeile darüber. */
.hand-note__mark {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 0.8em;
  line-height: 1;
  translate: 0 0.18em;
}

/* Ab Desktop hängt der Stern im Rand — die Notiz beginnt bündig
   mit der Zeile darüber. Darunter läuft sie mit, um nichts
   anzuschneiden. */
@media (min-width: 1200px) {
  .hand-note { margin-left: -0.9em; }
}

/* Folgt der Notiz noch der Einleitungstext (Seitenkopf Collective),
   braucht sie mehr Luft nach unten als die Zeile darüber. */
.hand-note + .page-head__lead { margin-top: var(--sp-5); }

/* ---- Handgezogene Unterstreichung ---------------------------
   Ein Strich statt einer border-bottom: Der Pfad wird beim
   Eintreten der Sektion gezogen — dasselbe Easing, dieselbe
   Staffelung wie alle übrige Bewegung. */

.hand-underline { position: relative; display: inline-block; }
.hand-underline > svg {
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: -0.2em;
  width: auto;
  height: 0.36em;
  overflow: visible;
  pointer-events: none;
}
.hand-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
  transition-delay: calc(var(--stagger) * 3);
}
.is-in .hand-underline path { stroke-dashoffset: 0; }

/* Ohne JS und mit Reduced Motion steht der Strich einfach da. */
.no-js .hand-underline path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .hand-underline path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ============================================================
   FARBWAHL — Leiste am rechten Rand.
   Liegt auf jeder Seite, faehrt beim Scrollen mit und laesst sich
   ein- und ausklappen. Bewusst am Rand statt im Satzspiegel: Die
   Farbwelt ist ein Angebot, keine Ansage — sie soll auffindbar
   sein, ohne die Seite zu moderieren.
   ============================================================ */

.mood-bar {
  position: fixed;
  /* ueber dem Inhalt und dem klebenden Kopf (50), unter dem
     Cursor-Punkt (200) — der laeuft weiterhin obenauf. */
  z-index: 90;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  /* stretch, nicht center: Die Feldreihe braucht die volle Breite,
     damit die Markierung links neben einem Feld noch INNERHALB
     ihrer Box liegt — der Klapp-Container schneidet ab. */
  align-items: stretch;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--paper);
  color: var(--ink);
  /* Harte Kante, kein Schatten — und rechts keine Linie, damit die
     Leiste an der Kante klebt statt daneben zu schweben. */
  border: 1px solid var(--line);
  border-right: 0;
}

/* Der Griff: klappt auf und zu. Eingeklappt zeigt er die aktive
   Welt als Farbe, sonst waere die Leiste ein anonymer Knopf. */
.mood-bar__toggle {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 2.75rem;
  height: 1.75rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
}
.mood-bar__toggle:hover { color: var(--ink); }

.mood-bar__chevron { transition: rotate var(--dur-fast) var(--ease); }
.mood-bar[data-open="false"] .mood-bar__chevron { rotate: 180deg; }
.mood-bar[data-open="true"] .mood-bar__current { display: none; }

/* Auf- und Zuklappen ueber die Rasterhoehe: braucht keine gemessene
   Maximalhoehe und bleibt richtig, wenn eine Welt dazukommt. */
.mood-bar__panel {
  display: grid;
  grid-template-rows: 1fr;
  /* Ohne min-height:0 verhindert die automatische Mindesthoehe,
     dass das Flex-Element schrumpft — die Leiste behielte
     eingeklappt ihre volle Hoehe und stuende als leerer Kasten da.
     Gilt fuer den Flex-Kontext (Leiste) wie fuer den Grid-Kontext
     (Reihe), deshalb beide Ebenen. */
  min-height: 0;
  transition:
    grid-template-rows var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}
.mood-bar__panel > * {
  min-height: 0;
  overflow: clip;
}
.mood-bar[data-open="false"] .mood-bar__panel {
  grid-template-rows: 0fr;
  opacity: 0;
}

.mood-bar__row {
  display: flex;
  flex-direction: column;
  /* Felder an die rechte Kante; links bleibt die Rinne fuer die
     Markierung der aktiven Welt. */
  align-items: flex-end;
  gap: var(--sp-1);
  /* Kein Abstand nach oben: Innenabstand zaehlt zur Mindesthoehe und
     bliebe beim Einklappen als Rest stehen. Die Luft zum Griff
     kommt vom `gap` der Leiste. */
  padding: 0 0 0 0.45rem;
}

/* Ein Farbfeld — harte Kante, volle Flaeche. Dieselbe Aussage wie
   eine Sektionsflaeche, nur im Kleinen. */
.mood-chip {
  border-radius: var(--radius);
  background: var(--swatch);
  /* Kraeftige Kante, nicht die zarte --line: Das Feld der gerade
     aktiven Welt hat dieselbe Farbe wie die Flaeche, auf der es
     steht — ohne Kontur waere es unsichtbar. */
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mood-chip[data-mood="flieder"] { --swatch: var(--mood-flieder); }
.mood-chip[data-mood="ivory"]   { --swatch: var(--mood-ivory); }
.mood-chip[data-mood="kobalt"]  { --swatch: var(--mood-kobalt); }
.mood-chip[data-mood="ink"]     { --swatch: var(--mood-ink); }

.mood-bar__current {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
}

.mood-bar__swatch {
  position: relative;
  /* 44px — komfortables Touch-Ziel, auch auf dem Telefon. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease);
}
.mood-bar__swatch:hover { transform: translateX(-4px); }

/* Die gewaehlte Welt wird markiert — derselbe Strich wie bei der
   aktiven Seite in der Navigation, nur an der Kante statt unten.
   Ein Rahmen um das Feld wuerde mit der Farbe konkurrieren, ein
   Strich daneben nie. */
.mood-bar__swatch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Liegt in der Rinne, die .mood-bar__row links freihaelt. */
  left: -0.4rem;
  width: 2px;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.mood-bar__swatch[aria-pressed="true"]::after { opacity: 1; }

/* Der Name der Welt, links neben der Leiste: erscheint beim
   Ueberfahren und verschwindet wieder. Absolut gesetzt, damit die
   Leiste selbst ihre Breite behaelt und nichts springt. */
.mood-bar__name {
  position: absolute;
  right: calc(100% + var(--sp-1));
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  padding: 0.4em 0.7em;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.mood-bar__name.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mood-bar__swatch:hover { transform: none; }
  .mood-bar__panel { transition: none; }
}

@media (max-width: 767px) {
  /* Schmal darf die Leiste weniger Platz nehmen — die Felder
     bleiben bei 44px, die Luft drumherum schrumpft. */
  .mood-bar { gap: 0; padding: 0.35rem; }
  .mood-bar__toggle { width: 2.75rem; }
  .mood-bar__name { display: none; }
}

/* Ohne JS traegt die Wahl nicht — dann gibt es die Leiste nicht. */
.no-js .mood-bar { display: none; }

/* ============================================================
   FARBWELTEN — Korrekturen
   Fast alles regeln die Tokens allein. Hier stehen ausschließlich
   Stellen, an denen eine Farbe NICHT aus einem Token kommen kann:
   weil sie in einer Bilddatei steckt oder weil zwei Rollen in
   einer Welt zusammenfallen. Wächst diese Liste, stimmt etwas mit
   den Tokens nicht.
   ============================================================ */

/* Die Bildmarke trägt das Kobalt fest im SVG. Auf dunklem und auf
   kobaltfarbenem Grund wird sie auf Weiß gezogen. */
:root[data-mood="ink"] .wordmark__img,
:root[data-mood="kobalt"] .wordmark__img { filter: brightness(0) invert(1); }

/* In der Ink-Welt drehen sich die invertierten Bänder um und werden
   hell — dort trägt das Kobalt als Wort wieder, der Signalton nicht.
   Die einzige Stelle, an der ein Mood eine Fläche zurückdreht. */
:root[data-mood="ink"] .surface-ink { --accent-text: var(--accent); }

/* Rollenkollision: In der Kobaltwelt ist der Signalton die
   Leitfarbe. Die Case-Fläche „kobalt" fiele damit mit „hot"
   zusammen — sie nimmt deshalb die tiefere Blaustufe. */
:root[data-mood="kobalt"] .case__media[data-tone="kobalt"] { background: var(--tint); }
:root[data-mood="kobalt"] .case__media[data-tone="kobalt"] .ph span {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* Der Wechsel selbst: Nur die großen Flächen blenden um, und nur
   im Moment des Klicks (main.js setzt .is-mood-shift für eine
   halbe Sekunde). Dauerhaft gesetzt würde die Transition sich in
   Hover-Zustände einmischen; auf `*` gesetzt würde sie die
   Reveal-Bewegung überschreiben. Deshalb diese Liste. */
@media (prefers-reduced-motion: no-preference) {
  .is-mood-shift body,
  .is-mood-shift .site-head,
  .is-mood-shift .hero,
  .is-mood-shift .section,
  .is-mood-shift .surface-ink,
  .is-mood-shift .site-foot,
  .is-mood-shift .case__media,
  .is-mood-shift .btn,
  .is-mood-shift .mood-bar,
  .is-mood-shift .mood-bar__name {
    transition:
      background-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }
}

/* Markenregel aus dem Claim-Band: „Der Claim trägt auf jedem Grund
   das Logo-Kobalt" (siehe Kommentar bei .claim-band__title em).
   In der Kobaltwelt ist --accent der Signalton — das Band holt sich
   sein Blau deshalb direkt aus dem Leitwert der Welt zurück, statt
   der Akzentrolle zu folgen. Betrifft NUR das Claim-Band; die Notiz
   im Hero gehört zur H1 und folgt deren Akzent. */
:root[data-mood="kobalt"] .claim-band__title em,
:root[data-mood="kobalt"] .claim-band__mark,
:root[data-mood="kobalt"] .claim-band .hand-note { color: var(--mood-kobalt); }