/* ── arthirsch · Projektseite ────────────────────────────────────────────
   Die Seite, auf der jemand entscheidet, ob er es nachbaut. Darum trägt sie
   das Stück und die Materialliste, nicht das Layout.

   Farben und Schriften kommen aus der bestehenden Marke (Ocker auf tiefem
   Braunschwarz, Eczar + Chivo, selbst ausgeliefert) — hier wird keine neue
   Identität erfunden.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --grund:        oklch(0.16 0.010 60);    /* tiefes Braunschwarz, Werkstatt bei Abend */
  --grund-hoch:   oklch(0.21 0.012 60);
  --linie:        oklch(0.32 0.014 60);
  --tinte:        oklch(0.95 0.008 75);    /* warmes Weiss, 14:1 auf dem Grund */
  --tinte-still:  oklch(0.78 0.012 75);    /* 7.3:1 — auch Hinweise bleiben lesbar */
  --ocker:        oklch(0.70 0.130 62);    /* die Marke */
  --ocker-tief:   oklch(0.52 0.115 60);
  --span-eng:     clamp(1rem, 4vw, 2rem);
  --span-weit:    clamp(3rem, 9vw, 6.5rem);
  --serif:        'Eczar', Georgia, serif;
  --sans:         'Chivo', system-ui, sans-serif;
  --lauf:         cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--grund);
  color: var(--tinte);
  font: 400 clamp(1rem, 0.97rem + 0.2vw, 1.125rem)/1.75 var(--sans);
  font-synthesis-weight: none;
}

.ueberspringen {
  position: absolute; left: -100vw; top: 0; z-index: 10;
  background: var(--ocker); color: oklch(0.16 0.010 60);
  padding: 0.8rem 1.2rem; font-weight: 600; text-decoration: none;
}
.ueberspringen:focus { left: 0; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.5rem var(--span-eng);
  border-bottom: 1px solid var(--linie);
}
.wortmarke {
  font: 600 1.15rem/1 var(--serif);
  letter-spacing: -0.01em; color: var(--tinte); text-decoration: none;
}
.wortmarke:hover { color: var(--ocker); }
.ort { margin-left: auto; font-size: 0.82rem; color: var(--tinte-still); }

/* ── Das Stück ────────────────────────────────────────────────────────── */
main { padding-bottom: var(--span-weit); }

.buehne { margin: 0; }
.buehne .held {
  width: 100%; height: clamp(18rem, 62vh, 40rem);
  object-fit: cover; display: block;
}

.buehne-text {
  max-width: 46rem; margin: 0 auto;
  padding: var(--span-weit) var(--span-eng) 0;
}
h1 {
  font: 600 clamp(2.1rem, 1.4rem + 3.4vw, 4.1rem)/1.08 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.anriss {
  margin-top: 1.4rem; max-width: 34em;
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.3rem);
  color: var(--tinte-still); text-wrap: pretty;
}

/* ── Steckbrief ───────────────────────────────────────────────────────── */
.steckbrief {
  display: flex; flex-wrap: wrap; gap: 0 var(--span-weit);
  max-width: 46rem; margin: var(--span-eng) auto 0;
  padding: 1.4rem var(--span-eng);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.steckbrief dt {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinte-still);
}
.steckbrief dd { font-family: var(--serif); font-size: 1.15rem; margin-top: 0.2rem; }

/* ── Abschnitte ───────────────────────────────────────────────────────── */
section { max-width: 46rem; margin: 0 auto; padding: var(--span-weit) var(--span-eng) 0; }
h2 {
  font: 600 clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem)/1.2 var(--serif);
  letter-spacing: -0.015em; margin-bottom: 1.4rem;
}

/* ── Material: die Liste, wegen der die Leute hier sind ───────────────── */
.material .posten { list-style: none; }
.material .posten li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--linie);
}
.material .posten li span { flex: 1; }
.material .posten li a {
  flex: 0 0 auto; color: var(--ocker); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color 0.2s var(--lauf);
}
.material .posten li a:hover { color: var(--tinte); }
.material .posten li.fehlt { color: var(--tinte-still); font-style: italic; }
.offen {
  margin-top: 1.3rem; font-size: 0.9rem; color: var(--tinte-still);
  max-width: 34em;
}

.werkzeug ul { list-style: none; columns: 2; column-gap: var(--span-eng); }
.werkzeug li { padding: 0.4rem 0; break-inside: avoid; }
@media (max-width: 32rem) { .werkzeug ul { columns: 1; } }

/* ── Anleitung ────────────────────────────────────────────────────────── */
.schritte { list-style: none; counter-reset: schritt; }
.schritte > li { padding: 1.5rem 0; border-bottom: 1px solid var(--linie); }
.schritt-nr {
  display: inline-block; min-width: 2.1rem;
  font: 600 1.05rem/1 var(--serif); color: var(--ocker-tief);
}
.schritte p { display: inline; }
.schritt-bild { margin: 1.3rem 0 0; }
.schritt-bild img { width: 100%; display: block; }

/* ── Was schiefging: gleiches Gewicht wie die Anleitung ───────────────── */
.schiefging {
  background: var(--grund-hoch);
  max-width: none; margin-top: var(--span-weit);
  padding-bottom: var(--span-weit);
}
.schiefging > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.schiefging p + p { margin-top: 1rem; }

/* ── Anfrage ──────────────────────────────────────────────────────────── */
.anfrage p { max-width: 34em; color: var(--tinte-still); }
.knopf {
  display: inline-block; margin-top: 1.6rem;
  background: var(--ocker); color: oklch(0.16 0.010 60);
  padding: 0.95rem 1.7rem; border-radius: 4px;
  font-weight: 600; text-decoration: none;
  transition: transform 0.25s var(--lauf), background 0.25s var(--lauf);
}
.knopf:hover { background: oklch(0.77 0.135 62); transform: translateY(-1px); }

/* ── Fuss ─────────────────────────────────────────────────────────────── */
.fuss {
  border-top: 1px solid var(--linie); margin-top: var(--span-weit);
  padding: var(--span-weit) var(--span-eng);
  text-align: center;
}
.motto { font: 600 1.3rem/1.4 var(--serif); color: var(--ocker); }
.klein { margin-top: 0.7rem; font-size: 0.85rem; color: var(--tinte-still); }
.klein a { color: inherit; }

a:focus-visible, .knopf:focus-visible {
  outline: 2px solid var(--ocker); outline-offset: 3px;
}

/* Das Bild kommt beim Laden einmal ruhig heran — mehr Bewegung braucht die
   Seite nicht. Sichtbar ist sie auch ohne die Animation (kein Verstecken per
   Klasse), sonst bleibt sie in Vorschauen und bei abgeschalteter Bewegung leer. */
@media (prefers-reduced-motion: no-preference) {
  .buehne .held { animation: heran 0.9s var(--lauf) both; }
  @keyframes heran { from { opacity: 0; transform: scale(1.02); } }
}

/* ── Übersicht und Einzelstücke ───────────────────────────────────────── */
.wege { display: flex; gap: 1.4rem; margin-left: 1.5rem; }
.wege a {
  color: var(--tinte-still); text-decoration: none; font-size: 0.95rem;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.wege a:hover { color: var(--tinte); border-color: var(--ocker); }

.aufschlag {
  max-width: 46rem; margin: 0 auto;
  padding: var(--span-weit) var(--span-eng) 0;
}
.aufschlag h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }

.tafeln {
  max-width: 72rem; margin: var(--span-weit) auto 0;
  padding: 0 var(--span-eng);
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.tafel { color: inherit; text-decoration: none; display: block; }
.tafel figure { overflow: hidden; background: var(--grund-hoch); }
.tafel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.55s var(--lauf);
}
.tafel:hover img { transform: scale(1.03); }
.tafel-text { padding-top: 1rem; }
.tafel-text h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-bottom: 0.5rem;
}
.tafel:hover .tafel-text h2 { color: var(--ocker); }
.tafel-text p { color: var(--tinte-still); font-size: 0.95rem; }

.stuecke { list-style: none; max-width: 46rem; margin: var(--span-weit) auto 0;
  padding: 0 var(--span-eng); }
.stueck-zeile {
  display: flex; gap: 1.4rem; align-items: center;
  padding: 1.3rem 0; border-bottom: 1px solid var(--linie);
}
.stueck-zeile figure { flex: 0 0 6.5rem; }
.stueck-zeile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.stueck-zeile h2 { font-size: 1.3rem; margin: 0; }
.stueck-zeile h2 a { color: inherit; text-decoration: none; }
.stueck-zeile h2 a:hover { color: var(--ocker); }
.stand-frei { color: var(--ocker); }
.stand-tausch { color: oklch(0.75 0.09 155); }
.stand-weg, .stand-behalten { color: var(--tinte-still); }
.preis { font-family: var(--serif); }
.noch-nichts {
  max-width: 46rem; margin: var(--span-weit) auto;
  padding: 0 var(--span-eng); color: var(--tinte-still);
}

/* Beispielseiten müssen als solche erkennbar sein — erfundene Trockenzeiten
   unter echtem Namen wären genau der Schaden, den wir vermeiden wollen. */
.beispielband {
  background: oklch(0.55 0.14 40); color: oklch(0.98 0.01 40);
  padding: 0.9rem var(--span-eng); text-align: center;
  font-size: 0.92rem; font-weight: 500;
}

/* Der fertige Schnitt auf der Seite. Hochformat, weil er fürs Handy
   geschnitten ist — darum schmal gehalten und mittig (15.08.2026). */
.kurzfilm video {
  width: 100%; max-width: 22rem; margin: 0 auto; display: block;
  border-radius: 14px; background: #000;
}