/* ==========================================================================
   Alain Knecht Media — Portfolio
   Cinematisches Dark-Design, Anton (Display) + Inter (Text)
   ========================================================================== */

:root {
  --bg: #0c0c0d;
  --bg-elevated: #141415;
  --bg-soft: #191919;
  --text: #f3f0e8;
  --text-dim: #aaa69e;
  --text-faint: #6f6b64;
  --line: #2a2a2b;
  --line-soft: #232324;
  --accent: #e8d5a8;
  --accent-soft: rgba(232, 213, 168, 0.14);

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header-h: 84px;
  /* Kompakte Höhe nach dem Scrollen – der Header zieht sich ruhig zusammen,
     ohne zu springen. Wird von js/main.js auch für `scroll-padding` gelesen. */
  --header-h-compact: 68px;
  --gutter: 40px;
  --max: 1280px;
  --radius: 4px;

  /* Zwei Kurven für das ganze Projekt. `--ease` bleibt die ruhige Standard-
     kurve für Farben und kleine Zustände, `--ease-out` ist die weiche,
     leicht ausklingende Bewegung für Positions- und Grössenwechsel. Beide
     sind bewusst zahm – kein Überschwingen, kein Nachfedern. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* Eine gemeinsame Dauer für das Einblenden beim Scrollen. */
  --reveal-duration: 0.9s;
}

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

html {
  scroll-behavior: smooth;
  /* Beim Sprung zu einem Anker steht der kompakte Header oben – deshalb
     richtet sich der Abstand nach dessen Höhe, plus etwas Luft. */
  scroll-padding-top: calc(var(--header-h-compact) + 24px);
  -webkit-text-size-adjust: 100%;
}

/* Wer Bewegung ablehnt, bekommt auch kein weiches Scrollen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.02; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #0c0c0d;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------- Typografie-Bausteine ---------- */
.eyebrow,
.section-index {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}

h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5.4vw, 4rem);
  letter-spacing: 0.005em;
}
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  line-height: 1.3;
}

.section-lede,
.about-lede,
.hero-lede {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  font-weight: 300;
  max-width: 62ch;
}

/* ---------- Buttons ----------
   Alle Bedienelemente folgen derselben Hover-Logik: ein leiser Farbwechsel
   Richtung Gold und – wo ein Pfeil steht – ein minimales Nachrücken. Kein
   Skalieren, kein Leuchten, keine Schatten. So bleibt jede Interaktion ruhig
   und die Website wirkt wie aus einem Guss. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: #0c0c0d;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--text); }
.btn-ghost {
  border-color: rgba(243, 240, 232, 0.4);
  color: var(--text);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(243, 240, 232, 0.08);
  border-color: rgba(232, 213, 168, 0.72);
  color: var(--accent);
}
.btn-block { width: 100%; }

/* Ein Pfeil in einem Link rückt beim Überfahren minimal nach. Die Bewegung
   ist absichtlich winzig (4 px) – sie bestätigt nur, wohin es geht. Der Pfeil
   im «Zurück»-Link zeigt nach links und rückt deshalb nach links. */
.link-more span,
.legal-back span {
  display: inline-block;
  transition: transform .4s var(--ease-out);
}
.link-more:hover span,
.link-more:focus-visible span { transform: translateX(4px); }
.legal-back:hover span,
.legal-back:focus-visible span { transform: translateX(-4px); }

/* ==========================================================================
   HEADER
   Sehr reduziert. Im Hero wirkt er nur als leiser Verlauf über dem Video und
   tritt ganz zurück; beim Scrollen zieht er sich ruhig etwas zusammen und
   bekommt einen sehr dezenten dunklen Hintergrund mit leichtem Blur. Kein
   Sprung, kein auffälliger Sticky-Effekt – nur ein ruhiges Mitgehen.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  /* Der Hintergrund liegt auf zwei Pseudoelementen (siehe unten), damit der
     Wechsel zwischen Verlauf und Fläche weich überblenden kann. */
  background: none;
  border-bottom: 1px solid transparent;
  transition: height .5s var(--ease-out), border-color .5s var(--ease),
              backdrop-filter .5s var(--ease);
}

/* Ruhezustand über dem Hero: nur ein weicher Verlauf von oben, damit die
   Marke auf dem Video lesbar bleibt – keine Fläche, keine Kante. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 12, 13, 0.72), rgba(12, 12, 13, 0));
  pointer-events: none;
}

/* Beim Scrollen: dieselbe dunkle Fläche, aber über die ganze Höhe des Headers.
   Sie blendet weich ein, statt den Verlauf abrupt zu ersetzen. */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 12, 13, 0.72);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

/* Beim Scrollen: etwas kompakter, mit sehr dezentem Hintergrund und Blur.
   Die Höhe wird bewusst nur auf grossen Bildschirmen verändert – auf dem
   Telefon bliebe sonst eine Lücke zwischen Header und geöffnetem Menü. */
.site-header.is-scrolled {
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: rgba(42, 42, 43, 0.7);
}
.site-header.is-scrolled::after { opacity: 1; }
@media (min-width: 861px) {
  .site-header.is-scrolled { height: var(--header-h-compact); }
}

/* Die Marke ist im Hero minimal zurückgenommen und kommt beim Scrollen
   ganz leicht hervor – ein kaum merklicher Übergang. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity .5s var(--ease);
}
.site-header.is-scrolled .brand { opacity: 1; }

.brand-mark {
  width: 46px;
  height: auto;
  object-fit: contain;
  transition: width .5s var(--ease-out);
}
/* Auch das Logo wird im kompakten Zustand eine Spur kleiner. */
@media (min-width: 861px) {
  .site-header.is-scrolled .brand-mark { width: 38px; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.brand-text small {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}
.primary-nav a {
  position: relative;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Im Hero zurückgenommen, beim Scrollen einen Hauch präsenter. */
  color: var(--text-faint);
  transition: color .4s var(--ease);
}
.site-header.is-scrolled .primary-nav a { color: var(--text-dim); }

/* Feine goldene Linie: liegt als 1 px dünne Haarline unter dem Wort und
   zieht beim Überfahren ruhig von links nach rechts auf. */
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 1px;
  background: var(--accent);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--text); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); opacity: 1; }

/* Der aktuell sichtbare Bereich wird nur sehr dezent markiert: dieselbe
   goldene Linie, dazu ein minimal hellerer Text. */
.primary-nav a.is-active { color: var(--text); }
.primary-nav a.is-active::after { transform: scaleX(1); opacity: 0.7; }

.nav-cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 22px;
  color: var(--text) !important;
  font-size: 11px;
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0c0d !important;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .4s var(--ease);
}
.nav-toggle:hover { border-color: rgba(232, 213, 168, 0.5); }
.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text);
  transition: transform .35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 60px) var(--gutter) 84px;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroZoom 22s var(--ease) forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 12, 13, 0.96) 4%, rgba(12, 12, 13, 0.55) 46%, rgba(12, 12, 13, 0.72) 100%),
    linear-gradient(to right, rgba(12, 12, 13, 0.8) 0%, rgba(12, 12, 13, 0.1) 70%);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero-overlay .eyebrow { color: var(--text-dim); }
.hero h1 {
  font-size: clamp(2.6rem, 9vw, 7rem);
  max-width: 16ch;
  letter-spacing: 0.005em;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-lede { max-width: 38ch; font-size: clamp(1rem, 1.6vw, 1.25rem); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  width: 22px; height: 40px;
  transform: translateX(-50%);
  border: 1px solid rgba(243, 240, 232, 0.3);
  border-radius: 12px;
}
.scroll-hint span {
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  background: var(--accent);
  border-radius: 2px;
  animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* ==========================================================================
   SECTION-BASIS
   ========================================================================== */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--gutter);
}
.section-head {
  max-width: 74ch;
  margin-bottom: 64px;
}
.section-head h2 { margin-bottom: 22px; }

/* ---------- Übergang zwischen den Sektionen ----------
   Statt einer durchgehenden harten Trennlinie über die volle Fensterbreite
   verläuft zwischen den Bereichen eine feine Haarline, die an beiden Enden
   ausblendet. Zusammen mit dem grossen Weissraum entsteht so ein weicher
   Übergang – die Seite liest sich als eine zusammenhängende Geschichte. */
.services,
.about,
.process,
.contact { position: relative; }

.services::before,
.about::before,
.process::before,
.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(to right,
    rgba(35, 35, 36, 0) 0%,
    var(--line-soft) 16%,
    var(--line-soft) 84%,
    rgba(35, 35, 36, 0) 100%);
  pointer-events: none;
}

/* ---------- Weiches Erscheinen beim Scrollen ----------
   Nur drei Dinge passieren: ein Fade, eine sehr kleine Aufwärtsbewegung und
   ein kurzer Nacheinander-Versatz zwischen Überschrift, Text und Bild. Die
   Bewegung ist mit 14 px bewusst winzig – sie fällt kaum auf, nimmt dem
   Erscheinen aber das Abrupte. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  /* Bewusst ohne `will-change`: Die Seite hat viele Reveal-Ziele, und eine
     dauerhafte Ebenen-Promotion würde auf langen Seiten Grafikspeicher
     binden und das Scrollen eher bremsen als beschleunigen. Ein Fade und
     14 px Verschiebung laufen auch so flüssig. */
  transition: opacity var(--reveal-duration) var(--ease-out),
              transform var(--reveal-duration) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Auf Geräten ohne Mauszeiger und auf schmalen Bildschirmen wird weniger
   bewegt: Die Inhalte erscheinen praktisch nur noch per Fade, damit das
   Scrollen jederzeit direkt bleibt. */
@media (hover: none), (max-width: 860px) {
  .reveal { transform: translateY(8px); }
}

/* Wer Bewegung ablehnt, bekommt reine Sichtbarkeit ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */
.film { margin-bottom: 40px; }

/* --- Die drei Querformat-Projekte: bildschirmbreit untereinander ----------
   Kein Raster, keine Karten, keine Rahmen: Jedes Projekt läuft über die volle
   Fensterbreite und bekommt viel Luft zum nächsten. Der negative Aussenabstand
   hebt das Bild aus der Inhaltsbreite heraus bis an den Fensterrand. */
.work-list {
  display: grid;
  gap: 104px;
}
.work-list .film { margin-bottom: 0; }

.film-wide .film-media {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 5;
  border-radius: 0;
  background: #08080a;
}

.film-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.film-media img,
.film-media .film-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Wechsel zum Standbild der Vorschau bleibt weich; die Bewegung ist
     langsam genug, um nicht aufzufallen. */
  transition: transform 1.2s var(--ease-out), opacity .7s var(--ease);
}
.film-media .film-preview { opacity: 0; }
.film-media .film-preview.is-visible { opacity: 1; }
/* Beim Überfahren nur eine sehr leichte Vergrösserung (2 %) – gerade so viel,
   dass das Bild lebendig wird. Kein Push, kein Zoom-Effekt.
   Auf Geräten ohne Mauszeiger entfällt sie: Dort wäre der Zustand nach dem
   Antippen eingefroren, und das Bild bliebe dauerhaft vergrössert. */
@media (hover: hover) {
  .film-media:hover img { transform: scale(1.02); }
  /* Kacheln, die nur aus einem Video bestehen (Reels), skalieren nicht –
     sonst würde das gestreamte Standbild sichtbar verschoben. */
  .film-media:not(:has(img)):hover .film-preview { transform: scale(1.02); }
}

/* YouTube-Vorschau: wird erst beim Überfahren erzeugt */
.film-preview-yt {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ease);
  background: #000;
}
.film-preview-yt iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.film-media.is-previewing .film-preview-yt { opacity: 1; }
.film-media.is-previewing img { opacity: 0; }
/* Läuft die Vorschau, bleibt der Play-Button sichtbar: Er liegt über dem
   Video und wird zusammen mit der Vorschau weich eingeblendet. */

.film-portrait { aspect-ratio: 9 / 16; }

/* Die Standbilder der Hochformat-Clips stammen aus den 16:9-Vorschaubildern
   von YouTube: Der eigentliche 9:16-Inhalt liegt dort mittig, links und
   rechts davon unscharfe Ränder. Weil `object-fit: cover` in einer 9:16-
   Kachel genau die mittleren ~31 % der Breite zeigt, wird automatisch nur
   der klare Bildbereich sichtbar – ohne Verzerrung und ohne Beschnitt
   wichtiger Bildteile. Ein zusätzlicher Zoom ist deshalb nicht nötig. */

.film-play {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.3);
  border: 1px solid rgba(243, 240, 232, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
  /* Im Normalzustand unsichtbar – der Button blendet sich erst beim Überfahren
     weich ein. Gold bleibt dabei ein leiser Akzent auf Rahmen und Schrift.
     Die Vergrösserung beim Einblenden ist minimal (0.96 → 1). */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out),
              border-color .5s var(--ease), color .5s var(--ease),
              background-color .5s var(--ease);
}
.film-media:hover .film-play,
.film-media:focus-within .film-play {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(232, 213, 168, 0.72);
  color: var(--accent);
  background: rgba(10, 10, 11, 0.42);
}

/* Geräte ohne Mauszeiger (Telefon, Tablet) kennen kein Hover. Dort bleibt der
   Play-Button dauerhaft sichtbar – sonst gäbe es keinen Hinweis aufs Video. */
@media (hover: none) {
  .film-play { opacity: 1; transform: none; }
}

/* unsichtbarer, aber fokussierbarer Button über der ganzen Kachel */
.film-open {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}

.film-info {
  display: grid;
  gap: 8px;
  padding-top: 22px;
  max-width: 62ch;
}
.film-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing: 0.01em;
}
.film-meta,
.artwork-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.film-roles,
.artwork-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.film-note {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dim);
  margin-top: 6px;
}

/* ---------- Text-Overlay auf dem Filmstill ----------
   Nummer, Titel und Metazeile liegen direkt auf dem Bild. Statt eines Kastens
   sorgt ein weicher schwarzer Verlauf dafür, dass sie lesbar bleiben, ohne das
   Bild zu zerschneiden. Die Textseite wechselt von Projekt zu Projekt. */
.film-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Der Abstand zum Bildrand entspricht dem Seitenrand der Website – so stehen
     Nummer, Titel und Metazeile auf derselben Linie wie der übrige Inhalt.
     Sofern das Fenster breiter ist als die Inhaltsbreite, kommt die halbe
     Differenz hinzu. */
  padding-inline: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter));
  pointer-events: none;
}
.film-text-right .film-overlay { justify-content: flex-end; }
.film-text-left .film-overlay { justify-content: flex-start; }

.film-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 9, 0.55), rgba(8, 8, 9, 0) 58%);
}
/* Der Verlauf folgt der Textseite und läuft weich ins Bild aus, sodass auf der
   gegenüberliegenden Seite das Still unberührt bleibt. */
.film-text-right .film-overlay::before {
  background:
    linear-gradient(to left,
      rgba(8, 8, 9, 0.94) 0%,
      rgba(8, 8, 9, 0.78) 20%,
      rgba(8, 8, 9, 0.34) 44%,
      rgba(8, 8, 9, 0) 68%),
    linear-gradient(to top, rgba(8, 8, 9, 0.5), rgba(8, 8, 9, 0) 60%);
}
.film-text-left .film-overlay::before {
  background:
    linear-gradient(to right,
      rgba(8, 8, 9, 0.94) 0%,
      rgba(8, 8, 9, 0.78) 20%,
      rgba(8, 8, 9, 0.34) 44%,
      rgba(8, 8, 9, 0) 68%),
    linear-gradient(to top, rgba(8, 8, 9, 0.5), rgba(8, 8, 9, 0) 60%);
}

.film-caption {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 34rem;
}
.film-text-right .film-caption { justify-items: end; text-align: right; }
.film-text-left .film-caption { justify-items: start; text-align: left; }

.film-num {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.film-caption .film-title {
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}
.film-caption .film-meta {
  color: rgba(243, 240, 232, 0.7);
  letter-spacing: 0.22em;
}
.film-caption .film-roles { color: rgba(243, 240, 232, 0.44); }

/* ---------- Social Reels: horizontales Swipe-Karussell ----------
   Statt fünf Kacheln untereinander (auf dem Telefon eine lange Liste) laufen
   die Reels in einer ruhigen, waagerechten Spur. Ein Reel steht gross im
   Fokus, das nächste ist rechts bewusst angeschnitten – so ist sofort klar,
   dass es weitergeht. Das spart auf dem Telefon sehr viel Scrollstrecke. */
.reel-block { margin-top: 72px; }

.reel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
/* Der Hinweis aufs Wischen erscheint nur dort, wo es kein Hover gibt –
   auf dem Desktop übernehmen die Pfeile diese Rolle. */
.reel-hint {
  display: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reel-hint span {
  display: inline-block;
  color: var(--accent);
  animation: reelHint 2.4s var(--ease) infinite;
}
@keyframes reelHint {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
}
@media (hover: none) {
  .reel-hint { display: block; }
}

/* Einleitung zum Reel-Block: ruhige Lesebreite, zurückhaltende Farbe –
   dieselbe Sprache wie die übrigen Ledes der Seite. */
.reel-lede {
  display: grid;
  gap: 12px;
  margin: 0 0 34px;
  max-width: 62ch;
}
.reel-lede p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dim);
}

.film-row-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.reel-carousel { position: relative; }

/* Die Bühne umfasst die Spur samt ihrem Pfeil. Der Pfeil sitzt rechts NEBEN
   der Spur, senkrecht auf der Bildmitte – dadurch kostet er keine Höhe unter
   dem Karussell, und darunter bleibt nur die eine Zeile mit dem Zähler. Damit
   er auch über einem angeschnittenen Reel klar lesbar bleibt, bekommt er eine
   sehr leise dunkle Fläche – dieselbe Sprache wie der Play-Button auf den
   Filmen. (Die Spur ist nicht durchlaufend, deshalb gibt es nur den
   Vorwärts-Pfeil.) */
.reel-stage { position: relative; }

.reel-stage > .cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  background: rgba(12, 12, 13, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reel-stage > .cover-nav svg { width: 18px; height: 18px; }
/* Im Randstreifen des Abschnitts, rechts vom letzten sichtbaren Reel. Weil die
   Spur selbst bis an den Fensterrand läuft, sitzt der Pfeil so zwischen
   Fensterrand und Reel – er verdeckt kein Bild. */
.reel-stage > .reel-next { right: calc(-1 * var(--gutter)); }

/* Ohne Mauszeiger wird gewischt – der Pfeil entfällt dort. Dasselbe gilt für
   schmale Fenster: Dort wäre kein Platz mehr neben der Spur, ohne den Rand zu
   verlassen. Der Zähler bleibt als reine Ordnungsangabe stehen. */
@media (hover: none), (max-width: 860px) {
  .reel-stage > .cover-nav { display: none; }
}

/* Zähler unter der Spur – eine kleine Zeile, sonst nichts. */
.reel-counter { margin-top: 20px; }

/* Die Spur läuft über die Inhaltsbreite hinaus bis an den Fensterrand –
   dadurch wird das angeschnittene nächste Reel am Rand nicht abgeschnitten,
   sondern läuft optisch weiter. Der Innenabstand links richtet sich nach dem
   Seitenrand, damit das erste Reel auf derselben Linie steht wie der Text. */
.reel-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-block: 6px;
}
.reel-viewport.is-dragging { cursor: grabbing; }

.reel-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.reel-track.is-dragging { transition: none; }

/* Breite eines Reels: auf dem Desktop so bemessen, dass rund drei Reels zu
   sehen sind und das vierte rechts angeschnitten bleibt – so gibt es einen
   klaren Fokus und trotzdem die Einladung weiterzuwischen.
   Hochformat bleibt Hochformat (9:16). */
.reel-slide {
  flex: 0 0 auto;
  width: clamp(200px, 30vw, 360px);
  min-width: 0;
  /* Klick auf ein nicht fokussiertes Reel wird von js/reel-carousel.js
     abgefangen – der Zeiger deutet das trotzdem schon an. */
  cursor: pointer;
}
/* Das aktive Reel wird sehr leicht angehoben – kein Rahmen, kein Schatten,
   nur ein Hauch mehr Helligkeit und Präsenz. */
.reel-slide .film-media {
  aspect-ratio: 9 / 16;
  filter: brightness(0.82);
  transition: filter .7s var(--ease);
}
.reel-slide.is-active .film-media { filter: none; }

.reel-caption {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  max-width: 30ch;
}
.reel-title {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text);
}
/* Sehr kleine Metazeile: nur zwei bis drei Begriffe, keine Beschreibung. */
.reel-meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Nicht fokussierte Reels treten auch in der Beschriftung zurück. */
.reel-slide:not(.is-active) .reel-caption { opacity: 0.55; }
.reel-caption { transition: opacity .6s var(--ease); }

/* Reels werden gestreamt: kein Ziehen des Bildes, kein Kontextmenü-Stören */
.reel-slide .film-preview {
  -webkit-user-drag: none;
  user-select: none;
}
/* In der Spur darf der unsichtbare Klick-Button nicht über die ganze Kachel
   hinausragen – er bleibt exakt im Bild. */
.reel-slide .film-open { border-radius: var(--radius); }

/* Der Verweis auf die Unterseite – dieselbe ruhige Form und Ausrichtung wie
   bei «Weitere Designs ansehen» unter der Design-Galerie. */
.reel-more { margin: 34px 0 0; text-align: center; }

/* ==========================================================================
   COVER-GALERIE (Coverflow)
   Das aktive Cover steht frontal und gross im Zentrum. Die Nachbarn liegen
   kleiner und weiter hinten und sind leicht nach innen gedreht – daraus
   entsteht eine ruhige, flache 3D-Perspektive ohne Show-Effekte.
   ========================================================================== */

/* Der Bereich ist bewusst kompakter gehalten als "Selected Work": Die Galerie
   ist eine ergänzende kreative Leistung, Video und Film bleiben der
   Schwerpunkt der Website. Daher auch weniger Aussenabstand. */
.artwork { padding-top: 96px; padding-bottom: 104px; }
.artwork .section-head { margin-bottom: 48px; }
/* Der Einleitungstext tritt zurück und lässt die Designs führen. */
.artwork-lede {
  max-width: 54ch;
  font-size: 15px;
}

.cover-carousel {
  /* Breite des aktiven Covers und Abstand von Cover zu Cover.
     Die Schrittweite ist kleiner als die Breite – dadurch greifen die
     Cover leicht ineinander und es entsteht der Fächer-Effekt.
     Bewusst kompakter als der Bereich "Selected Work": Die Galerie ist eine
     ergänzende Leistung, der Film bleibt der Schwerpunkt. */
  --cover-w: min(34%, 360px);
  --cover-overlap: 68px;

  /* Tiefe und Drehung je Abstand zum aktiven Cover (1 = direkter Nachbar).
     Bewusst zahm: Die Neigung bleibt unter 25°, damit die Galerie räumlich
     wirkt, ohne in eine 3D-Show zu kippen. Die äusseren Arbeiten treten
     zurück, bleiben aber als ruhiger Fächer erkennbar. */
  --rot-1: 15deg; --sc-1: 0.87; --z-1: -50px;  --op-1: 0.72;
  --rot-2: 19deg; --sc-2: 0.76; --z-2: -100px; --op-2: 0.5;
  --rot-3: 22deg; --sc-3: 0.66; --z-3: -145px; --op-3: 0.3;

  position: relative;
}

/* Die Bühne umfasst nur die Galerie selbst – die Pfeile richten sich damit an
   der Bildhöhe aus, nicht an der Gesamthöhe des Abschnitts. Sie liegen links
   und rechts der Galerie und kosten dadurch keine Höhe darunter. Weil die
   äussersten Cover stark zurücktreten und dunkel sind, stehen die Pfeile auf
   einer sehr leisen dunklen Fläche (dieselbe Sprache wie der Play-Button). */
.cover-stage { position: relative; }

.cover-stage > .cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(12, 12, 13, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cover-stage > .cover-prev { left: 0; }
.cover-stage > .cover-next { right: 0; }

/* In der mobilen Ansicht wird die Galerie gewischt – dort entfallen die
   Pfeile, genau wie beim Reel-Karussell. Bewusst NUR an der Breite
   festgemacht (nicht an `hover: none`): So bleiben die Pfeile auf Tablets
   und Touch-Geräten mit breitem Fenster erhalten, wo sie weiterhin
   anklickbar sind. Der Zähler und die Info-Zeile bleiben in jedem Fall
   als Ordnungsangabe stehen. */
@media (max-width: 860px) {
  .cover-stage > .cover-nav { display: none; }
}

.cover-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  /* Ein gemeinsamer Fluchtpunkt für alle Cover – dadurch wirkt der Fächer ruhig */
  perspective: 1800px;
  perspective-origin: 50% 42%;
  /* Etwas Luft für Schatten und Hover-Vergrösserung */
  padding: 14px 0 20px;
  margin: -14px 0 -20px;
}
.cover-viewport.is-dragging { cursor: grabbing; }

.cover-track {
  display: flex;
  align-items: center;
  /* Alle Folien liegen im selben 3D-Raum wie der Fluchtpunkt oben */
  transform-style: preserve-3d;
  /* Weiches, ruhig ausklingendes Einrasten – kein Nachfedern, kein
     Überschwingen. Die Bewegung hört genau dort auf, wo sie soll. */
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.cover-track.is-dragging { transition: none; }

.cover-slide {
  flex: 0 0 var(--cover-w);
  min-width: 0;
  transform-style: preserve-3d;
  /* Negativer Rand lässt die Nachbarn enger zusammenrücken */
  margin-right: calc(-1 * var(--cover-overlap));
}

.cover-figure {
  margin: 0;
  /* Muss die 3D-Ebene weiterreichen, sonst wird die Tiefe der Cover
     an dieser Stelle flachgerechnet. */
  transform-style: preserve-3d;
}

.cover-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-soft);
  /* Grundzustand: zurückgesetzt und kleiner (seitliche Cover).
     Die Nachbarn sind gedämpft und dunkler als das aktive Artwork – aber
     nicht so dunkel, dass sie im Hintergrund verschwinden. */
  transform: translateZ(var(--z-2)) scale(var(--sc-2));
  opacity: var(--op-2);
  filter: saturate(0.78) brightness(0.78);
  transition: transform 1s var(--ease-out),
              opacity .8s var(--ease),
              filter .8s var(--ease),
              border-color .8s var(--ease),
              box-shadow .8s var(--ease);
}
.cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

/* Staffelung: Abstand zum aktiven Cover bestimmt Tiefe und Drehung.
   Links dreht gegen den Uhrzeigersinn, rechts mit ihm – so zeigen alle
   Cover leicht zur Mitte.

   Der Drehpunkt sitzt jeweils an der INNEREN Kante (links: rechte Kante,
   rechts: linke Kante). Nur so kippt ein Nachbar nach hinten weg. Dreht man
   um die Mitte, schwenkt die innere Kante aus der Fläche nach vorne heraus
   und schneidet sichtbar durch das Hauptcover. */
.cover-slide.is-off-l1 .cover-media,
.cover-slide.is-off-l2 .cover-media,
.cover-slide.is-off-l3 .cover-media { transform-origin: right center; }
.cover-slide.is-off-r1 .cover-media,
.cover-slide.is-off-r2 .cover-media,
.cover-slide.is-off-r3 .cover-media { transform-origin: left center; }

.cover-slide.is-off-l1 .cover-media {
  transform: translateZ(var(--z-1)) rotateY(calc(-1 * var(--rot-1))) scale(var(--sc-1));
  opacity: var(--op-1);
}
.cover-slide.is-off-r1 .cover-media {
  transform: translateZ(var(--z-1)) rotateY(var(--rot-1)) scale(var(--sc-1));
  opacity: var(--op-1);
}
.cover-slide.is-off-l2 .cover-media {
  transform: translateZ(var(--z-2)) rotateY(calc(-1 * var(--rot-2))) scale(var(--sc-2));
  opacity: var(--op-2);
}
.cover-slide.is-off-r2 .cover-media {
  transform: translateZ(var(--z-2)) rotateY(var(--rot-2)) scale(var(--sc-2));
  opacity: var(--op-2);
}
.cover-slide.is-off-l3 .cover-media {
  transform: translateZ(var(--z-3)) rotateY(calc(-1 * var(--rot-3))) scale(var(--sc-3));
  opacity: var(--op-3);
}
.cover-slide.is-off-r3 .cover-media {
  transform: translateZ(var(--z-3)) rotateY(var(--rot-3)) scale(var(--sc-3));
  opacity: var(--op-3);
}

/* Aktives Cover: frontal, voll hell, im Fokus. Der leichte Vorzug (translateZ)
   stellt sicher, dass es räumlich vor allen Nachbarn liegt. Ein feiner goldener
   Rahmen und eine minimale Vergrösserung heben es zusätzlich heraus – beides
   so zurückhaltend, dass die Arbeit selbst das Bild bleibt.
   Bewusst ohne kräftigen Schlagschatten – nur ein sehr weicher, dunkler
   Bodensatz, der das Artwork vom Hintergrund abhebt. */
.cover-slide.is-active .cover-media {
  transform-origin: center;
  transform: translateZ(36px) rotateY(0deg) scale(1.015);
  opacity: 1;
  filter: none;
  border-color: rgba(232, 213, 168, 0.26);
  box-shadow: 0 30px 60px -46px rgba(0, 0, 0, 0.85);
}
/* Hover erzeugt nur eine sehr leichte Vergrösserung (max. 1,5 %) und einen
   etwas deutlicheren Goldrahmen. Nur mit Mauszeiger – auf Touch-Geräten
   bliebe der Zustand nach dem Antippen hängen. */
@media (hover: hover) {
  .cover-slide.is-active .cover-media:hover { border-color: rgba(232, 213, 168, 0.45); }
  .cover-slide.is-active .cover-media:hover img { transform: scale(1.015); }
}

/* Hover-Beschriftung: klein, zurückhaltend, nur der Name und die Art der
   Arbeit («Wärtsachebox — Album Artwork»). Keine langen Beschreibungen in
   der Galerie – die stehen auf der Unterseite «Visual Design». */
.cover-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 44px 18px 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  /* Verlauf statt Kasten – der Text bleibt lesbar, ohne das Bild zu zerteilen */
  background: linear-gradient(to top, rgba(8, 8, 9, 0.88), rgba(8, 8, 9, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
/* Nur auf dem aktiven Artwork und nur beim Überfahren einblenden.
   Auf Touch-Geräten ist die Zeile ganz ausgeblendet (siehe unten). */
.cover-slide.is-active .cover-media:hover .cover-label,
.cover-slide.is-active .cover-figure:focus-within .cover-label {
  opacity: 1;
  transform: none;
}
/* Auf Geräten ohne Mauszeiger gibt es kein Hover – dort bleibt die Zeile
   unter der Galerie (.cover-info) die einzige Beschriftung. Die
   Hover-Vergrösserung des aktiven Covers entfällt dort ebenfalls. */
@media (hover: none) {
  .cover-label { display: none; }
}

/* Das aktive Cover ist anklickbar (öffnet die grosse Ansicht).
   Die Nachbarn bleiben neutral, damit nur das fokussierte Cover einlädt. */
.cover-slide.is-active .cover-figure { cursor: zoom-in; }
.cover-viewport.is-dragging .cover-slide.is-active .cover-figure { cursor: grabbing; }
.cover-slide.is-active .cover-media img {
  -webkit-user-drag: none;
  user-select: none;
}
/* Ohne Mauszeiger gibt es keinen Hover – dann bleibt das Standbild in Ruhe. */
@media (hover: none) {
  .cover-slide.is-active .cover-figure { cursor: pointer; }
}

/* Die Bildunterschrift je Folie dient nur als Fallback ohne JavaScript.
   Mit JavaScript erscheint unten die Info des aktiven Covers (.cover-info). */
.cover-caption { display: none; }
.cover-caption h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: 0.01em;
}
.cover-caption p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dim);
  max-width: 58ch;
}

/* Bedienelemente: dezente Pfeile links und rechts der Galerie, der Zähler
   darunter als kleine Ordnungsangabe. Die Pfeile sind über
   `.cover-carousel > .cover-nav` absolut in die Mitte der Bildhöhe gesetzt
   und kosten dadurch keine zusätzliche Höhe. */
.cover-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background-color .4s var(--ease);
}
.cover-nav svg {
  width: 20px;
  height: 20px;
  transition: transform .4s var(--ease-out);
}
/* Dieselbe Logik wie bei allen Links: Der Pfeil deutet nur die Richtung an,
   in die es weitergeht – ohne Skalieren des Buttons. */
.cover-nav:hover svg,
.cover-nav:focus-visible svg { transform: translateX(2px); }
.cover-nav.cover-prev:hover svg,
.cover-nav.cover-prev:focus-visible svg { transform: translateX(-2px); }
.cover-nav:hover,
.cover-nav:focus-visible {
  color: #0c0c0d;
  background: var(--accent);
  border-color: var(--accent);
}
.cover-nav:disabled { opacity: 0.28; cursor: default; }
.cover-nav:disabled:hover {
  color: var(--text-dim);
  background: none;
  border-color: var(--line);
}
.cover-nav:disabled:hover svg { transform: none; }

.cover-counter {
  min-width: 88px;
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Info des aktiven Covers: Titel — Artist, darunter die Art der Arbeit */
.cover-info {
  margin: 26px 0 0;
  text-align: center;
}
.cover-info-title {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.cover-info-sep { color: var(--accent); margin: 0 9px; }
.cover-info-kind {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Zurückhaltender Verweis auf das vollständige Design-Portfolio.
   Bewusst leiser als die Galerie: kleiner Text, keine Fläche, keine Umrandung –
   nur eine feine Linie, die beim Überfahren in Gold nachzieht. */
.cover-more {
  margin: 44px 0 0;
  text-align: center;
}
.link-more {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.link-more:hover,
.link-more:focus-visible {
  color: var(--accent);
  border-color: rgba(232, 213, 168, 0.55);
}

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */

.service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 34px 44px;
  background: var(--bg);
  transition: background-color .5s var(--ease);
}
/* Kopf und Beschreibung sind getrennt, damit auf schmalen Bildschirmen nur die
   Beschreibung aufklappt. Der Kopf trägt denselben 12-px-Rhythmus wie zuvor die
   Karte selbst – dadurch sitzt auf dem Desktop alles exakt wie vorher. */
.service-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Der Schalter gehört zur mobilen Accordion-Darstellung und ist auf dem
   Desktop ausgeblendet – dort bleibt der Abschnitt unverändert. */
.service-toggle { display: none; }
/* Nur wo es wirklich einen Mauszeiger gibt, reagiert die Karte auf Hover –
   auf Touch-Geräten bliebe die Aufhellung sonst nach dem Tippen hängen. */
@media (hover: hover) {
  .service-item:hover { background: var(--bg-elevated); }
}

/* Ungerade Anzahl Leistungen: Die letzte Karte steht allein in ihrer Zeile.
   Sie über die volle Breite laufen lassen, sonst bliebe rechts eine leere
   Zelle mit dem Rasterhintergrund sichtbar.
   Greift nur, wenn die letzte Karte in der linken Spalte beginnt – bei
   gerader Anzahl ändert sich also nichts. */
.service-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-num {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.service-claim {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.service-item p:last-child {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dim);
}

/* ---------- Leistungen auf schmalen Bildschirmen: aufklappbare Liste ----------
   Bis 860 px werden aus den fünf Karten fünf Accordion-Zeilen: Sichtbar bleiben
   Nummer, Titel und Subheadline, die Beschreibung klappt auf Tippen auf. Der
   Text bleibt vollständig erhalten. Ab 861 px – also im Tablet- und
   Desktop-Layout – greift nichts davon: Dort steht der Abschnitt unverändert.
   (Die Karten stehen ab 1080 px ehedem einspaltig über die volle Breite; erst
   darunter wird es eng genug, dass sich das Aufklappen lohnt.) */
@media (max-width: 860px) {
  /* Aus dem Raster mit Rasterhintergrund wird eine ruhige Liste. Der Rahmen
     bleibt, die Trennlinien kommen jetzt von den Zeilen selbst. */
  .service-list {
    display: block;
    gap: 0;
    background: none;
  }

  /* Die Karte wird zur Zeile. Die Fläche bleibt, damit die Unterscheidung der
     Zeilen erhalten bleibt; die geöffnete Zeile hebt sich minimal ab – auf
     dieselbe ruhige Weise wie beim Hover auf dem Desktop. */
  .service-item {
    display: block;
    padding: 0;
    border-top: 1px solid var(--line-soft);
  }
  .service-item:first-child { border-top: 0; }
  .service-item.is-open { background: var(--bg-elevated); }

  /* Der Kopf trägt den Schalter: Er füllt die ganze Zeile, damit überall
     getippt werden kann – nicht nur auf dem kleinen Zeichen. */
  .service-head {
    position: relative;
    padding: 24px 24px 26px;
  }
  /* Kein reservierter Abstand rechts: Das Zeichen sitzt auf Höhe der
     Nummernzeile, Titel und Subheadline beginnen erst darunter. Sie können
     deshalb bis an den rechten Rand laufen und bleiben einzeilig. */

  /* Der Schalter liegt unsichtbar über der ganzen Kopfzeile und ist damit die
     eigentliche Schaltfläche; das Zeichen darin ist nur die Anzeige. */
  .service-toggle {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Das Zeichen: zwei feine Linien, aus denen ein Minus wird. Dieselbe
     zurückhaltende Sprache wie die übrigen Linien der Website; Gold erscheint
     nur im geöffneten Zustand – wie sonst auch nur als leiser Akzent. */
  .service-plus {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 15px;
    height: 15px;
  }
  .service-plus::before,
  .service-plus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--text-dim);
    transition: transform .4s var(--ease-out), opacity .4s var(--ease),
                background-color .4s var(--ease);
  }
  .service-plus::before {
    width: 15px;
    height: 1px;
    margin: -0.5px 0 0 -7.5px;
  }
  .service-plus::after {
    width: 1px;
    height: 15px;
    margin: -7.5px 0 0 -0.5px;
  }
  /* Aus dem Plus wird das Minus: Der senkrechte Strich zieht sich zusammen. */
  .service-item.is-open .service-plus::after { transform: scaleY(0); opacity: 0; }
  .service-item.is-open .service-plus::before { background: var(--accent); }

  /* Die Beschreibung klappt über ihre echte Inhaltshöhe auf und zu: Die
     Zeilenhöhe läuft von 0fr auf 1fr, der Inhalt wird dabei beschnitten.
     Deshalb ist keine feste Höhe nötig – der Text bestimmt sie selbst. */
  .service-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .55s var(--ease-out);
  }
  .service-item.is-open .service-panel { grid-template-rows: 1fr; }
  .service-panel-clip {
    overflow: hidden;
    min-height: 0;
  }
  /* Der Text läuft dem Aufklappen leicht nachlaufend ein. */
  .service-panel p {
    padding: 0 24px 28px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .45s var(--ease) .08s,
                transform .5s var(--ease-out) .08s;
  }
  .service-item.is-open .service-panel p { opacity: 1; transform: none; }
}

/* ==========================================================================
   ÜBER MICH
   Editorial und persönlich: links das Portrait, rechts Nummer, Überschrift,
   Claim und Text. Bewusst grosszügig – keine Karten, keine Boxen, keine
   Flächen, nur Typografie und eine feine Linie.
   ========================================================================== */
.about {
  display: grid;
  /* Das Portrait nimmt etwas mehr als die Hälfte ein und wirkt dadurch
     gleich wichtig wie der Text. */
  grid-template-columns: 1.08fr 1fr;
  gap: 88px;
  align-items: center;
}

/* ---------- Portrait ---------- */
.about-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
/* Ruhezustand: schwarzweiss. Der Übergang in die Farbe ist ein Detail, kein
   Effekt – er dauert bewusst lange (1,6 s) und bewegt nur die Sättigung,
   kein Zoom, kein Schatten, kein Leuchten. */
.about-media img {
  width: 100%;
  /* Ohne height:auto gewinnt das height-Attribut aus dem HTML gegen
     aspect-ratio, die Box würde hoch und schmal – und object-fit:cover
     schnitte das Bild links und rechts ab. */
  height: auto;
  /* Hochformat 4:5 – grosszügig und ruhig, näher am klassischen Portrait
     als ein Quadrat. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 42% center;
  /* Ruhezustand: schwarzweiss, mit einer sehr leichten Aufhellung, damit das
     Bild auch ohne Farbe lebendig bleibt. Der Übergang in die Farbe ist ein
     Detail, kein Effekt – er dauert bewusst lange (1,6 s) und bewegt nur
     Sättigung, Kontrast und Helligkeit, kein Zoom, kein Schatten, kein Leuchten. */
  filter: grayscale(1) contrast(1.04) brightness(1.02);
  transition: filter 1.6s var(--ease-out);
}

/* Nur auf Geräten mit Mauszeiger: beim Überfahren weich in Farbe. Die
   Fähigkeitsabfrage ersetzt den Touch-Geräten den Hover – dort übernimmt die
   Scroll-Beobachtung weiter unten. */
@media (hover: hover) {
  .about-media:hover img { filter: grayscale(0) contrast(1) brightness(1); }
}
/* Geräte ohne Mauszeiger kennen kein Hover. Dort blendet eine
   Scroll-Beobachtung (js/main.js) das Portrait dezent in Farbe, sobald es
   sichtbar wird. Die Klasse wird nur dort ausgewertet. */
@media (hover: none) {
  .about-media.is-inview img { filter: grayscale(0) contrast(1) brightness(1); }
}

/* ---------- Text ---------- */
.about-copy { display: grid; gap: 0; }
.about-num {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.about-copy h2 {
  margin-bottom: 18px;
}
.about-claim {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: 34px;
}
.about-text {
  display: grid;
  gap: 18px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.about-text p {
  color: var(--text-dim);
  font-weight: 300;
  font-size: 15.5px;
  max-width: 56ch;
}
/* Der erste Absatz ist der persönliche Einstieg und steht etwas heller. */
.about-text p:first-child {
  color: var(--text);
  font-size: 17px;
}

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  counter-reset: step;
}
.process-step {
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.step-num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--accent-soft);
  -webkit-text-stroke: 1px var(--accent);
  color: transparent;
}
.process-step p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dim);
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 72px;
}
.contact-intro { display: grid; gap: 20px; align-content: start; }
.contact-intro h2 { margin-bottom: 6px; }
.contact-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 14px;
}
.contact-mail {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.15rem);
  letter-spacing: 0.01em;
  word-break: break-word;
}
/* Die E-Mail-Adresse ist der wichtigste Kontaktweg. Statt einer dauerhaften
   Unterstreichung zieht beim Überfahren eine feine goldene Linie ruhig auf –
   dieselbe Interaktion wie in der Navigation. */
.contact-mail a {
  position: relative;
  text-decoration: none;
  transition: color .4s var(--ease);
}
.contact-mail a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.contact-mail a:hover,
.contact-mail a:focus-visible { color: var(--accent); }
.contact-mail a:hover::after,
.contact-mail a:focus-visible::after { transform: scaleX(1); }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contact-links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background-color .4s var(--ease);
}
@media (hover: hover) {
  .contact-links a:hover {
    color: #0c0c0d;
    background: var(--accent);
    border-color: var(--accent);
  }
}
.contact-links a:focus-visible {
  color: #0c0c0d;
  background: var(--accent);
  border-color: var(--accent);
}
.contact-region {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 10px;
}

.contact-form {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 40px 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.contact-form h3 { font-size: 13px; letter-spacing: 0.2em; color: var(--text-dim); }
.form-intro {
  margin-top: -8px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-faint);
}

.field { display: grid; gap: 8px; }
.field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #101011;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #d97070; }

.field-error {
  font-size: 12px;
  color: #e08c8c;
  margin: 0;
}

.form-status {
  min-height: 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.form-hint {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ==========================================================================
   FOOTER
   Bewusst kein klassischer mehrspaltiger Footer: keine Linkliste, keine
   Fussnavigation, keine Flächen. Nur Marke, Claim, die Pflichtlinks und das
   Copyright – zentriert, klein und mit viel Luft. Eine feine Linie trennt
   den Footer vom Kontaktimpuls darüber.
   ========================================================================== */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 88px var(--gutter) 64px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.site-footer .footer-mark {
  width: 54px;
  height: auto;
  /* Sehr zurückhaltend: die Marke ist Signatur, nicht Blickfang. */
  opacity: 0.6;
}
.footer-claim {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-top: 22px;
}

/* Die Pflichtlinks in einer ruhigen Zeile – klein, ohne Rahmen und ohne
   Fläche. Gold erscheint ausschliesslich im Hover-Zustand. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 30px;
}
.footer-links a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-faint);
  transition: color .3s var(--ease);
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--accent); }

.footer-legal {
  margin-top: 34px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  /* Etwas gedämpfter als die Links: die Zeile ist reine Formalie. */
  opacity: 0.75;
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 72px 24px 40px;
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox-body {
  width: 100%;
  max-width: 1100px;
  display: grid;
  gap: 16px;
  justify-items: center;
  transform: scale(0.97);
  transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox-body { transform: scale(1); }
.lightbox-body video {
  width: 100%;
  max-height: 76vh;
  background: #000;
  border-radius: var(--radius);
}

/* YouTube-Iframe: 16:9, füllt die Lightbox-Breite */
.lightbox-frame {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 76vh;
  border: 0;
  border-radius: var(--radius);
  background: #000;
}
.lightbox.is-youtube .lightbox-frame { display: block; }
.lightbox.is-youtube .lightbox-body video { display: none; }

/* ---------- Bildansicht: vergrössertes Cover-Artwork ---------- */
.lightbox-image {
  display: none;
  width: auto;
  max-width: 100%;
  /* Immer das ganze Bild zeigen, nie beschneiden */
  max-height: 74vh;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.lightbox.is-image .lightbox-image { display: block; }
.lightbox.is-image .lightbox-body video,
.lightbox.is-image .lightbox-frame { display: none; }

/* ---------- Hochformat-Video (Social Reels, 9:16) ---------- */
/* Ein Hochformat-Clip darf nie die volle Breite einnehmen, sonst wäre er
   höher als der Bildschirm. Er wird auf die verfügbare Höhe begrenzt. */
.lightbox-body video.is-portrait {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}

/* Dasselbe für Hochformat-Clips, die über YouTube laufen (Social Reels):
   Der Player bekommt das Format 9:16, damit das Bild die Fläche füllt und
   nicht links und rechts schwarze Balken zeigt. */
.lightbox.is-portrait-frame .lightbox-frame {
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  margin: 0 auto;
}

/* Zusatzangabe nur in der Bildansicht */
.lightbox-kind {
  display: none;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
.lightbox.is-image .lightbox-kind { display: block; }

.lightbox-hint {
  display: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
.lightbox.is-youtube .lightbox-hint { display: block; }
.lightbox-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 24px;
  padding: 10px 22px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  color: #0c0c0d;
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================================== */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 150px var(--gutter) 120px;
}
.legal-head { margin-bottom: 48px; }
.legal-head h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 16px;
}
.legal-sub {
  color: var(--text-dim);
  font-weight: 300;
  max-width: 62ch;
}

.legal section { margin-bottom: 44px; }
.legal h2 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.legal h3 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text);
  margin: 26px 0 8px;
}
.legal p {
  color: var(--text-dim);
  font-weight: 300;
  font-size: 15.5px;
  margin-bottom: 14px;
  max-width: 72ch;
}
.legal ul {
  margin: 0 0 14px;
  padding-left: 0;
  display: grid;
  gap: 8px;
}
.legal ul li {
  position: relative;
  padding-left: 20px;
  color: var(--text-dim);
  font-weight: 300;
  font-size: 15.5px;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.legal a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.legal a:hover,
.legal a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Adressblock */
.legal-address {
  border-left: 1px solid var(--line);
  padding: 4px 0 4px 20px;
  margin: 0 0 16px;
  color: var(--text-dim);
  font-weight: 300;
  font-style: normal;
  line-height: 1.8;
}

/* Hinweiskasten */
.legal-note {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 44px;
}
.legal-note p { margin-bottom: 0; font-size: 14.5px; }
.legal-note strong { color: var(--text); font-weight: 600; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 24px;
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background-color .4s var(--ease);
}
/* Zurück-Links rücken beim Überfahren minimal nach links – dieselbe Logik
   wie die Pfeile in Navigation und Galerie, nur in die andere Richtung. */
.legal-back span { transition: transform .4s var(--ease-out); }
@media (hover: hover) {
  .legal-back:hover {
    color: #0c0c0d;
    background: var(--accent);
    border-color: var(--accent);
  }
}
.legal-back:focus-visible {
  color: #0c0c0d;
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   UNTERSEITE «VISUAL DESIGN»
   Das vollständige Design-Portfolio. Ruhige, kuratierte Raster-Anordnung –
   bewusst ohne Karten-Optik: nur das Artwork, darunter eine leise Zeile.
   ========================================================================== */
.design-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 150px var(--gutter) 120px;
}
.design-head { margin-bottom: 72px; max-width: 74ch; }
.design-head h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 16px;
}
.design-sub {
  color: var(--text-dim);
  font-weight: 300;
  max-width: 62ch;
  margin-bottom: 22px;
}

.design-group { margin-bottom: 88px; }
.design-group h2 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

/* Raster: vier Spalten auf grossen, eine auf kleinen Bildschirmen.
   Abstand statt Rahmen – die Arbeiten sollen für sich stehen. */
.design-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 32px;
}

.design-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.design-media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.design-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sehr zurückhaltender Ruhezustand – die Arbeiten wirken erst beim
     Betrachten voll, nicht durch Dauer-Effekte. */
  filter: brightness(0.92);
  transition: transform .9s var(--ease-out), filter .7s var(--ease);
}
/* Nur mit Mauszeiger: eine minimale Vergrösserung (1,5 %) und das Anheben
   der Helligkeit. Auf Touch-Geräten bleibt das Bild unverändert – dort gibt
   es keinen Hover, und ein hängender Zustand wäre störend. */
@media (hover: hover) {
  .design-tile:hover .design-media img { transform: scale(1.015); filter: none; }
}
.design-tile:focus-visible .design-media img { transform: scale(1.015); filter: none; }
.design-tile:focus-visible { outline-offset: 6px; }

.design-meta {
  display: block;
  margin-top: 16px;
}
.design-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 5px;
}
.design-kind {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.design-grid-logos { grid-template-columns: repeat(4, 1fr); }

.design-note {
  color: var(--text-faint);
  font-size: 14.5px;
  font-weight: 300;
  max-width: 62ch;
  margin: 0 0 40px;
}

/* ==========================================================================
   UNTERSEITE «SOCIAL REELS»
   Die vollständige Sammlung. Gleiches Prinzip wie die Design-Unterseite:
   ein ruhiges Raster, bewusst ohne Karten-Optik – nur das Hochformat-Reel,
   darunter Titel und eine sehr kleine Metazeile. Hier ist mehr Platz pro
   Reel als im Karussell der Startseite.
   ========================================================================== */
.reel-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 150px var(--gutter) 120px;
}
.reel-page-head { margin-bottom: 72px; max-width: 74ch; }
.reel-page-head h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin-bottom: 16px;
}
.reel-page-sub {
  color: var(--text-dim);
  font-weight: 300;
  max-width: 62ch;
  margin-bottom: 22px;
}

/* Hochformat-Raster. Fünf Spalten auf grossen Bildschirmen sind bei 9:16
   zu schmal – vier bzw. drei lesen sich ruhiger und geben jedem Reel mehr
   Platz als im Karussell. */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px 32px;
}

.reel-card {
  display: grid;
  gap: 0;
  align-content: start;
}
/* Kein Rahmen, keine Fläche – nur das Bild mit einer sehr weichen,
   zurückhaltenden Bodenbeschattung, damit es sich vom Hintergrund löst. */
.reel-card .film-media {
  aspect-ratio: 9 / 16;
  box-shadow: 0 30px 60px -50px rgba(0, 0, 0, 0.9);
}
.reel-card-caption {
  display: grid;
  gap: 7px;
  padding-top: 18px;
}
.reel-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text);
}
.reel-card-meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.reel-page-note {
  color: var(--text-faint);
  font-size: 14.5px;
  font-weight: 300;
  max-width: 62ch;
  margin: 0 0 40px;
}

/* Rechtsseiten: Navigation bleibt sichtbar, statt im mobilen
   Off-Canvas-Menü zu verschwinden (dort gibt es keinen Hamburger). */
.primary-nav.nav-plain { position: static; opacity: 1; visibility: visible; transform: none; }

@media (max-width: 860px) {
  /* Auf den Rechtsseiten wird die Kopfzeilen-Navigation ausgeblendet,
     weil sie dort zu eng würde. Ersatz: Zurück-Link oben und die
     vollständige Navigation im Fussbereich. */
  .primary-nav.nav-plain { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* «Über mich» bleibt auf Tablets zweispaltig, nur mit engerem Abstand:
     Gestapelt entstünde neben dem Portrait eine halbleere Seite. */
  .about { gap: 56px; }
  /* Die Querformat-Projekte werden etwas höher, damit vom Bild mehr bleibt. */
  .film-wide .film-media { aspect-ratio: 16 / 7; }
  .work-list { gap: 84px; }
  /* Reel-Karussell: auf Tablets zwei Reels sichtbar, das zweite angeschnitten */
  .reel-slide { width: clamp(200px, 40vw, 280px); }
  .reel-track { gap: 22px; }
  .process-list { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .contact-form { padding: 32px 28px; }
  /* Design-Portfolio: auf Tablets drei statt vier Spalten */
  .design-grid,
  .design-grid-logos { grid-template-columns: repeat(3, 1fr); }
  .design-page { padding-top: 130px; }
  .design-head { margin-bottom: 56px; }
  /* Reel-Unterseite: drei Spalten auf Tablets */
  .reel-grid { grid-template-columns: repeat(3, 1fr); }
  .reel-page { padding-top: 130px; }
  .reel-page-head { margin-bottom: 56px; }
}

@media (max-width: 860px) {
  :root { --header-h: 72px; --gutter: 26px; }

  .nav-toggle { display: flex; }

  /* Mobiles Menü: ruhiges Aufklappen von oben, dunkler Hintergrund, grosse
     gut lesbare Links. Kein Slide von der Seite, keine komplexe Animation –
     nur ein kurzes, weiches Einfahren, das sich sofort richtig anfühlt. */
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px var(--gutter) 34px;
    background: rgba(12, 12, 13, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
                visibility .4s;
  }
  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .primary-nav ul a {
    display: block;
    padding: 20px 0;
    font-size: 16px;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
  }
  /* Im mobilen Menü entfällt die Haarline – hier braucht es nur klare,
     grosse Zeilen. Der aktive Bereich wird stattdessen in Gold gesetzt. */
  .primary-nav ul a::after { display: none; }
  .primary-nav ul a.is-active { color: var(--accent); }
  .nav-cta {
    margin-top: 26px;
    text-align: center;
    padding: 17px 22px;
  }

  .section { padding: 88px var(--gutter); }
  .section-head { margin-bottom: 44px; }

  /* Auf schmalen Geräten zeigt das Bild wieder sein volles 16:9-Format – ein
     16:5-Streifen wäre hier zu flach und würde zu viel wegschneiden. Der Text
     rückt an den unteren Bildrand, wo der Verlauf am dunkelsten ist, damit
     Nummer, Titel und Metazeile auch über hellen Bildteilen klar lesbar sind. */
  .film-wide .film-media { aspect-ratio: 4 / 3; }
  .film-wide .film-overlay {
    align-items: flex-end;
    padding-bottom: 30px;
  }
  .film-wide.film-text-right .film-overlay::before,
  .film-wide.film-text-left .film-overlay::before {
    background:
      linear-gradient(to top,
        rgba(8, 8, 9, 0.96) 0%,
        rgba(8, 8, 9, 0.88) 30%,
        rgba(8, 8, 9, 0.55) 58%,
        rgba(8, 8, 9, 0.14) 82%,
        rgba(8, 8, 9, 0) 100%);
  }
  .work-list { gap: 64px; }

  .hero { padding: calc(var(--header-h) + 40px) var(--gutter) 72px; }

  /* Coverflow: auf Tablets weniger Tiefe und engere Staffelung */
  .cover-carousel {
    --cover-w: min(52%, 340px);
    --cover-overlap: 56px;
    --rot-1: 16deg; --sc-1: 0.87; --z-1: -36px; --op-1: 0.74;
    --rot-2: 20deg; --sc-2: 0.76; --z-2: -72px; --op-2: 0.52;
    --rot-3: 23deg; --sc-3: 0.68; --z-3: -104px; --op-3: 0.32;
  }
  /* Leistungen: einspaltig und als aufklappbare Liste. Die eigentliche
     Accordion-Darstellung steht im @media-Block bei den Leistungs-Regeln;
     hier wird nur der frühere Karten-Innenabstand aufgehoben, weil die
     Innenabstände jetzt in der Kopfzeile der Zeile sitzen. */
  .service-list { grid-template-columns: 1fr; }
  .service-item { padding: 0; }
  /* «Über mich»: ab hier einspaltig – Portrait oben, Text darunter. */
  .about {
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }
  .about-media { max-width: 100%; }
  .scroll-hint { display: none; }
  /* Design-Portfolio: zwei Spalten auf dem Telefon */
  .design-grid,
  .design-grid-logos { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .design-group { margin-bottom: 64px; }
  .design-group h2 { margin-bottom: 24px; }
  .design-page { padding-top: 118px; padding-bottom: 88px; }
  .design-head { margin-bottom: 44px; }
  .design-name { font-size: 0.95rem; }
  /* Reel-Unterseite: zwei Spalten auf dem Telefon */
  .reel-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .reel-page { padding-top: 118px; padding-bottom: 88px; }
  .reel-page-head { margin-bottom: 44px; }
  .reel-card-title { font-size: 0.82rem; }
  .reel-card-caption { padding-top: 14px; }
}

@media (max-width: 560px) {
  /* Mobile: die zentrale Arbeit steht klar im Fokus, die Nachbarn ragen nur
     leicht angeschnitten ins Bild. Perspektive stark zurückgenommen, damit
     die Galerie mit dem Finger gut bedienbar bleibt. */
  .cover-carousel {
    --cover-w: min(70%, 320px);
    --cover-overlap: 30px;
    /* Tiefe und Drehung auf dem Telefon: sehr dezent. */
    --rot-1: 10deg; --sc-1: 0.92; --z-1: -22px; --op-1: 0.8;
    --rot-2: 12deg; --sc-2: 0.84; --z-2: -44px; --op-2: 0.6;
    --rot-3: 14deg; --sc-3: 0.76; --z-3: -66px; --op-3: 0.4;
  }
  .cover-more { margin-top: 34px; }
  .artwork .section-head { margin-bottom: 36px; }
  .cover-info { margin-top: 20px; }
  .cover-nav { width: 42px; height: 42px; }
  .cover-counter { min-width: 74px; letter-spacing: 0.2em; }
  .process-list { grid-template-columns: 1fr; }
  /* Auf dem Telefon steht ein Reel klar im Fokus und nimmt gut zwei Drittel
     der Breite ein – das nächste ist deutlich angeschnitten, damit das
     Weiterwischen sofort erkennbar ist. */
  .reel-slide { width: 64%; }
  .reel-track { gap: 16px; }
  .reel-block { margin-top: 56px; }
  .reel-caption { padding-top: 14px; }
  .reel-more { margin-top: 28px; }
  /* Über mich: das Portrait bekommt auf dem Telefon eine ruhige Lesebreite. */
  .about-media { max-width: 100%; }
  .about-text p:first-child { font-size: 16px; }
  /* Auf dem Telefon nehmen Titel und Metazeile die volle Textbreite ein. */
  .film-wide .film-caption { max-width: 100%; }
  .work-list { gap: 52px; }
  .brand-text small { display: none; }
  .film-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 9px; }
  .contact-form { padding: 26px 20px; }
  .lightbox { padding: 76px 14px 30px; }
  .site-footer { padding: 64px var(--gutter) 48px; }
  .footer-links { gap: 10px 20px; margin-top: 26px; }
  .footer-legal { margin-top: 28px; }
}

/* ---------- 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;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-video { animation: none; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .scroll-hint, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}