/* Wichteln: eine Seite, kein Build-Schritt. */

:root {
  --tanne: #0d1b17;
  --tanne-hell: #14261f;
  --linie: rgba(255, 255, 255, 0.09);
  --schrift: #eef3ef;
  --schrift-leise: #93a89d;
  --gold: #e8b84b;
  --gold-tief: #c2932f;
  --rot: #d8564f;
  --radius: 18px;
  --schatten: 0 18px 50px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

/* `hidden` muss jede Anzeigeart schlagen. Ohne das blieb der Ergebnis-Bereich
   sichtbar, weil `.ergebnis { display: flex }` spezifischer ist als die
   Regel des Browsers für [hidden]. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(1100px 620px at 50% -12%, #1d3a2e 0%, transparent 62%),
    var(--tanne);
  color: var(--schrift);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.buehne {
  width: 100%;
  max-width: 660px;
  padding: clamp(28px, 7vw, 72px) 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Kopf */

.kopf {
  text-align: center;
}

.titel {
  margin: 0;
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--schrift) 20%, var(--gold) 190%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.unterzeile {
  margin: 10px 0 0;
  color: var(--schrift-leise);
  font-size: 1rem;
}

/* Karten */

.karte {
  background: linear-gradient(180deg, var(--tanne-hell), #101f1a);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(24px, 5vw, 38px);
  text-align: center;
}

.karte-fehler {
  border-color: rgba(216, 86, 79, 0.42);
}

.jahr {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* Die Farbflut

   Die gezogene Farbe ist die Seite, nicht ein Feld darauf. Gemusterte Farben
   liegen schwach über einer ruhigen Grundfarbe, sonst stünde der Text auf
   gestreiftem Grund. Welcher Ton die Schrift trägt, sagt der Farbtopf. */

.flut {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 620ms ease;
  pointer-events: none;
}

.flutet .flut { opacity: 1; }

.flut-grund,
.flut-muster,
.flut-schleier {
  position: absolute;
  inset: 0;
}

.flutet.ton-hell .flut-schleier {
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.04), rgba(10, 10, 14, 0.44));
}

.flutet.ton-dunkel .flut-schleier {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.36));
}

/* Auf der Flut trägt die Schrift den Ton, den die Farbe vorgibt. */
.flutet.ton-hell {
  --schrift: #ffffff;
  --schrift-leise: rgba(255, 255, 255, 0.82);
  --pille: rgba(0, 0, 0, 0.26);
  --linie: rgba(255, 255, 255, 0.24);
}

.flutet.ton-dunkel {
  --schrift: #16181a;
  --schrift-leise: rgba(22, 24, 26, 0.72);
  --pille: rgba(255, 255, 255, 0.42);
  --linie: rgba(0, 0, 0, 0.14);
}

.flutet .kopf { display: none; }

.buehne { position: relative; z-index: 1; }

/* Das Ergebnis */

.ergebnis {
  display: flex;
  flex-direction: column;
  min-height: 74vh;
  color: var(--schrift);
}

.jahr-pille { margin: 0; }

.jahr-pille span {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--pille);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.grossbuchstabe {
  margin: auto 0 0;
  font-size: clamp(9rem, 46vw, 15rem);
  /* Über eins, damit die Unterlänge von J und Q im Kasten bleibt und nicht
     ins Farbwort darunter läuft. */
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.farbwort {
  margin: 0;
  font-size: clamp(2rem, 11vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  /* Durchsichtig und Regenbogen sind die längsten Namen im Topf. */
  overflow-wrap: anywhere;
}

.ergebnis .regel {
  margin: 12px 0 0;
  color: var(--schrift-leise);
  font-size: 1rem;
}

.ergebnis .knopfreihe { margin-top: 24px; justify-content: flex-start; }

.flutet.ton-hell .knopf-haupt { background: #ffffff; color: #1a1a1a; }
.flutet.ton-hell .knopf-still { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.flutet.ton-dunkel .knopf-haupt { background: #16181a; color: #ffffff; }
.flutet.ton-dunkel .knopf-still { background: rgba(0, 0, 0, 0.12); color: #16181a; }

.flutet .jahreszeile { background: var(--pille); border-color: var(--linie); }
.flutet .jahreszeile .jahreszahl,
.flutet .vergangenes-titel { color: var(--schrift-leise); }
.flutet .jahreszeile .jahres-buchstabe { color: var(--schrift); }
.flutet .jahreszeile .jahres-farbe { color: var(--schrift); }

/* Ein Tupfer in der Nähe der gefluteten Farbe verschwindet sonst darin. */
.flutet .jahreszeile .tupfer {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--schrift-leise);
}

.einladung {
  margin: 0 0 26px;
  color: var(--schrift-leise);
}

.fehler-titel {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--rot);
}

/* Knöpfe */

.knopfreihe {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.knopf {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 120ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.knopf:hover {
  transform: translateY(-1px);
}

.knopf:active {
  transform: translateY(0);
}

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

.knopf[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.knopf-haupt {
  background: linear-gradient(180deg, var(--gold), var(--gold-tief));
  color: #22190a;
}

.knopf-still {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--linie);
  color: var(--schrift);
}

.knopf-still:hover {
  background: rgba(255, 255, 255, 0.09);
}

.knopf-gross {
  padding: 15px 44px;
  font-size: 1.06rem;
}

.hinweis {
  margin: 14px 0 0;
  min-height: 1.3em;
  color: var(--schrift-leise);
  font-size: 0.88rem;
}

/* Vergangene Jahre */

.vergangenes-titel {
  margin: 0 0 14px;
  color: var(--schrift-leise);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.jahresliste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jahreszeile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--linie);
  border-radius: 12px;
}

.jahreszeile .jahreszahl {
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  min-width: 3.4em;
}

.jahreszeile .jahres-buchstabe {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.28rem;
  min-width: 1.4em;
}

.jahreszeile .jahres-farbe {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.jahreszeile .tupfer {
  width: 17px;
  height: 17px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}