/* Acid-Strecke: Anmeldung, Ticket, Infoseite.
   Die alte orange Seite liegt in style.css und bleibt unberuehrt. Beide
   Stilblaetter treffen sich nie auf derselben Seite. */

@font-face {
  font-family: "Nomad";
  src: url("/fonts/Nomad-L-150-Medium.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --acid: #E9FB52;
  --schwarz: #000;
  --scheibe: #071715;
  --rosa: #FFC6FF;
  --rand: clamp(1.25rem, 6vw, 4rem);
}

* { box-sizing: border-box; }

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

body.acid {
  margin: 0;
  background: var(--acid);
  color: var(--schwarz);
  font-family: "Nomad", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* ------------------------------------------------------------------- Kopf */

.kopf { padding: clamp(28px, 4vw, 52px) 0 0; }

.kopf__datum { display: flex; align-items: flex-start; gap: 24px; }
.kopf__zahl { font-size: clamp(44px, 7.2vw, 96px); line-height: 0.9; font-weight: 700; }
.kopf__strich { flex: 1; border-top: 3px solid var(--schwarz); margin-top: clamp(18px, 3vw, 44px); }
.kopf__monat { text-align: right; line-height: 0.9; font-weight: 700; }
.kopf__monat b { display: block; font-size: clamp(44px, 7.2vw, 96px); font-weight: 700; }
.kopf__monat span { display: block; font-size: clamp(18px, 2.4vw, 34px); margin-top: 0.35em; }

.kopf__fakten {
  margin: 0.6em 0 0;
  padding-left: clamp(0px, 11vw, 140px);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.4;
}

.kopf__buehne { position: relative; margin-top: clamp(18px, 2.5vw, 30px); }

/* Dieselbe Konturdatei wie auf der orangen Seite, nur schwarz. brightness(0)
   ueberstimmt die eingebaute Limette — so gibt es die Kopfzeile genau einmal.
   Breite und Hoehe stehen als Attribute in der Datei; ohne sie waere die
   Groesse zwischen den Motoren nicht gleich. */
.kopf__titel {
  display: block;
  width: 100%;
  max-width: 62%;
  height: auto;
  filter: brightness(0);
}

/* ----------------------------------------------------------------- Scheibe */

.kreis {
  position: absolute;
  right: -2%;
  top: -6%;
  width: min(38vw, 470px);
  aspect-ratio: 1;
}
.kreis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kreis__scheibe { fill: var(--scheibe); }
/* Groesse und Bahn wie auf der orangen Seite. Die Farbe steht am Element,
   weil derselbe Satz zweimal in zwei Farben laeuft. */
.kreis__ring { font-family: "Nomad", Helvetica, Arial, sans-serif; font-size: 12.35px; }

/* --------------------------------------------------------------- Bausteine */

.linie { border: 0; border-top: 3px solid var(--schwarz); margin: clamp(34px, 5vw, 64px) 0; }

/* Auf dem Telefon passen die drei Logos nicht in eine Reihe: 76 + 80 + 130 px
   plus zweimal Abstand sind mehr, als 343 px Innenbreite hergeben. Die
   Haarlinien fielen dann auf null und die Wortmarke lief ueber den Rand.
   Unter 620 px stehen die Logos deshalb umbrechend nebeneinander, die Linien
   verschwinden. */
.leiste { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); padding: clamp(26px, 3vw, 40px) 0; }
.leiste img { display: block; filter: brightness(0); }
.leiste__atm { width: clamp(58px, 8vw, 110px); }
.leiste__nama { width: clamp(62px, 8.5vw, 116px); }
.leiste__sp { width: clamp(104px, 15vw, 200px); }
.leiste__strich { flex: 1; min-width: 12px; border-top: 3px solid var(--schwarz); }

@media (max-width: 620px) {
  .leiste { flex-wrap: wrap; gap: 18px 22px; }
  .leiste__strich { display: none; }
}

.klein { display: flex; flex-wrap: wrap; gap: 1.4em; padding: 0 0 clamp(30px, 4vw, 54px); font-size: 0.85em; }
.klein a { color: inherit; }

/* Dunkler Kasten fuer Nebenhandlungen (Absage, Hinweis). */
.kasten {
  background: var(--scheibe);
  color: var(--rosa);
  padding: clamp(24px, 3vw, 38px);
}
.kasten h3 { margin: 0 0 0.5em; font-size: 1.15em; font-weight: 700; }
.kasten p { margin: 0 0 1.1em; max-width: 56ch; }

/* Knopf: acid auf dunkel, oder schwarz auf acid. */
.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--acid);
  color: var(--schwarz);
  border: 0;
  padding: 0.9em 1.6em;
  cursor: pointer;
  text-decoration: none;
}
.knopf:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }

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


/* --------------------------------------------------- Kopf auf Formularseiten
   Die Anmeldung lebt vom Formular, nicht vom Plakat. Der volle Kopf ist rund
   744 px hoch — auf einem 1440x900-Bildschirm laege das erste Feld darunter.
   Auf diesen Seiten faellt er deshalb kleiner aus. Die Einladungsseite behaelt
   den grossen Kopf. */
.kopf--kompakt .kopf__zahl,
.kopf--kompakt .kopf__monat b { font-size: clamp(34px, 4.6vw, 58px); }
.kopf--kompakt .kopf__monat span { font-size: clamp(15px, 1.8vw, 22px); }
.kopf--kompakt .kopf__strich { margin-top: clamp(14px, 2vw, 28px); }
.kopf--kompakt .kopf__fakten { padding-left: clamp(0px, 8vw, 92px); font-size: clamp(14px, 1.3vw, 17px); }
.kopf--kompakt .kopf__titel { max-width: 46%; }
.kopf--kompakt .kreis { width: min(26vw, 300px); top: -4%; }
.kopf--kompakt { padding-bottom: 0; }


/* ------------------------------------------------- Programm unter dem Formular
   Auf join steht das Formular oben und traegt die Seite. Alles darunter ist
   Begruendung, warum man sich bewirbt - dieselben Bausteine wie auf der
   Einladungsseite, damit beide denselben Inhalt zeigen. */
.vorspann-block { max-width: 62ch; font-size: clamp(17px, 1.5vw, 21px); }
.vorspann-block p { margin: 0 0 1em; }

.leute {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 48px);
}
.person { margin: 0; }
.person picture { display: block; }
/* Hochkant, solange die drei nebeneinander stehen; quer, sobald sie
   untereinander liegen. Der Umbruchpunkt ist derselbe wie im picture-Element. */
.person__bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 761px) { .person__bild { aspect-ratio: 4 / 5; } }
.person__rolle {
  font-size: 0.78em; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 700; margin: 0.9em 0 0.2em;
}
.person__name { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; margin: 0 0 0.45em; font-weight: 700; }
.person__text { margin: 0; font-size: clamp(15px, 1.3vw, 17px); }

.eckdaten { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.eckdaten__block h3 {
  font-size: 0.82em; letter-spacing: 0.11em; text-transform: uppercase;
  margin: 0 0 0.5em; font-weight: 700;
}
.eckdaten__block p { margin: 0; }