@import url("fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════════════
   HOCHOFEN FESTIVAL — Richtungsvertrag

   THESIS       Die Seite ist eine Plakatwand im Zweifarben-Siebdruck, keine
                Festival-Landingpage. Abgelehnt: Bühnenfoto mit dunklem
                Verlauf darüber, Line-up in drei gleich großen Kacheln,
                Countdown-Uhr.
   OWN-WORLD    Riso-Duplex auf Naturpapier: Leuchtorange und Ultramarin im
                Multiply-Überdruck, Passerkreuze, Farbkeil am Blattrand,
                Rasterpunkte, leicht schiefe Anschläge. Anton als Plakat-
                schrift, Barlow Semi Condensed für alles Gesetzte.
   STORY        Nach zehn Sekunden weiß der Besucher: wer spielt, wann, wo —
                und wo das Ticket liegt.
   1. VIEWPORT  Der Name füllt die Blattbreite. Darunter das Überdruckband
                mit Datum und Gelände, rechts der gestempelte Ticketblock.
   FORM         Siebdruck-Plakat, zwei Farben, sichtbare Passerdifferenz.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:  #ede7d7;
  --paper-d:#e2dac6;
  --orange: #f8481c;
  --blue:   #1a1ab4;
  --ink:    #16162a;

  --f-poster: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-text:   "Barlow Semi Condensed", "Helvetica Neue", sans-serif;

  --gut: clamp(16px, 4vw, 60px);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 19px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn über dem ganzen Blatt – die Textur des Naturpapiers */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

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

::selection { background: var(--orange); color: var(--ink); }

a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 2px; }

:focus-visible { outline: 4px solid var(--orange); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--blue); color: var(--paper);
  padding: .8rem 1.2rem; font: 600 1rem/1 var(--f-text); letter-spacing: .06em;
}
.skip:focus { left: 0; }

/* ── Kopfstreifen: Passerkreuze und Farbkeil ──────────────────────────── */

.strip {
  display: flex; align-items: center; gap: 14px;
  padding: 7px var(--gut);
  background: var(--ink); color: var(--paper);
  font: 600 12px/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
}
.strip .wedge { display: flex; margin-left: auto; }
.strip .wedge i { width: 22px; height: 11px; display: block; }
.strip .wedge i:nth-child(1) { background: var(--orange); }
.strip .wedge i:nth-child(2) { background: var(--blue); }
.strip .wedge i:nth-child(3) { background: color-mix(in srgb, var(--orange) 50%, var(--blue)); }
.strip .wedge i:nth-child(4) { background: var(--paper); }
@media (max-width: 620px) { .strip .sep { display: none; } .strip { font-size: 10.5px; letter-spacing: .12em; } }

/* Passerkreuz */
.reg { position: absolute; width: 26px; height: 26px; opacity: .55; pointer-events: none; }

/* ── Navigation als Klebestreifen ─────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
}

.logo {
  display: flex; align-items: center; gap: 11px;
  padding: 11px var(--gut) 11px clamp(16px, 4vw, 60px);
  text-decoration: none; color: var(--ink);
  font-family: var(--f-poster); font-size: 27px; letter-spacing: .01em; line-height: 1;
  text-transform: uppercase;
}
.logo svg { width: 26px; height: 26px; flex: none; }

.menu { display: flex; margin-left: auto; }
.menu a {
  display: flex; align-items: center; padding: 0 clamp(12px, 1.8vw, 22px);
  font: 600 14px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: background .16s cubic-bezier(.16,1,.3,1), color .16s cubic-bezier(.16,1,.3,1);
}
.menu a:hover { background: var(--blue); color: var(--paper); }
.menu a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.bar .buy {
  display: flex; align-items: center; padding: 0 clamp(16px, 2.4vw, 30px);
  background: var(--orange); color: var(--ink);
  font: 600 14px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background .16s;
}
.bar .buy:hover { background: var(--ink); color: var(--orange); }

.toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  padding: 0 20px; background: none; border: 0;
  /* Trennregel der Plakatleiste: im Blocksatz dieser Welt hat jede Kante dieselbe Stärke. */
  /* impeccable-disable-next-line side-tab */
  border-left: 4px solid var(--ink);
  font: 600 14px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
}
.toggle i { display: block; width: 18px; height: 12px; border-top: 3px solid; border-bottom: 3px solid; }

@media (max-width: 860px) {
  .toggle { display: flex; }
  .menu {
    display: none; order: 3; flex-basis: 100%; flex-direction: column;
    border-top: 4px solid var(--ink);
  }
  .menu.open { display: flex; }
  .menu a { padding: 15px var(--gut); border-bottom: 2px solid rgba(22,22,42,.2); }
  .bar .buy { order: 4; flex-basis: 100%; justify-content: center; padding: 15px; }
}

/* ── Plakatkopf ───────────────────────────────────────────────────────── */

.poster {
  position: relative;
  padding: clamp(26px, 5vw, 70px) var(--gut) 0;
  overflow: hidden;
}

/* Rasterpunkte als Hintergrundfläche, wie ein aufgerissener Raster­verlauf */
.poster::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(var(--orange) 34%, transparent 35%);
  background-size: 13px 13px;
  opacity: .3;
  -webkit-mask-image: radial-gradient(120% 78% at 72% 8%, #000 0%, transparent 66%);
          mask-image: radial-gradient(120% 78% at 72% 8%, #000 0%, transparent 66%);
}

.poster > * { position: relative; z-index: 1; }

.wordmark {
  font-family: var(--f-poster);
  font-size: clamp(3.6rem, 17.2vw, 15.5rem);
  line-height: .82;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

/* Der Überdruck: die Orangeplatte liegt versetzt hinter der Schrift und
   fährt beim Laden in den Passer – die Eigenbewegung des Siebdrucks. */
.wordmark span {
  display: block;
  position: relative;
}
.wordmark span::before {
  content: attr(data-echo);
  position: absolute; inset: 0; z-index: -1;
  color: var(--orange);
  transform: translate(var(--ox, 5px), var(--oy, 6px));
  mix-blend-mode: multiply;
}
/* Zweite Zeile wird auf die Breite der ersten ausgetrieben – so schließt
   der Satz beidseitig ab, wie auf einem gesetzten Plakat. */
.wordmark .b { color: var(--blue); letter-spacing: .047em; }
.wordmark .b::before { color: var(--orange); }

body.printed .wordmark span::before {
  animation: register 1.15s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes register {
  from { transform: translate(22px, 26px); }
  to   { transform: translate(5px, 6px); }
}

.subline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  margin: clamp(16px, 2.4vw, 30px) 0 0;
  font: 600 clamp(1rem, 1.9vw, 1.45rem)/1.15 var(--f-text);
  letter-spacing: .06em; text-transform: uppercase;
}
.subline b {
  background: var(--blue); color: var(--paper);
  padding: 5px 12px 6px; font-weight: 600;
  transform: rotate(-.7deg);
}
.subline em { font-style: italic; font-weight: 500; letter-spacing: .02em; }

.poster-foot {
  display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: flex-end;
  padding: clamp(26px, 4vw, 52px) 0 clamp(30px, 4.6vw, 60px);
}
.poster-foot p { margin: 0; max-width: 40ch; font-size: 1.06rem; }

/* ── Stempelknopf ─────────────────────────────────────────────────────── */

.stamp {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px 16px;
  background: var(--orange); color: var(--ink);
  border: 3px solid var(--ink);
  font: 600 clamp(15px, 1.5vw, 18px)/1 var(--f-text);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transform: rotate(-1.2deg);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1);
  box-shadow: 6px 7px 0 var(--blue);
}
.stamp:hover { transform: rotate(-1.2deg) translate(-2px, -3px); box-shadow: 9px 11px 0 var(--blue); }
.stamp:active { transform: rotate(-1.2deg) translate(3px, 4px); box-shadow: 2px 2px 0 var(--blue); }
.stamp--flat { background: transparent; box-shadow: 6px 7px 0 var(--ink); transform: none; }
.stamp--flat:hover { transform: translate(-2px, -3px); box-shadow: 9px 11px 0 var(--ink); }
.stamp--flat:active { transform: translate(3px,4px); box-shadow: 2px 2px 0 var(--ink); }
.stamp--blue { background: var(--blue); color: var(--paper); box-shadow: 6px 7px 0 var(--orange); }

/* ── Abschnitte ───────────────────────────────────────────────────────── */

.band {
  padding: clamp(38px, 5.4vw, 90px) var(--gut);
  border-top: 5px solid var(--ink);
}
.band--orange { background: var(--orange); color: var(--ink); }
.band--blue   { background: var(--blue); color: var(--paper); }
.band--blue a { color: var(--paper); }
.band--ink    { background: var(--ink); color: var(--paper); }
.band--ink a  { color: var(--orange); }

h2 {
  font-family: var(--f-poster);
  font-size: clamp(2.1rem, 6.2vw, 4.6rem);
  line-height: .88; letter-spacing: -.015em; text-transform: uppercase;
  margin: 0 0 clamp(18px, 2.4vw, 34px);
  text-wrap: balance;
}
h3 {
  font-family: var(--f-poster);
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
  line-height: 1; letter-spacing: 0; text-transform: uppercase;
  margin: 0 0 10px;
}
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.big { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }

/* Absätze, die Layout tragen statt Fließtext – das Zeilenmaß gilt für sie nicht. */
.strip, .subline, .kick, .billing .day, .foot .small,
.prices .amount, .prices .state, .signup .err { max-width: none; }

.kick {
  font: 600 13px/1 var(--f-text); letter-spacing: .3em; text-transform: uppercase;
  margin: 0 0 18px;
}

/* ── Line-up als Plakatsatz ───────────────────────────────────────────
   Die Schriftgröße folgt der Position im Billing – so wird ein Plakat
   gesetzt, nicht mit gleich großen Kacheln gefüllt.                    */

.billing { text-align: center; }

.billing .day {
  display: flex; align-items: center; gap: 18px;
  margin: clamp(30px, 4vw, 54px) 0 clamp(14px, 1.8vw, 22px);
  font: 600 14px/1 var(--f-text); letter-spacing: .3em; text-transform: uppercase;
}
.billing .day::before, .billing .day::after { content: ""; flex: 1; height: 3px; background: currentColor; }
.billing .day:first-child { margin-top: 0; }

.billing ul { list-style: none; margin: 0; padding: 0; }
.billing li { display: inline; }
.billing li::after { content: " · "; opacity: .5; }
.billing li:last-child::after { content: ""; }
.billing a { color: inherit; text-decoration: none; }
.billing a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.billing .r1 { font-family: var(--f-poster); font-size: clamp(2rem, 7.6vw, 5.4rem); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.billing .r2 { font-family: var(--f-poster); font-size: clamp(1.35rem, 4.2vw, 2.9rem); line-height: 1.05; text-transform: uppercase; }
.billing .r3 { font: 600 clamp(1rem, 2.1vw, 1.5rem)/1.25 var(--f-text); letter-spacing: .04em; text-transform: uppercase; }
.billing .r4 { font: 500 clamp(.86rem, 1.35vw, 1.02rem)/1.4 var(--f-text); letter-spacing: .1em; text-transform: uppercase; }

/* ── Laufplan ─────────────────────────────────────────────────────────── */

.gridwrap { overflow-x: auto; padding-bottom: 6px; }

.runsheet {
  min-width: 720px;
  display: grid;
  grid-template-columns: 82px repeat(3, minmax(0, 1fr));
  border: 4px solid currentColor;
}
.runsheet > * { border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; padding: 9px 11px; }
.runsheet > *:nth-child(4n) { border-right: 0; }
.runsheet .rh {
  font: 600 13px/1.2 var(--f-text); letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
}
.runsheet .rt {
  font: 600 14px/1.2 var(--f-text); letter-spacing: .06em;
  background: rgba(22,22,42,.1);
}
.runsheet .slot { font: 600 clamp(15px, 1.4vw, 18px)/1.2 var(--f-text); }
.runsheet .slot small { display: block; margin-top: 4px; font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.runsheet .slot.hit { background: var(--orange); color: var(--ink); }
.runsheet .slot.empty { opacity: .38; font-weight: 500; }

/* ── Preistafel ───────────────────────────────────────────────────────── */

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border: 4px solid var(--ink); }
.prices > div {
  padding: clamp(18px, 2.4vw, 28px);
  /* Spaltentrenner der Preistafel, nicht Akzent an einer Karte. */
  /* impeccable-disable-next-line side-tab */
  border-right: 3px solid var(--ink);
  display: flex; flex-direction: column;
}
.prices > div:last-child { border-right: 0; }
.prices .sold { background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(22,22,42,.13) 12px 24px); }
.prices dt { font: 600 14px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.prices .amount { font-family: var(--f-poster); font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: .9; margin: 0; }
.prices .amount sup { font-size: .42em; vertical-align: super; margin-left: 2px; }
.prices .note { margin: 12px 0 0; font-size: .93rem; line-height: 1.4; }
.prices .state {
  margin-top: auto; padding-top: 16px;
  font: 600 12.5px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase;
}
.prices .state b { background: var(--ink); color: var(--paper); padding: 4px 8px; font-weight: 600; }
.prices .state.out b { background: transparent; color: var(--ink); border: 2px solid var(--ink); }

/* ── Infoliste ────────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.facts h3 { margin-bottom: 8px; }
.facts p { font-size: 1rem; }

.qa { border-top: 3px solid currentColor; }
.qa details { border-bottom: 3px solid currentColor; }
.qa summary {
  list-style: none; cursor: pointer;
  padding: 17px 44px 17px 0; position: relative;
  font: 600 clamp(1.05rem, 1.9vw, 1.35rem)/1.25 var(--f-text); letter-spacing: .02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-poster); font-size: 1.9rem; line-height: 1;
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa .a { padding: 0 0 20px; max-width: 66ch; }

/* ── Anmeldung ────────────────────────────────────────────────────────── */

.signup { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 26px; }
.signup label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.signup input {
  flex: 1 1 260px; min-width: 0;
  padding: 15px 16px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 500 1.05rem/1 var(--f-text);
}
.signup input::placeholder { color: rgba(22,22,42,.62); }
.signup input:focus { outline: 4px solid var(--blue); outline-offset: 0; }
.signup button { border: 0; cursor: pointer; font-family: var(--f-text); }
.signup .err { flex-basis: 100%; margin: 0; font-weight: 600; font-size: .95rem; }

.notice {
  display: none; margin-top: 20px; padding: 14px 18px;
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
  font-weight: 600;
}
.notice.on { display: block; }

/* ── Fuß ──────────────────────────────────────────────────────────────── */

.foot {
  padding: clamp(34px, 4.4vw, 64px) var(--gut) clamp(20px, 2.6vw, 30px);
  background: var(--ink); color: var(--paper);
  border-top: 5px solid var(--ink);
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.foot h4 { margin: 0 0 14px; font: 600 12.5px/1 var(--f-text); letter-spacing: .26em; text-transform: uppercase; color: var(--orange); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--paper); text-decoration: none; border-bottom: 2px solid transparent; }
.foot a:hover { border-bottom-color: var(--orange); }
.foot p { font-size: .98rem; }
.foot .rule { margin: clamp(28px, 3.4vw, 44px) 0 18px; height: 3px; background: var(--orange); border: 0; }
.foot .small {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font: 500 12.5px/1.6 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  color: #b9b6c8;
}
.foot .small .tag { background: var(--orange); color: var(--ink); padding: 2px 9px; font-weight: 600; }

/* ── Innenseiten ──────────────────────────────────────────────────────── */

.pagetop { padding: clamp(30px, 4.4vw, 66px) var(--gut) clamp(26px, 3.4vw, 44px); }
.pagetop h1 {
  font-family: var(--f-poster);
  font-size: clamp(2.8rem, 11vw, 8rem); line-height: .84; letter-spacing: -.02em;
  text-transform: uppercase; margin: 0 0 18px;
}
.pagetop p { font-size: clamp(1.05rem, 1.7vw, 1.28rem); max-width: 52ch; }

.copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: 1.6em; }
.copy h2:first-child { margin-top: 0; }
.copy h3 { margin-top: 1.6em; }
.copy ul, .copy ol { max-width: 62ch; padding-left: 1.15em; }
.copy li { margin-bottom: .4em; }
.copy dt { font-weight: 600; margin-top: 1.1em; }
.copy dd { margin: .2em 0 0; }

@media (prefers-reduced-motion: reduce) {
  body.printed .wordmark span::before { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Sprungziele bleiben unter der klebenden Kopfleiste sichtbar. */
[id] { scroll-margin-top: 96px; }

/* ── Deutsche Komposita ───────────────────────────────────────────────
   „Berufshaftpflichtversicherung" ist in einer schmalen Spalte breiter als
   der Kasten. Mit lang="de" trennt der Browser korrekt statt zu überlaufen. */
h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
p, li, dd, dt, th, td, summary, figcaption { overflow-wrap: break-word; }