/* 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. Gezeichnet in der Grundfarbe:
   die Mischung macht daraus Schwarz auf dem Gelb und Gelb auf der Scheibe.
   Siehe die Begruendung in invite-design.js. */
/* Der Ring liegt als eigenes Bild ueber der Scheibe, nicht in ihrer SVG.
   Sein Versatz - frueher translate(-16,6 -11,3) auf 300 Einheiten - steht
   ueber left/top und ausdruecklich NICHT ueber transform: ein transform auf
   einem Traeger bildet einen eigenen Stapelkontext, und mix-blend-mode
   verrechnet sich dann nur noch mit dem Inhalt dieses Kontexts. Der Ring
   verschwand dadurch auf dem acidgelben Grund und stand nur ueber der Scheibe.
   Prozente, weil der Kreis mitwaechst; -16,6/300 und -11,3/300.
   Gedreht wird das Bild selbst, also um seine eigene Mitte - und die ist die
   Mitte der Bahn, nicht die der Scheibe. Genau so war es vorher auch. */
.kreis__dreh {
  position: absolute;
  left: -5.5333%;
  top: -3.7667%;
  width: 100%;
  height: 100%;
  /* difference statt zweier Kopien: acid auf acid ergibt Schwarz, acid auf der
     dunklen Scheibe ergibt acid. Eine Farbe traegt beide Untergruende, ohne
     dass ein Buchstabe auf der Kante zerschnitten wird. */
  mix-blend-mode: difference;
  animation: kreis-dreh 48s linear infinite;
}

@keyframes kreis-dreh {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Wer Bewegung abbestellt hat, bekommt den Ring stehend. Stand bisher nur in
   style.css und fehlte auf der Acid-Strecke. */
@media (prefers-reduced-motion: reduce) {
  .kreis__dreh { animation: none; }
}

/* --------------------------------------------------------------- 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__link { display: block; line-height: 0; }
.leiste__atm { width: clamp(58px, 8vw, 110px); }
.leiste__nama { width: clamp(62px, 8.5vw, 116px); }
.leiste__sp { width: clamp(104px, 15vw, 200px); }
/* Das Festivallogo ist schon schwarz und traegt seine Schrift als Aussparung.
   brightness(0) wuerde nur die weichen Kanten nachdunkeln und aus dem
   Originallogo eine Naeherung machen - deshalb hier ausgenommen.
   Bemessen ueber die Hoehe, nicht die Breite: 104 px Breite ergeben 78 px
   Hoehe und damit genau die Hoehe der NAMA-Wortmarke, der hoechsten der drei.
   Gegen fuenf Groessen geprueft - bei 72 px bleibt ein dunkler Fleck, dessen
   Name sich nicht lesen laesst, ab 120 px draengt die Flaeche die drei
   Schriftzuege an den Rand. */
.leiste__rbf { width: clamp(66px, 9vw, 104px); filter: none; }
.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; }
  /* Stillstehend soll der Satz oben anfangen, nicht an einer zufaelligen Stelle. */
  .kreis__dreh { animation: none; }
}


/* --------------------------------------------------- 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); }

/* --------------------------------------------------------------------- ADC
   Kopf der Bewerbungsseite fuer Mitglieder. Das Zeichen steht gross und
   allein ueber der Ueberschrift: es ist der einzige Unterschied zur offenen
   Seite und muss ohne Lesen ankommen. Kein brightness(0) - die Datei ist
   schwarz auf transparent und steht so, wie der Club sie ausliefert. */
/* Mittig ueber der Ueberschrift und deutlich groesser als beim ersten Entwurf:
   das Zeichen ist der Absender dieser Seite und nicht eine Fussnote dazu. Die
   Mitte bezieht sich auf die Spalte mit der Ueberschrift, nicht auf die Seite -
   daneben steht das Formular. */
/* Zeichen und Ueberschrift liegen zusammen in einem schrumpfenden Kasten:
   dessen Breite gibt die Ueberschrift vor, und darauf bezieht sich die Mitte.
   Ueber der ganzen Spalte zentriert sass das Zeichen auf dem Telefon sichtbar
   rechts neben "JOIN NOW" - die Ueberschrift ist dort rund 163 px breit, die
   Spalte gut das Doppelte. */
.adc { display: inline-block; max-width: 100%; }

/* Unter 900 px liegt das Formular UNTER dem Kopf, die Spalte ist dann die
   ganze Seitenbreite - und ein linksbuendiger Block aus Zeichen und
   Ueberschrift sieht darin verloren aus. Dort steht er deshalb mittig.
   Ab 900 px steht das Formular daneben, die Spalte ist schmal und der Block
   bleibt am linken Rand, wo auch der Fliesstext beginnt. */
@media (max-width: 899px) {
  .anmeldung__kopf { text-align: center; }
  /* Nur der Kasten wird zentriert - der Text darunter bleibt im Lesefluss
     linksbuendig, sonst wird ein vierzeiliger Absatz zum Flattersatz. */
  .anmeldung__kopf .vorspann,
  .anmeldung__kopf .anmeldung__recht,
  .anmeldung__kopf .riegel { text-align: left; }
}

/* left/transform statt margin: auto, damit das Zeichen ueber die Ueberschrift
   hinausragen DARF und trotzdem mittig bleibt. Auf dem Telefon ist es ein paar
   Pixel breiter als "JOIN NOW"; mit margin: auto saesse es dann buendig links
   und ragte nur nach rechts. */
.adc__logo {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: clamp(168px, 23vw, 290px);
  height: auto;
  margin: 0 0 clamp(2px, 0.5vw, 8px);
}

/* Instagram am Ende des Textes. Klein und ruhig: 18 px Zeichen, Strichstaerke
   aus der Datei, kein Handle daneben. Es soll auffindbar sein, nicht werben.

   `float: right` als letztes Element im Absatz setzt das Zeichen rechts in die
   LETZTE Zeile - dort, wo der Text aufhoert. Reicht der Platz in dieser Zeile
   nicht, rutscht es von selbst eine Zeile tiefer; das ist der Notfall, nicht
   der Normalfall.

   Der negative untere Rand faengt das Klickfeld ab: 18 px Zeichen plus 2 x 6 px
   Polster sind 30 px und damit hoeher als eine Zeile. Ohne ihn schoebe der
   Float den Absatz auf. Das Polster bleibt trotzdem, sonst ist das Zeichen auf
   einem Telefon kaum zu treffen. */
.insta {
  float: right;
  margin: -6px -6px -12px 0.6em;
  padding: 6px;
  color: var(--schwarz);
  line-height: 0;
}
.insta img { display: block; width: 18px; height: 18px; }
.insta:hover img, .insta:focus-visible img { opacity: 0.55; }

.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; }


/* ------------------------------------------------ Ueberschriften in Cubano
   Als Vektorpfade, nicht als Webschrift: die Schriftdatei bleibt bei uns, und
   die Pfade skalieren mit. Erzeugt von tools/make-invite-art.py. Die Hoehe
   steuert die Groesse, die Breite folgt dem Seitenverhaeltnis. */
.kopfzeile {
  display: block;
  width: auto;
  height: clamp(30px, 4.4vw, 58px);
  max-width: 100%;
}

.kopfzeile--klein { height: clamp(18px, 2.1vw, 27px); }
.kopfzeile--marke { height: clamp(12px, 1.3vw, 16px); }