/* Foto-Challenge «Ein Schuss» — Brand-Tokens ganz oben in :root
   Palette und Schriften aus dem Werkbuch, Abschnitt 04 Design System.
   Rot ist nie Fläche, immer Signal — Anteil unter 1 %. */
:root {
  --schwarz: #0D0D0D;
  --anthrazit: #1A1A1A;
  --anthrazit-hell: #222220;
  --weiss: #F2EDE4;
  --grau: #A8A29B;
  --messing: #A88A50;
  --messing-hell: #C4A76B;
  --rot: #D63B32;
  --hair: #33322F;
  --font-display: "Bodoni 72", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Avenir Next", "Avenir", "Seravek", Verdana, sans-serif;
  --font-mono: "Menlo", "Courier New", monospace;
}

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

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--messing-hell); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }
::selection { background: var(--messing); color: var(--schwarz); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- Topbar */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 0.9rem 1.5rem;
  background: color-mix(in srgb, var(--schwarz) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

.wortmarke {
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--weiss); white-space: nowrap;
}
.wortmarke .punkt { color: var(--rot); }

.nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; }
.nav button {
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer;
  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grau);
  border-bottom: 1px solid transparent; transition: color 0.15s ease;
}
.nav button:hover { color: var(--weiss); }
.nav button[aria-current="true"] { color: var(--messing-hell); border-bottom-color: var(--messing); }

/* ---------------------------------------------------------------- Gerüst */

.bogen { max-width: 980px; margin: 0 auto; padding: 0 1.5rem 6rem; }
.view[hidden] { display: none; }

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--messing); margin: 3rem 0 0.6rem;
}
h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.05;
  letter-spacing: 0.01em; text-wrap: balance; margin: 0 0 1rem;
}
h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.6rem; margin: 3rem 0 0.8rem;
}
h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 0.4rem; }
.lede { max-width: 37rem; color: var(--grau); margin: 0 0 2rem; }
p { max-width: 37rem; }

.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.klein { font-size: 0.82rem; color: var(--grau); }

.haarstrich { height: 1px; background: var(--hair); border: 0; margin: 3rem 0; }

/* ---------------------------------------------------------------- Fakten */

.fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: 2rem 0;
}
.fakt { background: var(--anthrazit); padding: 0.9rem 1rem; }
.fakt dt {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grau); margin-bottom: 0.3rem;
}
.fakt dd { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------- Ergebnis */

.ergebnis {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2.5rem;
  border: 1px solid var(--hair); border-left: 2px solid var(--rot);
  background: var(--anthrazit); padding: 1.4rem 1.6rem; margin: 2rem 0;
}
.ergebnis .name { font-family: var(--font-display); font-size: 1.5rem; }
.ergebnis .zahl { font-family: var(--font-mono); font-size: 2rem; color: var(--messing-hell); }
.ergebnis .sieger .zahl { color: var(--weiss); }
.ergebnis .rest { color: var(--grau); font-size: 0.85rem; }

/* ---------------------------------------------------------------- Duell */

.duell { margin: 3.5rem 0; scroll-margin-top: 5rem; }
.duell-kopf { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.9rem; }
.duell-nr { font-family: var(--font-mono); font-size: 0.8rem; color: var(--rot); }
.duell-vorgabe { color: var(--grau); font-size: 0.88rem; max-width: 40rem; margin: 0 0 1.2rem; }

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); }
@media (max-width: 640px) { .paar { grid-template-columns: 1fr; } }

.karte {
  background: var(--anthrazit); border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  display: flex; flex-direction: column;
  transition: background 0.15s ease;
}
.karte:hover { background: var(--anthrazit-hell); }
.karte.gewinner { box-shadow: inset 0 0 0 1px var(--rot); }

.karte-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--schwarz); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }

.karte-fuss { padding: 0.8rem 1rem 1rem; display: flex; align-items: baseline; gap: 0.6rem; }
.karte-name {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau);
}
.karte-schnitt { margin-left: auto; font-family: var(--font-mono); font-size: 0.95rem; }
.karte-summe { font-family: var(--font-mono); font-size: 0.72rem; color: var(--grau); }
.karte.gewinner .karte-name { color: var(--weiss); }

.urteil {
  background: var(--anthrazit); border-top: 1px solid var(--hair);
  padding: 1rem 1.2rem; font-size: 0.9rem; max-width: none;
}
.urteil strong { font-weight: 600; }
.urteil .sieger-marke {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rot); margin-right: 0.6rem;
}

/* ---------------------------------------------------------------- Skala */

.kriterien { display: grid; gap: 1.4rem; margin: 1.8rem 0; }
.kriterium { display: grid; grid-template-columns: 12rem 1fr; gap: 1.2rem; }
@media (max-width: 720px) { .kriterium { grid-template-columns: 1fr; gap: 0.4rem; } }

.kriterium-kopf { display: flex; flex-direction: column; gap: 0.35rem; }
.kriterium-name {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau);
}
.punkte { display: flex; align-items: center; gap: 0.35rem; }
.punkt-feld {
  width: 12px; height: 12px; border: 1px solid var(--hair); background: transparent;
}
.punkt-feld.voll { background: var(--messing); border-color: var(--messing); }
.punkt-feld.leer-null { border-color: var(--rot); }
.punkte .urteil-wort {
  margin-left: 0.5rem; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--grau);
}
.kriterium-text { margin: 0; max-width: 42rem; font-size: 0.94rem; }
.kriterium.weggefallen .kriterium-name { color: var(--hair); }
.kriterium.weggefallen .kriterium-text { color: var(--grau); font-style: italic; }

/* ---------------------------------------------------------------- Detail */

.detail-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin-top: 2.5rem; }
.zurueck {
  background: none; border: 0; cursor: pointer; padding: 0; color: var(--grau);
  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.zurueck:hover { color: var(--weiss); }

.detail-bild { margin: 1.5rem 0 2rem; background: var(--anthrazit); }
.detail-bild img { width: 100%; max-height: 78vh; object-fit: contain; margin: 0 auto; }

.eingriff {
  border: 1px solid var(--hair); border-left: 2px solid var(--messing);
  background: var(--anthrazit); padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.eingriff .marke {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--messing);
  margin-bottom: 0.4rem;
}
.eingriff p { margin: 0; max-width: 42rem; }

.grenzen { margin: 2rem 0; padding-left: 1.1rem; color: var(--grau); font-size: 0.9rem; }
.grenzen li { margin-bottom: 0.4rem; max-width: 40rem; }

.exif {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--grau); text-transform: uppercase;
  border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 2.5rem;
}

/* ---------------------------------------------------------------- Tabelle */

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hair); }
th {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grau); font-weight: 400;
}
td.zahl { font-family: var(--font-mono); text-align: right; }
tr.schwach td { color: var(--weiss); }
tr.schwach td:first-child { border-left: 2px solid var(--rot); padding-left: 0.7rem; }
.tabelle-huelle { overflow-x: auto; }

/* ---------------------------------------------------------------- Notiz */

.anmerkung {
  border: 1px solid var(--hair); background: var(--anthrazit);
  padding: 1rem 1.2rem; margin: 1rem 0; font-size: 0.9rem;
}
.anmerkung .marke {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 0.35rem;
}
.anmerkung p { margin: 0; max-width: 44rem; }
.anmerkung.regel { border-left: 2px solid var(--rot); }

.uebung {
  border: 1px solid var(--hair); background: var(--anthrazit);
  padding: 1.2rem 1.4rem; margin: 1rem 0;
}
.uebung h3 { margin-bottom: 0.5rem; }
.uebung p { margin: 0; }

.fuss {
  border-top: 1px solid var(--hair); margin-top: 5rem; padding-top: 1.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--grau); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}