/* =========================================================================
   Counter Culture Comedy Club — Basis
   Schriften, Farben, Typografie, Grundgerüst.
   Alles selbst gehostet. Kein externer Aufruf.
   ========================================================================= */

/* --- 1. Schriften ------------------------------------------------------ */

/* Anton — nur Überschriften. Ein Schnitt, mehr gibt es nicht. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — variabel, 100–900 aus einer Datei. Deckt 400, 600 und 800 ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Marken-Tokens -------------------------------------------------- */

:root {
  /* Farben — Wortlaut und Verwendung stehen in CLAUDE.md 4. */
  --messing-hell: #e8c694;   /* Ring, Lichtkante */
  --messing: #b68a54;        /* Flächen, Linien */
  --messing-dunkel: #7e5931; /* nur Schatten, NIE Text (3,7:1) */
  --tiefschwarz: #0b0b0c;    /* Grundfläche */
  --feldschwarz: #17130e;    /* Karten, Felder */
  --knochenweiss: #ede7dc;   /* Überschriften und Fließtext */
  --signalrot: #ff1f3d;      /* NUR Kaufbutton und Störer */
  --neonblau: #1fe0ff;       /* nur „ausverkauft", „letzte Tickets" */

  /* Abgeleitet — keine neuen Farben, nur Deckkraft. */
  --linie: rgb(182 138 84 / 0.28);
  --linie-zart: rgb(182 138 84 / 0.14);
  --gedimmt: rgb(237 231 220 / 0.72);

  /* Schriftfamilien */
  --schrift-titel: "Anton", "Arial Narrow", Impact, sans-serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Fließtext-Grade. Nie mehr als zwei pro Fläche verwenden. */
  --satz-xs: 0.8125rem;
  --satz-s: 0.9375rem;
  --satz-m: 1.0625rem;
  --satz-l: clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem);

  /* Überschriften-Grade, flüssig. Anton wird nie gestaucht oder gezogen. */
  --titel-1: clamp(2.75rem, 1.2rem + 8.4vw, 6.5rem);
  --titel-2: clamp(2rem, 1.15rem + 4.2vw, 3.75rem);
  --titel-3: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  --titel-4: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);

  /* Abstände */
  --luft-1: 0.25rem;
  --luft-2: 0.5rem;
  --luft-3: 0.875rem;
  --luft-4: 1.375rem;
  --luft-5: 2.25rem;
  --luft-6: 3.5rem;
  --luft-7: clamp(3.5rem, 2rem + 6vw, 6rem);

  --bahn-breite: 68rem;
  --bahn-rand: clamp(1.125rem, 0.5rem + 2.6vw, 2.5rem);

  --tempo: 0.26s;
  --kurve: cubic-bezier(0.2, 0.7, 0.25, 1);

  color-scheme: dark; /* Nur Dunkelmodus. Kein heller Modus. */
}

/* --- 3. Reset ---------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  background: var(--tiefschwarz);
  color: var(--knochenweiss);
  font-family: var(--schrift-text);
  font-size: var(--satz-m);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

/* --- 4. Typografie ----------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
  letter-spacing: 0.005em;
}

h1 { font-size: var(--titel-1); }
h2 { font-size: var(--titel-2); }
h3 { font-size: var(--titel-3); }
h4 { font-size: var(--titel-4); }

p,
ul,
ol,
dl {
  max-width: 62ch;
}

p + p {
  margin-top: var(--luft-4);
}

strong { font-weight: 700; }

a {
  color: var(--knochenweiss);
  text-decoration-color: var(--messing);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--tempo) var(--kurve),
              text-decoration-color var(--tempo) var(--kurve);
}

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

:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--messing);
  color: var(--tiefschwarz);
}

hr {
  border: 0;
  height: 1px;
  background: var(--linie);
  margin-block: var(--luft-6);
}

/* Kicker — Inter 800, Versalien, Sperrung 0,28 em. */
.kicker {
  font-family: var(--schrift-text);
  font-size: var(--satz-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-right: -0.28em; /* Sperrung hinter dem letzten Zeichen ausgleichen */
  color: var(--messing);
  line-height: 1.4;
}

/* Meta — Inter 600, Versalien, Sperrung 0,19 em. */
.meta {
  font-family: var(--schrift-text);
  font-size: var(--satz-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  margin-right: -0.19em;
  color: var(--messing);
  line-height: 1.5;
}

.gedimmt { color: var(--gedimmt); }
.gross   { font-size: var(--satz-l); }

/* Titel-Lockup: Anton über zwei Zeilen, immer mit Größenunterschied.
   Die kleinere Zeile bekommt den Faktor, nie eine eigene Schrift. */
.titel {
  display: flex;
  flex-direction: column;
  /* Trägt die Titelschrift selbst, damit das Lockup auf jedem Element sitzt
     und nicht nur in einem h1. */
  font-family: var(--schrift-titel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
  max-width: none;
}

.titel__zeile {
  display: block;
}

.titel__zeile--klein {
  font-size: 0.62em;
  color: var(--messing-hell);
}

/* --- 5. Gerüst --------------------------------------------------------- */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--messing-hell);
  color: var(--tiefschwarz);
  padding: var(--luft-3) var(--luft-4);
  font-weight: 600;
  text-decoration: none;
}

.sprung:focus {
  left: var(--luft-3);
  top: var(--luft-3);
}

.bahn {
  width: 100%;
  max-width: var(--bahn-breite);
  margin-inline: auto;
  padding-inline: var(--bahn-rand);
}

.feld {
  padding-block: var(--luft-7);
}

.feld--schmal { padding-block: var(--luft-6); }

/* Kopf */

.kopf {
  border-bottom: 1px solid var(--linie-zart);
}

.kopf__bahn {
  display: flex;
  flex-wrap: wrap; /* das Menü rutscht in Zeile zwei, statt die Marke zu quetschen */
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2) var(--luft-4);
  padding-block: var(--luft-2);
}

.kopf__marke {
  display: flex;
  align-items: center;
  /* Die Schutzzone der Medaille steckt schon im Baustein. Hier nur der Rest. */
  gap: var(--luft-1);
  text-decoration: none;
  color: inherit;
}

.kopf__marke:hover { color: inherit; }

/* Wortmarke: eine Zeile, groß, offen gesperrt. Anton in Versalien wird bei
   kleinen Graden und enger Laufweite unleserlich — die Sperrung ist hier
   also keine Zierde, sondern die Lesbarkeit selbst. Gesperrt wird die
   Laufweite, nicht die Buchstabenform: Anton bleibt unverzerrt. */
.kopf__wortmarke {
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  margin-right: -0.12em; /* Sperrung hinter dem letzten Zeichen ausgleichen */
}

/* Am Handy steht die Kurzform. Groß und lesbar schlägt vollständig und eng. */
.kopf__wortmarke__b {
  display: none;
  color: var(--messing);
}

@media (min-width: 36rem) {
  .kopf__wortmarke__b { display: inline; }
}

@media (min-width: 60rem) {
  .kopf__wortmarke { font-size: 1.625rem; }
}

.kopf__marke:hover .kopf__wortmarke__b {
  color: var(--messing-hell);
}

.kopf__menue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2) var(--luft-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.kopf__menue a {
  font-size: var(--satz-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  text-decoration: none;
  /* Voll aufgehellt, nicht gedimmt: Versalien in 13 px mit 0,19 em
     Sperrung haben wenig Fläche, da schluckt jede Abdunklung zu viel.
     Die aktive Seite hebt sich weiter über Messing ab, nicht über
     Helligkeit. */
  color: var(--knochenweiss);

  /* Trefferfläche auf 24 px, wie WCAG 2.2 es für eigenständige Ziele
     verlangt. Bei einem Element im Textfluss vergrößert der senkrechte
     Innenabstand nur die Fläche, nicht die Zeilenhöhe — das Layout
     bleibt, wo es war. */
  padding-block: 0.3rem;
}

.kopf__menue a:hover,
.kopf__menue a[aria-current="page"] {
  color: var(--messing-hell);
}

/* Fuß */

.fuss {
  border-top: 1px solid var(--linie-zart);
  margin-top: var(--luft-7);
  padding-block: var(--luft-5) var(--luft-6);
  font-size: var(--satz-s);
  color: var(--gedimmt);
}

.fuss p,
.fuss ul {
  max-width: none;
}

.fuss__zeile + .fuss__zeile {
  margin-top: var(--luft-3);
}

.fuss__menue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2) var(--luft-4);
  list-style: none;
  padding: 0;
}

.fuss a { color: var(--gedimmt); }
.fuss a:hover { color: var(--messing-hell); }

/* Wie im Kopf: 24 px Trefferfläche, ohne das Layout zu verschieben. */
.fuss__menue a {
  padding-block: 0.2rem;
}

/* --- 6. Bewegung nur, wenn erwünscht ----------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}