/* =========================================================================
   Portfolio Francesco Fernandez — Designsystem
   Farbwerte, Typografie und Motion-Werte nach Briefing Abschnitt 5.
   Eine bewegte Sache: das Partikelfeld. Alles andere hält still und
   choreografiert nur seinen Auftritt.
   ========================================================================= */

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Grundton der Seite. Die drei *-rgb-Werte werden in der Arbeiten-Sektion
     per JavaScript weich nach Grau geschoben — alles andere folgt automatisch. */
  --bg-rgb: 11, 11, 12;
  --surface-rgb: 20, 21, 24;
  --line-rgb: 38, 39, 44;

  --bg: rgb(var(--bg-rgb));
  --surface: rgb(var(--surface-rgb));
  --line: rgb(var(--line-rgb));
  /* Schrift und Akzent laufen mit dem Grundton mit — in der Arbeiten-
     Sektion kippt die Seite nach Hell, und alles darin muss folgen.
     --hell sagt, wie weit das schon geschehen ist (0 = dunkel, 1 = hell). */
  --text-rgb: 245, 245, 247;
  --accent-a-rgb: 52, 167, 185;
  --hell: 0;

  --text: rgb(var(--text-rgb));
  --text-muted: rgba(var(--text-rgb), 0.62);
  --text-dim: rgba(var(--text-rgb), 0.38);
  --accent-a: rgb(var(--accent-a-rgb));
  /* Ein fester Akzent statt Verlauf: Eisblau. --accent-a folgt dem Ton
     (auf hellem Grund etwas dunkler, damit Text lesbar bleibt); --eis bleibt
     immer gleich — fuer Flaechen wie Knoepfe. */
  --eis: #34A7B9;
  --accent-b: var(--accent-a);

  --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-section: 0.72s;
  --dur-hover: 0.25s;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --space-section: clamp(110px, 16vh, 210px);

  --radius: 8px;
  --radius-hover: 30px;
  --radius-card: 16px;
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(0.975rem, 0.94rem + 0.18vw, 1.06rem);
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 300;
  padding: 12px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 12px 12px; text-decoration: none; font-size: 0.9rem;
  transition: transform var(--dur-hover) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

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

/* ---------- Szene ------------------------------------------------------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.scene canvas { position: relative; width: 100%; height: 100%; }
/* Der helle Verlauf der Arbeiten-Sektion. Er liegt hinter dem Canvas, damit
   die Partikel darauf sichtbar bleiben, und zieht mit --hell auf. */
.scene__verlauf {
  position: absolute; inset: 0; opacity: var(--hell, 0);
  /* Eigene Ebene: die Deckkraft zu aendern ist dann ein Zusammensetzen
     statt eines Neuzeichnens der ganzen Flaeche. */
  will-change: opacity; transform: translateZ(0);
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 62%),
    /* senkrecht, damit die Unterkante einfarbig ist: an ihr setzt die
       gewoelbte Kante der Seite an (.seite__bogen--hell) */
    linear-gradient(180deg, rgb(246, 247, 249) 0%, rgb(224, 226, 231) 58%, rgb(200, 203, 210) 100%);
}
.scene--fallback {
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(52, 167, 185, 0.12), transparent 70%);
}
main { position: relative; z-index: 1; }
/* Der Kopf muss ueber dem Inhalt liegen, sonst fangen die Sektionen die
   Klicks auf die Navigation ab. */
header { position: relative; z-index: 50; }

/* Weicher Schleier direkt hinter Textblöcken: das Feld bleibt sichtbar,
   der Text bleibt lesbar. Keine harte Kante, keine Vollfläche. */
.scrim { position: relative; isolation: isolate; }
.scrim::before {
  content: '';
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(58% 58% at 32% 50%, rgba(var(--bg-rgb), 0.92), rgba(var(--bg-rgb), 0) 74%);
  pointer-events: none;
}
.scrim--center::before { background: radial-gradient(60% 60% at 50% 50%, rgba(var(--bg-rgb), 0.9), rgba(var(--bg-rgb), 0) 76%); }

/* ---------- Typografie -------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.038em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 1.2rem + 6.4vw, 6rem); }
h2 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem); line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); letter-spacing: -0.028em; line-height: 1.18; }

.lead {
  font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.45rem);
  line-height: 1.48; color: var(--text-muted);
  letter-spacing: -0.015em; max-width: 46ch; text-wrap: pretty;
}
.prose { max-width: 56ch; color: var(--text-muted); }
.prose p + p { margin-top: 1.05em; }
.muted { color: var(--text-muted); }

.eyebrow {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--line); flex: none; }

/* Wortweiser Auftritt der Überschriften */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.w__i {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}
[data-split].is-in .w__i { transform: translateY(0); }

/* ---------- Layout ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space-section); }
.section__head { display: grid; gap: 24px; max-width: 64ch; margin-bottom: clamp(52px, 7vw, 96px); }
.section__head--wide { max-width: none; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text);
  font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: border-radius var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.btn:hover { border-color: rgba(var(--text-rgb), 0.34); }
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform var(--dur-hover) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Der eine Verlaufs-CTA der Seite */
.btn--accent {
  border-color: transparent; color: #0B0B0C; font-weight: 600;
  background-color: var(--eis);
}
.btn--accent:hover { border-color: transparent; filter: brightness(1.07); }

/* ---------- Verlaufsrand ------------------------------------------------ */
.ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--accent-a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease); pointer-events: none;
}
.has-ring:hover .ring, .has-ring:focus-within .ring, .has-ring.is-active .ring { opacity: 1; }

/* ---------- Navigation --------------------------------------------------
   Volle Breite, keine Rahmen, keine Fläche: nur Bildmarke links, Links rechts.
   Ein weicher Verlauf am oberen Rand hält die Beschriftung lesbar, wenn hell
   Bildmaterial darunter durchläuft.
   ------------------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: 18px;
}
.nav::before {
  content: '';
  position: absolute; inset: -20px 0 auto 0; height: 150px; z-index: -1;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0.88) 0%,
              rgba(var(--bg-rgb), 0.55) 45%, rgba(var(--bg-rgb), 0) 100%);
  pointer-events: none;
}
/* Die Leiste geht über die volle Breite — kein Maßhalten auf --maxw,
   nur die Randabstände der Seite. */
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding-inline: var(--gutter);
}

.nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav__brand img {
  width: 52px; height: 52px; object-fit: contain;
  /* Das Zeichen ist weiss gezeichnet. Kippt die Seite nach Hell, kippt es
     mit — sonst verschwindet es im Grau. */
  filter: invert(var(--hell, 0));
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.nav__brand:hover img { transform: scale(1.06); }

/* ---------- Menue ----------------------------------------------------- */
.nav__links { display: flex; align-items: center; gap: clamp(22px, 2.8vw, 48px); }
.nav__link {
  position: relative; padding: 5px 0; text-decoration: none;
  font-size: 0.88rem; color: var(--text-muted);
  transition: color var(--dur-hover) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current='page'] { color: var(--text); }
/* Unterstrich: waechst beim Hover von links, steht auf der aktuellen Seite */
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent-a);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.nav__toggle {
  display: none; width: 40px; height: 40px; border: 0; background: transparent;
  cursor: pointer; position: relative; padding: 0;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 50%; width: 20px; height: 1.5px; background: var(--text);
  transform: translateX(-50%); transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.nav__toggle span { top: 50%; margin-top: -0.75px; }
.nav__toggle span::before { top: -6px; left: 0; transform: none; }
.nav__toggle span::after { top: 6px; left: 0; transform: none; }
.nav__toggle[aria-expanded='true'] span { transform: translateX(-50%) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::before { opacity: 0; }
.nav__toggle[aria-expanded='true'] span::after { transform: rotate(-90deg); top: 0; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  /* Der Wrapper faellt aus dem Layout, sonst schoebe er die leere Spalte
     zwischen Bildmarke und Schalter und der Schalter saesse in der Mitte. */
  .nav__menu { display: contents; }
  .nav__links {
    position: absolute; top: calc(100% + 6px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px;
    border-radius: 18px; background: rgba(var(--bg-rgb), 0.96);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 40px 70px -45px rgba(0, 0, 0, 0.95);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), visibility var(--dur-hover);
  }
  .nav__links[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 13px 10px; font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__link[aria-current='page'] { color: var(--accent-a); }
}

/* ---------- Titelbild: drei Slides --------------------------------------
   Die Sektion ist mehrere Bildschirme hoch, der Inhalt darin klebt fest.
   Der Scroll fährt die Texte durch: jede Zeile sitzt in einem Fenster
   (overflow: hidden) und wird darin verschoben — sie wischt von unten
   herein und nach oben wieder hinaus.

   --d ist der Abstand des Slides zum Scroll, 0 heißt „steht mittig".
   JavaScript setzt nur diesen einen Wert je Slide, den Rest rechnet CSS.
   --k staffelt die Zeilen: weiter unten stehende laufen schneller, dadurch
   fächert der Block beim Hinausfahren auf und setzt beim Hereinfahren
   nacheinander auf.
   ------------------------------------------------------------------------ */
.hero { position: relative; height: calc(var(--hero-hoehe, 3.8) * 100svh); }
.hero__sticky {
  position: sticky; top: 0; height: 100svh; container-type: inline-size;
  display: flex; align-items: center; overflow: hidden;
}
.hero__buehne { position: relative; width: 100%; display: grid; }

.hero__slide {
  --d: 1;
  grid-area: 1 / 1;
  display: grid; gap: 26px; justify-items: start; align-content: center;
}

/* Fenster und Inhalt. translateY laeuft von +110 % (unter dem Fenster)
   ueber 0 (an Ort und Stelle) nach -110 % (darueber hinaus). */
.hero__zeile { overflow: hidden; display: block; padding-bottom: 0.08em; margin: 0; }
.hero__zeile > span {
  display: block;
  transform: translateY(calc(-110% * clamp(-1, var(--d) / 0.45 * (1 + var(--k, 0) * 0.16), 1)));
}
/* Elemente, deren Woerter einzeln laufen, bewegen sich nicht als Ganzes. */
.hero__zeile > span.hero__worte, .hero-worte .hero__zeile > span.hero__fakt { transform: none; }
.hero__zeile .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; }
.hero__zeile .w__i {
  display: inline-block; transition: none;
  transform: translateY(calc(-118% * clamp(-1,
    var(--d) / 0.42 * (1 + var(--k, 0) * 0.10 + var(--w, 0) * 0.022), 1)));
}

.hero__slide > .hero__zeile:nth-child(1) { --k: 0; }
.hero__slide > .hero__zeile:nth-child(2) { --k: 1; }
.hero__slide > .hero__zeile:nth-child(3) { --k: 2; }
.hero__slide > .hero__zeile:nth-child(4) { --k: 3; }
.hero__slide > .hero__zeile:nth-child(5) { --k: 4; }

/* Die Texte teilen sich den Schirm mit dem Kopf. Breit bekommen sie eine
   Spalte links, der Rest gehoert ihm; app.js misst diese Spalte und passt
   den Kopf in das, was daneben frei bleibt. */
.hero h1 { font-size: clamp(2.8rem, 1rem + 4.8vw, 6.4rem); max-width: 12ch; line-height: 0.98; letter-spacing: -0.05em; }
.hero__gross {
  font-size: clamp(2.6rem, 1rem + 4.2vw, 5.6rem); max-width: 13ch;
  font-weight: 600; line-height: 1; letter-spacing: -0.045em;
}
/* Breit wechselt die Anordnung von Slide zu Slide, und der Kopf wandert
   mit: Slide 1 Text links, Kopf rechts und angeschnitten — Slide 2 Text
   rechts, der Kopf links schaut hinueber — Slide 3 zwei Spalten, der Kopf
   steht dazwischen. */
@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .hero__slide { max-width: min(47vw, 640px); }
  /* Slide 1 bricht nach links aus der Satzbreite aus und startet am Rand
     der Navigation — so bekommt die Zeile Breite, der Kopf rechts bleibt. */
  .hero__slide[data-slide='0'] {
    justify-self: start; max-width: min(60vw, 900px);
    margin-left: calc((100% - 100cqw) / 2 + var(--gutter) * 1.6);
  }
  .hero__slide[data-slide='0'] h1 { max-width: 16ch; }
  .hero__slide[data-slide='1'] { justify-self: end; width: min(42cqw, 600px); }
  .hero__slide--fakten {
    /* bricht aus der Satzbreite aus: die Spalten stehen an den Raendern,
       damit der Kopf dazwischen Platz hat */
    max-width: none; justify-self: stretch;
    margin-inline: calc((100% - 100cqw) / 2 + var(--gutter) * 1.6);
    column-gap: 0; row-gap: 22px;
    grid-template-columns: min(22cqw, 360px) 1fr min(22cqw, 360px);
  }
  .hero__slide--fakten > * { grid-column: 1; align-self: start; }
  .hero__slide--fakten > :nth-child(n+3) { grid-column: 3; text-align: right; justify-self: end; }
  .hero__slide--fakten > :nth-child(n+3) .hero__fakt,
  .hero__slide--fakten > :nth-child(n+3) em { margin-left: auto; }
  .hero__slide--fakten > :nth-child(3) { margin-top: 14px; }
  .hero__slide--fakten .hero__fakt strong { font-size: clamp(1.8rem, 0.8rem + 2.4vw, 3.4rem); }
}
/* Niedrige Querformate (Laptop 1280 × 720 und aehnlich): Schrift nach der
   Hoehe bemessen, sonst stoesst der erste Slide oben an die Navigation. */
@media (min-width: 900px) and (min-aspect-ratio: 11/10) and (max-height: 820px) {
  .hero__slide { gap: 18px; }
  .hero h1 { font-size: clamp(2.6rem, 1rem + 7vh, 4.8rem); }
  .hero__gross { font-size: clamp(2.4rem, 0.9rem + 6.4vh, 4.4rem); }
  .hero__slide--fakten .hero__fakt strong { font-size: clamp(1.7rem, 0.6rem + 3.6vh, 2.8rem); }
  .hero .lead { font-size: 1.05rem; line-height: 1.5; }
}
/* Schmal und hochkant: der Text sitzt unten, der Kopf darueber. */
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  .hero__sticky { align-items: flex-end; }
  /* unten Luft fuer den Scrollhinweis, sonst steht er im Text */
  .hero__buehne { padding-bottom: max(86px, 10svh); }
}
@media (max-width: 620px) {
  /* Knoepfe nebeneinander: jede gesparte Zeile gehoert dem Kopf */
  .hero__zeile > span.hero__actions { gap: 8px; }
  .hero__zeile > span.hero__actions { gap: 8px; }
}
.hero .lead { max-width: 42ch; }
/* Die Regel oben setzt jedes Fenster-Kind auf block — die Knopfreihe
   braucht die hoehere Spezifitaet, sonst stehen die Knoepfe inline. */
.hero__zeile > span.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Slide 3: drei Fakten untereinander, je eine grosse Zeile mit Erklaerung */
.hero__slide--fakten { gap: 18px; }
.hero__fakt { display: block; max-width: 46ch; }
.hero__fakt strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1rem + 3vw, 3.6rem);
  line-height: 1.02; letter-spacing: -0.045em;
}
.hero__fakt em {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4; color: var(--text-dim); max-width: 44ch;
}

/* Drei Striche am linken Rand: welcher Slide gerade steht */
.hero__punkte {
  position: absolute; left: calc(var(--gutter) - 4px); top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.hero__punkte li {
  width: 12px; height: 1px; background: var(--line);
  transition: width var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.hero__punkte li[data-aktiv='true'] { width: 26px; background: var(--accent-a); }
/* Die Striche brauchen Platz links neben der Textspalte — den gibt es erst,
   wenn die Spalte ihre Hoechstbreite erreicht hat und seitlich Luft bleibt. */
@media (max-width: 1180px) { .hero__punkte { display: none; } }
/* Auf Beruehrungsgeraeten gibt es keinen Impuls per Klick — also auch
   keinen Hinweis darauf. */
@media (hover: none) { .scroll-hint__maus { display: none; } }
/* Auf dem Telefon muss ein Slide ganz auf einen Bildschirm passen — sonst
   steht der Scrollhinweis im Text. */
@media (max-width: 620px) {
  .hero__slide { gap: 18px; }
  .hero h1, .hero__gross { font-size: clamp(2.5rem, 1rem + 7vw, 3.6rem); }
  .hero .lead { font-size: 1rem; line-height: 1.45; }
  .hero__fakt strong { font-size: clamp(1.8rem, 1rem + 4vw, 2.6rem); }
  .hero__fakt em { font-size: 0.66rem; }
}

.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 36px;
  display: flex; align-items: center; gap: 14px;
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-dim);
}
.scroll-hint__rail { position: relative; width: 58px; height: 1px; background: var(--line); overflow: hidden; }
.scroll-hint__rail::after {
  content: ''; position: absolute; inset: 0; background: var(--accent-a);
  transform: translateX(-100%); animation: rail 2.8s var(--ease) infinite;
}
@keyframes rail {
  0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); }
}
.hero__hint-click { position: absolute; right: var(--gutter); bottom: 36px; font-size: 0.7rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 860px) { .hero__hint-click { display: none; } }

/* ---------- Leistungen --------------------------------------------------
   Eingeklappt nur Ziffer, Titel und ein Satz. Ein Klick klappt den Rest auf —
   über grid-template-rows 0fr auf 1fr, das laeuft ohne gemessene Hoehen.
   ------------------------------------------------------------------------ */
.services { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 960px) { .services { grid-template-columns: 1fr; } }

.service {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  /* Bewusst ohne backdrop-filter: ein Blur unter einer laufenden Transform
     wird in jedem Frame neu gerechnet und macht den Hover ruckelig. */
  background: rgba(var(--surface-rgb), 0.82);
  will-change: transform;
  transition: transform 0.6s var(--ease), background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.service.is-active {
  transform: translateY(-10px);
  background: rgba(var(--surface-rgb), 0.93);
  box-shadow: 0 40px 70px -55px rgba(0, 0, 0, 0.9);
}
.service.is-open { background: rgba(var(--surface-rgb), 0.95); }
.service .ring { transition-duration: 0.6s; }

.service__h { margin: 0; font-size: inherit; }
.service__btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 16px; width: 100%; padding: 0; border: 0; background: transparent;
  text-align: left; cursor: pointer;
}
.service .service__no {
  font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1; letter-spacing: -0.04em; color: rgba(var(--text-rgb), 0.16);
  transition: color 0.6s var(--ease);
}
.service.is-active .service__no, .service.is-open .service__no { color: rgba(var(--text-rgb), 0.3); }
.service__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem);
  letter-spacing: -0.028em; line-height: 1.2;
}

/* Plus, das beim Aufklappen zum Minus wird */
.service__sign { position: relative; width: 20px; height: 20px; flex: none; }
.service__sign::before, .service__sign::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--text-muted);
  transition: transform 0.6s var(--ease), background-color 0.6s var(--ease);
}
.service__sign::before { width: 15px; height: 1.5px; transform: translate(-50%, -50%); }
.service__sign::after { width: 1.5px; height: 15px; transform: translate(-50%, -50%); }
.service.is-open .service__sign::after { transform: translate(-50%, -50%) scaleY(0); }
.service.is-open .service__sign::before,
.service.is-open .service__sign::after { background: var(--accent-a); }

.service__lead { margin-top: 14px; color: var(--text-muted); font-size: 0.97rem; }

.service__more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.service__moreInner { overflow: hidden; }
.service__moreInner > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.service.is-open .service__more { grid-template-rows: 1fr; }
.service.is-open .service__moreInner > * { opacity: 1; transform: none; transition-delay: 0.16s; }
.service__moreInner p { margin-top: 16px; color: var(--text-muted); font-size: 0.95rem; }
.service .service__meta { font-size: 0.82rem; color: var(--text-dim); }

/* ---------- Über mich --------------------------------------------------- */
.about { display: grid; justify-items: center; text-align: center; gap: clamp(30px, 5vw, 56px); }
/* Das Zeichen steht vorn, das schwarze Loch liegt gross dahinter. Die
   Position dieses Elements gibt scene.js zugleich den Bezugspunkt fuer die
   Scheibe — deshalb landet das Zeichen immer im dunklen Feld ueber ihr. */
.about__mark {
  position: relative; width: clamp(96px, 26vw, 200px); aspect-ratio: 1; display: grid; place-items: center;
}
.about__mark img { width: 100%; }
.about__text { max-width: 62ch; }
/* Der helle Balken der Scheibe zieht quer durch diesen Text. Der Schleier
   darf deshalb dichter sein und weiter reichen als der auf den anderen
   Textbloecken — sonst frisst das Feld die erste Zeile. */
.about__text.scrim::before {
  inset: -20% -12%;
  background: radial-gradient(66% 64% at 50% 50%,
    rgba(var(--bg-rgb), 0.97), rgba(var(--bg-rgb), 0.84) 56%, rgba(var(--bg-rgb), 0) 84%);
}
.about__text .prose { max-width: none; text-align: left; }
@media (max-width: 720px) { .about__text .prose { text-align: left; } }

.about__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  margin-top: 8px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden; width: 100%;
}
.about__facts div { background: rgba(var(--bg-rgb), 0.82); padding: 20px 22px; text-align: left; }
.about__facts dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.about__facts dd { font-family: var(--font-display); font-size: 1.04rem; letter-spacing: -0.025em; margin-top: 5px; }

/* ---------- Formular ---------------------------------------------------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.8rem; letter-spacing: 0.02em; color: var(--text-muted); }
.field input, .field textarea {
  width: 100%; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.8); color: var(--text);
  font-family: inherit; font-size: 0.95rem;
  transition: border-color var(--dur-hover) var(--ease), border-radius var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease);
}
.field input:hover, .field textarea:hover { border-color: rgba(var(--text-rgb), 0.3); }
.field input:focus, .field textarea:focus {
  border-color: var(--accent-a); outline: none; border-radius: 14px; background: rgba(var(--surface-rgb), 0.95);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.84rem; color: var(--text-muted); }
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent-a); flex: none; }
.consent a { color: var(--text); text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 0.78rem; color: var(--text-dim); }
.form__status { font-size: 0.88rem; min-height: 1.2em; }
.form__status[data-state='error'] { color: #E5735A; }
.form__status[data-state='ok'] { color: var(--accent-a); }

/* =========================================================================
   MULTIPAGER
   ========================================================================= */
.wrap--breit { max-width: 1680px; }

/* ---------- Seitenwechsel --------------------------------------------------
   Waehrend des Wechsels nimmt der alte Inhalt keine Klicks mehr an. Der
   Seitenname steht gross ueber dem Partikelfeld — ohne Flaeche, das Feld
   bleibt zu sehen. */
html.ist-wechsel #seite { pointer-events: none; }
.seitenname {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  display: grid; place-items: center; visibility: hidden; opacity: 0;
}
.seitenname p {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(3.4rem, 1rem + 9vw, 11rem); color: var(--text);
}
.seitenname__fenster { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.seitenname__text { display: block; white-space: nowrap; }

/* ---------- Vorhang --------------------------------------------------------
   Beim Laden jeder Seite und beim klassischen Wechsel (file://, Labor).
   Die Flaeche hat oben und unten eine gewoelbte Kante: faehrt sie herauf,
   fuehrt die obere Woelbung; zieht sie ab, schleppt sie die untere nach. */
.vorhang { position: fixed; inset: 0; z-index: 600; pointer-events: none; visibility: hidden; }
.vorhang__flaeche {
  position: absolute; inset: 0; background: #0B0B0C;
  transform: translateY(105%);
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.vorhang__flaeche::before, .vorhang__flaeche::after {
  content: ''; position: absolute; left: -10%; width: 120%; height: 18vh;
  background: #0B0B0C; border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.vorhang__flaeche::before { top: 0; transform: translateY(-50%) scaleY(1); }
.vorhang__flaeche::after { bottom: 0; transform: translateY(50%) scaleY(0); }
.vorhang__name {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em;
  font-size: clamp(3.4rem, 1rem + 9vw, 11rem); letter-spacing: -0.045em; line-height: 1; color: #F5F5F7;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.45s var(--ease), transform 0.7s var(--ease);
}

/* zu: deckt alles ab, ohne Bewegung (beim ersten Bild) */
html.vorhang-zu .vorhang, html.vorhang-kommt .vorhang { visibility: visible; pointer-events: auto; }
html.vorhang-zu .vorhang__flaeche { transform: none; transition: none; }
html.vorhang-zu .vorhang__flaeche::before { transform: translateY(-50%) scaleY(0); transition: none; }
html.vorhang-zu .vorhang__name { opacity: 1; transform: none; transition: none; }
/* auf: zieht nach oben ab, unten schleppt die Wölbung nach */
html.vorhang-auf .vorhang__flaeche { transform: translateY(-120%); transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1); }
html.vorhang-auf .vorhang__flaeche::after { transform: translateY(50%) scaleY(1); transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1); }
html.vorhang-auf .vorhang__name { opacity: 0; transform: translateY(-40px); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease); }
/* kommt: faehrt von unten herauf */
html.vorhang-kommt .vorhang__flaeche { transform: none; }
html.vorhang-kommt .vorhang__name { opacity: 1; transform: none; transition-delay: 0.35s; }
/* Sicherheitsnetz: laedt das Skript nicht, zieht der Vorhang trotzdem auf */
html.vorhang-zu:not(.vorhang-auf) .vorhang { animation: vorhangNotfall 0.01s 2.8s forwards; }
@keyframes vorhangNotfall { to { visibility: hidden; } }

/* ---------- Gewölbte Kante und Abspann ------------------------------------
   Die Kante haengt unten an <main> und hat die Farbe der Seite darueber; sie
   flacht ab (--bogen 1 → 0), waehrend der Abspann darunter hervorkommt. Der
   Abspann liegt UNTER dem Partikelfeld (z-index -1): das Feld zeichnet den
   Horizont ueber ihn. */
.seite__bogen {
  --bogen: 1;
  position: absolute; left: -10%; right: -10%; top: 100%; height: 14vh;
  pointer-events: none; overflow: hidden;
}
.seite__bogen::before {
  content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  border-radius: 0 0 50% 50%;
  background: rgb(11, 11, 12);
  transform-origin: 50% 50%; transform: scaleY(var(--bogen));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.seite__bogen--hell::before { background: rgb(200, 203, 210); box-shadow: none; }

.abspann {
  position: relative; z-index: -1;
  /* Immer im Kontrast zur Seite darueber: dunkel unter hellen Seiten
     (Arbeiten, Projekte), hell unter dunklen (.abspann--hell, app.js). */
  --bg-rgb: 12, 12, 14; --surface-rgb: 24, 25, 29; --line-rgb: 44, 46, 52;
  --text-rgb: 245, 245, 247; --accent-a-rgb: 52, 167, 185; --hell: 0;
  background: rgb(var(--bg-rgb)); color: rgb(var(--text-rgb));
  overflow: hidden;
}
.abspann--hell {
  --bg-rgb: 230, 231, 234; --surface-rgb: 246, 246, 248; --line-rgb: 194, 196, 203;
  --text-rgb: 21, 21, 25; --accent-a-rgb: 30, 127, 143; --hell: 1;
}
.abspann__innen { padding-block: clamp(150px, 22vh, 240px) 34px; will-change: transform; }
.abspann__kopf { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); max-width: 1100px; }
.abspann__logo {
  width: clamp(64px, 7vw, 104px); height: auto; aspect-ratio: 1; flex: none; object-fit: contain;
  /* das Zeichen ist weiss gezeichnet — auf hellem Abspann dunkel */
  filter: invert(var(--hell, 0));
}
.abspann__titel { font-size: clamp(2.6rem, 1rem + 6vw, 7rem); line-height: 0.98; letter-spacing: -0.05em; }

.abspann__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(56px, 7vw, 110px); }
.pille {
  display: inline-flex; align-items: center; padding: 16px 30px; border-radius: 999px;
  border: 1px solid rgba(var(--text-rgb), 0.24); text-decoration: none;
  font-size: 0.95rem; line-height: 1.2; letter-spacing: -0.01em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pille::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent-a);
  transform: translateY(101%); border-radius: 50% 50% 0 0;
  transition: transform 0.5s var(--ease), border-radius 0.5s var(--ease);
}
.pille:hover { color: #fff; border-color: var(--accent-a); }
.pille:hover::before { transform: none; border-radius: 0; }
/* Anfrage: dieselbe Pille, eisblau gefuellt — beim Hover dunkelt sie ab */
.pille--akzent {
  gap: 10px; border-color: transparent; color: #0B0B0C; font-weight: 600;
  background: var(--eis);
}
.pille--akzent::before { background: #0B0B0C; }
.pille--akzent:hover { color: #F5F5F7; border-color: transparent; }
.abspann--hell .pille--akzent::before { background: #151519; }

.btn--hell { background: #F5F5F7; color: #0B0B0C; border-color: #F5F5F7; font-weight: 600; }
.btn--hell:hover { border-color: #F5F5F7; }

.abspann__fuss {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 28px;
  margin-top: clamp(80px, 12vw, 160px); padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--text-muted);
}
.abspann__daten { display: flex; flex-wrap: wrap; gap: 36px; }
.abspann__daten dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.abspann__daten dd { color: var(--text); font-variant-numeric: tabular-nums; }
.abspann__links { display: flex; flex-wrap: wrap; gap: 22px; }
.abspann__links a { text-decoration: none; }
.abspann__links a:hover { color: var(--text); }
@media (max-width: 820px) {
  .abspann__fuss { grid-template-columns: 1fr; }
  .abspann__kopf { flex-direction: column; align-items: flex-start; }
  .abspann__titel { font-size: clamp(2.1rem, 0.6rem + 8vw, 3.4rem); }
}

/* ---------- Seitenkopf der Unterseiten --------------------------------- */
.seitenkopf { position: relative; padding-top: clamp(150px, 24vh, 260px); padding-bottom: clamp(56px, 8vh, 96px); }
.seitenkopf__innen { display: grid; gap: clamp(22px, 3vw, 36px); }
.seitenkopf__titel {
  font-size: clamp(3rem, 1rem + 8.4vw, 10.5rem); line-height: 0.94; letter-spacing: -0.055em;
  max-width: 14ch;
}
.seitenkopf__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter {
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text-muted); font-size: 0.88rem; cursor: pointer;
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.filter:hover { color: var(--text); border-color: rgba(var(--text-rgb), 0.4); }
.filter[aria-pressed='true'] { color: rgb(var(--bg-rgb)); background: var(--text); border-color: var(--text); }

/* ---------- Arbeiten: das Mauerwerk ------------------------------------
   Ohne JavaScript ordnen CSS-Spalten die Arbeiten an. Mit JavaScript
   werden sie in Lesereihenfolge auf drei Spalten verteilt (.ist-spalten). */
.werkschau { padding: 0 var(--gutter) var(--space-section); }
.werke { --spalt: clamp(18px, 2.2vw, 40px); }
.werke--mauer { columns: 3 300px; column-gap: var(--spalt); }
.werke--mauer > .werk { margin-bottom: calc(var(--spalt) * 1.4); }
.werke--mauer.ist-spalten { columns: auto; display: flex; align-items: flex-start; gap: var(--spalt); }
.werke__spalte { flex: 1 1 0; min-width: 0; display: grid; gap: calc(var(--spalt) * 1.5); will-change: transform; }
.werke--mauer.ist-spalten > .werk { display: none; }
.werke--reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); align-items: start; }
.werke--reihe > .werk:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
@media (max-width: 860px) {
  .werke--reihe { grid-template-columns: 1fr 1fr; }
  .werke--reihe > .werk:nth-child(2) { margin-top: 48px; }
}
@media (max-width: 560px) {
  .werke--reihe { grid-template-columns: 1fr; }
  .werke--reihe > .werk:nth-child(2) { margin-top: 0; }
}

.werk { display: block; break-inside: avoid; text-decoration: none; color: inherit; outline-offset: 6px; }
.werk[hidden] { display: none !important; }
.werk__medien {
  position: relative; display: block; overflow: hidden; aspect-ratio: var(--format, 4 / 3);
  border-radius: 14px; background: rgba(var(--text-rgb), 0.07);
  transform: translateZ(0);
  transition: border-radius 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.werk__bild, .werk__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.45s var(--ease);
}
.werk__video { opacity: 0; }
.werk.spielt .werk__video { opacity: 1; }
.werk__text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; padding: 18px 2px 0; }
.werk__titel { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.65rem); letter-spacing: -0.03em; }
.werk__info { display: flex; gap: 12px; font-size: 0.8rem; color: var(--text-muted); }
.werk__info span + span::before { content: '·'; margin-right: 12px; color: var(--text-dim); }
@media (hover: hover) {
  .werk:hover .werk__medien { border-radius: 26px; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.55); }
  .werk:hover .werk__bild, .werk:hover .werk__video { transform: scale(1.04); }
}

/* Startseite: Auswahl */
.auswahl__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: clamp(48px, 6vw, 80px); }
.auswahl__kopf .section__head { margin-bottom: 0; }
.auswahl__lead { max-width: 40ch; }
.auswahl__mehr { margin-top: clamp(56px, 8vw, 110px); display: flex; justify-content: center; }
.about__weiter { margin-top: 28px; display: flex; justify-content: center; }

/* ---------- Projektseite ------------------------------------------------- */
.projekt__kopf { padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(40px, 6vh, 72px); }
.projekt__kopf .wrap { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.eyebrow__link { text-decoration: none; color: var(--text); }
.eyebrow__link:hover { color: var(--accent-a); }
.projekt__titel { font-size: clamp(2.8rem, 1rem + 7.4vw, 9rem); line-height: 0.95; letter-spacing: -0.055em; max-width: 16ch; }
.projekt__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px 60px; }
.projekt__meta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); }
.projekt__meta div { padding: 16px 32px 0 0; min-width: 150px; }
.projekt__meta dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.projekt__meta dd { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; margin-top: 4px; }

.projekt__buehne { padding-bottom: clamp(40px, 6vw, 90px); }
.projekt__bild {
  position: relative; overflow: hidden; border-radius: 20px;
  background: rgba(var(--text-rgb), 0.07);
  box-shadow: 0 60px 120px -70px rgba(0, 0, 0, 0.6);
}
.projekt__bild img, .projekt__bild video { width: 100%; height: auto; display: block; }
.projekt__bild[data-bildparallax] { aspect-ratio: 3 / 2; }
.projekt__bild[data-bildparallax] img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.projekt__bild--logo[data-bildparallax] img { object-fit: contain; background: transparent; }
.projekt__bild--fenster { background: rgb(var(--surface-rgb)); border: 1px solid var(--line); }
.fenster__leiste { display: flex; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fenster__leiste i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--text-rgb), 0.18); }
.projekt__bild--hoch { max-width: min(620px, 100%); margin-inline: auto; }

.projekt__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 120px); align-items: start; }
@media (max-width: 860px) { .projekt__spalten { grid-template-columns: 1fr; } }
.projekt__satz { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.12; letter-spacing: -0.035em; max-width: 22ch; }
.projekt__ganz { margin-top: clamp(36px, 5vw, 64px); max-width: 420px; }
.projekt__ganz img { border-radius: 14px; border: 1px solid var(--line); }
.projekt__ganz figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--text-dim); }
.projekt__prosa h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); color: var(--text); margin: 1.6em 0 0.5em; }
.projekt__prosa h2:first-child { margin-top: 0; }
.projekt__zwischen { margin-bottom: clamp(36px, 5vw, 64px); }

.projekt__weiter { padding-block: clamp(60px, 10vw, 140px) clamp(120px, 16vw, 220px); }
.weiter {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 40px;
  text-decoration: none; padding-top: 28px; border-top: 1px solid var(--line);
}
.weiter .eyebrow { grid-column: 1 / -1; }
.weiter__titel {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95;
  font-size: clamp(2.4rem, 1rem + 6vw, 7.5rem); transition: transform 0.7s var(--ease);
}
.weiter__bild { width: clamp(140px, 22vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.weiter__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.weiter:hover .weiter__titel { transform: translateX(14px); }
.weiter:hover .weiter__bild img { transform: scale(1.07); }
@media (max-width: 620px) { .weiter { grid-template-columns: 1fr; } .weiter__bild { width: 100%; } }

/* ---------- Über mich ---------------------------------------------------- */
.ueber__kopf { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: clamp(130px, 18vh, 200px) clamp(56px, 8vh, 96px); }
.ueber__buehne {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: clamp(28px, 4vw, 64px);
}
.ueber__text { display: grid; justify-items: start; gap: clamp(22px, 3vw, 36px); }
/* Das Portraet steht rechts, das Loch dahinter ist groesser als der Schirm
   hoch und laeuft rechts aus dem Bild. */
.ueber__portrait {
  justify-self: end; margin: 0; margin-right: clamp(-40px, -2vw, 0px);
  width: clamp(180px, 24vw, 380px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 90px 14px rgba(0, 0, 0, 0.92);
}
.ueber__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .ueber__kopf { align-items: end; }
  .ueber__buehne { grid-template-columns: 1fr; }
  .ueber__portrait { order: -1; margin-right: 0; width: clamp(150px, 42vw, 240px); }
}
.ueber__name { font-size: clamp(3rem, 1rem + 8.4vw, 10.5rem); line-height: 0.92; letter-spacing: -0.055em; text-shadow: 0 0 40px rgba(0, 0, 0, 0.8); }
.ueber__rollen { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; }
.ueber__rollen span {
  padding: 9px 16px; border-radius: 999px; font-size: 0.86rem;
  border: 1px solid rgba(var(--text-rgb), 0.18); background: rgba(var(--bg-rgb), 0.72);
}
.ueber__zwei { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.ueber__zwei .section__head { margin-bottom: 0; }
@media (max-width: 860px) { .ueber__zwei { grid-template-columns: 1fr; } }
.weg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .weg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .weg { grid-template-columns: 1fr; } }
.weg__schritt { position: relative; padding: 28px 28px 34px 0; display: grid; gap: 10px; align-content: start; }
.weg__schritt::before {
  content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-a); box-shadow: 0 0 0 5px rgba(var(--accent-a-rgb), 0.16);
}
.weg__nr { font-family: var(--font-display); font-size: 0.86rem; color: var(--text-dim); letter-spacing: 0.04em; }
.weg__schritt p { color: var(--text-muted); font-size: 0.95rem; }
.weg__schritt .weg__zeit { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.interessen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .interessen { grid-template-columns: 1fr; } }
.interesse {
  padding: clamp(26px, 2.8vw, 38px); border-radius: var(--radius-card); border: 1px solid var(--line);
  background: rgba(var(--surface-rgb), 0.8); display: grid; gap: 14px; align-content: start;
}
.interesse__zeichen {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem;
  background: rgba(var(--accent-a-rgb), 0.2);
}
.interesse p { color: var(--text-muted); font-size: 0.96rem; }
.textlink { color: var(--text); text-underline-offset: 4px; }
.textlink:hover { color: var(--accent-a); }

/* ---------- Experimente -------------------------------------------------- */
.seitenkopf--dunkel .lead { max-width: 52ch; }
.labore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .labore { grid-template-columns: 1fr; } }
.labor {
  position: relative; display: grid; gap: 16px; align-content: start;
  padding: clamp(26px, 2.8vw, 38px); border-radius: var(--radius-card); border: 1px solid var(--line);
  background: rgba(var(--surface-rgb), 0.84);
  transition: transform 0.6s var(--ease), background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.labor.is-active { transform: translateY(-10px); background: rgba(var(--surface-rgb), 0.94); box-shadow: 0 40px 70px -55px rgba(0, 0, 0, 0.9); }
.labor__nr { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: rgba(var(--text-rgb), 0.18); letter-spacing: -0.04em; }
.labor__titel { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.labor__text { color: var(--text-muted); font-size: 0.96rem; }
.labor__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.labor__tags span { font-size: 0.72rem; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-muted); }
.labor__los { justify-self: start; margin-top: 8px; }
.bald { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.bald__text { color: var(--text-muted); }

/* ---------- Rechtliches -------------------------------------------------- */
.recht__inhalt { padding-top: 0; }
.recht__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.48fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
@media (max-width: 900px) { .recht__raster { grid-template-columns: 1fr; } }
.recht__text { display: grid; gap: 18px; max-width: 68ch; color: var(--text-muted); }
.recht__text h2 { color: var(--text); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); margin-top: 22px; }
.recht__text a, .recht__rand a { color: var(--text); text-underline-offset: 3px; }
.recht__rand { position: sticky; top: 120px; display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(var(--surface-rgb), 0.82); }
.recht__rand h2 { font-size: 1.1rem; }
.recht__liste { display: grid; gap: 14px; }
.recht__liste dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.recht__liste dd { font-size: 0.9rem; color: var(--text-muted); margin-top: 2px; }
.placeholder-note { border: 1px dashed var(--line); border-radius: var(--radius-card); padding: 18px 22px; font-size: 0.86rem; color: var(--text-muted); }

/* ---------- Zeiger als Plakette ---------------------------------------- */
.cursor-ring__text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #0B0B0C;
  opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.cursor-ring { transition: opacity 0.2s linear, width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
html.cursor-plakette .cursor-ring {
  width: 92px; height: 92px; margin: -46px 0 0 -46px; opacity: 1 !important;
  background: #F5F5F7; border-color: transparent;
}
html.cursor-plakette .cursor-ring__text { opacity: 1; transform: scale(1); }
html.cursor-plakette .cursor-dot { opacity: 0; }

/* ---------- Zeiger ------------------------------------------------------ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none;
  border-radius: 999px; margin-left: -50%; margin-top: -50%;
}
.cursor-dot { width: 6px; height: 6px; background: var(--text); margin: -3px 0 0 -3px; opacity: 0; transition: opacity 0.3s linear; }
.cursor-ring {
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: 1px solid rgba(var(--text-rgb), 0.5); opacity: 0;
  transition: opacity 0.2s linear;
}
html.cursor-live .cursor-dot { opacity: 1; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Reveal ------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-section) var(--ease), transform var(--dur-section) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

/* ---------- prefers-reduced-motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal], .w__i { opacity: 1 !important; transform: none !important; }
  .scroll-hint__rail::after { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .vorhang__flaeche, .vorhang__flaeche::before, .vorhang__flaeche::after { transition: none !important; }
  html.vorhang-auf .vorhang { visibility: hidden; }
}

@media print {
  .scene, .nav, .scroll-hint, .cursor-dot, .cursor-ring { display: none !important; }
  body { background: #fff; color: #000; }
}



/* ---------- Startseite: grosse Ueberschriften ---------------------------
   Wie auf den Unterseiten tragen die Ueberschriften die Seite, Fliesstext
   gibt es kaum. */
.start__block { padding-block: clamp(120px, 18vh, 220px); }
.start__kopf { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(56px, 8vw, 110px); }
.start__kopf--mitte { justify-items: center; text-align: center; margin-bottom: 0; }
.start__kopf--mitte .eyebrow { justify-content: center; }
.titel-gross {
  font-size: clamp(2.8rem, 1rem + 7vw, 9rem); line-height: 0.94; letter-spacing: -0.055em;
  max-width: 14ch;
}
.services--gross { align-items: stretch; }
.services--gross .service { display: grid; align-content: start; gap: 14px; min-height: clamp(220px, 26vw, 340px); }
.services--gross .service__no { position: static; font-family: var(--font-display); font-size: 0.9rem; color: var(--text-dim); letter-spacing: 0.02em; }
.service__titel-gross { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.1rem); line-height: 1; letter-spacing: -0.045em; margin-top: auto; }
.services--gross .service__lead { margin-top: 0; max-width: 34ch; }
.ueber-kurz {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(28px, 5vw, 96px); min-height: min(80svh, 820px);
}
.ueber-kurz__text { display: grid; justify-items: start; gap: clamp(18px, 2.4vw, 30px); }
/* zwei Zeilen, nie mehr: die Groesse richtet sich nach der Spaltenbreite */
.ueber-kurz__titel {
  font-size: clamp(2.2rem, 0.8rem + 4.6vw, 6.4rem); line-height: 0.96; letter-spacing: -0.055em;
  white-space: nowrap;
}
.ueber-kurz__weiter { margin-top: clamp(8px, 1.6vw, 20px); }
.ueber-kurz__mark { margin: 0; width: clamp(200px, 30vw, 480px); aspect-ratio: 1; display: grid; place-items: center; }
.ueber-kurz__mark img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .ueber-kurz { grid-template-columns: 1fr; min-height: 0; }
  .ueber-kurz__mark { order: -1; justify-self: center; width: min(62vw, 300px); }
  .ueber-kurz__titel { white-space: normal; font-size: clamp(2.1rem, 1rem + 5.4vw, 3rem); }
}



/* ---------- Kontakt ----------------------------------------------------- */
.kontakt__wege { padding-top: 0; }
.weg-karte { text-decoration: none; color: inherit; min-height: clamp(200px, 20vw, 280px); grid-template-rows: auto 1fr auto; }
.weg-karte .labor__nr { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.weg-karte__wert {
  font-family: var(--font-display); font-weight: 600; align-self: end;
  font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.weg-karte__los { font-size: 0.9rem; color: var(--text-muted); transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
a.weg-karte:hover .weg-karte__los { color: var(--accent-a); transform: translateX(6px); }
.anfrage-seite__raster {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 7vw, 120px); align-items: start;
}
.anfrage-seite__raster > .scrim { display: grid; gap: clamp(18px, 2.4vw, 30px); position: sticky; top: 120px; }
.anfrage-seite__titel { font-size: clamp(2.6rem, 1rem + 5.4vw, 7rem); line-height: 0.94; letter-spacing: -0.055em; max-width: 10ch; }
.anfrage-seite .form { max-width: 820px; }
@media (max-width: 900px) {
  .anfrage-seite__raster { grid-template-columns: 1fr; }
  .anfrage-seite__raster > .scrim { position: static; }
}

/* Ein Element mit Reveal und Parallaxe: die Verschiebung gehoert der
   Parallaxe, der Reveal blendet nur ein. */
.js [data-reveal][data-parallax] { transform: none; }
.js [data-reveal][data-parallax].is-in { transition: opacity var(--dur-section) var(--ease); }

/* ---------- 404 -------------------------------------------------------- */
.fehler__kopf { min-height: 100svh; display: grid; align-items: center; }
.fehler__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
/* unsichtbarer Bezugspunkt fuer das schwarze Loch: rechts, im Anschnitt */
.fehler__loch {
  position: absolute; right: 8vw; top: 50%; width: 20vw; aspect-ratio: 1;
  transform: translateY(-50%); pointer-events: none;
}
@media (max-width: 860px) { .fehler__loch { right: -10vw; top: 26%; width: 40vw; } }

/* ---------- Leistungen: angeheftet, drei Phasen ------------------------
   Die Sektion ist --weg hoeher als der Schirm; so lange klebt die Buehne
   fest. Die beiden Marken sind die Stationen des Felds fuer Phase 2 und 3:
   je ein Drittel des Wegs weiter, plus ein halber Schirm, weil das Feld an
   der Bildschirmmitte wechselt. */
.leist { --weg: 300svh; position: relative; height: calc(100svh + var(--weg)); }
.leist__marke { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.leist__marke:nth-of-type(1) { top: calc(var(--weg) / 3 + 50svh); }
.leist__marke:nth-of-type(2) { top: calc(var(--weg) * 2 / 3 + 50svh); }
.leist__buehne {
  position: sticky; top: 0; height: 100svh; display: grid; align-items: center;
  padding-block: clamp(90px, 12vh, 130px) clamp(40px, 6vh, 70px);
}
.leist__raster {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 90px); align-items: center; height: 100%;
}
.leist__text { display: grid; gap: clamp(16px, 2.4vh, 28px); align-content: center; }
.leist__titel { font-size: clamp(2.4rem, 1rem + 4.2vw, 6rem); line-height: 0.94; letter-spacing: -0.055em; max-width: 12ch; }
.leist__liste { list-style: none; margin: clamp(8px, 2vh, 24px) 0 0; padding: 0; display: grid; }
.leist__punkt {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px clamp(16px, 2vw, 28px);
  padding: clamp(14px, 2.2vh, 24px) 0; border-top: 1px solid var(--line);
}
.leist__punkt:last-child { border-bottom: 1px solid var(--line); }
.leist__nr { font-family: var(--font-display); font-size: 0.86rem; color: var(--text-dim); padding-top: 0.5em; }
.leist__name {
  font-size: clamp(1.5rem, 0.9rem + 1.9vw, 2.8rem); line-height: 1.02; letter-spacing: -0.045em;
  transition: color 0.6s var(--ease);
}
/* Der Satz klappt nur unter der aktiven Leistung auf */
.leist__inhalt { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.7s var(--ease); }
.leist__satz {
  overflow: hidden; min-height: 0; margin: 0; max-width: 40ch; color: var(--text-muted);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem); line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.leist__punkt.is-aktiv .leist__inhalt { grid-template-rows: auto 1fr; }
.leist__punkt.is-aktiv .leist__satz { opacity: 1; transform: none; padding-top: 10px; transition-delay: 0.12s; }
/* Nicht aktive Leistungen treten zurueck */
.js .leist__punkt .leist__name { color: rgba(var(--text-rgb), 0.32); }
.js .leist__punkt.is-aktiv .leist__name { color: var(--text); }
/* Fortschritt der aktiven Phase: ein Strich auf der oberen Linie */
.leist__fort {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent-a);
  transform-origin: left; transform: scaleX(var(--fort, 0));
}
.leist__form { justify-self: center; width: 100%; aspect-ratio: 1; max-height: 86svh; }
/* Ohne Skript stehen alle drei Saetze offen */
html:not(.js) .leist__inhalt { grid-template-rows: auto 1fr; }
html:not(.js) .leist__satz { opacity: 1; transform: none; }

@media (max-width: 860px), (max-aspect-ratio: 11/10) {
  .leist { --weg: 260svh; }
  .leist__buehne { align-items: stretch; padding-top: 80px; padding-bottom: 28px; }
  /* oben die Form, unten die Liste */
  .leist__raster { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
  .leist__form { order: -1; aspect-ratio: auto; height: 100%; max-height: none; }
  .leist__text { align-content: end; gap: 10px; }
  .leist__titel { font-size: clamp(1.9rem, 1rem + 4vw, 2.8rem); }
  .leist__punkt { padding: 12px 0; }
  .leist__name { font-size: clamp(1.25rem, 0.9rem + 2.4vw, 1.8rem); }
}

/* Alle Knoepfe gleich gross; auf dem Telefon einheitlich etwas kompakter */
@media (max-width: 620px) {
  .btn, .pille { padding: 14px 24px; font-size: 0.9rem; }
}