/* BÄÄÄM · Entwurf von Seetalwebsites
   Papier + Tinte + ein Rot (aus dem Logo). Abstände nur 8 · 16 · 24 · 40 · 64 · 104. */

:root {
  --papier: #F2F0EB;
  --flaeche: #E8E5DE;
  --tinte: #161412;
  --rot: #C02B2D;
  --rot-tief: #A42326;

  --t1: rgba(22, 20, 18, .92);
  --t2: rgba(22, 20, 18, .68);
  --t3: rgba(22, 20, 18, .48);
  --h1: rgba(242, 240, 235, .94);
  --h2: rgba(242, 240, 235, .68);
  --h3: rgba(242, 240, 235, .48);

  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;

  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --move: cubic-bezier(0.32, 0.72, 0, 1);

  --rand: 20px;
  --luft: 72px;
  --kopf: 64px;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 128px; --kopf: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tinte); }
html.intro { overflow: hidden; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--t1);
  font: 400 17px/1.5 var(--f-text);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.mono { font-family: var(--f-mono); font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: 400; }

.rahmen { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--rot); color: var(--papier);
  font: 600 16px/1 var(--f-text); letter-spacing: -0.005em; text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--rot-tief); }
.knopf:active { transform: scale(.98); }
.knopf--klein { height: 40px; padding: 0 18px; font-size: 15px; }
.textlink {
  display: inline-block; padding: 8px 0;
  font-weight: 500; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}
.textlink--hell { color: var(--h1); text-decoration-color: rgba(242, 240, 235, .48); }
.textlink--hell:hover { text-decoration-color: var(--rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 4px; }

/* Titel */
.titel {
  font: 500 clamp(48px, 7vw, 104px)/.96 var(--f-display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.045em;
}
.titel--gross { font-size: clamp(56px, 9vw, 128px); }

/* Zeilen, die aus einer Maske steigen */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; }
.js [data-reveal] .ln > span { transform: translateY(108%); }
.js [data-reveal].is-in .ln > span {
  transform: none;
  transition: transform 1000ms var(--expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ─────────── Intro ─────────── */
.intro-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
html:not(.intro) .intro-layer { display: none; }
.intro-svg { width: 100%; height: 100%; }
.i-paper { fill: var(--papier); }
.i-ring { fill: var(--rot); }
html.intro:not(.intro-auf) .kopf { opacity: 0; }
.credit__name .ln > span { will-change: transform; }

/* ─────────── Kopf ─────────── */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf);
  display: flex; align-items: center; gap: 40px;
  padding: 0 max(var(--rand), calc((100% - 1200px) / 2));
  color: var(--h1);
  transition: background-color 250ms ease-out, color 250ms ease-out, box-shadow 250ms ease-out, opacity 600ms ease-out;
}
.kopf.is-fest {
  background: rgba(242, 240, 235, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--tinte);
  box-shadow: 0 1px 0 rgba(22, 20, 18, .08);
}
.kopf__logo { display: block; width: 112px; padding: 8px 0; margin-right: auto; }
.kopf__logo svg { width: 100%; height: auto; }
.kopf__nav { display: none; gap: 24px; }
.kopf__nav a { font-weight: 500; font-size: 15px; text-decoration: none; opacity: .92; transition: opacity 150ms ease-out; }
.kopf__nav a:hover { opacity: .6; }
@media (min-width: 900px) {
  .kopf__logo { width: 136px; }
  .kopf__nav { display: flex; }
}

/* ─────────── 1 · Einstieg ─────────── */
/* Ohne Bewegung: Film (ein Bildschirm hoch), darunter Wortmarke und Text auf Papier.
   Mit Bewegung (.scrolly): Bühne klebt, der Film zieht sich beim Scrollen in die Buchstaben zurück. */
.held { position: relative; background: var(--papier); }
.held__buehne { position: relative; }
.held__film {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--tinte); color: var(--h1);
}
.held__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.held__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(22, 20, 18, .62) 0%, rgba(22, 20, 18, .16) 30%, rgba(22, 20, 18, 0) 46%),
    linear-gradient(to bottom, rgba(22, 20, 18, .36) 0%, rgba(22, 20, 18, 0) 16%);
}
/* wird beim Scrollen dunkler, damit helle Szenen in den Buchstaben auf Papier lesbar bleiben */
.held__dunkel { position: absolute; inset: 0; background: var(--tinte); opacity: 0; pointer-events: none; }
.held__vorne {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: 24px;
  display: grid; gap: 24px;
}
.credit__label { display: flex; align-items: center; gap: 8px; color: var(--h2); }
.credit__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }
.credit__name {
  margin-top: 8px;
  font: 500 40px/1 var(--f-display); font-variation-settings: "opsz" 96;
  letter-spacing: -0.04em; color: var(--h1);
}
.credit__name .ln > span { animation: steigen 900ms var(--expo) both; }
@keyframes steigen { from { transform: translateY(108%); } to { transform: none; } }
.credit__art { margin-top: 8px; color: var(--h2); }
.held__h1 {
  padding-top: 16px; border-top: 1px solid rgba(242, 240, 235, .24);
  font: 500 17px/1.3 var(--f-text); letter-spacing: -0.01em; color: var(--h1);
}
.js .held__vorne [data-reveal] { opacity: 0; transform: translateY(16px); }
.js .held__vorne [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms ease-out, transform 1000ms var(--expo); }
.js .held__vorne .held__h1.is-in { transition-delay: 160ms; }

.held__maske { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hm-papier { fill: var(--papier); }

.held__ende { padding-top: var(--luft); padding-bottom: 40px; }
.held__wm { width: 100%; height: auto; color: var(--tinte); margin-bottom: 40px; }
.held__ende-text { display: grid; gap: 24px; }
.held__satz { color: var(--t1); max-width: 44ch; }
.held__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.held__aktionen .knopf { flex: 1 1 100%; }
.held__aktionen .textlink { margin: 0 auto; color: var(--t1); text-decoration-color: rgba(22, 20, 18, .36); }
.held__aktionen .textlink:hover { text-decoration-color: var(--rot); }

@media (min-width: 560px) {
  .held__aktionen .knopf { flex: 0 0 auto; }
  .held__aktionen .textlink { margin: 0; }
}
@media (min-width: 900px) {
  .held__vorne { grid-template-columns: 1fr minmax(240px, 300px); align-items: end; gap: 64px; padding-bottom: 40px; }
  .credit__name { font-size: clamp(56px, 5.4vw, 80px); }
  .held__h1 { font: 500 24px/1.2 var(--f-display); letter-spacing: -0.025em; border-top: 0; padding-top: 0; }
  .held__ende-text { grid-template-columns: 1fr auto; align-items: end; gap: 64px; }
  .held__satz { font-size: 20px; max-width: 40ch; }
}

/* Mit Bewegung */
html.scrolly .held { height: 280vh; height: 280svh; }
html.scrolly .held__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
html.scrolly .held__film { position: absolute; inset: 0; height: auto; min-height: 0; }
html.scrolly .held__maske { display: block; }
html.scrolly .held__wm { display: none; }
html.scrolly .held__ende {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-top: 0;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 400ms ease-out, transform 900ms var(--expo);
}
html.scrolly .held.ist-ende .held__ende { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { html.scrolly .held__ende { padding-bottom: 64px; } }

/* ─────────── 2 · Filme ─────────── */
.filme { padding: var(--luft) 0; background: var(--papier); position: relative; }
.filme__kopf { display: grid; gap: 24px; margin-bottom: 64px; }
.filme__intro { color: var(--t2); max-width: 36ch; }
@media (min-width: 900px) {
  .filme__kopf { grid-template-columns: 1fr minmax(280px, 340px); align-items: end; gap: 64px; margin-bottom: 104px; }
}

.katalog { border-top: 1px solid var(--rot); }
.katalog__spalten { display: none; }
.film { border-bottom: 1px solid rgba(192, 43, 45, .42); }
.film__zeile {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr 112px;
  grid-template-areas: "nr kunde mini" "nr art mini";
  column-gap: 16px; row-gap: 0;
  align-items: center;
  padding: 16px 0;
}
.film__nr { grid-area: nr; align-self: start; padding-top: 6px; color: var(--t3); }
.film__kunde {
  grid-area: kunde; align-self: end;
  font: 500 24px/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--t1);
  transition: color 150ms ease-out;
}
.film__kunde--offen { color: var(--t3); }
.film__art { grid-area: art; align-self: start; color: var(--t2); font-size: 15px; }
.film__laenge { display: none; }
.film__plus { display: none; }
.film__mini {
  grid-area: mini; width: 112px; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; border-radius: 4px; background: var(--flaeche);
}
.film__zeile:focus-visible { outline-offset: -2px; }
.film__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--move); }
.film__panel > div { overflow: hidden; min-height: 0; }
.film.ist-offen .film__panel { grid-template-rows: 1fr; }
.film__rahmen { padding-bottom: 24px; }
.film__rahmen video { width: 100%; aspect-ratio: 16 / 9; height: auto; background: var(--tinte); border-radius: 4px; object-fit: cover; }

@media (min-width: 900px) {
  .katalog__spalten, .film__zeile {
    display: grid;
    grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1.25fr) 96px 40px;
    grid-template-areas: none;
    column-gap: 24px;
    align-items: center;
  }
  .katalog__spalten { padding: 16px 0; color: var(--t3); border-bottom: 1px solid rgba(192, 43, 45, .42); }
  .film__zeile { padding: 24px 0; }
  .film__nr, .film__kunde, .film__art { grid-area: auto; align-self: center; padding: 0; }
  .film__kunde { font-size: clamp(28px, 2.6vw, 36px); }
  .film__art { font-size: 17px; }
  .film__laenge { display: block; color: var(--t2); }
  .film__mini { display: none; }
  .film__plus { display: block; position: relative; width: 16px; height: 16px; justify-self: end; }
  .film__plus::before, .film__plus::after {
    content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: var(--rot);
    transition: transform 400ms var(--expo);
  }
  .film__plus::after { transform: rotate(90deg); }
  .film.ist-offen .film__plus::after { transform: rotate(0deg); }
  .film__zeile:hover .film__kunde,
  .film.ist-offen .film__kunde { color: var(--rot); }
  .film__rahmen { padding: 0 0 40px 96px; }
}

/* Vorschau, die der Maus folgt (nur Computer) */
.guck {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 360px; aspect-ratio: 16 / 9;
  pointer-events: none;
  clip-path: inset(50% 50% 50% 50% round 4px);
  transition: clip-path 700ms var(--expo);
  will-change: transform;
}
.guck.an { clip-path: inset(0 0 0 0 round 4px); }
.guck video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms ease-out; }
.guck video.an { opacity: 1; }
@media (hover: none), (max-width: 899px) { .guck { display: none; } }

/* ─────────── 3 · Der BÄÄÄM-Moment ─────────── */
.moment { padding: var(--luft) 0; background: var(--tinte); color: var(--h1); }
.moment__label { color: var(--h3); margin-bottom: 40px; }
.moment__satz {
  font: 500 32px/1.04 var(--f-display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
  max-width: 21ch;
}
.wm-inline {
  display: inline-block; height: .74em; width: calc(.74em * 3.947);
  vertical-align: -0.02em; color: var(--h1);
}
.moment__unten { display: grid; gap: 64px; margin-top: 64px; }
.stimme blockquote {
  font: 400 22px/1.3 var(--f-display); letter-spacing: -0.02em; color: var(--h1);
  max-width: 30ch;
}
.stimme figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; color: var(--h1); font-weight: 500; }
.stimme figcaption .mono { color: var(--h3); font-weight: 400; }
.js .stimme[data-reveal] { opacity: 0; transform: translateY(24px); }
.js .stimme[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 900ms ease-out, transform 1000ms var(--expo); }
.fakten > div { padding: 16px 0 24px; border-top: 1px solid rgba(242, 240, 235, .16); display: grid; gap: 8px; }
.fakten dt { color: var(--h3); }
.fakten dd { color: var(--h1); max-width: 40ch; }
@media (min-width: 900px) {
  .moment__satz { font-size: clamp(48px, 5.4vw, 76px); max-width: none; }
  .moment__unten { grid-template-columns: 7fr 5fr; gap: 104px; margin-top: 104px; align-items: start; }
  .stimme blockquote { font-size: clamp(26px, 2.4vw, 32px); }
}

/* ─────────── 4 · Angebot ─────────── */
.angebot { padding: var(--luft) 0; background: var(--papier); }
.angebot__raster { display: grid; gap: 64px; }
.angebot__intro { color: var(--t2); max-width: 38ch; margin-top: 24px; }
.angebot__listen { display: grid; gap: 64px; }
.liste__titel { color: var(--t3); margin-bottom: 16px; }
.liste li {
  display: grid; gap: 4px;
  padding: 16px 0 24px; border-top: 1px solid rgba(22, 20, 18, .14);
}
.liste li:last-child { border-bottom: 1px solid rgba(22, 20, 18, .14); }
.liste__name { font: 500 24px/1.15 var(--f-display); letter-spacing: -0.03em; color: var(--t1); }
.liste__text { color: var(--t2); max-width: 46ch; }
@media (min-width: 900px) {
  .angebot__raster { grid-template-columns: 5fr 7fr; gap: 104px; align-items: start; }
  .angebot__kopf { position: sticky; top: calc(var(--kopf) + 40px); }
  .liste li { grid-template-columns: 240px 1fr; gap: 24px; align-items: baseline; padding: 24px 0; }
  .liste__name { font-size: 28px; }
}

.reels { margin-top: 104px; }
.reels__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.reels__titel { font: 500 28px/1.1 var(--f-display); letter-spacing: -0.03em; }
.reels__hinweis { color: var(--t3); }
.reels__band {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--rand);
  scroll-padding: 0 var(--rand);
}
.reels__band::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 62vw; scroll-snap-align: start; }
.reel__bild { aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--flaeche); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { margin-top: 8px; color: var(--t2); }
@media (min-width: 900px) {
  .reels__band {
    max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto;
    overflow: visible; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  }
  .reels__titel { font-size: 36px; }
  .reel:nth-child(even) { margin-top: 64px; }
}

/* ─────────── 5 · Kontakt ─────────── */
.kontakt { padding: var(--luft) 0; background: var(--tinte); color: var(--h1); }
.kontakt__raster { display: grid; gap: 64px; }
.kontakt__bild img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 4px; }
.kontakt__bild figcaption { margin-top: 8px; color: var(--h3); }
.js .kontakt__bild[data-reveal] img { clip-path: inset(100% 0 0 0 round 4px); transform: scale(1.15); }
.js .kontakt__bild[data-reveal].is-in img {
  clip-path: inset(0 0 0 0 round 4px); transform: none;
  transition: clip-path 1200ms var(--expo), transform 1600ms var(--expo);
}
.kontakt__satz { color: var(--h2); max-width: 40ch; margin-top: 24px; }
.kontakt__mail {
  display: inline-block; margin-top: 40px;
  font: 500 clamp(30px, 4.6vw, 64px)/1.05 var(--f-display); letter-spacing: -0.035em;
  color: var(--h1); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em;
  text-decoration-color: var(--rot);
  transition: color 150ms ease-out;
  overflow-wrap: anywhere;
}
.kontakt__mail:hover { color: var(--rot); }
.kontakt__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }
.kontakt__daten { display: grid; gap: 0; margin-top: 64px; }
.kontakt__daten > div { display: grid; gap: 8px; padding: 16px 0 24px; border-top: 1px solid rgba(242, 240, 235, .16); }
.kontakt__daten dt { color: var(--h3); }
.kontakt__daten dd { color: var(--h1); max-width: 52ch; }
@media (min-width: 900px) {
  .kontakt__raster { grid-template-columns: 5fr 7fr; gap: 104px; align-items: end; }
  .kontakt__daten { grid-template-columns: 1fr 1.6fr; gap: 24px; }
}

/* ─────────── Fuss ─────────── */
.fuss { background: var(--tinte); color: var(--h1); padding: 64px 0 40px; border-top: 1px solid rgba(242, 240, 235, .1); }
.fuss__wm { width: 100%; height: auto; color: var(--h1); }
.fuss__zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 40px; color: var(--h3);
}
.fuss__zeile a { display: inline-block; padding: 8px 0; color: var(--h2); text-underline-offset: .25em; transition: color 150ms ease-out; }
.fuss__zeile a:hover { color: var(--h1); }

/* Ruhig: alles sofort sichtbar, nichts bewegt sich */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .ln > span,
  .js .held__vorne [data-reveal],
  .js .stimme[data-reveal],
  .js .kontakt__bild[data-reveal] img { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .film__panel, .guck, .kopf, .knopf { transition: none; }
}