/* ============================================================
   CatchMe Agency - Relaunch-Entwurf
   Designsprache adaptiert von itsoffbrand.com (Refero DESIGN-2.md).
   Bewusste Abweichung: die iridescent Sphere der Referenz ist hier
   auf CatchMe-Tuerkis (#00AFE8) umgestellt, damit das einzige
   Farbereignis der Seite die Marke traegt statt einer Fremdmarke.
   Alles andere bleibt achromatisch: Parchment, Ink, Paper, Ash, Stone.
   ============================================================ */

/* Satoshi (Fontshare, ITF Free Font License), selbst gehostet */
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* Durchgehend dunkle Fassung. Die Rollen der Referenz bleiben erhalten,
     nur die Helligkeiten sind getauscht: Canvas dunkel, Karten eine Stufe
     heller, Zweitflaechen eine Stufe dunkler. */
  --parchment: #1c1c1c;   /* Seitenflaeche */
  --ink: #d8d8d8;         /* Text */
  --paper: #252525;       /* Karten, Logozellen */
  --ash: #3a3a3a;         /* Haarlinien */
  --stone: #151515;       /* Zweitflaeche, gesetzte Sektionen */

  /* Der eine Akzent: CatchMe-Tuerkis. Nur Sphere, Hover, Fokus. */
  --brand: #00afe8;

  /* Nur für die Hero-Bühne */
  --void: #1c1c1c;
  --void-text: #d8d8d8;
  --ring-line: rgb(255 255 255 / 0.04);
  --ring-line-top: rgb(255 255 255 / 0.13);
  --ring-line-side: rgb(255 255 255 / 0.07);
  --menu-surface: #101010;
  --grid-strength: 62%;
  --cross: #5c5c5c;

  /* Abstand des Menueknopfs, zugleich Mittelpunkt des Kreis-Aufrollens */
  --kebab-inset: clamp(1rem, 2.2vw, 1.875rem);
  --kebab-x: calc(100% - var(--kebab-inset) - 1.75rem);
  --kebab-y: calc(100% - var(--kebab-inset) - 1.75rem);
  --sphere-size: clamp(15rem, min(72vh, 78vw), 46rem);
  --sphere: linear-gradient(255deg, #00afe8 0%, #2f95d8 26%, #92dcef 64%, #ffffff 100%);

  /* Typografie */
  --font: "Satoshi", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --t-caption: 0.6875rem;   /* 11px */
  --t-small: 0.9375rem;     /* 15px */
  --t-body: 1.125rem;       /* 18px */

  /* Raster */
  --max: 1400px;
  --gutter: clamp(1.25rem, 5vw, 4.75rem);
  --section: clamp(4.75rem, 9vw, 7.4375rem);  /* 76px - 119px */

  /* Radien: Flaechen scharf, Interaktives weich. Eine Regel, ueberall. */
  --r-card: 0px;
  --r-interactive: 10px;

  /* Gitterpapier-Textur fuer ausgewaehlte Flaechen */
  --grid-paper: repeating-linear-gradient(
      to right,
      var(--ash) 0 1px,
      transparent 1px 44px
    ),
    repeating-linear-gradient(to bottom, var(--ash) 0 1px, transparent 1px 44px);

  /* Gedämpfte Variante für Flächen, auf denen Text liegt */
  --grid-paper-soft: repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--ash) var(--grid-strength), transparent) 0 1px,
      transparent 1px 44px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ash) var(--grid-strength), transparent) 0 1px,
      transparent 1px 44px
    );
}

/* Helle Fassung. Umschaltbar über das Menü unten rechts. */
:root[data-theme="light"] {
  color-scheme: light;
  --parchment: #e5e4e0;
  --ink: #1d1d1d;
  --paper: #ffffff;
  --ash: #bfbebe;
  --stone: #cdcdc9;
  --void: #e5e4e0;
  --void-text: #1d1d1d;
  --ring-line: rgb(29 29 29 / 0.08);
  --ring-line-top: rgb(29 29 29 / 0.22);
  --ring-line-side: rgb(29 29 29 / 0.13);
  --menu-surface: #efeeea;
  --grid-strength: 38%;
  --cross: #9a9a9a;
}

/* Auf heller Fläche würde der Blendmodus die Wortgruppen aufhellen
   statt abdunkeln, dort steht der Text deshalb normal auf der Kugel. */
:root[data-theme="light"] .hero__headline {
  mix-blend-mode: normal;
}

/* ---------- Reset ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: 0.0130em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-interactive);
}

/* ---------- Grundbausteine ---------- */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

/* Museums-Signage-Label. Bewusst sparsam eingesetzt. */
.label {
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  font-weight: 400;
}

.display {
  font-size: clamp(2.25rem, 6.2vw, 5.5rem);
  line-height: 0.8;
  letter-spacing: 0.013em;
  font-weight: 400;
  text-transform: uppercase;
}

.h2 {
  font-size: clamp(2rem, 4.6vw, 4.375rem);
  /* 0.9 statt 0.8: deutsche Versal-Umlaute brauchen den Zuschlag */
  line-height: 0.9;
  letter-spacing: 0.013em;
  font-weight: 400;
  text-transform: uppercase;
}

.h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1;
  letter-spacing: 0.013em;
  font-weight: 400;
  text-transform: uppercase;
}

.lede {
  font-size: var(--t-body);
  line-height: 1.4;
  max-width: 34ch;
}

.body {
  font-size: var(--t-body);
  line-height: 1.4;
  max-width: 60ch;
}

.small {
  font-size: var(--t-small);
  line-height: 1.4;
}

.hairline {
  height: 1px;
  background: var(--ash);
  border: 0;
}

/* ---------- Interaktives: Ghost-Link und Ghost-Pill ---------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-small);
  text-decoration: none;
  padding: 5px 0;
  border-radius: var(--r-interactive);
  position: relative;
  white-space: nowrap;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
}

.link__arrow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.link:hover .link__arrow {
  transform: translateX(4px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.1875rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-interactive);
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.15s ease;
}

.pill:hover,
.pill:focus-visible {
  background: var(--ink);
  color: var(--parchment);
}

.pill:active {
  transform: translateY(1px);
}

.pill .link__arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pill:hover .link__arrow {
  transform: translateX(4px);
}

/* ---------- Navigation: eine Zeile, max. 72px ---------- */

/* Ueber der dunklen Buehne laeuft die Navigation transparent und hell.
   Sobald der Hero durchgescrollt ist, wechselt sie auf Parchment. */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  color: var(--void-text);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, color 0.4s ease,
    border-color 0.4s ease;
}

.nav[data-scrolled="true"] {
  background: color-mix(in srgb, var(--parchment) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom-color: var(--ash);
}


.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo {
  height: clamp(1.875rem, 2.8vw, 2.375rem);
  width: auto;
}

.nav__cta {
  flex-shrink: 0;
}

/* Pill und Umschalter erben die Vordergrundfarbe der Leiste, damit sie
   auf der dunklen Bühne hell und darunter in Ink erscheinen. */
.nav .pill {
  border-color: currentColor;
  color: inherit;
}

.nav:not([data-scrolled="true"]) .pill:hover,
.nav:not([data-scrolled="true"]) .pill:focus-visible {
  background: var(--void-text);
  color: var(--void);
}

/* Auf schmalen Geräten steckt der Kontaktweg im Menü unten rechts */
@media (max-width: 620px) {
  .nav__cta {
    display: none;
  }
}

/* ---------- Hero: dunkle Buehne mit Liquid-Sphere ----------
   Folgt dem echten Hero der Referenz, nicht der hellen Parchment-Variante
   aus dem Refero-Dokument. Der Rest der Seite bleibt hell, der Wechsel
   passiert genau einmal und ist gewollt. */

.hero {
  position: relative;
  min-height: 100dvh;
  /* unter die Navigation ziehen, damit die Buehne den Viewport fuellt */
  margin-top: -72px;
  padding: clamp(84px, 11vh, 118px) var(--gutter) clamp(2rem, 4vw, 3.5rem);
  display: flex;
  background: transparent;
}

.hero__stage {
  position: relative;
  flex: 1;
  display: flex;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}

/* Die Kugel liegt in einer festen Ebene hinter der Seite. Dadurch bleibt
   sie beim Scrollen ueber die Sektionsgrenze hinweg sichtbar, wandert nach
   rechts und waechst, bis die folgenden Sektionen sie ueberdecken.
   Laeuft ueber eine scrollgebundene Animation, nicht ueber einen
   Scroll-Listener. */
.orb-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb-layer__inner {
  position: absolute;
  inset: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .orb-layer__inner {
      animation: orb-travel linear both;
      animation-timeline: scroll(root);
      animation-range: 0 230vh;
    }

    /* Die Ringe bleiben etwas zurueck, das gibt Tiefe */
    .hero__rings {
      animation: rings-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 230vh;
    }
  }
}

@keyframes orb-travel {
  0% {
    translate: 0 0;
    scale: 1;
  }
  48% {
    translate: 38vw -4vh;
    scale: 1.45;
  }
  100% {
    translate: 64vw -6vh;
    scale: 1.5;
  }
}

@keyframes rings-drift {
  from { translate: 0 0; }
  to { translate: -6vw 7vh; }
}

/* Alle Sektionen bleiben durchsichtig, damit die Kugel dauerhaft im
   Hintergrund steht. Die Grundflaeche liefert der Body. Karten und
   gesetzte Sektionen decken sie dort ab, wo Text darauf liegt. */
/* Sektionen mit eigener Flaeche liegen ueber der Kugel. Das Kundenraster
   nicht: dort soll sie durchscheinen und sich mit den Logos mischen. */
.page-rest > section:not(.clients) {
  position: relative;
  z-index: 1;
}

/* Konzentrische Ringe, gegenlaeufig. Das hellere Randsegment macht
   die Drehung ueberhaupt erst sichtbar. */
.hero__rings {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sphere-size);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}

.hero__rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ring-line);
  border-top-color: var(--ring-line-top);
  border-right-color: var(--ring-line-side);
}

.hero__rings span:nth-child(1) {
  scale: 1.17;
  animation: ring-cw 44s linear infinite;
}

.hero__rings span:nth-child(2) {
  scale: 1.44;
  animation: ring-ccw 66s linear infinite;
}

.hero__rings span:nth-child(3) {
  scale: 1.76;
  animation: ring-cw 92s linear infinite;
}

@keyframes ring-cw {
  to { rotate: 360deg; }
}

@keyframes ring-ccw {
  to { rotate: -360deg; }
}

/* Die Sphere: vier weich gezeichnete Farbfelder, die uebereinander
   driften, dazu ein Lichtreflex und ein Volumenschatten. */
.sphere {
  position: absolute;
  inset: 0;
  margin: auto;
  /* so gross wie der innerste Ring: dort liegt die Grenze des Ausschlags */
  width: calc(var(--sphere-size) * 1.17);
  aspect-ratio: 1;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: linear-gradient(150deg, #00afe8, #2f4fd0 55%, #6b3fd4);
  animation: sphere-morph 26s ease-in-out infinite;
}

/* Normale Deckung statt screen: so bleiben Tuerkis, Indigo, Violett und
   Mint als getrennte Zonen lesbar, statt zu einem hellen Cyan zu verschmelzen. */
.sphere__blob {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0.9;
  will-change: transform;
}

.sphere__blob--1 {
  background: #00afe8;
  top: -4%;
  left: 2%;
  animation: blob-a 19s ease-in-out infinite;
}

.sphere__blob--2 {
  background: #18e0c4;
  top: 40%;
  left: -8%;
  animation: blob-b 23s ease-in-out infinite;
}

.sphere__blob--3 {
  background: #6b3fd4;
  top: 30%;
  left: 30%;
  animation: blob-c 29s ease-in-out infinite;
}

.sphere__blob--4 {
  background: #7fe9f5;
  top: 6%;
  left: 26%;
  animation: blob-d 34s ease-in-out infinite;
}

.sphere__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 22%, rgb(255 255 255 / 0.52), rgb(255 255 255 / 0) 38%),
    radial-gradient(circle at 66% 80%, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 58%);
}

/* Sobald WebGL läuft, übernimmt der Shader Form, Farbe und Licht.
   Die CSS-Kugel bleibt als Rückfallebene im Markup stehen. */
.sphere__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sphere[data-orb="on"] {
  background: none;
  overflow: visible;
  border-radius: 0;
  animation: none;
}

.sphere[data-orb="on"] .sphere__blob,
.sphere[data-orb="on"] .sphere__sheen {
  display: none;
}

@keyframes sphere-morph {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  33%      { border-radius: 53% 47% 49% 51% / 48% 52% 48% 52%; }
  66%      { border-radius: 47% 53% 52% 48% / 52% 48% 51% 49%; }
}

@keyframes blob-a {
  0%, 100% { transform: translate(-4%, -6%) scale(1); }
  33%      { transform: translate(10%, 8%) scale(1.13); }
  66%      { transform: translate(3%, 14%) scale(0.93); }
}

@keyframes blob-b {
  0%, 100% { transform: translate(6%, 10%) scale(1.06); }
  40%      { transform: translate(-9%, -4%) scale(0.9); }
  70%      { transform: translate(-2%, 9%) scale(1.16); }
}

@keyframes blob-c {
  0%, 100% { transform: translate(8%, 4%) scale(0.95); }
  35%      { transform: translate(-6%, 12%) scale(1.18); }
  75%      { transform: translate(12%, -8%) scale(1.02); }
}

@keyframes blob-d {
  0%, 100% { transform: translate(-8%, 8%) scale(1.1); }
  45%      { transform: translate(9%, -10%) scale(0.92); }
  80%      { transform: translate(-3%, -2%) scale(1.07); }
}

/* Die Wortgruppen liegen ueber der Sphere und mischen sich mit ihr.
   difference kehrt den hellen Text ueber hellen Flaechen um, genau
   der Effekt der Vorlage. */
.hero__headline {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.75rem, 9vh, 6rem);
  margin: 0;
  color: var(--void-text);
  mix-blend-mode: difference;
  font-size: clamp(2.125rem, 6.6vw, 6.25rem);
  line-height: 0.88;
  letter-spacing: 0.013em;
  font-weight: 400;
  text-transform: uppercase;
}

.hero__word {
  display: block;
}

/* Eingang wie im Original: jeder Buchstabe sitzt hinter einer eigenen
   Maske und faellt von oben herein, in zufaelliger Reihenfolge statt
   als Welle von links nach rechts. Der untere Innenabstand haelt Komma
   und Punkt frei, die sonst an der Maskenkante abgeschnitten wuerden.
   Die Wortgruppe haelt ein Wort zusammen, damit es nicht mitten im Wort
   umbricht, und traegt den Wortabstand. */
.hero__wordgroup {
  display: inline-block;
  white-space: nowrap;
}

.hero__mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.16em;
  vertical-align: bottom;
}

.hero__line {
  display: block;
  translate: 0 -101%;
  animation: line-in 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: calc(0.18s + var(--i, 0) * 0.03s);
}

@keyframes line-in {
  to { translate: 0 0; }
}

/* Die Kugel kommt zuerst, leicht aus der Tiefe */
.hero__enter {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 0.92;
  animation: orb-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes orb-in {
  to {
    opacity: 1;
    scale: 1;
  }
}

/* Leiste zuletzt */
.nav__brand,
.nav__cta,
.kebab {
  opacity: 0;
  animation: chrome-in 0.9s ease forwards;
}

.nav__brand { animation-delay: 0.72s; }
.nav__cta { animation-delay: 0.84s; }
.kebab { animation-delay: 0.96s; }

@keyframes chrome-in {
  to { opacity: 1; }
}

.hero__word--a {
  align-self: flex-start;
  margin-top: -6vh;
  margin-bottom: 6vh;
}
.hero__word--b { align-self: flex-end; text-align: right; margin-right: 5vw; }
.hero__word--c { align-self: flex-start; margin-left: 9vw; }

/* Zweiter Teil des Eingangs: sobald alle Buchstaben stehen, fahren die
   drei Zeilen gleichförmig in ihre versetzte Endlage auseinander.
   Start bei 2,1 s, dann ist der erste Teil durch (0,18 + 33 x 0,03 + 0,9). */
.hero__word {
  animation: line-spread 0.8s linear forwards;
  animation-delay: 2.1s;
}

.hero__word--a { translate: 7vw 0; }
.hero__word--b { translate: -11vw 0; }
.hero__word--c { translate: 5vw 0; }

@keyframes line-spread {
  to { translate: 0 0; }
}

@media (max-width: 760px) {
  .hero {
    --sphere-size: min(56vh, 86vw);
    min-height: 100dvh;
    padding-bottom: clamp(3rem, 9vw, 4.5rem);
  }

  .hero__headline {
    justify-content: flex-start;
    padding-bottom: 0;
    gap: 0.25rem;
    font-size: clamp(1.875rem, 10vw, 3rem);
  }

  .hero__word--a {
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero__word--b {
    align-self: flex-start;
    text-align: left;
  }

  .hero__word--c {
    margin-left: 0;
  }
}

/* ---------- Intro unter der Buehne ---------- */

.intro {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}

.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.875rem);
}

/* Label und Knoepfe bleiben links, die Zeile darf breiter laufen */
.intro__label,
.intro__actions {
  max-width: 46ch;
}

.intro .lede {
  position: relative;
  z-index: 2;
  max-width: 38ch;
  font-size: clamp(1.5rem, 3.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: 0.013em;
  text-transform: uppercase;
  color: var(--void-text);
  mix-blend-mode: difference;
}

/* Auf heller Flaeche wuerde der Blendmodus die Zeile aufhellen */
:root[data-theme="light"] .intro .lede {
  mix-blend-mode: normal;
}

/* Label und Knoepfe liegen ueber der Kugel, blenden aber nicht */
.intro__label,
.intro__actions {
  position: relative;
  z-index: 2;
}



.intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
}



/* ---------- Kundenraster: Label links, Raster rechts ----------
   Zellen bleiben durchsichtig, damit die Kugel dahinter sichtbar ist.
   An den Rasterpunkten sitzen kleine Kreuze wie in der Vorlage. */

.clients {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}

.clients__inner {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 5.4fr;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: start;
  width: 100%;
  /* laeuft breiter und naeher an die Raender als der uebrige
     Satzspiegel, wie in der Vorlage */
  max-width: none;
  padding-inline: clamp(1.25rem, 2.2vw, 2rem);
}

.clients__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.clients__pill {
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.5rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: var(--r-interactive);
}

.clients__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ash);
  border-left: 1px solid var(--ash);
}

.clients__cell {
  position: relative;
  aspect-ratio: 2.5 / 1;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.2;
  border-right: 1px solid var(--ash);
  border-bottom: 1px solid var(--ash);
}

/* Logos sitzen mittig in der Zelle. Absolut positioniert, sonst erzwingt
   das Bild eine Mindesthoehe und haengt das Seitenverhaeltnis der Zelle
   aus. Die Dateien sind quadratisch mit viel Leerraum, deshalb richtet
   sich die Groesse nach der Hoehe. */
.clients__cell img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 80%;
  object-fit: contain;
  /* Einfarbig weiss gesetzt und mit der Kugel gemischt: auf dunkler
     Flaeche stehen sie hell, auf der Kugel kippen sie in deren
     Gegenfarbe, wie in der Vorlage. */
  filter: brightness(0) invert(1);
  mix-blend-mode: difference;
}

:root[data-theme="light"] .clients__cell img {
  filter: brightness(0);
  mix-blend-mode: normal;
  opacity: 0.8;
}

/* Kreuze an den Rasterpunkten, aus zwei gekreuzten Strichen */
.clients__cell::before,
.clients__cell::after,
.clients__cell:nth-child(5n)::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--cross), var(--cross)) center / 11px 1px no-repeat,
    linear-gradient(var(--cross), var(--cross)) center / 1px 11px no-repeat;
}

.clients__cell::before {
  top: -5px;
  left: -5px;
}

.clients__cell::after {
  bottom: -5px;
  left: -5px;
}

.clients__cell:nth-child(5n)::after {
  bottom: -5px;
  left: auto;
  right: -5px;
}

/* obere und untere rechte Ecke der letzten Spalte */
.clients__grid::before,
.clients__grid::after {
  content: "";
  position: absolute;
  right: -5px;
  width: 9px;
  height: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--cross), var(--cross)) center / 11px 1px no-repeat,
    linear-gradient(var(--cross), var(--cross)) center / 1px 11px no-repeat;
}

.clients__grid::before { top: -5px; }
.clients__grid::after { bottom: -5px; }

@media (max-width: 900px) {
  .clients__inner {
    grid-template-columns: 1fr;
  }

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

/* ---------- Leistungskette ---------- */

.chain {
  background: var(--stone);
}

.chain__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-bottom: 2.5rem;
}

.chain__item {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.013em;
  text-transform: uppercase;
}

.chain__item:not(:last-child)::after {
  content: "\2192";
  margin-left: clamp(0.75rem, 2vw, 1.75rem);
  font-size: 0.5em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  vertical-align: middle;
}

/* ---------- Kompetenzbereiche: asymmetrisches Bento, 4 Felder ---------- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ash);
  border: 1px solid var(--ash);
  margin-top: 3rem;
}

.field {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(1.875rem, 3.4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1875rem;
  min-height: 15rem;
}

.field:nth-child(1),
.field:nth-child(4) {
  grid-column: span 2;
}

/* Flaechenvariation statt Farbe: Gitterpapier und Stone. */
.field:nth-child(1) {
  background-color: var(--paper);
  background-image: var(--grid-paper-soft);
  background-position: center;
}

.field:nth-child(4) {
  background: var(--stone);
}

.field__title {
  font-size: clamp(1.75rem, 3vw, 2.875rem);
  line-height: 1;
  letter-spacing: 0.013em;
  text-transform: uppercase;
}

.field__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--t-small);
  margin-top: auto;
  padding-top: 1.1875rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

@media (max-width: 860px) {
  .fields {
    grid-template-columns: 1fr;
  }

  .field:nth-child(1) {
    background-image: none;
  }

  .field:nth-child(1),
  .field:nth-child(4) {
    grid-column: span 1;
  }
}

/* ---------- Arbeiten ---------- */

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.75rem);
}

/* Erste Arbeit: breit, Text links, Visual rechts. */
.work__lead {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1.5rem, 3vw, 3.75rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.75rem);
}

.work__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.875rem);
}

.work__text > * + * {
  margin-top: 1.1875rem;
}

.work__result {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.013em;
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: 1.1875rem;
}

/* Visual-Platzhalter. Ersetzen, sobald echte Screenshots vorliegen. */
.shot {
  background-color: var(--paper);
  background-image: var(--grid-paper);
  background-position: center;
  border: 1px solid var(--ash);
  border-radius: var(--r-card);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.shot--wide {
  aspect-ratio: 16 / 10;
}

.shot--portrait {
  aspect-ratio: 4 / 5;
}

@media (max-width: 860px) {
  .work__lead,
  .work__pair {
    grid-template-columns: 1fr;
  }
}

/* ---------- Zielgruppen ---------- */

.audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ash);
  border-top: 1px solid var(--ash);
  border-bottom: 1px solid var(--ash);
  margin-top: 3rem;
}

.audience__col {
  background: var(--parchment);
  padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.25rem, 2vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: 1.1875rem;
}

.audience__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.013em;
  text-transform: uppercase;
}

.audience__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

@media (max-width: 900px) {
  .audience {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .audience {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mandate: gestapelte Zeilen, sparsame Trenner ---------- */

.mandates {
  margin-top: 3.5rem;
  border-top: 1px solid var(--ash);
}

.mandate {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(1rem, 3vw, 3.75rem);
  padding-block: clamp(1.75rem, 3vw, 2.875rem);
  border-bottom: 1px solid var(--ash);
  align-items: baseline;
}

.mandate__name {
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1;
  letter-spacing: 0.013em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .mandate {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}

/* ---------- Boutique / Über uns ---------- */

.about {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(1.875rem, 4vw, 4.75rem);
  align-items: start;
  margin-top: 3rem;
}

.about__aside {
  border-left: 1px solid var(--ash);
  padding-left: clamp(1.25rem, 2.4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.about__row > dt {
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  margin-bottom: 0.375rem;
}

.about__row > dd {
  margin: 0;
  font-size: var(--t-small);
}

@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
  }

  .about__aside {
    border-left: 0;
    border-top: 1px solid var(--ash);
    padding-left: 0;
    padding-top: 1.875rem;
  }
}

/* ---------- Kontakt ---------- */

.contact {
  background: var(--stone);
  text-align: center;
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3.4vw, 2.875rem);
}

.contact .lede {
  max-width: 44ch;
}

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

.footer {
  padding-block: clamp(2.875rem, 5vw, 4.75rem) 2.5rem;
  border-top: 1px solid var(--ash);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.75rem);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--t-small);
}

/* Eigene Regel statt .nav__logo: in einer Flex-Spalte würde das Bild
   sonst auf Spaltenbreite gedehnt und dadurch verzerrt. */
.footer__logo {
  height: 26px;
  width: auto;
  flex: none;
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

.footer__col a {
  text-decoration: none;
  width: fit-content;
  border-radius: var(--r-interactive);
}

.footer__col a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--brand);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

/* ---------- Menü unten rechts ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kebab {
  position: fixed;
  right: var(--kebab-inset);
  bottom: var(--kebab-inset);
  z-index: 40;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--void);
  border: 1px solid color-mix(in srgb, var(--void-text) 28%, transparent);
  border-radius: var(--r-interactive);
  color: var(--void-text);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
}

.kebab:hover {
  background: color-mix(in srgb, var(--void-text) 12%, var(--void));
}

.kebab:active {
  transform: translateY(1px);
}

.kebab__bars {
  display: grid;
  gap: 5px;
  width: 1.375rem;
}

.kebab__bars span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease;
}

.kebab[aria-expanded="true"] .kebab__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.kebab[aria-expanded="true"] .kebab__bars span:nth-child(2) {
  opacity: 0;
}

.kebab[aria-expanded="true"] .kebab__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Kein Vollbild, sondern ein Fenster über dem Menüknopf rechts unten.
   Der Kreis rollt aus der unteren rechten Ecke auf, also aus dem Knopf. */
.menu {
  position: fixed;
  right: var(--kebab-inset);
  bottom: calc(var(--kebab-inset) + 3.5rem + 0.75rem);
  z-index: 30;
  width: min(23rem, calc(100vw - var(--kebab-inset) * 2));
  max-height: calc(100dvh - var(--kebab-inset) * 2 - 5rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.875rem;
  background: var(--menu-surface);
  border: 1px solid var(--ash);
  border-radius: var(--r-interactive);
  color: var(--ink);
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 0.62s cubic-bezier(0.76, 0, 0.24, 1);
}

.menu[data-open="true"] {
  clip-path: circle(150% at 100% 100%);
}

/* Die Einträge laufen dem Kreis leicht hinterher */
.menu__inner a,
.menu__foot {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu[data-open="true"] .menu__inner a,
.menu[data-open="true"] .menu__foot {
  opacity: 1;
  translate: 0 0;
}

.menu[data-open="true"] .menu__inner a:nth-child(1) { transition-delay: 0.2s; }
.menu[data-open="true"] .menu__inner a:nth-child(2) { transition-delay: 0.25s; }
.menu[data-open="true"] .menu__inner a:nth-child(3) { transition-delay: 0.3s; }
.menu[data-open="true"] .menu__inner a:nth-child(4) { transition-delay: 0.35s; }
.menu[data-open="true"] .menu__inner a:nth-child(5) { transition-delay: 0.4s; }
.menu[data-open="true"] .menu__foot { transition-delay: 0.45s; }

.menu__inner,
.menu__foot {
  width: 100%;
}

.menu__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu__inner a {
  width: fit-content;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.1;
  letter-spacing: 0.013em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-interactive);
  transition: opacity 0.3s ease;
}

.menu__inner a:hover,
.menu__inner a:focus-visible {
  opacity: 0.55;
}

.menu__foot .pill {
  border-color: currentColor;
  color: inherit;
}

.menu__foot .pill:hover,
.menu__foot .pill:focus-visible {
  background: var(--ink);
  color: var(--parchment);
}

/* Umschalter für die Farbfassung, sitzt neben dem Kontakt-Knopf */
.menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Schalter für die Farbfassung */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: inherit;
  font-size: var(--t-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  margin: -0.25rem;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-interactive);
}

.switch__track {
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  flex: none;
  border: 1px solid currentColor;
  border-radius: var(--r-interactive);
  transition: background-color 0.35s ease;
}

.switch__knob {
  position: absolute;
  top: 50%;
  left: 4px;
  translate: 0 -50%;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 6px;
  background: currentColor;
  transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.switch[aria-checked="true"] .switch__knob {
  translate: 1.5rem -50%;
}

.switch[aria-checked="true"] .switch__track {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- Scroll-Reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================ Rechtliche Unterseiten ============================ */
.legal { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--section); }
.legal__wrap { max-width: 860px; }
.legal__title { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; margin: 0.75rem 0 1rem; hyphens: manual; }
.legal__lead { font-size: var(--t-small); opacity: 0.7; margin-bottom: 3rem; }
.legal h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 700; margin: 2.75rem 0 0.875rem; letter-spacing: -0.01em; }
.legal p, .legal li, .legal dd, .legal dt { font-size: 1rem; line-height: 1.65; }
.legal p { margin: 0 0 1rem; max-width: 70ch; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--ash); }
.legal a:hover, .legal a:focus-visible { text-decoration-color: var(--brand); }
.legal__facts { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; border-top: 1px solid var(--ash); margin: 2rem 0; }
.legal__facts dt, .legal__facts dd { padding: 0.75rem 0; border-bottom: 1px solid var(--ash); margin: 0; }
.legal__facts dt { opacity: 0.65; padding-right: 1.5rem; }
.legal__agb hr { border: 0; border-top: 1px solid var(--ash); margin: 2rem 0; }
.legal__agb ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal__agb .foot { opacity: 0.7; font-size: var(--t-small); }
@media (max-width: 600px) {
  .legal__facts { grid-template-columns: 1fr; }
  .legal__facts dt { border-bottom: 0; padding-bottom: 0; }
}

/* ============================ Case-Study-Unterseiten ============================ */
.case { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--section); }
.case > section + section { margin-top: clamp(3rem, 6vw, 5rem); }
.case__title { font-size: clamp(2.75rem, 8vw, 6.5rem); line-height: 0.92; letter-spacing: -0.035em; font-weight: 700; margin: 0.75rem 0 2.5rem; max-width: 14ch; }
.case__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ash); margin: 0; }
.case__meta-row { padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--ash); }
.case__meta dt { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 0.4rem; }
.case__meta dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.case__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ash); border: 1px solid var(--ash); padding: 0; }
.case__kpi { background: var(--paper); padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.case__kpi-num { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.case__kpi-label { font-size: var(--t-small); line-height: 1.4; opacity: 0.75; }
.case__shot { width: 100%; }
.case__body { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.case__block { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 2rem; border-top: 1px solid var(--ash); padding-top: 1.5rem; }
.case__h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.case__block .body + .body { margin-top: 1.1875rem; }
.case__block .body { max-width: 62ch; }
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.case__foot { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; border-top: 1px solid var(--ash); padding-top: 2rem; }
.case__next { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; }
.case__next-title { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.case__next:hover .case__next-title, .case__next:focus-visible .case__next-title { color: var(--brand); }
.case__cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.work__more { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ash); }
.work__more-item { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--ash); color: inherit; text-decoration: none; }
.work__more-title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.work__more-text { font-size: var(--t-small); opacity: 0.75; line-height: 1.5; }
.work__more-item:hover .work__more-title, .work__more-item:focus-visible .work__more-title { color: var(--brand); }
@media (max-width: 900px) {
  .case__meta { grid-template-columns: 1fr; }
  .case__kpis { grid-template-columns: 1fr 1fr; }
  .case__block { grid-template-columns: 1fr; gap: 1rem; }
  .case__foot { grid-template-columns: 1fr; }
  .work__more-item { grid-template-columns: 1fr auto; }
  .work__more-text { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  .case__pair { grid-template-columns: 1fr; }
}

/* Unterseiten an die Typo der Startseite angleichen: Versalien, Regular */
.case__title, .legal__title { font-weight: 400; text-transform: uppercase; letter-spacing: 0.013em; line-height: 0.9; }
.case__title { font-size: clamp(2.5rem, 7vw, 5.75rem); max-width: 16ch; }
.legal__title { font-size: clamp(2.25rem, 6vw, 4.375rem); }
.case__h2, .legal h2, .case__next-title, .work__more-title { font-weight: 400; text-transform: uppercase; letter-spacing: 0.013em; }
.case__kpi-num { font-weight: 400; letter-spacing: 0.005em; }