/* Lokal gehostete Schrift (kein externer Request, DSGVO-/abmahnsicher).
   Anton – SIL Open Font License, siehe assets/fonts/OFL.txt */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
}

:root {
  --page-width: 595.28; /* Originalbreite des Plakats (Design-Einheiten) */
  --ink: #1d1d1b;   /* dunkler Text, wie im Plakat-SVG verwendet */
  --red: #db2915;   /* Grundfarbe der Hintergrund-Kachel */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Der Hintergrund ist eine nahtlos kachelnde SVG-Textur
   (Hintergrund_Kachel.svg), die auf dem body liegt – randlos, über die
   volle Viewport-Breite, und beliebig oft in beide Richtungen wiederholt,
   ohne sichtbare Nähte ("endloses Bild"). */
body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: "Anton", "Arial Narrow", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--red);
  background-image: url("assets/Hintergrund_Kachel.svg");
  background-repeat: repeat;
  background-size: 1280px 974.2px;
}

/* Seiten-Container: feste, responsive Spaltenbreite, Höhe wächst mit dem
   Inhalt (endlos scrollbar). */
.page {
  position: relative;
  width: min(100vw, 680px);
  container-type: inline-size;
  overflow: hidden;
}

/* Dekorative Ebenen (Konfetti dahinter, Header-Grafik davor), exakt so
   positioniert, wie sie im ursprünglichen Gesamt-Plakat zueinander saßen. */
.layer {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.layer--konfetti {
  width: 139.32cqw; /* 829.32 / 595.28 */
  left: -29.69cqw;  /* -176.72 / 595.28 */
  top: -35.53cqw;   /* -211.54 / 595.28 */
  z-index: 1;
}

.layer--header {
  width: 91.02cqw; /* 541.83 / 595.28 */
  left: 4.28cqw;   /* 25.48 / 595.28 */
  top: 2.76cqw;    /* 16.4 / 595.28 */
  z-index: 2;
}

/* Textbereich: beginnt unterhalb des weißen "ZONSAMME FIERE!"-Schriftzugs
   aus der Header-Grafik (deren Schattenbox dort bei ca. 380 von 595 Einheiten endet). */
.content {
  position: relative;
  z-index: 3;
  padding: 63.9cqw 4.3% 8cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
}

.line {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.line--xl {
  font-size: 7.6cqw;
  margin-bottom: 1.4cqw;
}

.line--lg {
  font-size: 5.6cqw;
  margin-bottom: 0.4cqw;
}

.line--date {
  font-size: 5.4cqw;
  margin-bottom: 3cqw;
}

.details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}

.details li {
  font-size: 3cqw;
  letter-spacing: 0.03em;
}

.line--tickets {
  font-size: 5.6cqw;
  margin-top: 4cqw;
  margin-bottom: 1.5cqw;
}

.ticket-widget {
  width: 100%;
}

/* Impressum: 0.8x der Haupttextgröße (.details li = 3cqw) */
.line--impressum {
  font-size: 2.4cqw;
  margin-top: 1.5cqw;
}

.content a {
  color: #000;
  text-decoration: none;
}

.content a:hover,
.content a:focus {
  text-decoration: underline;
}

/* Fallback für Browser ohne Container-Query-Units */
@supports not (width: 1cqw) {
  .line--xl { font-size: 7vw; }
  .line--lg { font-size: 5vw; }
  .line--date { font-size: 5.5vw; }
  .line--tickets { font-size: 5vw; }
  .details li { font-size: 2.5vw; }
}