/* ============================================================
   Grundlagen — Material, Farben, Schriften, Maße

   Das Haus ist ein Discostadl: Bretterwand, warmes Licht, volle
   Tanzfläche. Genau so ist die Seite gebaut — Holz trägt die
   Flächen, Grün ist das Signal wie seit jeher im Haus, und helle
   Abschnitte sorgen dafür, dass die Seite freundlich bleibt statt
   in einem dunklen Loch zu verschwinden.

   Die Schrift ist absichtlich groß: Hier liest niemand mit der
   Lupe, und die meisten Gäste sind keine zwanzig mehr.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/schriften/archivo-variabel.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/schriften/inter-variabel.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Der Grund: dunkel und leicht warm, nicht braun. Das Holz ist
     nur noch eine Ahnung in der Fläche — spürbar, aber nicht das
     Thema. */
  --holz-tief: #100e0d;
  --holz: #171413;
  --holz-hoch: #221d1b;
  --holz-kante: #6b4826;

  /* Ränder: dunkel und unaufdringlich. Wo etwas hervorstechen soll,
     steht Grün — nicht ein kräftiger brauner Strich. */
  --linie: #2e2825;
  --linie-hell: #3d3532;

  /* Kalk — die hellen Abschnitte */
  --kalk: #f8f3ea;
  --kalk-tief: #ebe0cd;
  --kalk-linie: #c3ae8e;
  --tinte: #140d05;

  /* Grün — die Hausfarbe, seit es die ANNA gibt. Sie trägt alles,
     was auffallen soll: Ticketknöpfe, Datum, Laufband.

     Auf Grün steht weiße Schrift. Dafür ist der Ton eine Spur
     tiefer als das Grün der alten Seite: Weiß auf #3f8a49 käme nur
     auf 4,25:1 und läge damit unter dem, was lesbar heißt — auf
     --akzent sind es 4,9:1.

     Drei Abstufungen: --akzent für Flächen mit weißer Schrift,
     --akzent-hell für Schrift auf dunklem Holz, --akzent-tief für
     Schrift und Ränder auf den hellen Flächen. */
  --akzent: #35803f;
  --akzent-hell: #7ed389;
  --akzent-tief: #26602e;

  --magenta: #d6365f;

  --weiss: #fff;
  --text: #fdfaf4;
  --text-leise: #e0d6c6;
  --text-still: #b7a890;

  --schrift-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Die Bretterwand. Die Kachel ist gespiegelt aneinandergesetzt
     und läuft deshalb ohne sichtbare Naht durch. */
  --wand: url('/assets/bilder/holz.webp');

  --breite: 82rem;
  --schmal: 42rem;
  --rand: clamp(1.15rem, 4vw, 3rem);
  --abstand: clamp(3rem, 6vw, 5.5rem);

  --kopf-hoehe: 6.5rem;
}

/* ---------- Rücksetzen ---------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + env(safe-area-inset-top, 0px) + 1rem);
}

body {
  min-height: 100svh;
  background: var(--holz-tief);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.0938rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---------- Schrift ----------

   Alles Große läuft in Archivo, breit gestellt und im schwersten
   Schnitt: Die Namen der Abende sollen wirken wie auf dem Plakat
   an der Tür. Die Zeilen stehen dicht, damit ein mehrzeiliger Name
   als Block liest. */

/* Fett ja, aber nicht zusammengequetscht: Die Schrift steht in
   normaler Breite, damit sie freundlich wirkt und auch quer über
   den Raum noch lesbar ist. */
h1,
h2,
h3,
.wucht {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-stretch: 100%;
  line-height: 0.95;
  /* Versalien brauchen etwas mehr Luft als gemischter Satz, sonst
     kleben die Buchstaben aneinander. */
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--weiss);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
}

h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.05;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, var(--akzent) 70%, transparent);
}

a:hover {
  text-decoration-color: var(--akzent);
}

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

::selection {
  background: var(--akzent);
  color: var(--tinte);
}

/* ---------- Flächen ----------

   Zwei Sorten Abschnitt: Wand (Holz, dunkel) und Kalk (hell).
   Sie wechseln sich ab — daraus entsteht der Rhythmus der Seite. */

.wandflaeche {
  position: relative;
  background:
    linear-gradient(rgb(16 14 13 / 0.945), rgb(13 11 10 / 0.965)),
    var(--wand) center / auto 30rem repeat;
}

.kalkflaeche {
  background: var(--kalk);
  color: var(--tinte);
}

.kalkflaeche h1,
.kalkflaeche h2,
.kalkflaeche h3 {
  color: var(--tinte);
}

.kalkflaeche p {
  color: #4f3d27;
}

/* Die Kante zwischen zwei Flächen: eine schmale Holzleiste, stark
   abgedunkelt — gerade genug, dass man das Material ahnt. */
.leiste {
  height: 0.4rem;
  background:
    linear-gradient(rgb(16 14 13 / 0.6), rgb(16 14 13 / 0.6)),
    var(--wand) center / auto 100% repeat;
}

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

.huelle {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.huelle--schmal {
  width: min(100% - 2 * var(--rand), var(--schmal));
}

.band {
  padding-block: var(--abstand);
}

.band--knapp {
  padding-block: calc(var(--abstand) * 0.6);
}

/* Ein Bereich, den Clubinio nicht füllen konnte, verschwindet
   vollständig — samt Überschrift. */
.versteckt {
  display: none !important;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  left: var(--rand);
  top: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.sprung:focus {
  transform: none;
}

/* Die Falle für Einsendungen durch Maschinen. Nicht display:none —
   das erkennen sie. Stattdessen aus dem Sichtfeld schieben. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}