/* =============================================================================
   PORTFOLIO-VORLAGE · Analog-Poster (monochrom + 1 Akzent)
   Cremiges Monochrom auf Papier mit Filmkorn, plakativer Poster-Typo,
   rotierendem Sticker-Button und feinem Blueprint-Raster.
   Für alle Personen-Seiten gleich. Farbwelt & Schrift zentral unter :root.
   ========================================================================== */

/* --- 1. DESIGN-VARIABLEN ------------------------------------------------ */
:root {
  /* Monochrome Basis (Papier & Tinte) – Standard: warmes Creme.
     Eine kühl-graue Alternative gibt es weiter unten unter [data-surface="cool"]. */
  --paper:    #efe9dc;   /* warmes Creme – Hintergrund */
  --paper-2:  #e7dfcf;   /* etwas tiefer */
  --print:    #faf7f0;   /* fast-weiß für Abzüge/Karten */
  --ink:      #1b1916;   /* warmes Anthrazit/Schwarz (Text) */
  --ink-dim:  #6f685b;   /* gedämpft, Sekundärtext */
  --line:     rgba(27, 25, 22, 0.16);
  --grid:     rgba(27, 25, 22, 0.06);   /* Blueprint-Rasterlinien */

  /* DER EINE Akzent – sparsam einsetzen. Für andere Stimmung nur hier ändern. */
  --accent:   #d23a24;   /* Filmrot. Alternativen: #1f53e0 (Elektro-Blau) o.ä. */

  --halation: rgba(40, 30, 18, 0.16);   /* dezenter warmer Lichtsaum */

  /* Maße */
  --radius:    4px;
  --radius-lg: 10px;
  --pad:       clamp(1.25rem, 4vw, 6rem);
  --maxw:      1320px;

  --font-poster:  "Anton", "Arial Narrow", sans-serif;   /* Riesen-Hero */
  --poster-weight: 400;                                  /* Gewicht der Hero-Schrift */
  --poster-scale: 1;                                     /* Größen-Faktor (breite Fonts kleiner) */
  --font-display: var(--font-poster);                    /* Titel = dieselbe Schrift wie
                                                            der Hero. Pro Person via
                                                            theme.displayFont übersteuerbar */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: var(--print); }

.mono, .section__eyebrow, .hero__kicker, .card__cat, .card__meta,
.contact__details .lbl, .filters button, .nav__links a, .footer__legal,
.hero__reel-label, .contact__form label, .stats__item .stats__label,
.tags li, .socials a, .btn { font-family: var(--font-mono); }

/* --- 3. TEXTUR & HINTERGRUND -------------------------------------------- */

/* Filmkorn / Papierfaser */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.40; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blueprint-Raster – fein, zu den Rändern ausgeblendet */
.gridbg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: clamp(46px, 5.5vw, 78px) clamp(46px, 5.5vw, 78px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 22%, #000 45%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 22%, #000 45%, transparent 100%);
}

/* =============================================================================
   OBERFLÄCHE "COOL"  ·  kühles Grau + Siebdruck-Raster
   -----------------------------------------------------------------------------
   Gilt NUR für Seiten, die in ihrer content.js  theme.surface: "cool"  gesetzt
   haben. Alle anderen behalten das warme Creme mit Karo-Raster von oben.
   Zum Abschalten: die Zeile in der content.js löschen.
   ========================================================================== */
:root[data-surface="cool"] {
  --paper:    #e8eaec;   /* kühles Hellgrau – Hintergrund */
  --paper-2:  #dcdfe3;
  --print:    #f7f8f9;   /* fast-weiß für Abzüge/Karten */
  --ink:      #17191c;   /* kühles Anthrazit */
  --ink-dim:  #646a71;
  --line:     rgba(23, 25, 28, 0.16);
  --grid:     rgba(23, 25, 28, 0.10);   /* Druckraster – feine Punkte */
  --grid-2:   rgba(23, 25, 28, 0.05);   /* zweites, gröberes Raster (gedreht) */
  --halation: rgba(18, 24, 32, 0.14);   /* kühler Lichtsaum */
}

/* Korn: gröber und entsättigt, damit das Grau keinen Farbstich bekommt */
[data-surface="cool"] .grain {
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Zweite Ebene: grosse weiche Wolken = ungleichmässiger Farbauftrag */
[data-surface="cool"] .grain::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 700px 700px;
}

/* Punktraster statt Karo, plus ein zweites um 18° gedrehtes Raster.
   Der Winkelversatz zwischen beiden erzeugt den Siebdruck-Eindruck. */
[data-surface="cool"] .gridbg {
  overflow: hidden;
  background-image: radial-gradient(var(--grid) 0.9px, transparent 1.1px);
  background-size: clamp(10px, 1vw, 14px) clamp(10px, 1vw, 14px);
}
[data-surface="cool"] .gridbg::after {
  content: ""; position: absolute; inset: -40%;
  background-image: radial-gradient(var(--grid-2) 1.1px, transparent 1.4px);
  background-size: clamp(17px, 1.7vw, 24px) clamp(17px, 1.7vw, 24px);
  transform: rotate(18deg);
}

/* --- 4. ABZUG / KARTE --------------------------------------------------- */
.glass {
  background: var(--print);
  border: 1px solid rgba(27, 25, 22, 0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 18px 40px -22px rgba(40, 30, 18, 0.5),
    0 0 46px -16px var(--halation);
}

/* --- 5. NAVIGATION ------------------------------------------------------ */
.nav {
  position: fixed; top: clamp(0.6rem, 2vw, 1.2rem); left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), var(--maxw)); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  border-radius: 999px;                       /* Pill-Nav */
  background: rgba(250, 247, 240, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--print);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; line-height: 1;
}
.nav__name { font-family: var(--font-poster); font-weight: var(--poster-weight); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1; }
.nav__links { display: flex; align-items: center; gap: 0.15rem; }
.nav__links a {
  padding: 0.5rem 0.9rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-dim); border-radius: 999px; transition: color 0.25s, background 0.25s;
}
.nav__links a:hover { color: var(--ink); background: rgba(27,25,22,0.05); }
.nav__cta { color: var(--print) !important; background: var(--ink); }
.nav__cta:hover { background: var(--accent) !important; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* --- 6. BUTTONS (Pill) -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--print); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--print); }
.btn--full { width: 100%; justify-content: center; }
.btn__icon { font-size: 0.9em; }

/* --- 7. HERO ------------------------------------------------------------ */
.hero {
  min-height: 100svh; position: relative; display: grid; align-items: center;
  padding: clamp(7rem, 14vh, 11rem) var(--pad) clamp(3rem, 8vh, 6rem);
  max-width: var(--maxw); margin-inline: auto;
}
/* Hero-Variante OHNE große Poster-Headline.
   Aktivieren mit  class="hero hero--compact"  in der index.html der Person.
   Ohne die Riesen-Typo bliebe sonst eine fast leere Bildschirmhöhe stehen:
   der Hero wird nur so hoch wie sein Inhalt, dafür ist der Einstiegstext größer. */
.hero--compact { min-height: auto; padding-top: clamp(5.5rem, 9vh, 7rem); }
.hero--compact .hero__subline { margin-top: 1.4rem; max-width: 50ch; font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--ink); }

/* Ab Tablet/Desktop: Text und Showreel nebeneinander auf gleicher Höhe.
   (Darunter greift der 900px-Block unten und stellt den Abzug wieder unter den Text.) */
@media (min-width: 901px) {
  .hero--compact {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 360px);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  /* Nicht mehr absolut unten rechts, sondern normale zweite Spalte.
     WICHTIG: relative, NICHT static – Bild, Sticker und Label im Abzug sind
     absolut positioniert und brauchen den Button als Bezugsrahmen. Bei static
     würden sie sich am ganzen Hero ausrichten und quer über die Seite laufen. */
  .hero--compact .hero__reel { position: relative; right: auto; bottom: auto; width: 100%; margin: 0; }
  /* Scroll-Hinweis ergibt ohne bildschirmfüllenden Hero keinen Sinn */
  .hero--compact .hero__scroll { display: none; }
}
/* Markennamen im Einstiegstext: hervorgehoben und anklickbar */
.hero__subline a {
  color: var(--accent); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: text-decoration-color 0.3s, color 0.3s;
}
.hero__subline a:hover { text-decoration-color: var(--accent); }
.hero__subline em { font-style: normal; color: var(--accent); }

.hero__inner { max-width: 1100px; position: relative; z-index: 3; }
.hero__kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.74rem; color: var(--accent); margin-bottom: 1.4rem; padding-left: 1.4rem; position: relative;
}
.hero__kicker::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Riesen-Poster-Typo, die den Hero flutet */
.hero__headline {
  font-family: var(--font-poster); font-weight: var(--poster-weight); text-transform: uppercase;
  font-size: calc(clamp(2.9rem, 12vw, 9rem) * var(--poster-scale)); line-height: 0.88; letter-spacing: 0.005em;
  overflow-wrap: break-word;
}
.hero__headline em { font-style: normal; color: var(--accent); }
.hero__headline .lead { display: block; }
/* Loopendes Schluss-Wort */
.rotator { display: block; color: var(--accent); will-change: transform, opacity; transition: transform 0.42s var(--ease), opacity 0.42s var(--ease); }
.rotator.is-out { opacity: 0; transform: translateY(-0.3em) rotate(-2deg); }
.rotator.is-in  { opacity: 0; transform: translateY(0.34em); transition: none; }
.hero__subline { margin-top: 1.8rem; max-width: 44ch; font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--ink-dim); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* Rotierender Sticker – klebt als Play-Element auf der Showreel-Ecke */
.badge {
  position: absolute; z-index: 6;
  top: -24px; left: -24px;
  width: clamp(80px, 8.5vw, 112px); aspect-ratio: 1;
  border-radius: 50%; background: var(--accent); color: var(--print);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 0.4s var(--ease);
  pointer-events: none;   /* der ganze Abzug ist der Klick-Button */
}
.hero__reel:hover .badge { transform: scale(1.08); }
.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge__ring text { font-family: var(--font-mono); font-size: 9.6px; font-weight: 700; letter-spacing: 1.2px; fill: var(--print); }
.badge__arrow { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Showreel als Foto-Abzug, überlappt die Typo */
.hero__reel {
  position: absolute; z-index: 5; right: var(--pad); bottom: clamp(3rem, 8vh, 6rem);
  width: clamp(230px, 27vw, 360px); aspect-ratio: 4/3.4;
  padding: 12px 12px 42px; background: var(--print); border-radius: 2px;
  display: block; transform: rotate(2.2deg);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.hero__reel:hover { transform: rotate(0deg) translateY(-4px); }
.hero__reel-media { position: absolute; inset: 12px 12px 42px; background-size: cover; background-position: center; border-radius: 1px; filter: saturate(0.9) contrast(1.02); }
.hero__reel-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 50px var(--halation); }
.hero__reel-play {
  position: absolute; left: 50%; top: calc(50% - 15px); transform: translate(-50%, -50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: rgba(250,247,240,0.92);
  display: grid; place-items: center; color: var(--accent); font-size: 1rem;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
}
.hero__reel:hover .hero__reel-play { transform: translate(-50%,-50%) scale(1.1); background: var(--accent); color: var(--print); }
.hero__reel-label { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 0.7rem; letter-spacing: 0.28em; color: var(--ink); }

.hero__scroll { position: absolute; left: var(--pad); bottom: 2rem; width: 24px; height: 40px; border: 1px solid var(--line); border-radius: 14px; z-index: 3; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; background: var(--accent); border-radius: 2px; animation: scroll 1.8s infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* --- 8. SECTION-GRUNDLAYOUT --------------------------------------------- */
.section { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 10vh, 8rem) var(--pad); }
.section__head { margin-bottom: 2.6rem; }
.section__eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.72rem; color: var(--ink-dim); margin-bottom: 0.9rem; padding-left: 1.6rem; position: relative;
}
.section__eyebrow::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 1rem; height: 2px; background: var(--accent); }
.section__title { font-family: var(--font-display); font-weight: var(--poster-weight); text-transform: uppercase; font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 0.96; letter-spacing: 0.005em; }

/* --- 9. PROJEKTE als FOTO-ABZÜGE --------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.2rem; }
.filters button {
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-dim); border: 1px solid var(--line); background: transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.filters button:hover { color: var(--ink); border-color: var(--ink); }
.filters button.is-active { color: var(--print); background: var(--accent); border-color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.card {
  grid-column: span 3; display: flex; flex-direction: column;
  background: var(--print); padding: 10px 10px 0; border-radius: 2px; cursor: pointer;
  box-shadow: 0 16px 36px -22px rgba(40,30,18,0.5), 0 0 38px -16px var(--halation);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.card:nth-child(odd)  { transform: rotate(-0.7deg); }
.card:nth-child(even) { transform: rotate(0.7deg); }
.card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 50px -24px rgba(40,30,18,0.6), 0 0 56px -16px var(--halation); }
.card.is-featured { grid-column: span 3; }
.card__media { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; border-radius: 1px; overflow: hidden; filter: saturate(0.9) contrast(1.02); }
/* Das Vorschaubild liegt als echtes <img> in der Kachel (statt als CSS-Hintergrund),
   damit die Bildersuche es findet. object-fit: cover füllt den 16:10-Rahmen
   genauso randlos wie vorher background-size: cover. */
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 46px var(--halation); }
.card.is-featured .card__media { aspect-ratio: 16/12; }
.card__overlay { position: static; background: none; padding: 0.85rem 0.4rem 1.1rem; display: flex; flex-direction: column; }
.card__cat { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.card__title { font-family: var(--font-display); font-weight: var(--poster-weight); text-transform: uppercase; font-size: 1.5rem; line-height: 1.08; letter-spacing: 0.015em; color: var(--ink); }
.card__meta { font-size: 0.72rem; color: var(--ink-dim); margin-top: 0.4rem; }
.card__play { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(250,247,240,0.92); color: var(--accent); display: grid; place-items: center; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s, background 0.3s, color 0.3s; }
.card:hover .card__play { opacity: 1; transform: scale(1); background: var(--accent); color: var(--print); }

/* --- 10. ÜBER MICH ------------------------------------------------------ */
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about__media { display: flex; justify-content: center; }
.about__portrait {
  width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center;
  background-color: var(--print); border-radius: 2px; border: 12px solid var(--print); transform: rotate(-1.5deg);
  box-shadow: 0 20px 44px -24px rgba(40,30,18,0.55), 0 0 46px -16px var(--halation);
  filter: saturate(0.9) contrast(1.02);
}
.about__copy { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; color: var(--ink-dim); font-size: 1.06rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }
.tags li { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.4rem; }
.stats__item .stats__value { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--ink); line-height: 1; }
.stats__item .stats__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); margin-top: 0.5rem; }

/* --- 10b. FOTO-GALERIE ---------------------------------------------------
   Spalten-Raster ("Masonry"): Hoch- und Querformat dürfen gemischt werden,
   die Bilder behalten ihr eigenes Seitenverhältnis. Die Spaltenzahl ergibt
   sich automatisch aus der Fensterbreite (min. 250px pro Spalte) – dafür
   braucht es keine eigenen Umbruchpunkte. */
/* Optionaler Fließtext unter einer Sektions-Überschrift */
.section__lead { margin-top: 1rem; max-width: 56ch; color: var(--ink-dim); font-size: 1.02rem; }
.section__lead:empty { display: none; }

.gallery__grid { columns: 250px; column-gap: clamp(0.9rem, 1.8vw, 1.6rem); }

/* Variante für Galerien mit EINHEITLICHEM Bildformat (z.B. lauter 16:9-Artworks).
   Das Spalten-Layout oben verteilt höhenbalanciert – bei wenigen Bildern bleibt
   dann eine Spalte leer und die Reihenfolge liest sich senkrecht. Ein echtes
   Raster füllt dagegen zeilenweise von links nach rechts, ohne Lücken.
   Aktivieren mit  class="gallery__grid gallery__grid--raster"  */
.gallery__grid--raster {
  columns: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  align-items: start;
}
.gallery__grid--raster .shot { margin: 0; }
.shot {
  break-inside: avoid; margin: 0 0 clamp(0.9rem, 1.8vw, 1.6rem);
  background: var(--print); padding: 9px; border-radius: 2px;
  box-shadow: 0 14px 32px -22px rgba(40,30,18,0.5), 0 0 34px -16px var(--halation);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.shot img { display: block; width: 100%; height: auto; border-radius: 1px; cursor: zoom-in; filter: saturate(0.9) contrast(1.02); }
.shot figcaption { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); padding: 0.6rem 0.15rem 0.1rem; }
/* Spezifisch genug, um die .reveal.is-visible-Regel weiter unten zu schlagen */
.gallery__grid .shot:hover { transform: translateY(-4px) rotate(-0.7deg); box-shadow: 0 24px 46px -24px rgba(40,30,18,0.6), 0 0 50px -16px var(--halation); }

/* --- 11. WORKSHOPS / FAUST AUFS AUGE ------------------------------------ */
.workshops__card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); display: flex; align-items: center; gap: 2rem; }
.workshops__text { max-width: 60ch; }
.workshops__text > p { color: var(--ink-dim); margin: 1rem 0 1.8rem; font-size: 1.05rem; }
.workshops__title { font-family: var(--font-display); font-weight: var(--poster-weight); text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 0.98; letter-spacing: 0.005em; }
.workshops__glyph { font-size: clamp(5rem, 12vw, 9rem); line-height: 1; margin-left: auto; filter: drop-shadow(0 10px 20px rgba(40,30,18,0.25)); }
/* Steht in der content.js ein faustaufsauge.logo, sitzt hier statt des Emojis
   das Wortbildmarken-PNG. Die Breite ist bewusst großzügig, weil die Marke
   quer liegt und sonst neben der Überschrift verschwinden würde.
   flex-shrink: 0 verhindert, dass der Text daneben sie zusammenquetscht. */
.workshops__logo { display: block; width: clamp(180px, 26vw, 340px); height: auto; flex-shrink: 0; }

/* --- 12. KONTAKT -------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__intro > p { color: var(--ink-dim); margin-top: 1rem; font-size: 1.08rem; max-width: 42ch; }
.contact__details { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.contact__details li { display: flex; align-items: center; gap: 0.9rem; font-size: 1.05rem; }
.contact__details a, .contact__details span:not(.lbl) { font-family: var(--font-body); font-weight: 500; }
.contact__details .lbl { color: var(--accent); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; min-width: 56px; }
.contact__details a:hover { color: var(--accent); }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.socials a { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.socials a:hover { background: var(--ink); color: var(--print); border-color: var(--ink); }

.contact__form { border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; }
.contact__form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.66rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.contact__form input, .contact__form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,0.6); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.8rem 1rem; resize: vertical;
  transition: border-color 0.25s, background 0.25s;
}
.contact__form input::placeholder, .contact__form textarea::placeholder { color: #b3a890; }
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.contact__form-note { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); min-height: 1.2em; text-transform: none; letter-spacing: 0; }

/* --- 13. FOOTER --------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); margin-top: 2rem; }
.footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 2.5rem var(--pad); display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.footer__name { font-family: var(--font-display); font-weight: var(--poster-weight); text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.03em; }
.footer__company { display: block; font-size: 0.74rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin-top: 0.3rem; }
/* Die Marken im Footer dürfen verlinkt sein (siehe footer.brands in der
   content.js). Wie überall auf der Seite sehen Links erst beim Überfahren
   wie Links aus – das hält die Fußzeile ruhig. */
.footer__company a:hover { color: var(--accent); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); }
.footer__legal a:hover { color: var(--accent); }

/* --- 14. LIGHTBOX ------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); background: rgba(20, 16, 10, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__frame { width: min(100%, 1100px); aspect-ratio: 16/9; border-radius: 2px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: scale(0.96); transition: transform 0.4s var(--ease); }
.lightbox.is-open .lightbox__frame { transform: scale(1); }
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }
/* Bild-Variante der Lightbox (Foto-Galerie): kein festes 16/9, das Foto
   behält sein Format und bekommt den Papierrand wie ein Abzug. */
.lightbox.is-image .lightbox__frame { width: auto; max-width: min(100%, 1100px); aspect-ratio: auto; background: transparent; box-shadow: none; overflow: visible; }
.lightbox__img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; background: var(--print); padding: 10px; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 48px; height: 48px; border-radius: 50%; background: rgba(250,247,240,0.15); color: var(--print); font-size: 1.2rem; transition: background 0.25s; }
.lightbox__close:hover { background: var(--accent); }

/* --- 15. SCROLL-REVEAL -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.card.reveal { transform: translateY(24px); }
.card.reveal.is-visible:nth-child(odd)  { transform: rotate(-0.7deg); }
.card.reveal.is-visible:nth-child(even) { transform: rotate(0.7deg); }

/* --- 16. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__links.is-open { display: flex; position: absolute; top: calc(100% + 0.6rem); right: 0; flex-direction: column; align-items: stretch; gap: 0.1rem; padding: 0.5rem; border-radius: 14px; min-width: 210px; background: rgba(250,247,240,0.96); border: 1px solid var(--line); }
  .nav__burger { display: flex; }
  .hero { min-height: auto; padding-top: 8rem; }
  .hero__reel { position: relative; right: auto; bottom: auto; width: min(100%, 360px); margin: 3rem auto 0; transform: rotate(-1.5deg); }
  .hero__scroll { display: none; }
  .grid { grid-template-columns: 1fr; }
  .card, .card.is-featured { grid-column: span 1; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 320px; margin-inline: auto; }
  .workshops__card { flex-direction: column; align-items: flex-start; }
  .workshops__glyph { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}