/* Wolos im Netz.
 *
 * Grundlage: Open Props für Abstände, Schatten und Kurven (open-props.css,
 * liegt auf diesem Server). Die Farben kommen NICHT von dort, sondern aus
 * docs/design/README.md - sie sind gegen ihren Grund nachgerechnet, und eine
 * fremde Palette daneben wäre eine zweite Wahrheit.
 *
 * Die Schrift ist Archivo, dieselbe wie im Entwurfsprüfer des Projekts.
 * SELBST GEHOSTET, nicht über Googles CDN: das Einbinden von dort gilt in
 * Deutschland als datenschutzwidrig (LG München I, 20 O 4185/20), weil die
 * IP-Adresse jedes Besuchers ungefragt in die USA geht.
 */

@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --grund: #F2F1EF;
  --flaeche: #FFFFFF;
  --rahmen: #E3E0DB;
  --linie-zart: #EBE8E3;
  --tinte: #191713;
  --zweite: #57514A;
  --gedimmt: #6D6862;
  --akzent: #F97316;
  --akzent-text: #9A4A06;
  --offen-t: #1A5E3F;
  --schrift: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #141311;
    --flaeche: #1E1C1A;
    --rahmen: #38342F;
    --linie-zart: #2A2723;
    --tinte: #F2F0ED;
    --zweite: #B8B2AA;
    --gedimmt: #948E86;
    --akzent-text: #FFA35C;
    --offen-t: #6EDBA4;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--akzent-text); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }

.sprung { position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--flaeche); padding: var(--size-2) var(--size-4); border-radius: 0 0 8px 0; }
.sprung:focus { left: 0; }

/* ── Kopf ───────────────────────────────────────────────────────────── */
.kopf {
  display: flex; align-items: center; gap: var(--size-4); flex-wrap: wrap;
  max-width: 70rem; margin: 0 auto; padding: var(--size-5) var(--size-5) 0;
}
.marke {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 19px; letter-spacing: -.015em;
  color: var(--tinte); text-decoration: none;
}
.marke .zeichen { width: 24px; height: 24px; color: var(--akzent); }
.kopf nav { margin-left: auto; display: flex; gap: var(--size-4); font-size: 15px; }
.kopf nav a { color: var(--zweite); text-decoration: none; }
.kopf nav a:hover { color: var(--tinte); }

main { max-width: 70rem; margin: 0 auto; padding: 0 var(--size-5) var(--size-9); }

/* ── Aufmacher ──────────────────────────────────────────────────────── */
/* Asymmetrisch, nicht mittig: links die Frage, rechts die Antwort. Genau so
   ist die App gebaut, und genau so liest man sie. */
.held {
  display: grid; gap: var(--size-8);
  grid-template-columns: 1fr;
  padding: clamp(var(--size-8), 8vw, var(--size-12)) 0 var(--size-9);
  align-items: start;
}
@media (min-width: 940px) {
  .held { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: var(--size-9); }
}

.uhr {
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--akzent-text); margin: 0 0 var(--size-4);
  font-variant-numeric: tabular-nums;
}
h1 {
  font-size: clamp(2.6rem, 7.5vw, 4.5rem);
  font-weight: 700; line-height: .98; letter-spacing: -.035em;
  margin: 0 0 var(--size-5); text-wrap: balance;
}
/* Das eine Wort, um das es geht. Kursiv statt farbig: Farbe hätte den Akzent
   verbraucht, den weiter unten die Zustände brauchen. */
h1 em { font-style: italic; font-weight: 600; }
.anriss {
  font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--zweite);
  margin: 0 0 var(--size-6); max-width: 34rem; text-wrap: pretty;
}
.bald {
  display: inline-block; margin: 0;
  border: 1.5px solid var(--tinte); color: var(--tinte);
  font-weight: 600; font-size: 14px; letter-spacing: .02em;
  padding: 9px 18px; border-radius: var(--radius-round);
}

/* ── Die lebende Liste ──────────────────────────────────────────────── */
.live {
  background: var(--flaeche); border: 1px solid var(--rahmen);
  border-radius: var(--radius-3); padding: var(--size-5);
  box-shadow: var(--shadow-2);
}
@media (prefers-color-scheme: dark) { .live { box-shadow: none; } }
.live-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gedimmt); margin-bottom: var(--size-4);
}
.live-kopf .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--offen-t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--offen-t) 18%, transparent);
}
.live-liste { list-style: none; margin: 0; padding: 0; }
.live-liste li {
  display: flex; align-items: baseline; gap: var(--size-3);
  padding: 10px 0; border-top: 1px solid var(--linie-zart);
  font-size: 15.5px;
}
.live-liste li:first-child { border-top: 0; }
.live-liste .name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-liste .art { margin-left: auto; flex: 0 0 auto; font-size: 13px; color: var(--gedimmt); }
.live-liste .platzhalter i {
  display: block; height: 12px; width: 62%; border-radius: 3px;
  background: var(--linie-zart);
  animation: pulsieren 1.4s var(--ease-in-out-2) infinite;
}
.live-liste .platzhalter:nth-child(2) i { width: 78%; }
.live-liste .platzhalter:nth-child(3) i { width: 54%; }
.live-liste .platzhalter:nth-child(4) i { width: 70%; }
.live-liste .platzhalter:nth-child(5) i { width: 46%; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .live-liste .platzhalter i { animation: none; } }
.live-fuss { margin: var(--size-4) 0 0; font-size: 13px; color: var(--gedimmt); }

/* ── Zahlen ─────────────────────────────────────────────────────────── */
/* Haarlinien statt Kacheln: die Zahlen sind eine Angabe, kein Angebot. */
.zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--size-6) var(--size-7);
  padding: var(--size-6) 0; margin-bottom: var(--size-9);
  border-top: 1px solid var(--rahmen); border-bottom: 1px solid var(--rahmen);
}
.zahlen b {
  display: block; font-size: clamp(2rem, 4.5vw, 2.6rem); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.zahlen span { font-size: 14.5px; color: var(--zweite); }

/* ── Punkte ─────────────────────────────────────────────────────────── */
.punkte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--size-7) var(--size-8); margin-bottom: var(--size-9);
}
.punkte article { border-top: 2px solid var(--tinte); padding-top: var(--size-4); }
.punkte h2 {
  font-size: 1.22rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.018em; margin: 0 0 var(--size-3);
}
.punkte p { margin: 0; color: var(--zweite); font-size: 15.5px; }

/* ── Herkunft ───────────────────────────────────────────────────────── */
.herkunft { display: grid; gap: var(--size-4); padding-top: var(--size-6); border-top: 1px solid var(--rahmen); }
@media (min-width: 780px) { .herkunft { grid-template-columns: 14rem 1fr; gap: var(--size-8); } }
.herkunft h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedimmt); margin: 0;
}
.herkunft-text { max-width: 36rem; }
.herkunft p { color: var(--zweite); margin: 0 0 var(--size-3); }
.klein { font-size: 13.5px; color: var(--gedimmt); }

footer {
  max-width: 70rem; margin: 0 auto;
  padding: var(--size-6) var(--size-5) var(--size-8);
  border-top: 1px solid var(--rahmen); font-size: 14.5px; color: var(--zweite);
}
.fuss-links { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-5); margin: 0 0 var(--size-3); }
footer a { color: var(--zweite); }