/* =========================================================
   obsrv* — Portfolio
   CI: Tiefblau + Creme, Wellenlinien-Textur, Schrift "The Poet"
   ---------------------------------------------------------
   Alle Design-Token stehen in tokens.css und werden dort erklaert.
   In dieser Datei steht kein Farbwert und keine Schriftgroesse als
   Zahl, sondern nur var(--token) (BS-5.5).
   ========================================================= */

/* Schreibschrift der Wortmarke und der Ueberschriften */
@font-face {
  font-family: "The Poet";
  src: url("/assets/fonts/ThePoetRegular.woff2") format("woff2"),
       url("/assets/fonts/ThePoetRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter als variabler Schnitt: eine Datei fuer alle Staerken von
   100 bis 900. Deshalb steht im font-weight eine Spanne und kein
   einzelner Wert — der Browser waehlt daraus. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top haelt Sprungziele unter der fixierten Kopfzeile
   frei — sonst verschwindet die angesprungene Ueberschrift darunter. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }
#inhalt:focus { outline: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-7);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: var(--ls-snug);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--cream); }

/* ---------- Tastaturbedienung ----------
   Ein einziger Rahmen fuer alles, was angesteuert werden kann. Er
   erscheint nur bei Bedienung ueber die Tastatur (:focus-visible),
   nicht beim Klicken mit der Maus (BS-9.2). */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--r);
}
/* Auf blauem Grund waere Blau auf Blau unsichtbar. */
.footer :focus-visible,
.hero :focus-visible,
.nav :focus-visible { --focus-color: var(--cream); }

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

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: 0;
}
.eyebrow {
  font-size: var(--fs-2);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 var(--ueberzeile-abstand);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1.05; }
h1 { font-size: var(--fs-d5); }
h2 { font-size: var(--fs-d4); }
h3 { font-size: var(--fs-d2); letter-spacing: var(--ls-tight); }
p  { margin: 0 0 1.1em; }
.lead { font-size: var(--fs-8); line-height: 1.65; color: var(--graphite); max-width: 64ch; }
.lead--sm { font-size: var(--fs-6); line-height: 1.65; max-width: 58ch; }
.muted { color: var(--grey); }
/* The Poet endet rund 8 % ueber der Grundlinie, die Grotesk 1 % darunter.
   Die Verschiebung nach unten laesst beide Schriften optisch auf einer
   Linie abschliessen. */
/* Zeilenumbruch, der nur in der englischen Fassung greift */
br.nur-en,
.nur-en-text { display: none; }
html[lang="en"] br.nur-en { display: inline; }
html[lang="en"] .nur-en-text { display: inline; }

.hl, .script { font-family: var(--font-display); color: var(--blue);
  font-size: 1.22em; line-height: 1; letter-spacing: var(--ls-normal); padding: 0 .04em;
  position: relative; top: .13em; z-index: 2; }
/* Schreibschrift bleibt für bewusst dekorative Momente verfügbar: class="script" */
/* The Poet steigt fast nur nach oben (Oberlänge ~101 %, Unterlänge ~6 %).
   Deshalb bleibt der Zeilenabstand eng — die Luft kommt oben dazu. */
.h-script { line-height: 1.12; padding-top: .34em; }
.lead:has(.hl), .lead:has(.script) { line-height: 1.75; }
.section { padding: clamp(72px, 11vw, 150px) 0; }
.section--tight { padding: clamp(48px, 7vw, 90px) 0; }
/* Auf der Kontaktseite folgt die grosse Mailadresse direkt auf den Seitenkopf.
   Dessen unterer Abstand reicht dafuer aus — der eigene oben kam noch einmal
   dazu und riss eine Luecke von 150 px auf. Die Adresse gehoert zum Kopf,
   nicht in einen eigenen Abschnitt weit darunter. */
.pagehead + .section--tight { padding-top: 0; }
/* Der Hinweis auf das Formular steht in der Kopfzeile rechts, unter dem
   Einleitungssatz. Beide zusammen sind die rechte Spalte des Rasters. */
.pagehead__text { display: grid; gap: var(--sp-3); }
.mail-hinweis { margin: 0; max-width: 46ch; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Wellenlinien-Textur (CI) ---------- */
.waves {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(var(--cream-rgb) / .22) 0px,
    rgb(var(--cream-rgb) / .22) 1px,
    transparent 1px,
    transparent 13px
  );
}
.waves--soft {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(var(--ink-rgb) / .05) 0px,
    rgb(var(--ink-rgb) / .05) 1px,
    transparent 1px,
    transparent 13px
  );
}

/* ---------- Asterisk (Logo-Symbol) ---------- */
.ast { display: inline-block; width: 1em; height: 1em; vertical-align: -0.08em; }
.ast svg { width: 100%; height: 100%; display: block; }
.ast--spin svg { transition: transform var(--dur-3) var(--ease); }
/* Stern hinter Überschriften: etwas tiefer, damit er die Zeile darüber nicht berührt */
.ast-head { width: .23em; height: .23em; vertical-align: top; position: relative;
  top: .12em; margin-left: .16em; }
.ast-blue { color: var(--blue); }
.ast-inline { width: 13px; height: 13px; }
a:hover > .ast--spin svg,
button:hover .ast--spin svg,
.is-active .ast--spin svg { transform: rotate(90deg); }

/* ---------- Logo-Vektor (ersetzt die Schrift-Wortmarke) ---------- */
.brand.has-logo, .hero__mark.has-logo { font-size: 0; gap: 0; }
.brand.has-logo { height: 34px; }
.brand.has-logo svg { display: block; height: 34px; width: auto; }
.footer .brand.has-logo { height: auto; }
.footer .brand.has-logo svg { height: clamp(42px, 5.4vw, 68px); }
.hero__mark.has-logo svg { display: block; width: var(--logo-hero-breite); height: auto; overflow: visible; }
.hero__mark.has-logo .logo-ast { transform-box: fill-box; transform-origin: 50% 50%;
  animation: slowspin var(--dur-spin) linear infinite; will-change: transform; }
.brand.has-logo svg, .hero__mark.has-logo svg { transition: color var(--dur-2) var(--ease); }

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgb(var(--paper-rgb) / 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  color: var(--ink);
}
.header__inner { width: 100%; max-width: var(--wrap); margin-inline: auto;
  /* Links wie rechts derselbe Seitenrand: Die Wortmarke steht damit
     buendig zum Inhalt, Navigation und Sprachschalter enden am selben
     Rand auf der anderen Seite. */
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 24px; }
/* Die Navigation wird nach rechts geschoben, der Sprachschalter sitzt
   direkt daneben — dadurch steht die Leiste auf allen Seiten gleich. */
.header__inner .nav { margin-left: auto; }

.brand { position: relative; z-index: 101; display: inline-flex; align-items: baseline; gap: .06em; font-family: var(--font-display);
  font-size: var(--fs-brand); line-height: 1; letter-spacing: var(--ls-normal); }
.brand .ast { width: .42em; height: .42em; align-self: flex-start; margin-top: .1em; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
  position: relative; padding: 4px 0; opacity: .78; transition: opacity var(--dur-1) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: currentColor; transition: right var(--dur-2) var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { opacity: 1; }

.header--solid { background: rgb(var(--paper-rgb) / .88); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line); color: var(--ink); }
/* Wortmarke im Header: auf hellem Grund blau, auf blauem Grund creme */
.header .brand { color: var(--blue); }
.header--onDark .brand,
body.menu-open .header .brand { color: var(--cream); }
.header--onDark { color: var(--cream); }
.header--onDark.header--solid { background: rgb(var(--blue-deep-rgb) / .82); border-bottom-color: rgb(var(--cream-rgb) / .18); color: var(--cream); }

.burger { position: relative; z-index: 101; display: none; width: 40px; height: 40px; margin-right: -8px; background: none; border: 0;
  cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: var(--dur-2) var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1px;
  background: currentColor; transition: var(--dur-2) var(--ease); }
.burger span::before { top: -7px; } .burger span::after  { top: 7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sprachumschalter ---------- */
.lang { display: inline-flex; align-items: center; gap: 6px; margin-left: 26px;
  font-size: var(--fs-2); letter-spacing: var(--ls-wide); }
/* 24 x 24 ist die Untergrenze fuer Bedienflaechen mit der Maus
   (WCAG 2.2, 2.5.8). Am Finger sind es 44 — siehe (pointer: coarse)
   weiter unten. Ohne die Untergrenze war der Knopf 21 px breit. */
.lang__knopf { background: none; border: 0; cursor: pointer; padding: 4px 2px;
  min-width: 24px; min-height: 24px;
  color: inherit; font: inherit; letter-spacing: inherit; opacity: var(--op-leise);
  transition: opacity var(--dur-1) var(--ease); }
.lang__knopf:hover { opacity: .85; }
.lang__knopf.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lang__trenner { opacity: var(--op-leise); }

@media (max-width: 47.999rem) {
  .lang { margin-left: auto; margin-right: 18px; position: relative; z-index: 101; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--blue-deep); color: var(--cream); position: relative; }
.footer__top { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 48px;
  padding: clamp(56px, 7vw, 96px) 0 56px; }
.footer .brand { font-size: var(--fs-brand-footer); }
.footer__claim { color: rgb(var(--cream-rgb) / .62); max-width: 30ch; margin-top: 14px; font-size: var(--fs-5); }
.footer h4, .footer__head { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: rgb(var(--cream-rgb) / var(--op-leise)); margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li a { font-size: var(--fs-5); color: rgb(var(--cream-rgb) / .85); transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease); }
.footer li a:hover { color: var(--cream); padding-left: 6px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  padding: 22px 0 30px; border-top: 1px solid rgb(var(--cream-rgb) / .16);
  font-size: var(--fs-3); letter-spacing: var(--ls-normal); color: rgb(var(--cream-rgb) / var(--op-leise)); }

.rechtshinweis { font-size: var(--fs-2); color: var(--grey); margin-top: var(--sp-2);
  padding-left: var(--sp-3); border-left: 2px solid var(--line-strong); }

/* =========================================================
   HERO / LANDING
   ========================================================= */
.hero {
  min-height: 100svh; background: var(--blue-deep); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  padding-top: var(--header-h);
}
.hero__bg { display: none; }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter); }
.hero__mark {
  font-family: var(--font-display); line-height: .84;
  font-size: var(--fs-mark); display: flex; align-items: flex-start; gap: .02em;
  /* Platz fuer die spaeter eingesetzte Wortmarke, sonst rutscht der Hero nach. */
  min-height: calc(var(--logo-hero-breite) / var(--logo-hero-verhaeltnis));
}
.hero__mark .ast { width: .27em; height: .27em; margin-top: .07em; }
.hero__mark .ast svg { animation: slowspin 26s linear infinite; }
@keyframes slowspin { to { transform: rotate(360deg); } }

.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 46px; margin-top: clamp(18px, 2.6vw, 30px);
  padding-top: 22px; border-top: 1px solid rgb(var(--cream-rgb) / .22); }
.hero__meta span { font-size: var(--fs-3); letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgb(var(--cream-rgb) / .66); }
.hero__line { font-size: var(--fs-hero-line); line-height: 1.35; max-width: none;
  white-space: nowrap; color: var(--cream); letter-spacing: var(--ls-tight);
  margin-top: clamp(26px, 4vw, 52px); }

.scrollcue { position: absolute; right: 0; bottom: 34px; left: auto; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: var(--fs-1); letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgb(var(--cream-rgb) / .6);
  transition: color var(--dur-2) var(--ease); }
.scrollcue:hover { color: var(--cream); }
.scrollcue svg { display: block; animation: cue-bob var(--dur-cue) ease-in-out infinite; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   BUTTONS / LINKS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--cream); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--stone); }
.btn--ghost:hover { background: var(--blue); border-color: var(--blue); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--blue-deep); border-color: var(--cream); }
.btn--light:hover { background: transparent; color: var(--cream); border-color: var(--cream); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-4);
  letter-spacing: var(--ls-wide); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link-arrow svg { transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover svg { transform: translateX(6px); }

/* =========================================================
   PAGE HEAD
   ========================================================= */
.pagehead { padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(36px, 5vw, 60px); }
.pagehead h1 { max-width: 16ch; }
.pagehead__row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end; }
/* Der kleine Text rechts stand unten buendig mit der Ueberschrift. Weil die
   Ueberschriften ein- oder zweizeilig sind, begann er auf jeder Seite auf einer
   anderen Hoehe — auf der Projektseite bei 253 px, auf Ueber mich bei 316 px.
   Jetzt beginnt er ueberall auf Hoehe der Ueberschrift, also um die Ueberzeile
   nach unten versetzt. Ausgenommen die Reihe mit dem Knopf auf der Startseite,
   die weiter unten buendig sitzt. */
.pagehead__row:not(.pagehead__row--unten) { align-items: start; }
/* Steht im Lead eine Handschrift oder eine Hervorhebung, gilt fuer ihn
   Zeilenabstand 1,75 statt 1,65 (siehe .lead:has(.script)). Der Kasten wird
   dadurch oben um 0,75 px luftiger — das muss hier abgezogen werden. */
.pagehead__row:not(.pagehead__row--unten):has(.lead .script),
.pagehead__row:not(.pagehead__row--unten):has(.lead .hl) { --lead-bis-oberlaenge: 7.71px; }
.pagehead__row:not(.pagehead__row--unten) > :last-child {
  padding-top: calc(var(--fs-2) * var(--lh-base) + var(--ueberzeile-abstand)
                    + var(--h1-bis-oberlaenge) * var(--fs-d5)
                    - var(--lead-bis-oberlaenge)); }

/* =========================================================
   FILTER
   ========================================================= */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--graphite);
  border-radius: 999px; padding: 9px 17px 9px 13px;
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: all var(--dur-2) var(--ease);
}
.filter .ast { width: 18px; height: 18px; color: var(--stone); transition: color var(--dur-2) var(--ease); }
.filter:hover { border-color: var(--blue); color: var(--blue); }
.filter:hover .ast { color: var(--blue); }
.filter.is-active { background: var(--blue); border-color: var(--blue); color: var(--cream); }
.filter.is-active .ast { color: var(--cream); }
.filter__count { font-size: var(--fs-1); opacity: var(--op-leise-klein); }
.filterbar__meta { margin-left: auto; font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--grey); }

/* =========================================================
   PROJEKT-GRID + DROPZONES
   ========================================================= */
.grid-projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
  padding-top: clamp(36px, 5vw, 60px); }
.card { grid-column: span 4; display: flex; flex-direction: column; gap: 16px;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.card--wide { grid-column: span 6; }
.card.is-hidden { display: none; }

.dropzone {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dropzone--wide { aspect-ratio: var(--bild-breit); }
.dropzone--kino { aspect-ratio: var(--bild-kino); }

/* Curn-06.mp4 hat oben und unten je vier Zeilen Schwarz fest einbelichtet
   (1280 x 712, Inhalt nur 1280 x 704). Die Datei bleibt, wie sie geliefert
   wurde; der Rahmen zoomt stattdessen um genau 712/704 hinein, dann liegen
   die Balken ausserhalb. Groesse des Feldes bleibt unveraendert. */
.dropzone[data-slot="projekt-14-a"] video { transform: scale(1.0114); }

/* Die Videos sind stumm und laufen in der Schleife, Vollbild ist gesperrt.
   Beide Knoepfe haben damit nichts mehr zu tun — Chrome und Safari zeigen sie
   trotzdem an, nur ausgegraut. Hier werden sie ausgeblendet. Firefox kennt
   diese Bezeichner nicht und behaelt seine eigene Leiste; das Netz in site.js
   faengt das Vollbild dort ab. */
.dropzone video::-webkit-media-controls-mute-button,
.dropzone video::-webkit-media-controls-volume-slider,
.dropzone video::-webkit-media-controls-volume-control-container,
.dropzone video::-webkit-media-controls-fullscreen-button { display: none; }
.dropzone--portrait { aspect-ratio: 3 / 4; }
.dropzone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--ink); display: block; z-index: 1; }
.dropzone--ganz video { object-fit: contain; background: var(--white); }
.dropzone.has-video { cursor: default; }
.dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease), filter var(--dur-3) var(--ease); }
.card:hover .dropzone img { transform: scale(1.035); }
/* Bild vollstaendig zeigen statt fuellen — der Rest bleibt weiss */
/* Titelbild Claus Curn: das Motiv sitzt rechts im Bild, deshalb wird der
   Ausschnitt nach rechts geschoben — dadurch rueckt der Inhalt nach links
   und der Laptop-Bildschirm ist ganz zu sehen. 50% waere mittig. */
.dropzone[data-slot="projekt-14"] img { object-position: 75% 50%; }

.dropzone--ganz { background: var(--white); }
.dropzone--ganz img { object-fit: contain; }
.dropzone__ph { padding: 24px; display: grid; gap: 10px; justify-items: center; color: var(--grey); pointer-events: none; }
.dropzone__ph .ast { width: 22px; height: 22px; color: var(--stone); }
.dropzone__ph b { font-weight: 400; font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--graphite); }
.dropzone__ph code { font-size: var(--fs-2); letter-spacing: var(--ls-normal); color: var(--grey);
  background: rgb(var(--ink-rgb) / .045); padding: 3px 7px; border-radius: 3px; }
.dropzone__ph small { font-size: var(--fs-2); letter-spacing: var(--ls-normal); }
.dropzone.is-over { border-color: var(--blue); background: var(--blue-soft); }
.dropzone.is-over .dropzone__ph .ast { color: var(--blue); }
.dropzone.has-img .dropzone__ph { display: none; }
.dropzone__clear {
  position: absolute; top: 10px; right: 10px; z-index: 3; opacity: 0;
  border: 0; border-radius: 999px; cursor: pointer; padding: 7px 12px;
  background: rgb(var(--ink-rgb) / .7); color: var(--white); font-size: var(--fs-1); letter-spacing: var(--ls-wide); text-transform: uppercase;
  backdrop-filter: blur(6px); transition: opacity var(--dur-1) var(--ease);
}
.dropzone.has-img:hover .dropzone__clear { opacity: 1; }

.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.card__meta h3 { letter-spacing: var(--ls-tight); }
.card__year { font-size: var(--fs-3); letter-spacing: var(--ls-wide); color: var(--grey); }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.card__tags span { font-size: var(--fs-1); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--grey);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.card p { font-size: var(--fs-5); color: var(--graphite); margin: 0; max-width: 46ch; }

.empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--grey); display: none; }
.empty.is-visible { display: block; }

/* =========================================================
   SPLIT / ÜBER MICH
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 92px); align-items: start; }
.split--narrow { grid-template-columns: .85fr 1.15fr; }
/* Anfrageseite: das Formular steht im Mittelpunkt, der Hinweis daneben ist schmal */
.split--form { grid-template-columns: .58fr 1.42fr; gap: clamp(32px, 5vw, 80px); }
.aside-note { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
.aside-note__small { font-size: var(--fs-4); line-height: 1.9; color: var(--grey);
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 34ch; }
.aside-note__small a { color: var(--ink); border-bottom: 1px solid var(--line);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.aside-note__small a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.stack { display: grid; gap: 26px; }

.list-facts { list-style: none; margin: 0; padding: 0; }
.list-facts li { display: grid; grid-template-columns: 130px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-6); }
.list-facts b { font-weight: 400; font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); padding-top: 3px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 158px 1fr; gap: 24px; }
.timeline time { font-size: var(--fs-3); letter-spacing: var(--ls-wide); color: var(--blue); padding-top: 4px; }
.timeline h4, .timeline__titel { font-size: var(--fs-7); font-weight: 400; margin: 0 0 4px; letter-spacing: var(--ls-snug); }
.timeline p { font-size: var(--fs-5); color: var(--graphite); margin: 0; }

/* =========================================================
   FORMULAR
   ========================================================= */
.form { display: grid; gap: 30px; }
.field { display: grid; gap: 9px; }
.field > label { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 12px 2px; font-size: var(--fs-7); letter-spacing: var(--ls-snug); border-radius: 0;
  transition: border-color var(--dur-1) var(--ease);
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
/* Beim Tippen genuegt die blaue Unterkante. Wer mit der Tastatur
   navigiert, bekommt zusaetzlich den allgemeinen Fokusrahmen —
   deshalb wird das outline hier nur fuer die Maus abgeschaltet. */
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--blue); }
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) { outline: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey); }
.field select { background-image: none; border-bottom: 1px solid var(--line-strong); cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
/* Gleiche Maße wie die Filter auf der Projekte-Seite */
.chip span {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px 9px 13px;
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--graphite);
  transition: all var(--dur-1) var(--ease);
}
.chip span .ast { width: 18px; height: 18px; color: var(--stone); transition: color var(--dur-1) var(--ease); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--cream); }
.chip input:checked + span .ast { color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.chip span:hover { border-color: var(--blue); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.form__note { font-size: var(--fs-3); color: var(--grey); max-width: 44ch; }
.check-inline { display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-4); color: var(--graphite); }
.check-inline input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--blue); width: 15px; height: 15px; }

.formstatus { font-size: var(--fs-4); color: var(--blue); display: none; }
.formstatus.is-visible { display: block; }

/* =========================================================
   BLAUE SEKTION
   ========================================================= */
.band { background: var(--blue-deep); color: var(--cream); position: relative; overflow: hidden; }
.band .eyebrow { color: rgb(var(--cream-rgb) / .6); }
.band .lead { color: rgb(var(--cream-rgb) / .75); }
.band__inner { position: relative; z-index: 2; }

/* =========================================================
   MUSIK
   ========================================================= */
/* min-width: 0 an den Rasterkindern: Ohne das behalten sie ihre
   Mindestbreite aus dem Inhalt und wachsen ueber die Spalte hinaus.
   Auf schmalen Bildschirmen lief die Seite dadurch seitlich ueber. */
.player { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.player > * { min-width: 0; }
.player__frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--sand); min-height: 420px; }
.player__frame iframe { display: block; width: 100%; height: 520px; border: 0; }
.player__hint { font-size: var(--fs-3); color: var(--grey); margin-top: 14px; }

/* Einwilligungskarte vor dem Spotify-Player */
.consent { min-height: 420px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 14px; padding: clamp(28px, 5vw, 52px); }
.consent__mark { width: 26px; height: 26px; color: var(--stone); }
.consent__title { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--grey); margin: 0; }
.consent__text { font-size: var(--fs-5); line-height: 1.65; color: var(--graphite);
  max-width: 44ch; margin: 0; }
.consent__small { font-size: var(--fs-3); line-height: 1.6; color: var(--grey);
  max-width: 42ch; margin: 6px 0 0; }
.consent__small a { color: var(--blue); border-bottom: 1px solid var(--stone); }
.consent__small a:hover { border-bottom-color: var(--blue); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 18px 0 18px 52px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-6); color: var(--graphite); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 22px;
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); color: var(--blue); }
.steps li b { font-weight: 400; color: var(--ink); }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.contact-cell { background: var(--paper); padding: clamp(26px, 3.4vw, 44px); display: grid; gap: 10px; align-content: start;
  transition: background var(--dur-2) var(--ease); }
.contact-cell:hover { background: var(--sand); }
.contact-cell h4, .contact-cell__titel { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); }
.contact-cell a, .contact-cell p { font-size: var(--fs-d1); letter-spacing: var(--ls-tight); margin: 0; }
/* Die Zusatzzeile unter der Angabe — Sprechzeiten, „auch remote", Prüfungsphasen.
   Sie traegt .u-klein, aber .contact-cell p ist staerker und hat den Wert wieder
   ueberschrieben; deshalb hier noch einmal ausdruecklich. Eine Stufe kleiner als
   die Angabe darueber, damit die Rangfolge sichtbar wird. */
.contact-cell p.u-klein { font-size: var(--fs-5); letter-spacing: var(--ls-normal); }
.contact-cell a { border-bottom: 1px solid transparent; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); width: fit-content; }
.contact-cell a:hover { color: var(--blue); border-bottom-color: var(--blue); }

.bigmail { display: inline-block; position: relative; font-size: var(--fs-d3);
  font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1.2; color: var(--blue);
  word-break: break-word; transition: color var(--dur-2) var(--ease); }
.bigmail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em;
  height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease); }
.bigmail:hover { color: var(--ink); }
.bigmail:hover::after { transform: scaleX(1); }

/* ---------- Marquee (Textband) ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.marquee__track { display: flex; gap: 0; width: max-content;
  animation: slide 38s linear infinite; will-change: transform; }
.marquee__track > span > span { display: inline-block; }
/* Nur das aeussere Band, nicht jedes span darin. Auf der Startseite
   stecken die Woerter in eigenen <span>-Elementen (wegen data-en fuer
   die englische Fassung). Mit dem frueheren Selektor .marquee span
   bekam jedes Wort zusaetzlich padding-right: 44px — der Abstand zum
   Asterisk war dadurch 88 px statt 44. */
.marquee__track > span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px;
  font-size: var(--fs-4); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); white-space: nowrap; }
/* Die Laufweite (letter-spacing) wird auch hinter dem letzten Buchstaben
   eines Wortes gesetzt. Der Abstand Wortende → Asterisk waere dadurch um
   genau diesen Betrag groesser als Asterisk → Wortanfang. Das negative
   margin-left holt ihn wieder herein; in em, damit es der Laufweite folgt. */
.marquee .ast { width: 11px; height: 11px; color: var(--blue); margin-left: -0.18em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 130%); z-index: 200;
  background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: 999px;
  font-size: var(--fs-3); letter-spacing: var(--ls-normal); box-shadow: 0 14px 40px rgb(var(--ink-rgb) / .22);
  transition: transform var(--dur-3) var(--ease); max-width: min(90vw, 560px); text-align: center; }
.toast.is-visible { transform: translate(-50%, 0); }
.toast code { background: rgb(var(--white-rgb) / .14); padding: 2px 7px; border-radius: 3px; font-size: var(--fs-2); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 63.999rem) {
  .card { grid-column: span 6; }
  .card--wide { grid-column: span 12; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .player { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .pagehead__row { grid-template-columns: 1fr; align-items: start; }
  /* Einspaltig steht der Text ohnehin unter der Ueberschrift — der Versatz
     waere dort nur eine unerklaerliche Luecke. */
  .pagehead__row:not(.pagehead__row--unten) > :last-child { padding-top: 0; }
}
@media (max-width: 47.999rem) {
  :root { --header-h: 64px; }
  .burger { display: inline-flex; }

  /* Wortmarke und Menue-Button folgen dem Untergrund: blau auf hellen
     Flaechen, creme auf blauen. Ohne Ueberblendung, sonst waere das
     Zeichen beim Wechsel kurz creme auf weiss — also unsichtbar. */
  .header .brand,
  .header .burger { color: var(--blue); transition: none; }
  .header--onDark .brand,
  .header--onDark .burger,
  body.menu-open .header .brand,
  body.menu-open .header .burger { color: var(--cream); }
  .brand.has-logo svg { transition: none; }
  /* Die Striche uebernehmen die Farbe sofort; animiert wird nur noch die
     Bewegung zum Kreuz beim Oeffnen. */
  .burger span { transition: transform var(--dur-2) var(--ease); }
  .burger span::before,
  .burger span::after { transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease); }
  .nav {
    position: fixed; inset: 0; background: var(--blue-deep); color: var(--cream);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 6px; padding: 0 var(--gutter); transform: translateY(-100%);
    transition: transform var(--dur-3) var(--ease); z-index: 99;
  }
  body.menu-open .nav { transform: none; }
  body.menu-open { overflow: hidden; }
  .nav a { font-size: var(--fs-nav-mobil); letter-spacing: var(--ls-tight); text-transform: none; opacity: 1; padding: 10px 0; }
  .nav a::after { display: none; }
  /* Am Handy nie ein backdrop-filter am Header: Er macht ihn zum
     Bezugsrahmen fuer fixierte Kinder. Das Menue wuerde dann auf die
     Hoehe der Kopfzeile zusammenschrumpfen — offen waere nur der erste
     Eintrag zu sehen, geschlossen blieben die Eintraege stehen, weil
     translateY(-100%) nur noch 63 statt 812 Pixel verschiebt. */
  .header--solid { backdrop-filter: none; -webkit-backdrop-filter: none; }

  body.menu-open .header {
    color: var(--cream);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .card, .card--wide { grid-column: span 12; }
  .split, .split--narrow, .split--form, .form__row { grid-template-columns: 1fr; }
  .aside-note { position: static; }
  .footer__top { grid-template-columns: 1fr; }
  .list-facts li { grid-template-columns: 1fr; gap: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .hero__mark { font-size: 25vw; }
  /* Am Handy steht der Hinweis unter der Meta-Zeile statt daneben */
  .scrollcue { position: static; margin: 30px 0 0 auto; width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  /* Alles, was sich bewegt, kommt zur Ruhe — ohne Ausnahme (BS-11.3). */
  * {
    animation-duration: var(--dur-0);
    animation-iteration-count: 1;
    transition-duration: var(--dur-0);
  }
  html { scroll-behavior: auto; }

  /* Die Dauerschleifen werden ganz abgeschaltet statt nur beschleunigt:
     Bei animation-duration: 1ms spraenge das Element in den Endzustand
     der Bewegung — der Scroll-Pfeil stuende dann 7 px zu tief. */
  .logo-ast,
  .hero__mark .ast svg,
  .scrollcue svg { animation: none; transform: none; }

  /* Das Laufband behaelt seine Bewegung, steht aber still: Es hat einen
     eigenen Schalter, und wer es trotz der Einstellung sehen will, soll
     es starten koennen. Die Laufzeit steht als Inline-Angabe am Element
     und bleibt davon unberuehrt; hier wird nur die Wiederholung
     zurueckgeholt, die die Sammelregel oben auf 1 gesetzt hat. */
  .marquee__track { animation-iteration-count: infinite; }

  /* Die Einblendungen beim Scrollen sind sofort da statt zu wandern. */
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   PROJEKT-DETAIL + OVERLAY
   ========================================================= */
/* =========================================================
   HINWEIS BEIM DARUEBERFAHREN
   Ein handgezeichnet wirkender Bogen schwingt unter dem Knopf
   nach rechts weg, die Spitze zeigt zurueck auf ihn. Am Ende
   des Bogens steht der Text — ohne Kasten, nur Schrift, leicht
   nach rechts versetzt. Der Text kommt aus data-hinweis.
   Auch bei Tastaturbedienung sichtbar (:focus-visible).
   ========================================================= */
.hinweis { position: relative; }

/* Der Bogen. Als SVG, weil clip-path nur Ecken kann, keine Kurven.
   Die Farbe %238C8F96 ist --grey; im data:-URL muss # als %23 stehen. */
.hinweis::before {
  content: '';
  position: absolute; left: calc(50% + 2px); top: calc(100% + 13px);
  width: 48px; height: 34px;
  transform: translate(-6px, -5px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34' fill='none' stroke='%238C8F96' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M45 32C34 31 17.5 27.5 10.5 6'/%3E%3Cpath d='M5.5 13 10 4.5 17 10'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

/* Der Text: frei stehend, kein Hintergrund, am Ende des Bogens */
.hinweis::after {
  content: attr(data-hinweis);
  position: absolute; left: calc(50% + 62px); top: calc(100% + 42px);
  transform: translate(-6px, -5px);
  width: max-content; max-width: 165px;
  color: var(--graphite);
  font-size: var(--fs-2); line-height: 1.5; letter-spacing: var(--ls-normal);
  font-weight: 400; text-transform: none; text-align: left;
  white-space: normal;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.hinweis:hover::before, .hinweis:focus-visible::before,
.hinweis:hover::after,  .hinweis:focus-visible::after {
  opacity: 1; transform: translate(0, 0);
}

/* Auf Touchgeraeten gibt es kein Darueberfahren — dort steht der
   Text dauerhaft klein unter dem Knopf, ohne Bogen.

   Dasselbe gilt in sehr schmalen Fenstern, auch mit Maus: Der Bogen
   samt Text steht absolut und ragt rund 220 px nach rechts. Unter
   30rem schob er die Musikseite auf 459 px Breite und erzeugte eine
   waagrechte Bildlaufleiste (BS-7.2). */
@media (hover: none), (max-width: 30rem) {
  .hinweis::before { display: none; }
  .hinweis::after {
    position: static; transform: none; opacity: 1;
    display: block; margin: 8px 0 0;
    /* width: max-content aus der Grundregel muss hier weg — sonst steht
       der Satz auf einer einzigen Zeile und macht den Knopf breiter als
       das Fenster. max-width allein genuegt nicht dagegen. */
    width: auto; max-width: none;
    color: var(--grey);
  }
}

.dropzone__pick {
  position: absolute; bottom: 10px; right: 10px; z-index: 3; opacity: 0;
  border: 0; border-radius: 999px; cursor: pointer; padding: 7px 12px;
  background: rgb(var(--ink-rgb) / .7); color: var(--white); font-size: var(--fs-1); letter-spacing: var(--ls-wide);
  text-transform: uppercase; backdrop-filter: blur(6px); transition: opacity var(--dur-1) var(--ease);
}
.dropzone.has-img:hover .dropzone__pick { opacity: 1; }
/* Bei Videos sitzt unten rechts die Steuerung — der Knopf weicht nach oben aus. */
.dropzone.has-video .dropzone__pick { bottom: auto; top: 10px; left: 10px; right: auto; }
.dropzone.has-img { cursor: zoom-in; }

.card__meta h3.is-link { cursor: pointer; transition: color var(--dur-1) var(--ease); }
.card__meta h3.is-link:hover { color: var(--blue); }

.card__detail[hidden] { display: none; }
.detail__text p { font-size: var(--fs-8); line-height: 1.65; color: var(--graphite); max-width: 62ch; }
.detail__meta { list-style: none; margin: 34px 0 0; padding: 0;
  border-top: 1px solid var(--line); }
.detail__meta li { display: grid; grid-template-columns: 130px 1fr; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-5); }
.detail__meta b { font-weight: 400; font-size: var(--fs-2); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--grey); padding-top: 3px; }
.detail__gallery { display: grid; gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
/* Zwei kleine Hochformate am Anfang der Detailansicht */
.detail__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(28px, 4vw, 44px); }
.detail__pair--unten { margin: clamp(28px, 4vw, 48px) 0 0; }

/* Drei Hochformate nebeneinander — fuer die Fotostrecken, wo ein
   Querformat das Bild kippen wuerde. */
.detail__hoch { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(28px, 4vw, 48px); }

/* Ein breites Videofeld am Anfang — statt der beiden Hochformate.
   Sobald ein Video zugeordnet ist, nimmt die Kachel dessen eigenes
   Seitenverhaeltnis an (siehe paint() in site.js); 16/9 ist nur das
   Format des leeren Platzhalters. */
.detail__film { margin-bottom: clamp(28px, 4vw, 44px); }
.dropzone--video { aspect-ratio: 16 / 9; background: var(--ink); }
.dropzone--video .dropzone__ph b,
.dropzone--video .dropzone__ph small,
.dropzone--video .dropzone__ph code { color: rgb(var(--paper-rgb) / .72); }
.dropzone--video .dropzone__ph .ast { color: rgb(var(--paper-rgb) / .5); }

/* Online bleiben leere Bildfelder unsichtbar */
body.nur-lesen .dropzone:not(.has-img) { display: none; }
body.nur-lesen .detail__pair:not(:has(.has-img)),
body.nur-lesen .detail__film:not(:has(.has-img)),
body.nur-lesen .detail__hoch:not(:has(.has-img)),
body.nur-lesen .detail__gallery:not(:has(.has-img)) { display: none; }

/* ---------- Overlay ---------- */
body.overlay-open { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.overlay[hidden] { display: none; }
.overlay__scrim { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .42);
  opacity: 0; transition: opacity var(--dur-2) var(--ease); backdrop-filter: blur(2px); }
.overlay.is-open .overlay__scrim { opacity: 1; }
.overlay__panel {
  position: relative; width: min(920px, 100%); height: 100%;
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(3%); opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
  box-shadow: -30px 0 80px rgb(var(--ink-rgb) / .16);
}
.overlay.is-open .overlay__panel { transform: none; opacity: 1; }

.overlay__bar { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px clamp(24px, 3vw, 56px); border-bottom: 1px solid var(--line);
  background: var(--paper); position: relative; z-index: 2; }
.overlay__count { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); }
.overlay__steps { display: flex; gap: 8px; }
.overlay__step { width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--graphite);
  font-size: var(--fs-5); line-height: 1; transition: all var(--dur-1) var(--ease); }
.overlay__step:hover { border-color: var(--blue); background: var(--blue); color: var(--cream); }
.overlay__step--close { margin-left: 8px; }

.overlay__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(34px, 5vw, 64px) clamp(24px, 3vw, 56px) clamp(60px, 8vw, 100px); }
.overlay__head h2 { font-size: var(--fs-d4); }
.overlay__tags { margin-top: 16px; }
.overlay__slot { margin-top: clamp(28px, 4vw, 48px); }
.overlay__intro { margin-top: 20px; font-size: var(--fs-d1);
  line-height: 1.5; color: var(--ink); max-width: 48ch; }

@media (max-width: 47.999rem) {
  .overlay__panel { width: 100%; }
  .detail__meta li { grid-template-columns: 1fr; gap: 4px; }
  /* Drei nebeneinander wird auf dem Handy zu schmal */
  .detail__hoch { grid-template-columns: 1fr 1fr; }
}

/* Der Asterisk im großen Logo dreht sich. Bis Block 6 lief er auch dann
   weiter, wenn im System „Bewegung reduzieren" eingeschaltet ist — das
   war der Grund, warum diese Regel spezifischer notiert war als die
   Sammelregel darueber. Die Einstellung gilt jetzt auch hier (BS-11.3):
   Wer sie setzt, tut das meist nicht aus Geschmack, sondern weil ihm von
   dauernder Bewegung schlecht oder schwindlig wird. */
.hero__mark.has-logo .logo-ast {
  animation: slowspin var(--dur-spin) linear infinite;
}

/* Der Hero-Satz steht bis 620 px Breite in einer Zeile; darunter wäre er
   nur noch unter 12 px lesbar und darf deshalb umbrechen. */
@media (max-width: 39.999rem) {
  :root { --fs-hero-line: clamp(16px, 4.4vw, 22px); }
  .hero__line { white-space: normal; max-width: 22ch; }
}



/* =========================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ========================================================= */
.legal { max-width: 76ch; }
.legal h2 { font-size: var(--fs-d2); letter-spacing: var(--ls-tight);
  margin: clamp(44px, 5vw, 64px) 0 16px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--fs-7); font-weight: 400; letter-spacing: 0;
  margin: 28px 0 8px; color: var(--ink); }
.legal p, .legal li { font-size: var(--fs-6); line-height: 1.7; color: var(--graphite); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--blue); border-bottom: 1px solid var(--stone);
  transition: border-color var(--dur-1) var(--ease); word-break: break-word; }
.legal a:hover { border-bottom-color: var(--blue); }
/* Die Begriffsspalte war fest 180 px breit. "Unternehmensgegenstand"
   braucht in Versalien mit weitem Sperrsatz aber 198 px, lief also in
   den Abstand hinein und klebte am Text daneben. minmax laesst die
   Spalte bis zum laengsten Begriff wachsen und nicht weiter. */
.legal dl { margin: 0 0 20px; display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr; gap: 10px var(--sp-4); }
.legal dt { font-size: var(--fs-2); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--grey); padding-top: 4px; }
.legal dd { margin: 0; font-size: var(--fs-6); line-height: 1.6; }
.legal__todo { background: var(--note-bg); border-left: 2px solid var(--note-line); color: var(--note-ink);
  padding: 12px 16px; margin: 0 0 16px; font-size: var(--fs-5); line-height: 1.6; border-radius: 2px; }
.legal__date { margin-top: clamp(44px, 5vw, 64px); padding-top: 20px;
  border-top: 1px solid var(--line); font-size: var(--fs-4); color: var(--grey); }
/* Schmale Fenster: Begriff ueber dem Text statt daneben. Ein
   einheitlicher Abstand von 2 px trennte hier nicht nur Begriff und
   Text, sondern auch ein Paar vom naechsten — alles klebte aneinander.
   Der Begriff bekommt deshalb Luft nach oben, sein Text bleibt eng bei
   ihm. So sieht man auf einen Blick, was zusammengehoert. */
@media (max-width: 39.999rem) {
  .legal dl { grid-template-columns: 1fr; gap: 0; }
  .legal dt { margin-top: var(--sp-4); padding-top: 0; }
  .legal dt:first-child { margin-top: 0; }
  .legal dd { margin-top: var(--sp-1); }
}

/* =========================================================
   GROSSE BILDSCHIRME
   ---------------------------------------------------------
   Bis 1600 px bleibt alles wie gehabt. Darüber wächst die
   Satzbreite mit, die Schrift wird eine Spur größer und das
   Projektraster bekommt eine vierte Spalte — sonst wirken
   die Inhalte auf einem Standbildschirm verloren klein.
   Textspalten bleiben durch max-width in Zeichen begrenzt,
   damit die Zeilen lesbar kurz sind.
   ========================================================= */
@media (min-width: 100rem) {
  :root {
    /* Gleiches Verhaeltnis wie auf dem 14-Zoll-MacBook: Dort stehen
       Inhalte 11,9 % der Fensterbreite vom Rand entfernt (180 von
       1512 px). Statt einer festen Maximalbreite waechst der Rand
       proportional mit, das Bild bleibt auf jedem Schirm dasselbe. */
    --wrap: 100%;
    --gutter: 11.9vw;
    /* Der Abstand ueber der Kopfzeile folgt demselben Verhaeltnis wie am
       14-Zoll-MacBook: dort 21 px bei 180 px Seitenrand, also 11,4 % davon
       (1,357vw). Dazu kommt die Hoehe der Wortmarke von 38 px. */
    --header-h: calc(2.714vw + 38px);
  }

  .hero__mark.has-logo svg { width: min(62vw, 960px); }
  .brand.has-logo svg { height: 38px; }

  .overlay__panel { width: min(1080px, 100%); }

  /* Auszug auf der Startseite kompakter — Kopfzeile und Raster teilen
     sich dieselbe Breite, damit der Button buendig zur letzten Karte
     bleibt, und beide beginnen links wie alle anderen Abschnitte. */
  .section--auszug .pagehead__row,
  .section--auszug .grid-projects--drei { max-width: 1400px; margin-inline: auto; }

  /* Projektraster eine Spur luftiger, dadurch etwas kleinere Bilder */
  .grid-projects { gap: clamp(28px, 2.4vw, 48px) clamp(34px, 3.2vw, 72px); }

  /* Portraet auf "Ueber mich" nicht ins Riesenhafte wachsen lassen und
     an die Textspalte heranruecken. Der Abstand dazwischen behaelt das
     Verhaeltnis der MacBook-Ansicht (rund 7,9 % der Inhaltsbreite). */
  .dropzone--portrait { max-width: 560px; }
  .split--narrow { gap: 6vw; }
  /* Portraet steht links buendig unter dem Namen, die Textspalte rueckt
     dafuer naeher an die Mitte. */
  .split--portrait,
  .split--werdegang { grid-template-columns: 560px 1fr; }

  /* Die Trennlinien liefen weit ueber den Text hinaus — jetzt enden sie
     kurz dahinter. */
  .list-facts { max-width: 860px; }
  .timeline { max-width: 1020px; }

  /* Detailansicht: Bilder laufen bis zum Innenrand des Panels */
  .overlay__panel { width: min(1240px, 100%); }

  /* Wort und Pfeil stehen nebeneinander und schliessen mit der
     Meta-Zeile des Heros ab. */
  .hero__inner { position: relative; }
  .scrollcue { flex-direction: row; align-items: flex-end; gap: 16px;
    right: var(--gutter); bottom: 0; }
  .scrollcue svg { width: 11px; height: 26px; }

}

@media (min-width: 131.25rem) {

  /* Vier Projekte pro Reihe statt drei — aber nicht beim dreiteiligen
     Auszug auf der Startseite, der sonst die Reihe nicht mehr fuellt. */
  .grid-projects .card { grid-column: span 3; }
  .grid-projects--drei .card { grid-column: span 4; }

  .hero__mark.has-logo svg { width: min(58vw, 1060px); }
}


/* =========================================================
   HILFSKLASSEN
   ---------------------------------------------------------
   Ersetzen die frueheren style="..."-Angaben im HTML (BS-6.2).
   Alle Werte kommen aus tokens.css; einmalige Zwischenwerte
   wurden dabei auf die naechste Stufe der Abstandsskala gelegt.
   ========================================================= */
.section--anschluss { padding-top: 0; }                         /* schliesst direkt an den Abschnitt darueber an */
.section--eng      { padding-top: clamp(20px, 3vw, 40px); }     /* knapperer Abstand nach oben */

.u-mitte  { align-items: center; }
.u-rechts { justify-self: end; }
.u-reihe  { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.u-klein  { font-size: var(--fs-5); }
.u-kurz   { max-width: 15ch; }                                  /* Ueberschrift bricht frueh um */

.pagehead__row--unten { align-items: end; margin-bottom: var(--sp-2); }
.eyebrow--abstand     { margin-top: var(--sp-6); }
.lead--anschluss      { margin-top: var(--sp-4); }
.lead--kompakt        { font-size: var(--fs-6); }
.link-arrow--anschluss { margin-top: var(--sp-3); }
.h2--mittel           { font-size: var(--fs-d3); }

/* Verweis im Fliesstext, der sich vom umgebenden Text abheben soll */
.u-link-blau { color: var(--blue); border-bottom: 1px solid currentColor; }

/* ---------- Fussbereich: Nachtraege aus Block 3 ----------
   Ersetzen zwei style="..."-Angaben, die frueher im JavaScript
   standen, als der Fussbereich noch dort gebaut wurde. */
.footer__ort { color: rgb(var(--cream-rgb) / .6); font-size: var(--fs-5); }
.footer__bottom a { color: inherit; }

/* ---------- Sprung zum Inhalt ----------
   Erster Halt der Tabulatortaste auf jeder Seite. Bleibt unsichtbar,
   bis er den Fokus bekommt — dann springt er sichtbar nach vorn und
   ueberspringt die Navigation (BS-9.2). */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--blue); color: var(--cream);
  padding: 12px 20px; border-radius: var(--r);
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus-visible { top: 12px; --focus-color: var(--cream); }

/* ---------- Nur fuer Screenreader ----------
   Sichtbar verborgen, aber vorgelesen. Fuer Ueberschriften, die die
   Gliederung braucht, die Gestaltung aber nicht zeigt (BS-9.3). */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Formular: Pflichtfelder und Fehlermeldungen (Block 5) ----------
   Die Meldung steht unter dem Feld, ist rot UND mit einem Zeichen
   versehen — Farbe allein traegt hier keine Information (BS-9.4). */
/* Steht als erste Zeile im Formularraster — den Abstand macht dessen gap. */
.form__pflichthinweis { font-size: var(--fs-3); color: var(--grey); margin: 0; }
.pflicht { color: var(--blue); }

/* display: flex wuerde das hidden-Attribut aushebeln — deshalb hier
   ausdruecklich wieder ausblenden. */
.field__fehler[hidden] { display: none; }
.field__fehler {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0; font-size: var(--fs-4); line-height: 1.45; color: var(--fehler);
}
.field__fehler::before {
  content: "!"; flex: 0 0 auto;
  width: 15px; height: 15px; margin-top: 2px; border-radius: 50%;
  background: var(--fehler); color: var(--paper);
  font-size: 11px; line-height: 15px; text-align: center; font-weight: 700;
}
.field.has-fehler > label { color: var(--fehler); }
.field.has-fehler input,
.field.has-fehler textarea,
.field.has-fehler select { border-bottom-color: var(--fehler); border-bottom-width: 2px; }

/* Ankreuzgruppe: fieldset bringt eigene Raender und Abstaende mit */
.field--gruppe { border: 0; padding: 0; margin: 0; }
/* Ein <legend> steht ausserhalb des Grid-Flusses: Das gap des Feldes
   greift dort nicht, die Beschriftung klebte direkt an den Knoepfen.
   Der Abstand muss deshalb von Hand gesetzt werden — und darf etwas
   groesser sein als die 9 px der Textfelder, weil die Knoepfe hohe
   Flaechen sind und nicht nur eine Linie. */
.field--gruppe > legend { padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--grey); }

/* Die Einwilligung steht jetzt in einem .field, damit die Fehlermeldung
   darunter Platz hat. Sie ist aber ein Satz zum Lesen und keine
   Feldbeschriftung — die Kapitaelchen von .field > label gelten hier nicht. */
.field > label.check-inline {
  font-size: var(--fs-4); letter-spacing: var(--ls-snug);
  text-transform: none; color: var(--graphite);
}
.field > label.check-inline + .field__fehler { margin-top: var(--sp-1); }
.field > label.check-inline ~ .form__note { margin-top: var(--sp-2); }

/* Die Bestaetigung nach dem Absenden bekommt Platz und keinen Fokusrahmen,
   obwohl sie den Fokus erhaelt — sie ist Text, kein Bedienelement. */
.formstatus { max-width: 60ch; line-height: 1.5; }
.formstatus:focus { outline: none; }

/* ---------- Zeichenzaehler am Textfeld ----------
   Steht rechts unter dem Feld und wechselt die Farbe, wenn es knapp
   wird. Die Zahl selbst traegt die Information — die Farbe verstaerkt
   sie nur (BS-9.1). */
.field__zaehler {
  margin: 0; text-align: right;
  font-size: var(--fs-3); color: var(--grey);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease);
}
.field__zaehler.is-knapp { color: var(--graphite); }
.field__zaehler.is-voll  { color: var(--fehler); }

/* =========================================================
   BEDIENFLAECHEN AM FINGER (Block 6)
   ---------------------------------------------------------
   Ein Finger trifft ungenauer als ein Mauszeiger. Alles, was
   angetippt wird, ist deshalb mindestens 44 x 44 px gross
   (BS-7.3) — aber nur dort, wo mit dem Finger bedient wird.
   Am Rechner mit Maus bleibt das Bild unveraendert eng.

   Ausgenommen sind Verweise mitten im Fliesstext: Sie liessen
   sich nicht vergroessern, ohne den Zeilenabstand zu sprengen.
   Dafuer sieht die Richtlinie sie ausdruecklich vor.
   ========================================================= */
@media (pointer: coarse) {

  /* Listenverweise im Fussbereich: Der Text bleibt, wo er ist,
     die Zeile bekommt Hoehe. */
  .footer li a,
  .footer__bottom a {
    display: flex; align-items: center; min-height: 44px;
  }
  .footer li { margin: 0; }

  /* Sprachumschalter und Menue-Knopf */
  .lang__knopf { min-width: 44px; min-height: 44px; padding: 0; }
  .lang { gap: 0; }
  .burger { width: 44px; height: 44px; }

  /* Wortmarke in der Kopfzeile */
  .brand { min-height: 44px; display: inline-flex; align-items: center; }

  /* Pfeilverweise und der Sprung zum Inhalt */
  .link-arrow { min-height: 44px; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* Grosse Mailadresse und Kontaktangaben */
  .bigmail, .contact-cell a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Die Knoepfe der Leistungsauswahl. Angetippt wird das <span>,
     nicht das versteckte Ankreuzfeld dahinter. */
  .chip span { min-height: 44px; }

  /* Die Filter auf der Projektseite */
  .filter { min-height: 44px; }

  /* Das Ankreuzfeld der Einwilligung */
  .check-inline input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0; }
  .check-inline { align-items: center; min-height: 44px; }

  /* Eingabefelder — Ankreuzfelder ausgenommen, die haben ihr eigenes Mass */
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select,
  .field textarea { min-height: 44px; }
}

/* ---------- Laufband anhalten (Block 6) ----------
   Der Knopf sitzt rechts im Band und haelt sich zurueck, bis man ihn
   braucht: Beim Daruberfahren und bei Tastaturbedienung tritt er
   hervor. Das Wort daneben bleibt fuer Vorlesegeraete immer lesbar. */
.marquee { position: relative; }
.marquee__halt {
  /* Dicht an den Rand — mittig wirkte er wie ein Teil des Bandes.
     Der Abstand bleibt gross genug, dass er am Finger nicht mit dem
     Bildschirmrand kollidiert. */
  position: absolute; right: clamp(10px, 1.2vw, 18px); top: 50%; transform: translateY(-50%);
  z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--graphite);
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  opacity: .5;
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

/* Nur das Zeichen ist zu sehen. Das Wort steht weiter da, aber nur fuer
   Vorlesegeraete — sonst waere der Knopf fuer sie namenlos. */
.marquee__haltWort {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.marquee:hover .marquee__halt,
.marquee__halt:focus-visible { opacity: 1; }
.marquee__halt:hover { color: var(--blue); border-color: var(--blue); }

/* Zwei Balken fuer "anhalten", ein Dreieck fuer "fortsetzen" */
.marquee__haltZeichen {
  width: 9px; height: 11px; flex: 0 0 auto;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.marquee.is-angehalten .marquee__haltZeichen {
  width: 0; height: 0; border: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* Am Finger groesser und ohne Zurueckhaltung — dort gibt es kein
   Darueberfahren, das ihn hervortreten liesse. */
@media (pointer: coarse) {
  .marquee__halt { width: 44px; height: 44px; opacity: 1; }
}

/* ---------- Seite nicht gefunden ---------- */
.fehler404__wege { display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-5); }