/* ==========================================================================
   Components
   Reihenfolge: Hotkey → Button → Navigation → Hero → Work → Playground → Pattern-Detail → Footer
   → Reveal → Chat. Namen nach Typ-Hierarchie-Variante wie in Figma (siehe design-system/MAPPING.md).
   Nur Tokens aus tokens.css: keine Rohwerte für Farbe, Schrift, Abstand, Radius oder Dauer.
   Erlaubt sind nur Geometrie-Werte von Illustrationen (Hand, Scanner, Journey) und Hairlines.
   Breakpoints: 48em (768 px) Tablet, 64em (1024 px) Desktop, 90em (1440 px) Wide
   Hover-Effekte nur bei echter Maus (@media (hover: hover)), sonst bleiben sie nach dem
   Tippen auf Touch-Geräten hängen.
   Figma: Seite "Screens" (node-id 1:2)
   ========================================================================== */

/* ---------- Hotkey (Figma: Hotkey, früher "Hotekey-item") ----------
   25 × 23, fast weiß, innerer Schatten an der Unterkante. State pressed (Taste auf der Tastatur
   oder Klick): etwas dunkler, der innere Schatten wandert an die Oberkante. main.js setzt dafür
   .is-pressed. Mehrere Hotkeys stehen in einer .hotkey-group. */

.hotkey-group {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--hotkey-gap);
}

.hotkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--hotkey-width);
  block-size: var(--hotkey-height);
  padding: var(--hotkey-padding);
  background: var(--hotkey-background-default);
  border: var(--border-width-thin) solid var(--hotkey-border);
  border-radius: var(--hotkey-radius);
  box-shadow: inset 0 calc(var(--space-half) * -1) var(--space-half) var(--hotkey-shadow-default);
  color: var(--hotkey-text);
  font: var(--text-caption-font-weight) var(--hotkey-font-size) / var(--text-caption-line-height) var(--font-family-sans);
  text-transform: uppercase;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-out),
    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
}

.hotkey.is-pressed {
  background: var(--hotkey-background-pressed);
  box-shadow: inset 0 var(--space-half) var(--space-half) var(--hotkey-shadow-pressed);
}

/* Variante inverse: auf Side- und Bottom-Sheets (Chat). Sheets sind immer dunkel, darum sind
   die Werte in Light und Dark gleich. Mehrbuchstabige Tasten (ESC) wachsen mit dem Text. */
.hotkey--inverse {
  padding-inline: var(--hotkey-inverse-padding-inline);
  background: var(--hotkey-inverse-background-default);
  border-color: var(--hotkey-inverse-border);
  box-shadow: none;
  color: var(--hotkey-inverse-text);
}

.hotkey--inverse.is-pressed {
  background: var(--hotkey-inverse-background-pressed);
  box-shadow: none;
}

/* ---------- Button (Figma: Button-Primary-Ink, Button-Secondary-Outline) ----------
   36 px hoch, Padding 20/8, ganz rund, TASA Medium 16 px.
   States: default, hover (blau gefüllt, weiße Schrift), focus (Ring), active (eine Stufe dunkler),
   disabled. Hover nur bei echter Maus. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  block-size: var(--button-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  font: var(--button-font-weight) var(--button-font-size) / var(--text-label-line-height) var(--font-family-sans);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-base) var(--motion-easing-out),
    border-color var(--motion-duration-base) var(--motion-easing-out),
    color var(--motion-duration-base) var(--motion-easing-out);
}

.button:focus-visible {
  outline-color: var(--button-focus-ring);
  border-radius: var(--button-radius);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
}

.button--primary-ink {
  background: var(--button-primary-ink-background-default);
  border-color: var(--button-primary-ink-border-default);
  color: var(--button-primary-ink-text-default);
}

.button--primary-ink:active {
  background: var(--button-primary-ink-background-active);
  border-color: var(--button-primary-ink-border-active);
  color: var(--button-primary-ink-text-active);
}

.button--primary-ink:disabled,
.button--primary-ink[aria-disabled="true"] {
  background: var(--button-primary-ink-background-disabled);
  border-color: var(--button-primary-ink-border-disabled);
  color: var(--button-primary-ink-text-disabled);
}

.button--secondary-outline {
  background: var(--button-secondary-outline-background-default);
  border-color: var(--button-secondary-outline-border-default);
  color: var(--button-secondary-outline-text-default);
}

.button--secondary-outline:active {
  background: var(--button-secondary-outline-background-active);
  border-color: var(--button-secondary-outline-border-active);
  color: var(--button-secondary-outline-text-active);
}

.button--secondary-outline:disabled,
.button--secondary-outline[aria-disabled="true"] {
  background: var(--button-secondary-outline-background-disabled);
  border-color: var(--button-secondary-outline-border-disabled);
  color: var(--button-secondary-outline-text-disabled);
}

@media (hover: hover) {
  .button--primary-ink:hover:not(:active, :disabled, [aria-disabled="true"]) {
    background: var(--button-primary-ink-background-hover);
    border-color: var(--button-primary-ink-border-hover);
    color: var(--button-primary-ink-text-hover);
  }

  .button--secondary-outline:hover:not(:active, :disabled, [aria-disabled="true"]) {
    background: var(--button-secondary-outline-background-hover);
    border-color: var(--button-secondary-outline-border-hover);
    color: var(--button-secondary-outline-text-hover);
  }
}

/* ---------- Navigation ----------
   Eine Leiste oben, klebt immer (sticky), vollweiß.
   Desktop (ab 64em): Tastenkürzel links, Mitte, rechts. Mobile: Logo links, "Menu" rechts,
   das Menü klappt darunter auf. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navigation-bar-background); /* vollweiß, keine Transparenz */
  border-bottom: var(--border-width-thin) solid var(--navigation-bar-border);
  transition: border-color var(--motion-duration-base) var(--motion-easing-out);
}

/* Gescrollt: feine Linie unten wie zwischen den Projekten (main.js setzt .is-scrolled) */
.site-header.is-scrolled {
  border-bottom-color: var(--navigation-bar-border-scrolled);
}

/* Desktop (Figma: Navigation-Bar-Desktop, State top / scrolled): ganz oben 32 px Rand rundum
   (Leiste 101 px), sobald gescrollt ist 16 px (69 px). main.js setzt .is-scrolled.
   Die Leiste ist dafür fixiert und der Inhalt beginnt unter ihrer oberen Höhe, sonst würde die
   Seite beim Schrumpfen springen. Ausnahme von der Motion-Regel (nur transform/opacity):
   Höhe und Rand der Leiste werden animiert, betrifft aber nur die fixierte Leiste selbst. */
:root {
  --navigation-bar-height-top: calc(var(--navigation-bar-height) + 2 * var(--space-4));
}

@media (min-width: 64em) {
  .site-header {
    position: fixed;
    inset-inline: 0;
  }

  .site-header + main {
    margin-block-start: var(--navigation-bar-height-top);
  }
}

.logo {
  flex-shrink: 0;
  inline-size: var(--logo-size);
  block-size: var(--logo-size);
}

/* Logo-Brand-Primary: Gesicht in Brand-Blau, Augen in Flächenfarbe (main.js zeichnet das SVG) */
.logo__face {
  fill: var(--logo-background);
}

.logo__eye {
  fill: var(--logo-eye);
}

.navigation-bar {
  display: none;
  align-items: center;
  gap: var(--navigation-bar-gap);
  block-size: calc(var(--navigation-bar-height-top) - var(--border-width-thin));
  padding-inline: var(--grid-margin);
  transition:
    block-size var(--motion-duration-base) var(--motion-easing-out),
    padding-inline var(--motion-duration-base) var(--motion-easing-out);
}

.site-header.is-scrolled .navigation-bar {
  block-size: calc(var(--navigation-bar-height) - var(--border-width-thin));
  padding-inline: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .navigation-bar {
    transition: none;
  }
}

.navigation-bar__home {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navigation-bar__items {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--navigation-item-gap);
}

.navigation-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hotkey plus Button als Paar: Hover auf den Button zeigt nur dessen Hotkey */
.navigation-bar__action {
  position: relative;
  display: flex;
}

/* Hotkeys der Navigation (Figma: Entwurf neben Navigation-Bar-Desktop): unsichtbar und ohne
   eigenen Platz. Bei Hover oder Tastaturfokus blenden sie mittig unter ihrem Eintrag von unten
   nach oben ein. Solange ⌃ gedrückt ist (main.js setzt .show-hotkeys), sind alle zu sehen. */
.navigation-bar .hotkey-group {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  opacity: 0;
  pointer-events: none;
  translate: -50% var(--space-1);
  transition:
    opacity var(--motion-duration-base) var(--motion-easing-out),
    translate var(--motion-duration-base) var(--motion-easing-out);
}

@media (hover: hover) {
  .navigation-bar__home:hover .hotkey-group,
  .navigation-item:hover .hotkey-group,
  .navigation-bar__action:hover .hotkey-group {
    opacity: 1;
    translate: -50% 0;
  }
}

.navigation-bar__home:focus-visible .hotkey-group,
.navigation-item:focus-visible .hotkey-group,
.navigation-bar__action:has(:focus-visible) .hotkey-group,
.show-hotkeys .navigation-bar .hotkey-group {
  opacity: 1;
  translate: -50% 0;
}

/* Sprachschalter (Figma: Language-Switch, .language-switch): ein normaler
   Button-Secondary-Outline mit dem Kürzel der anderen Sprache, "DE" auf der englischen Seite,
   "EN" auf der deutschen. Steht ganz rechts. Hotkey ⌃L. Keine eigenen Styles. */

/* Navigation-Item (Figma: Navigation-Item). Pille so hoch wie die Buttons (36 px), ganz rund.
   States default (ohne Fläche) und hover (hellgraue Pille, Label bleibt schwarz).
   Einen Current-State gibt es nicht. */
.navigation-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  block-size: var(--navigation-item-height);
  padding: var(--navigation-item-padding-block) var(--navigation-item-padding-inline);
  border-radius: var(--navigation-item-radius);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out);
}

/* Hotkey 16 px unter dem Label: die Pille ist 36 hoch, das Label 16, darunter liegen 10 px Pille */
.navigation-item .hotkey-group {
  top: calc(100% + var(--space-1) + var(--space-half));
}

.navigation-item__label {
  color: var(--navigation-item-text-default);
  font: var(--text-label-strong-font-weight) var(--text-label-strong-font-size) / var(--text-label-strong-line-height) var(--font-family-sans);
  white-space: nowrap;
  transition: color var(--motion-duration-fast) var(--motion-easing-out);
}

@media (hover: hover) {
  .navigation-item:hover {
    background: var(--navigation-item-background-hover);
  }

  .navigation-item:hover .navigation-item__label {
    color: var(--navigation-item-text-hover);
  }
}

@media (min-width: 64em) {
  .navigation-bar {
    display: flex;
  }
}

/* Mobile: Logo + Menu, darunter das aufklappende Menü */

.mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: calc(var(--navigation-bar-height) - var(--border-width-thin));
  padding-inline: var(--grid-margin);
}

.mobile-bar__home {
  border-radius: var(--radius-pill);
}

.mobile-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hamburger-Icon im Menu-Button: drei Striche, wird beim Öffnen zum X */
.mobile-bar .button {
  gap: var(--space-2);
}

.burger {
  position: relative;
  inline-size: 0.875rem; /* 14 px */
  block-size: 2px;
  background: currentColor;
  border-radius: var(--space-half);
  transition: background-color var(--motion-duration-fast) linear;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  border-radius: var(--space-half);
  transition: translate var(--motion-duration-base) var(--motion-easing-out), rotate var(--motion-duration-base) var(--motion-easing-out);
}

.burger::before { translate: 0 -5px; }
.burger::after { translate: 0 5px; }

[aria-expanded="true"] > .burger { background-color: transparent; }
[aria-expanded="true"] > .burger::before { translate: 0 0; rotate: 45deg; }
[aria-expanded="true"] > .burger::after { translate: 0 0; rotate: -45deg; }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding-block-end: var(--space-6);
  background: var(--menu-background);
  box-shadow: 0 var(--space-6) var(--space-6) calc(var(--space-6) * -1) var(--menu-shadow);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--motion-duration-base) var(--motion-easing-out),
    translate var(--motion-duration-base) var(--motion-easing-out),
    display var(--motion-duration-base) allow-discrete;
}

.mobile-menu[hidden] {
  display: none;
  opacity: 0;
  translate: 0 -0.5rem;
}

@starting-style {
  .mobile-menu {
    opacity: 0;
    translate: 0 -0.5rem;
  }
}

.mobile-menu__link {
  padding: var(--space-4) var(--grid-margin);
  border-bottom: var(--border-width-thin) solid var(--list-item-divider);
  color: var(--color-text-primary);
  font: var(--text-heading-2-font-weight) var(--text-heading-2-font-size) / var(--text-heading-2-line-height) var(--font-family-sans);
  text-align: start;
  text-decoration: none;
  transition: background-color var(--motion-duration-base) var(--motion-easing-out);
}

.mobile-menu__link:active {
  background: var(--menu-item-background-hover);
}

@media (hover: hover) {
  .mobile-menu__link:hover {
    background: var(--menu-item-background-hover);
  }
}

@media (min-width: 64em) {
  .mobile-bar,
  .mobile-menu {
    display: none;
  }
}

/* ---------- Hero ----------
   Figma (608:177): drei zentrierte Zeilen mitten im Bildschirm. Zwei Wörter sind animiert
   (main.js, im Wechsel): "Problems" fährt ein Scanner ab und zeigt die Buchstaben als
   blaue Kontur, bei "Journey" springt ein Rahmen von Buchstabe zu Buchstabe. */

.hero {
  overflow-x: clip; /* Journey-Landschaft ragt auf Mobile über den Rand */
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--navigation-bar-height));
  padding: var(--space-8) var(--grid-margin) 6.3125rem; /* unten 101 px wie in Figma */
}

@media (min-width: 64em) {
  .hero {
    min-height: calc(100svh - var(--navigation-bar-height-top)); /* Desktop: Leiste ist oben 101 px hoch */
  }
}

.intro {
  max-inline-size: 65rem; /* 1040 px */
  font: var(--text-hero-font-weight) var(--text-hero-font-size) / var(--text-hero-line-height) var(--font-family-sans); /* Text-Style hero: 1.3 lässt Platz für Hand, Scanner und Journey */
  text-align: center;
}

.intro__line {
  display: block;
}

/* ---------- Hand neben "Hey," ----------
   Figma 620:513: Hand 77 px (bei 52 px Schrift) in einem 87er Feld, um 8,38° gedreht, in der
   Lücke zwischen "Hey," und "I’m". main.js lässt sie aus einem drehenden Kreis wachsen, die Finger
   herauswachsen und winken; am Ende ziehen sich die Finger zurück und der Kreis verschwindet.
   Ohne JavaScript steht sie still da. */

.hand-slot {
  position: relative;
  display: inline-block;
  inline-size: 1.27em; /* mit den Leerzeichen 79 px Lücke bei 52 px wie in Figma */
  block-size: 1em;
  vertical-align: -0.12em;
}

.hand {
  position: absolute;
  color: var(--color-illustration-brand);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1.4785em; /* 76,9 px bei 52 px */
  block-size: auto;
  /* etwas nach links: Daumen und Neigung machen die Hand rechtslastig, so wirkt sie optisch mittig */
  translate: calc(-50% - 0.1em) -50%;
  rotate: 8.38deg;
  overflow: visible;
}

.hand__wave,
.hand__body,
.hand__finger {
  transform-box: view-box;
}

.hand__wave {
  transform-origin: 37.2px 69.6px; /* Unterkante des Handballens: dort sitzt das Handgelenk */
}

.hand__body {
  transform-origin: 37.2px 51.9px; /* Mitte des Kreises */
}

/* ---------- "Problems": Scanner + Kontur ----------
   Figma 608:238. Ablauf (Werte setzt main.js in px):
   links vom Wort erscheint ein Punkt und schiebt die Wörter federnd auseinander (per transform), der Punkt
   zieht sich nach oben und unten zur Linie (--grow), die Linie fährt das Wort ab (--x) und zieht
   ein hellblaues Kästchen ohne Rahmen hinter sich her (ab --x0, Breite --rw). Darin stehen die
   Buchstaben nur als blaue Kontur. Zurück, Linie wird wieder zum Punkt, Punkt verschwindet.
   In Ruhe ist nichts zu sehen. */

.scan {
  --x: 0px;
  --x0: 0px;
  --rw: 0px;
  --grow: 0;
  --dot: 0;
  --dot-size: 0.205em; /* 10,67 px bei 52 px */
  --sx: 1;
  --sy: 1;
  position: relative;
  white-space: nowrap;
}

.scan__view {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--x0);
  inline-size: var(--rw);
  block-size: 1.096em; /* 57 px bei 52 px */
  translate: 0 -50%;
  overflow: hidden;
  /* 10 % Blau, auf Weiß gelegt, damit der schwarze Text darunter verschwindet */
  background:
    linear-gradient(var(--color-illustration-scan), var(--color-illustration-scan)),
    var(--color-surface-default);
  pointer-events: none;
}

/* Buchstaben nur als blaue Kontur, innen scheint der hellblaue Grund durch */
.scan__outline {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--x0) * -1);
  translate: 0 -50%;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-illustration-brand);
}

/* Scanner: zwei Punkte oben und unten, dazwischen die Linie. Bei --grow 0 liegen beide Punkte
   übereinander und sehen aus wie einer. Volle Höhe 86 px bei 52 px. */
.scan__line {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--x);
  inline-size: var(--dot-size);
  block-size: calc(var(--dot-size) + var(--grow) * (1.654em - var(--dot-size)));
  translate: -50% -50%;
  scale: calc(var(--dot) * var(--sx)) calc(var(--dot) * var(--sy)); /* Squash & Stretch */
  pointer-events: none;
}

.scan__line::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--dot-size) / 2);
  inset-inline-start: 50%;
  inline-size: 2px;
  translate: -50% 0;
  background: var(--color-illustration-brand);
}

.scan__dot {
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--dot-size);
  block-size: var(--dot-size);
  border-radius: 50%;
  background: var(--color-illustration-brand);
}

.scan__dot:first-child {
  inset-block-start: 0;
}

.scan__dot:last-child {
  inset-block-end: 0;
}

/* ---------- "Journey": Fahrt durch die Landschaft ----------
   Figma 629:149 (Szene) und 629:207 (ganze Landschaft). main.js schiebt J und y auseinander,
   lässt die inneren Buchstaben verschwinden, macht aus dem "o" einen schwarzen Kreis, zieht eine
   Straße vom J zum y und lässt die Landschaft von rechts (aus dem y) nach links (ins J) fahren.
   Die Szene (.journey__scene) liegt in Figma-Koordinaten (gezeichnet bei 52 px Schrift) über dem
   Wort; main.js setzt Lage und Maßstab. In Ruhe ist sie unsichtbar. */

.journey {
  position: relative;
  white-space: nowrap;
}

.journey__l {
  display: inline-block;
  transform-origin: 50% 85%;
}

/* Nullhohes Element auf der Grundlinie: daran richtet main.js die Szene aus */
.journey__base {
  display: inline-block;
  inline-size: 0;
  block-size: 0;
}

.journey__scene {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 337px;
  max-inline-size: none; /* nicht auf die Wortbreite begrenzen (globale Bildregel) */
  block-size: 129px;
  transform-origin: 0 0;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
}

/* Straße und Landschaft in Brand-Blau, die Kugel in Ink */
.scene__road,
.scene__items {
  color: var(--color-illustration-brand);
}

.scene__ball {
  color: var(--color-illustration-ink);
}

/* Weiße Flächen der Landschaft (Steine, Baumstamm): decken die Straße ab */
.scene__paper {
  fill: var(--color-surface-default);
}

.scene__item {
  transform-box: fill-box;
  transform-origin: 50% 100%; /* wächst aus dem Boden */
}

/* Hero-Text blendet Wort für Wort ein (main.js zerlegt den Titel in .word mit --i = Position).
   Ohne JavaScript oder bei reduzierter Bewegung ist der Text sofort da. */
.words-ready .word {
  display: inline-block;
  opacity: 0;
  translate: 0 0.4em;
  animation: word-in var(--motion-duration-word) var(--motion-easing-out) forwards;
  animation-delay: calc(var(--motion-duration-delay) + var(--i) * var(--motion-duration-stagger));
}

@keyframes word-in {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- Seitentitel ---------- */

.page-title {
  padding: var(--space-12) var(--grid-margin);
  font: var(--text-heading-1-font-weight) var(--text-heading-1-font-size) / var(--text-heading-1-line-height) var(--font-family-sans);
}

/* ---------- About: Fokus über die Jahre ----------
   Figma: node-id 759:2460. Normale Sektion ohne Sticky-Scroll. Ein Klick auf einen Filter (oder eine
   Säule) hebt den Bereich in Brand-Blau hervor (main.js). Filter mit Hover-State. Aufbau beim Hereinscrollen.
   Farben: Component-Tokens timeline.segment.* (Grautöne je Bereich wie in Figma: #F3F3F3, #E0E0E0, #C6C6C6). */

/* Kein layout.section-gap davor: der Hero füllt den Bildschirm und bringt genug Weißraum mit */
.focus-story {
  --focus-on: var(--timeline-segment-highlight);
  --focus-off-A: var(--timeline-segment-muted-1);
  --focus-off-W: var(--timeline-segment-muted-3);
  --focus-off-U: var(--timeline-segment-muted-2);
  --focus-off-J: var(--timeline-segment-muted-3);
  --focus-chart-height: 31.375rem; /* 502 px */
  --focus-years: 17; /* Säulen 2010 bis 2026 (2026 = 2025 dupliziert) */
}

/* Figma: Kopf, Filter und Diagramm je mit 48 px Rand; zwischen Kopf und Filtern 96 px, Filter zu Diagramm 48 px */
.focus-story__screen {
  display: flex;
  flex-direction: column;
  padding: var(--space-12);
}

.focus-story__head {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 56.25rem; /* 900 px */
}

.focus-story__title {
  font: var(--text-display-font-weight) var(--text-display-font-size) / var(--text-display-line-height) var(--font-family-sans);
}

.focus-story__lead {
  font: var(--text-body-large-font-weight) var(--text-body-large-font-size) / var(--text-body-large-line-height) var(--font-family-sans);
}

.focus-story__filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-block: calc(2 * var(--space-12)) var(--space-12); /* 96 px / 48 px */
}

/* Filter-Chip (Figma: Filter-Chip, State default/selected) */
.focus-filter {
  min-block-size: var(--filter-chip-height);
  padding: var(--filter-chip-padding-block) var(--filter-chip-padding-inline);
  border: 0;
  border-radius: var(--filter-chip-radius);
  background: var(--filter-chip-background-default);
  color: var(--filter-chip-text-default);
  font: var(--text-label-strong-font-weight) var(--text-label-strong-font-size) / var(--text-label-strong-line-height) var(--font-family-sans);
  cursor: pointer;
  transition: background-color var(--motion-duration-medium) var(--motion-easing-out), color var(--motion-duration-medium) var(--motion-easing-out);
}

.focus-filter[aria-pressed="true"] {
  background: var(--filter-chip-background-selected);
  color: var(--filter-chip-text-selected);
}

/* Desktop: die blaue Pille gleitet vom alten zum neuen Filter (Kontinuität statt Aus- und Einblenden).
   main.js setzt Lage und Größe (--x, --y, --w, --h) und erst nach dem ersten Bild .is-ready. */
.focus-filter-indicator {
  display: none;
}

@media (min-width: 48em) {
  .focus-story__filters.has-indicator .focus-filter {
    position: relative;
    z-index: 1;
    transition: color var(--motion-duration-medium) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out); /* Auswahl-Fläche kommt von der Pille, hier nur Hover */
  }

  .focus-story__filters.has-indicator .focus-filter[aria-pressed="true"] {
    background: var(--filter-chip-background-default);
  }

  .focus-filter-indicator {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    inline-size: var(--w);
    block-size: var(--h);
    border-radius: var(--filter-chip-radius);
    background: var(--filter-chip-background-selected);
    translate: var(--x) var(--y);
    pointer-events: none;
  }

  .focus-filter-indicator.is-ready {
    transition:
      translate var(--motion-duration-medium) var(--motion-easing-out),
      inline-size var(--motion-duration-medium) var(--motion-easing-out);
  }
}

@media (hover: hover) {
  .focus-filter:not([aria-pressed="true"]):hover {
    background: var(--filter-chip-background-hover);
    color: var(--filter-chip-text-hover);
  }
}

.focus-filter:focus-visible {
  outline: var(--border-width-thick) solid var(--color-focus-ring);
  outline-offset: var(--border-width-thick);
}

.focus-chart {
  display: grid;
  gap: var(--space-6);
  margin: 0;
}

.focus-chart__cols {
  display: grid;
  grid-template-columns: repeat(var(--focus-years), 1fr);
  block-size: var(--focus-chart-height); /* Figma 502 px */
}

.focus-chart__col {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.focus-chart__seg {
  position: relative;
  overflow: hidden; /* das Segment ist die Maske: nichts steht über die graue Pille hinaus */
  block-size: var(--share);
  border-radius: var(--radius-pill);
}

/* Grau (::after) und Blau (::before) sind je eine Pille, die von unten wächst. Die Segment-Form
   maskiert beide (Figma 785:636): das Blau füllt die graue Pille auf bzw. leert sie. */
.focus-chart__seg::before,
.focus-chart__seg::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 100%;
  border-radius: var(--radius-pill);
}

.focus-chart__seg::after {
  background: var(--focus-off);
}

/* Bereichswechsel: die blaue Pille wächst im Segment von unten nach oben (und schrumpft beim
   Abwählen nach unten). Welle von links nach rechts: jede Säule (--i) einen halben Stagger-Schritt später. */
.focus-chart__seg::before {
  z-index: 1;
  block-size: 0;
  background: var(--focus-on);
  transition: block-size var(--motion-duration-slow) var(--motion-easing-out) calc(var(--i, 0) * var(--motion-duration-stagger) / 2);
}

.focus-chart__seg.is-on::before {
  block-size: 100%;
}

.focus-chart__seg[data-focus="A"],
.focus-filter[data-focus="A"] { --focus-off: var(--focus-off-A); }
.focus-chart__seg[data-focus="W"],
.focus-filter[data-focus="W"] { --focus-off: var(--focus-off-W); }
.focus-chart__seg[data-focus="U"],
.focus-filter[data-focus="U"] { --focus-off: var(--focus-off-U); }
.focus-chart__seg[data-focus="J"],
.focus-filter[data-focus="J"] { --focus-off: var(--focus-off-J); }

.focus-chart__seg {
  cursor: pointer;
}

/* Jahresachse direkt unter dem Diagramm (kein Sticky) */
.focus-chart__years {
  display: grid;
  grid-template-columns: repeat(var(--focus-years), 1fr); /* gleiches Raster wie die Säulen */
  color: var(--timeline-label);
  font: var(--text-body-small-font-weight) var(--text-body-small-font-size) / var(--text-body-small-line-height) var(--font-family-sans);
}

/* Jede Jahreszahl mittig unter ihrer Säule (--at = Säule): erste, jede zweite und letzte */
.focus-chart__years span {
  grid-column: var(--at);
  justify-self: center;
  white-space: nowrap;
}

/* Desktop: Sprung per Anker (#about) zeigt die ganze Sektion inklusive Jahreszahlen. Die Sektion ist
   höchstens so hoch wie der Bildschirm unter der Navigation; fehlt Platz, gibt nur die Diagrammhöhe
   nach (bis 502 px, mindestens 240 px). */
@media (min-width: 48em) {
  .focus-story__screen {
    max-block-size: calc(100svh - var(--navigation-bar-height));
  }

  .focus-chart {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-block-size: 0;
  }

  .focus-chart__cols {
    flex: 0 1 var(--focus-chart-height);
    min-block-size: 15rem; /* 240 px */
  }
}

/* Mobile (Figma 762:2461): dasselbe Diagramm um 90° gedreht. Jahre als Zeilen von oben (2010) nach unten (heute),
   die Bereiche liegen von links nach rechts. Nur der aktive Filter zeigt seinen Namen, die anderen sind kurze Pillen. */
@media (max-width: 47.99em) {
  .focus-story__screen {
    padding: var(--space-6);
  }

  .focus-story__filters {
    flex-wrap: nowrap;
    margin-block: var(--space-8) var(--space-6);
  }

  /* Figma 762:2461: der aktive Chip ist so breit wie sein Label (hug), die anderen teilen sich den
     Rest (fill). main.js misst die Labelbreite (--label-w), so lassen sich flex-grow und flex-basis
     weich animieren (flex-basis auto ginge nicht). */
  .focus-story__filters li {
    display: flex;
    flex: 1 1 0;
    min-inline-size: 0;
    transition:
      flex-grow var(--motion-duration-medium) var(--motion-easing-out),
      flex-basis var(--motion-duration-medium) var(--motion-easing-out);
  }

  .focus-story__filters li:has([aria-pressed="true"]) {
    flex-grow: 0;
    flex-basis: calc(var(--label-w, var(--space-30)) + 2 * var(--filter-chip-padding-inline));
  }

  /* Schließen: Text sofort weg, dann schrumpft die Pille */
  .focus-filter {
    inline-size: 100%;
    padding-inline: 0;
    overflow: hidden;
    background: var(--focus-off, var(--filter-chip-background-compact)); /* Grau des eigenen Bereichs im Diagramm */
    color: transparent;
    white-space: nowrap;
    transition:
      padding-inline var(--motion-duration-medium) var(--motion-easing-out),
      background-color var(--motion-duration-medium) var(--motion-easing-out),
      color var(--motion-duration-fast) var(--motion-easing-out);
  }

  /* Öffnen: Pille wird blau und breit, das Label blendet kurz danach ein */
  .focus-filter[aria-pressed="true"] {
    padding-inline: var(--filter-chip-padding-inline);
    background: var(--filter-chip-background-selected);
    color: var(--filter-chip-text-selected);
    transition:
      padding-inline var(--motion-duration-medium) var(--motion-easing-out),
      background-color var(--motion-duration-medium) var(--motion-easing-out),
      color var(--motion-duration-medium) var(--motion-easing-out) var(--motion-duration-fast);
  }

  /* Chips und Diagramm füllen zusammen die Bildschirmhöhe unter der Navigation */
  .focus-chart {
    flex: 1 1 auto;
    block-size: calc(100svh - var(--navigation-bar-height) - var(--filter-chip-height) - 2 * var(--space-6));
    min-block-size: 22rem;
    grid-template-columns: auto 1fr;
    grid-template-rows: minmax(0, 1fr);
    row-gap: 0;
    column-gap: var(--space-6);
  }

  .focus-chart__cols {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: none;
    grid-template-rows: repeat(var(--focus-years), 1fr);
    block-size: auto;
    min-block-size: 0;
  }

  .focus-chart__col {
    flex-direction: row;
    min-block-size: 0;
  }

  .focus-chart__seg {
    block-size: auto;
    inline-size: var(--share);
  }

  .focus-chart__seg::before,
  .focus-chart__seg::after {
    inset-block: 0;
    inset-inline: 0 auto;
    block-size: auto;
    inline-size: 100%;
  }

  .focus-chart__seg::before {
    inline-size: 0;
    transition: inline-size var(--motion-duration-slow) var(--motion-easing-out) calc(var(--i, 0) * var(--motion-duration-stagger) / 2);
  }

  .focus-chart__seg.is-on::before {
    inline-size: 100%;
  }

  .focus-chart__years {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: none;
    grid-template-rows: repeat(var(--focus-years), 1fr);
  }

  .focus-chart__years span {
    grid-column: auto;
    grid-row: var(--at);
    align-self: center;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-filter,
  .focus-filter[aria-pressed="true"],
  .focus-filter-indicator.is-ready,
  .focus-story__filters li,
  .focus-chart__seg::before,
  .reveal-ready .focus-chart__seg::after {
    transition: none;
  }
}

/* ---------- Selected Projects (Figma 787:813 Desktop, 796:2109 Mobile) ----------
   Zeile: Name und Meta links, Bild-Pille, Pfeil. Desktop mit Maus: zugeklappt nur Name und Pfeil →,
   bei Hover oder Fokus klappt die Zeile weich auf (Bild wächst, Meta blendet ein, Pfeil dreht auf ↗).
   Mobile und Touch-Geräte: immer aufgeklappt. */

.projects {
  margin-block-start: var(--layout-section-gap); /* mehr Weißraum nach About */
}

.projects__title {
  padding: var(--space-12);
  font: var(--text-display-font-weight) var(--text-display-font-size) / var(--text-display-line-height) var(--font-family-sans);
}

.project-list {
  margin: 0;
}

.project__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "text media arrow";
  align-items: end;
  column-gap: var(--project-item-gap);
  padding: var(--project-item-padding-block) var(--project-item-padding-inline);
  border-bottom: var(--border-width-thin) solid var(--project-item-divider);
  color: var(--project-item-title);
  text-decoration: none;
}

.project__text {
  grid-area: text;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-inline-size: 0;
}

.project__name {
  color: var(--project-item-title);
  font: var(--text-heading-2-font-weight) var(--text-heading-2-font-size) / var(--text-heading-2-line-height) var(--font-family-sans);
}

.project__meta {
  display: flex;
  gap: var(--project-item-gap);
  margin: 0;
  font: var(--text-body-font-weight) var(--text-body-font-size) / var(--text-body-line-height) var(--font-family-sans);
}

.project__meta dt {
  color: var(--project-item-meta-label);
}

.project__meta dd {
  margin: 0;
  color: var(--project-item-meta-value);
}

.project__media {
  grid-area: media;
  inline-size: var(--project-item-media-width);
  block-size: var(--project-item-media-height);
  border-radius: var(--project-item-media-radius);
  background: var(--project-item-media);
}

/* Pfeil: Phosphor ArrowRight als Maske in der Icon-Farbe; aufgeklappt um −45° zu ↗ gedreht */
.project__arrow {
  grid-area: arrow;
  inline-size: var(--project-item-icon-size);
  block-size: var(--project-item-icon-size);
  background: var(--project-item-icon);
  -webkit-mask: url("../assets/img/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../assets/img/icons/arrow-right.svg") center / contain no-repeat;
  rotate: -45deg;
}

/* Desktop mit Maus: zugeklappt, Hover oder Fokus klappt auf */
@media (hover: hover) and (min-width: 48em) {
  .project__media {
    inline-size: 0;
    block-size: 0;
    opacity: 0;
    transition:
      inline-size var(--motion-duration-medium) var(--motion-easing-out),
      block-size var(--motion-duration-medium) var(--motion-easing-out),
      opacity var(--motion-duration-medium) var(--motion-easing-out);
  }

  /* Meta liegt unten in der Textspalte und braucht zugeklappt keinen Platz */
  .project__text {
    position: relative;
  }

  /* Projekt-Kontext (Role, Timeline, Year) als ein Block: schiebt sich von unten hinter einer
     Kante hervor. translate und clip-path laufen gleich, dadurch bleibt die Maske an der
     Endposition stehen und der Block wird von unten nach oben sichtbar. */
  .project__meta {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    opacity: 0;
    translate: 0 100%;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity var(--motion-duration-fast) var(--motion-easing-out),
      translate var(--motion-duration-fast) var(--motion-easing-out),
      clip-path var(--motion-duration-fast) var(--motion-easing-out);
  }

  .project__arrow {
    rotate: 0deg;
    transition: rotate var(--motion-duration-medium) var(--motion-easing-out);
  }

  /* Zugeklappt: mehr Luft oben und unten, Name und Pfeil mittig (Figma: 120 px hoch) */
  .project__row {
    align-items: center;
    padding-block: var(--project-item-padding-block-collapsed);
    transition:
      background-color var(--motion-duration-base) var(--motion-easing-out),
      padding-block var(--motion-duration-medium) var(--motion-easing-out);
  }

  .project__row:is(:hover, :focus-visible) {
    align-items: end;
    padding-block: var(--project-item-padding-block);
    background: var(--project-item-background-hover);
  }

  .project__row:is(:hover, :focus-visible) .project__media {
    inline-size: var(--project-item-media-width);
    block-size: var(--project-item-media-height);
    opacity: 1;
  }

  /* Aufklappen: Block erst, wenn die Zeile Platz hat */
  .project__row:is(:hover, :focus-visible) .project__meta {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0);
    transition:
      opacity var(--motion-duration-fast) var(--motion-easing-out) var(--motion-duration-fast),
      translate var(--motion-duration-medium) var(--motion-easing-out) var(--motion-duration-fast),
      clip-path var(--motion-duration-medium) var(--motion-easing-out) var(--motion-duration-fast);
  }

  .project__row:is(:hover, :focus-visible) .project__arrow {
    rotate: -45deg;
  }
}

/* Mobile (Figma 796:2109): Karte mit Bild oben, Name und ↗ darunter, ohne Meta */
@media (max-width: 47.99em) {
  .projects__title {
    padding: var(--space-6);
  }

  .project__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "media media"
      "text arrow";
    align-items: center;
    row-gap: var(--space-3);
    padding: var(--project-item-padding-block) var(--project-item-padding-inline-compact) var(--space-3);
  }

  .project__media {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 354 / 215; /* Figma-Maß der Bild-Pille */
  }

  .project__meta {
    display: none;
  }

  .project__name {
    font: var(--text-heading-3-font-weight) var(--text-heading-3-font-size) / var(--text-heading-3-line-height) var(--font-family-sans);
  }
}

/* ---------- Playground-Grid ----------
   3 Spalten, 6 px Abstand. Nur Karten mit Inhalt sind blau (Hover dunkler), der Rest grau. */

.playground-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-1) var(--grid-margin) 0;
}

.playground-card {
  position: relative;
  display: block;
  aspect-ratio: 455 / 419; /* Figma-Maß der Karte */
  overflow: hidden;
  background: var(--card-background-default);
  border: var(--border-width-thin) solid var(--card-border);
  border-radius: var(--card-radius);
}

.playground-card--live {
  background: var(--card-background-live);
  transition: background-color var(--motion-duration-base) var(--motion-easing-out);
}

@media (hover: hover) {
  .playground-card--live:hover {
    background: var(--card-background-live-hover);
  }
}

.playground-card:focus-visible {
  outline-offset: 4px;
}

.playground-card__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  pointer-events: none; /* reine Vorschau, Hover und Klick gehören der Karte */
}

@media (min-width: 48em) {
  .playground-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .playground-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Pattern-Detailseite ----------
   Oben ⌃ B + "Back", darunter Text links, Animation rechts. Mobile: Text über der Animation. */

.back {
  padding: var(--space-12) var(--grid-margin);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--color-text-primary);
  text-decoration: none;
}

.back-link__label {
  font: var(--text-heading-1-font-weight) var(--text-heading-1-font-size) / var(--text-heading-1-line-height) var(--font-family-sans);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--motion-duration-base) var(--motion-easing-out);
}

/* Pfeil nach links (gespiegelter Pixel-Chevron der Work-Liste), nur auf Mobile */
.back-link__arrow {
  display: none;
  inline-size: var(--size-icon-xlarge);
  block-size: var(--size-icon-xlarge);
  background: currentColor;
  -webkit-mask: url("../assets/img/chevron-right.svg") center / contain no-repeat;
  mask: url("../assets/img/chevron-right.svg") center / contain no-repeat;
  scale: -1 1;
  transition: translate var(--motion-duration-base) var(--motion-easing-out);
}

/* Auf Mobile gibt es keine Tastatur: statt ⌃ B steht dort ein Pfeil vor "Back" */
@media not (min-width: 64em) {
  .back-link {
    gap: var(--space-1);
  }

  .back-link .hotkey-group {
    display: none;
  }

  .back-link__arrow {
    display: block;
  }
}

@media (hover: hover) {
  .back-link:hover .back-link__label {
    text-decoration-color: currentColor;
  }

  .back-link:hover .back-link__arrow {
    translate: -0.25rem 0;
  }
}

.pattern-detail {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6) var(--grid-margin);
}

.pattern-detail__text {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.pattern-detail__title {
  font: var(--text-heading-2-font-weight) var(--text-heading-2-font-size) / var(--text-heading-2-line-height) var(--font-family-sans);
}

.pattern-detail__lead {
  font: var(--text-body-font-weight) var(--text-body-font-size) / var(--text-body-line-height) var(--font-family-sans);
}

.pattern-detail__media {
  aspect-ratio: 665 / 815; /* Figma-Maß der Fläche */
  background: var(--card-background-live);
}

@media (min-width: 48em) {
  .pattern-detail {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ---------- Footer ---------- */

.footer {
  margin-block-start: var(--layout-section-gap);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--grid-margin);
  text-align: center;
}

.footer__title {
  font: var(--text-heading-1-font-weight) var(--text-heading-1-font-size) / var(--text-heading-1-line-height) var(--font-family-sans);
}

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.footer__meta {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--grid-margin);
  font: var(--text-body-small-font-weight) var(--text-body-small-font-size) / var(--text-body-small-line-height) var(--font-family-sans);
  text-align: center;
}

.footer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer__icon {
  inline-size: var(--size-icon-large);
  block-size: var(--size-icon-large);
}

.footer__globe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  order: 3; /* Mobile: Person zuletzt, Desktop: Mitte */
}

.footer__globe img {
  inline-size: 3rem;
  block-size: 3rem;
}

/* Holozän-Jahr (Jahr + 10.000) im Footer: Text-Link (.text-link) zum Wikipedia-Eintrag */

@media (min-width: 48em) {
  .footer__meta {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
  }

  .footer__item {
    flex-direction: row;
  }

  .footer__item--start {
    justify-self: start;
  }

  .footer__item--end {
    justify-self: end;
  }

  .footer__globe {
    order: 0;
    inline-size: 14.25rem;
  }
}

/* ---------- Scroll-Reveal: leicht von unten nach oben ---------- */

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-out),
    transform var(--motion-duration-slow) var(--motion-easing-out),
    background-color var(--motion-duration-base) var(--motion-easing-out);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* About: Titel, Filter und Diagramm (mit Jahreszahlen) kommen kurz nacheinander */
.reveal-ready .focus-story__filters.reveal {
  transition-delay: var(--motion-duration-fast);
}

.reveal-ready .focus-chart.reveal {
  transition-delay: calc(2 * var(--motion-duration-fast));
}

/* Diagramm beim Laden: jedes Segment wächst als Pille von unten nach oben, Säule für Säule von links,
   innerhalb der Säule das unterste Segment zuerst (--k = Position von unten). Mobile: von links. */
.focus-chart__seg:nth-last-child(2) { --k: 1; }
.focus-chart__seg:nth-last-child(3) { --k: 2; }

.reveal-ready .focus-chart__seg::after {
  transition: block-size var(--motion-duration-medium) var(--motion-easing-out);
  transition-delay: calc(2 * var(--motion-duration-fast) + var(--i, 0) * var(--motion-duration-stagger) + var(--k, 0) * var(--motion-duration-medium) / 2);
}

.reveal-ready .focus-chart:not(.is-visible) .focus-chart__seg::after,
.reveal-ready .focus-chart:not(.is-visible) .focus-chart__seg::before {
  block-size: 0;
}

/* Beim ersten Aufbau wächst das Blau zusammen mit seinem grauen Segment. Danach (main.js setzt
   .is-settled) gilt für Bereichswechsel die schnellere Welle. */
.reveal-ready .focus-chart:not(.is-settled) .focus-chart__seg::before {
  transition-duration: var(--motion-duration-medium);
  transition-delay: calc(2 * var(--motion-duration-fast) + var(--i, 0) * var(--motion-duration-stagger) + var(--k, 0) * var(--motion-duration-medium) / 2);
}

@media (max-width: 47.99em) {
  .focus-chart__seg:nth-last-child(2),
  .focus-chart__seg:nth-last-child(3) { --k: 0; }
  .focus-chart__seg:nth-child(2) { --k: 1; }
  .focus-chart__seg:nth-child(3) { --k: 2; }

  .reveal-ready .focus-chart__seg::after {
    transition-property: inline-size;
  }

  .reveal-ready .focus-chart:not(.is-visible) .focus-chart__seg::after,
  .reveal-ready .focus-chart:not(.is-visible) .focus-chart__seg::before {
    block-size: auto;
    inline-size: 0;
  }
}

/* ---------- Chat (<dialog>, Schublade) ----------
   Mobile: Sheet von unten, 90 % der Höhe. Desktop: Schublade von rechts, 90 % der Breite.
   Öffnen und Schließen laufen über Übergänge (transition). `allow-discrete` lässt den
   Browser das Schließen (display: none) erst nach dem Übergang ausführen. */

.chat {
  position: fixed;
  inset: auto 0 0 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 90dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  overflow: hidden;
  background: var(--sheet-background);
  color: var(--sheet-text);
  transform: translateY(100%);
  transition:
    transform var(--motion-duration-base) var(--motion-easing-out),
    overlay var(--motion-duration-base) allow-discrete,
    display var(--motion-duration-base) allow-discrete;
}

.chat[open] {
  display: flex;
  flex-direction: column;
  transform: none;
}

@starting-style {
  .chat[open] {
    transform: translateY(100%);
  }
}

.chat::backdrop {
  background: var(--color-transparent);
  transition:
    background-color var(--motion-duration-base) var(--motion-easing-out),
    overlay var(--motion-duration-base) allow-discrete,
    display var(--motion-duration-base) allow-discrete;
}

.chat[open]::backdrop {
  background: var(--sheet-scrim);
}

@starting-style {
  .chat[open]::backdrop {
    background: var(--color-transparent);
  }
}

@media (min-width: 48em) {
  .chat {
    inset: 0 0 0 auto;
    inline-size: 90vw;
    block-size: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
  }

  @starting-style {
    .chat[open] {
      transform: translateX(100%);
    }
  }
}

.chat__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  block-size: var(--sheet-bar-height);
  padding-inline: var(--grid-margin);
  background: var(--sheet-bar-background);
}

/* Fokus im Sheet: Brand-Blau 600 ist auf dem dunklen Grund zu schwach, darum heller */
.chat :focus-visible {
  outline-color: var(--sheet-focus-ring);
}

/* ESC-Hotkey und Cancel-Button (Primary-Ink) nebeneinander (Figma 697:1363) */
.chat__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6) var(--sheet-bar-height);
  background: var(--sheet-background);
}

.chat__icon {
  inline-size: 4.125rem;
  block-size: auto;
  image-rendering: pixelated;
}

.chat__title {
  font: var(--text-heading-1-font-weight) var(--text-heading-1-font-size) / var(--text-heading-1-line-height) var(--font-family-sans);
  text-align: center;
}