/* =========================================================================
   fango – Die Bewerbung
   -------------------------------------------------------------------------
   Zwei Flaechen, ein Blatt: die Tuer unter `/bewerben` und die Quittung unter
   `/bewerbung/<token>`. Sie gehoeren zusammen, weil sie ein Instrument teilen —
   die Standlinie zaehlt bis acht, und der achte Schirm ist die Quittung.

   Was hier steht, ist die Gestaltung aus BEWERBUNG.md Schritt 4. Die visuelle
   Welt »Die schwarze Wand« bleibt unangetastet: kein neuer Grauwert, kein
   Schatten, kein Radius ueber 2 px, keine Kachel, keine Karte. Farbe kommt
   ausschliesslich aus einer Kategorie.

   **Die Klassennamen sind eigene.** `.zeile`, `.titel` und `.kopf` tragen in
   fango.css Regeln, die fuer die Programmliste geschrieben sind; ein geteilter
   Name erbt sie lautlos. Uebernommen wird hier nur, was das Haus als Vokabular
   fuehrt: die Haarlinie unter einer Zeile als Feld, die Umkehrung als einziger
   aktiver Zustand, der Ticket-Knopf, der Kategoriepunkt.
   ========================================================================= */


/* ---------- Die Spalte ----------
   Der Stapel ist von Haus aus mobil: eine Frage fuellt jeden Schirm. Auf einem
   Rechner waechst der Rand, nicht die Zahl der Felder — wer hier zwei Spalten
   baut, hat den Stapel abgeschafft und ein Formular zurueckbekommen.

   62ch ist dieselbe Spalte, die jede lesende Seite des Hauses hat. Sie steht
   hier ausdruecklich, weil der schlanke Kopf sie nicht mitbringt: die Regel in
   fango.css haengt an `.kopf:not(.kopf--schlank)+main`, und dieser Kopf ist
   schlank. */
/* Ein Schirm ist laenger als das Fenster, der naechste kuerzer — und mit der
   Rollleiste kaeme und ginge die Spalte um ihre Breite. Der Platz wird
   deshalb freigehalten, solange der Stapel laeuft. Ohne Skript steht das
   Attribut nicht da und die Seite verhaelt sich wie jede andere. */
html[data-stapel]{scrollbar-gutter:stable}

.stapel-flaeche{max-width:62ch;margin:var(--takt-block) auto 0}

/* Der Torfehler gilt dem ganzen Versuch und nicht einer Angabe — er steht
   deshalb ueber dem Stapel und nicht auf einem Schirm. Im Fluss, zwischen
   Haarlinien, an der Stelle, an der er entstanden ist. */
.stapel-tor{margin-bottom:var(--takt-block);
  padding-block:var(--takt-zeile);
  border-block:1px solid var(--linie);
  color:var(--primary-hell);font-size:var(--text-m);line-height:1.7}
.stapel-tor p{margin:0}
.stapel-tor p+p{margin-top:.8rem}


/* ---------- Der Stapel ----------
   Ohne Skript liegen alle sieben Fragen offen untereinander: das lange
   Formular aus BEWERBUNG.md 12. Es ist die Grundlage und nicht der Nachtrag,
   und es traegt vollstaendig. Der Stapel ist die Abkuerzung darueber; er
   entsteht erst, wenn `initStapel()` `data-aktiv` setzt. */
.stapel{display:flex;flex-direction:column;min-width:0}

.schirm{border:0;margin:0;padding:0;min-width:0}
.stapel:not([data-aktiv]) .schirm+.schirm{
  margin-top:var(--takt-block);padding-top:var(--takt-block);
  border-top:1px solid var(--linie);
}

/* Mit Skript steht genau eine Frage im Bild. `display:none` und nicht
   `hidden`: die Felder der uebrigen Schirme bleiben im Formular und werden
   mitgeschickt — versteckt ist hier eine Frage der Sicht und nicht der
   Zugehoerigkeit. Das Skript nimmt dem Formular dafuer die eingebaute
   Pruefung ab (`noValidate`), weil ein Browser ein Pflichtfeld, das er nicht
   anzeigen kann, auch nicht bemaengeln kann: er wirft dann »not focusable«
   und sendet gar nicht. Geprueft wird stattdessen Schirm fuer Schirm, mit
   denselben Saetzen, die der Server sagt. */
.stapel[data-aktiv] .schirm{display:none}
.stapel[data-aktiv] .schirm[data-hier]{display:block}

/* Der Schirm haelt seine Hoehe, damit die Standlinie beim Blaettern nicht
   springt. Nicht als feste Hoehe: was laenger ist — der lange Text, die
   Belegwand — waechst darueber hinaus und schiebt den Fuss mit. Ein Fuss,
   der sich festklebt, braeuchte eine Platte, und eine Platte schneidet ab,
   was hinter ihr durchlaeuft. */
.stapel[data-aktiv] .schirme{min-height:min(52dvh, 40rem)}
.stapel[data-aktiv] .schirme{flex:1 0 auto}


/* ---------- Die Frage ----------
   Sie ist die eine Sache im Bild und traegt deshalb die Groesse, die auf der
   Detailseite der Veranstaltungstitel traegt: auf dieser Flaeche ist sie
   dasselbe. `legend` steht sonst in der Rahmenkante eines Feldsatzes; ohne
   Rahmen ist sie ein gewoehnlicher Block, und `display:block` macht sie zu
   einem, der die volle Breite umbricht statt zu schrumpfen. */
.frage{display:block;float:none;width:100%;padding:0;margin:0 0 var(--takt-zeile);
  font-family:Delight,sans-serif;font-weight:900;
  font-size:var(--h1);line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;color:var(--titelfarbe);
  text-wrap:balance;
}

/* Der weiche Hinweis unter der Frage. Er liest sich, also steht er in IBM Plex
   und in gemischter Schreibung — alles, was in Delight und Versalien steht,
   ist auf dieser Flaeche Beschriftung. */
.hinweis{margin:calc(-1 * var(--takt-eng)) 0 var(--takt-block);
  max-width:56ch;font-size:var(--text-m);line-height:1.7;color:var(--text-gedaempft)}

/* Der Einleitungstext des Vereins. Er gehoert zur ersten Frage und nicht ueber
   den Stapel: der Auftakt ist ein Bild und nicht zwei. */
.auftakt{margin:calc(-1 * var(--takt-eng)) 0 var(--takt-block);
  max-width:56ch;font-size:var(--text-m);line-height:1.7;color:var(--text-gedaempft)}
.auftakt p{margin:0 0 1.7em}
.auftakt>:last-child{margin-bottom:0}

/* Der Satz, an dem dieses Haus haengt (BEWERBUNG.md 2.6). Er ist keine
   Feldhilfe, sondern die Positionierung — und steht deshalb in Lesegroesse
   und in Titelweiss zwischen zwei Haarlinien, nicht still unter einer
   Beschriftung. */
/* Kein Anzug nach oben wie beim Hinweis: dieser Absatz bringt eigene Kanten
   mit, und eine Kante dicht unter einer Ueberschrift liest sich als deren
   Unterstreichung und nicht als der Anfang eines Absatzes. */
.ansage{margin:var(--takt-zeile) 0 var(--takt-block);max-width:52ch;
  padding-block:var(--takt-zeile);border-block:1px solid var(--linie);
  font-size:var(--text-l);line-height:1.6;color:var(--titelfarbe)}


/* ---------- Die drei Arten ----------
   Drei grosse Zeilen in Termingroesse, kein Auswahlmenue, kein sichtbarer
   Radio-Knopf. Der Knopf bleibt im Markup: er traegt Tastatur, Vorlesewerkzeug
   und den Zustand. Sichtbar ist er nicht, weil ein Systemknopf auf einer
   schwarzen Wand ein Fremdkoerper ist — und weil die Zeile selbst gross genug
   ist, um die Auswahl zu sein.

   Die Leiste wird um ihren eigenen Innenabstand herausgezogen: die Schrift
   fluchtet mit der Spalte, die umgekehrte Platte haengt in die Gasse heraus,
   so wie eine Markierung es tut. Dieselbe Rechnung wie die Kategorieleiste
   der bookingapp. */
.arten{margin-inline:-1.6rem;border-block:1px solid var(--linie)}
.art{position:relative;display:flex;align-items:baseline;gap:1.4rem;
  padding:2rem 1.6rem;cursor:pointer;
  transition:background var(--takt-hover) var(--kurve-hover),
             color var(--takt-hover) var(--kurve-hover);
}
.art+.art{border-top:1px solid var(--linie)}
.art input{position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;appearance:none}

/* Der Kategoriepunkt — dasselbe Zeichen, das im Rueckblick auf der Achse sitzt
   und in den Belegzeilen der bookingapp am Zeilenanfang steht. Konzert und
   Ausstellung sind Kategorien des Hauses und bringen ihre Farbe mit; »Etwas
   anderes« ist keine und faellt auf Titelweiss zurueck.

   Die Rechnung steht in fango.css bei `.zeile,.achsenzeile,.art` — dort, wo
   die neun Zahlen liegen, und nicht ein zweites Mal hier. */
.art::before{content:"";flex:0 0 auto;
  width:.9rem;height:.9rem;border-radius:50%;
  background:var(--akzent,var(--farbe-default));
  transform:translateY(-.15em);
  transition:background var(--takt-hover) var(--kurve-hover)}

.art-name{font-family:Delight,sans-serif;font-weight:400;
  font-size:var(--h2);line-height:1.25;color:var(--titelfarbe);
  transition:color var(--takt-hover) var(--kurve-hover)}

@media (hover:hover){
  .art:hover .art-name{color:var(--titelfarbe)}
  .art:hover{background:rgba(255,255,255,.06)}
}

/* Der aktive Zustand ist die Umkehrung und nichts sonst — kein Rahmen, keine
   Unterstreichung, kein roter Punkt. Rot heisst in diesem System »hier« und
   bekommt keine zweite Bedeutung. Auf der umgekehrten Platte kehrt auch der
   Kategoriepunkt um: eine helle Kategoriefarbe auf Titelweiss waere kein
   Zeichen mehr, sondern eine Fehlstelle. */
.art:has(input:checked){background:var(--titelfarbe)}
.art:has(input:checked) .art-name{color:var(--dunkel);font-weight:900}
.art:has(input:checked)::before{background:var(--dunkel)}

/* Auf einer umgekehrten Flaeche kehrt der Ring mit um — dieselbe Regel wie im
   Haus. Titelweiss mit Abstand um einen titelweissen Kasten liest sich als
   Doppelrahmen. */
.art:has(input:focus-visible){outline:2px solid var(--titelfarbe);outline-offset:2px}
.art:has(input:checked):has(input:focus-visible){
  outline-color:var(--dunkel);outline-offset:-4px}


/* ---------- Die Felder ----------
   Ein Feld ist eine Haarlinie unter einer Zeile, kein Kasten. Die Kante liegt
   im Trennpunkt und nicht in der Haarlinie: sie ist eine Bedienkante und keine
   Trennung. Beschriftung darueber in Delight 900, Versalien, still.

   Der Browser bringt fuer jedes Bedienelement eine eigene Schrift und einen
   eigenen Rahmen mit; beides wird zurueckgenommen, sonst steht die halbe
   Flaeche in Arial. */
.stapel :where(input,select,textarea,button){font-family:inherit}

.feldzeile{display:flex;flex-direction:column;gap:.4rem;margin:0 0 var(--takt-zeile)}
.feldzeile:last-child{margin-bottom:0}

.feldzeile label,
.beschriftung{
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;line-height:1.4;
  color:var(--text-still);margin:0;
}
.beschriftung{margin-bottom:var(--takt-eng)}

.stapel input[type=text],
.stapel input[type=url],
.stapel input[type=email],
.stapel input[type=date],
.stapel textarea{
  width:100%;
  font:inherit;font-size:var(--text-m);line-height:1.5;
  color:var(--titelfarbe);
  background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--trennpunkt);
  padding:.8rem 0;margin:0;
  transition:border-color var(--takt-hover) var(--kurve-hover);
}
/* Der Boden liegt auf der Gruppe und nicht auf dem Feld: als Hoehe des Feldes
   schoebe er die Linie weit unter ihre Beschriftung. Beschriftung und Feld
   haengen ueber `for` zusammen; getroffen wird dieselbe Flaeche. */
.feldzeile{min-height:4.4rem}

/* Das Feld faengt klein an und waechst mit dem Text. Ein Kasten von zwoelf
   Zeilen, dessen einzige sichtbare Marke eine Linie an seinem Fuss ist, liest
   sich leer als Leerraum und nicht als Feld — und ein Feld, das nach dem
   dritten Absatz scrollt, versteckt, was jemand gerade geschrieben hat.

   **Der Grundzustand ist der sichere.** Ein Feld, das nicht mitwaechst, muss
   scrollen duerfen; `overflow:hidden` auf einer festen Hoehe wuerde sonst
   verschlucken, was jemand geschrieben hat — im Browser ohne `field-sizing`
   und ohne Skript. Zugeklappt wird der Ueberlauf deshalb erst dort, wo etwas
   die Hoehe nachfuehrt: das Stylesheet, wo der Browser es kann, sonst
   `bewerbung.js`, das dieselben zwei Werte am Element setzt. */
.stapel textarea{resize:vertical;overflow:auto;
  min-height:12rem;line-height:1.7}

@supports (field-sizing:content){
  .stapel textarea{resize:none;overflow:hidden;
    min-height:7.2rem;field-sizing:content}
}
.stapel input::placeholder{color:var(--text-still)}
.stapel input:hover,
.stapel textarea:hover{border-bottom-color:var(--text-gedaempft)}
.stapel input:focus-visible,
.stapel textarea:focus-visible{outline-offset:2px;border-bottom-color:var(--titelfarbe)}

/* Der eingebaute Kalenderknopf steht auf der schwarzen Wand als schwarzes
   Zeichen — er wird umgedreht, statt versteckt zu werden. */
/* Ein leeres Datumsfeld zeigt »tt.mm.jjjj«, und der Browser setzt das in der
   Schriftfarbe des Feldes — es sieht damit aus wie eine Angabe. Es ist keine,
   also steht es still. `data-leer` setzt bewerbung.js; ohne Skript bleibt es
   wie der Browser es meint. */
.stapel input[type=date][data-leer]{color:var(--text-still)}
.stapel input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1);opacity:.55;cursor:pointer}

/* Die Hilfe unter einem Feld ist Kleingedrucktes und steht still. */
/* Beschriftungsgroesse, nicht kleiner: --text-xs faellt am Telefon auf 12,6 px,
   und ein Satz, den jemand beim Ausfuellen braucht, ist kein Kleingedrucktes. */
.hilfe{font-size:var(--text-s);line-height:1.5;color:var(--text-still);max-width:52ch}

/* Die Meldung. Im Fluss, an der Stelle, an der der Fehler liegt — nie als
   Einblendung, nie gesammelt oben, und sie verschwindet nicht von selbst. */
/* Die Meldung haengt an dem, was sie bemaengelt: die Zeile darueber gibt ihr
   ihren Abstand ab, statt dass die Meldung sich mit einem Anzug nach oben
   heranzieht. So steht sie unter jeder Art von Vorgaenger gleich — unter einem
   Feld wie unter der Artenleiste. */
.meldung{margin:0 0 var(--takt-zeile);
  font-size:var(--text-s);line-height:1.5;color:var(--primary-hell)}
.meldung[hidden]{display:none}
.feldzeile:has(+ .meldung){margin-bottom:.8rem}
.arten:has(+ .meldung){margin-bottom:.8rem}

/* Ein Feld, das gerade bemaengelt wurde, traegt die Kante der Meldung. Rot
   markiert und reagiert — es dekoriert nicht, und es bleibt nur, solange der
   Vorwurf steht. */
.feldzeile:has([aria-invalid=true]) input,
.feldzeile:has([aria-invalid=true]) textarea{border-bottom-color:var(--primary-hell)}


/* ---------- Die Adressen ----------
   Fuenf Zeilen, von denen vier ohne Skript offenstehen und mit Skript
   nacheinander aufgehen. Zehn leere Felder auf einem Schirm, der »Zeig es«
   heisst, sind eine Aufgabe und keine Einladung. */
.adressen{margin-bottom:var(--takt-block)}
.adresse{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--takt-eng) var(--takt-zeile);align-items:baseline;
  padding-block:var(--takt-eng)}
.adresse+.adresse{border-top:1px solid var(--linie)}
.adresse-zahl{font-family:Delight,sans-serif;font-weight:900;font-size:var(--text-s);
  color:var(--text-still);min-width:1.4ch;font-variant-numeric:tabular-nums}
.stapel[data-aktiv] .adresse--spaeter{display:none}


/* ---------- Die Belegwand ----------
   Ohne Skript ein Dateifeld. Mit Skript haengen die gewaehlten Bilder sofort
   an der Wand: gemeinsame Reihenhoehe, Breite aus dem eigenen
   Seitenverhaeltnis, kein Zuschnitt. Eine Kachel schneidet zu, eine Haengung
   richtet aus — und wer eine Arbeit einreicht, soll sie vorher ganz sehen. */
.belege{margin-top:var(--takt-block);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie)}

/* Das eingebaute Dateifeld bringt einen Knopf in Systemschrift mit und einen
   Satz »Keine Datei ausgewaehlt«. Beides gehoert nicht auf diese Wand. Das
   Feld bleibt bedienbar und liegt unsichtbar ueber seiner eigenen
   Beschriftung; ohne Stylesheet steht wieder das Feld da. */
/* **Kein gestricheltes Rechteck.** Das System kennt keinen einzigen — es baut
   Struktur aus Haarlinien, und eine Ablagezone, die nur waehrend eines Zuges
   etwas bedeutet, braucht in Ruhe keine Kante. Sie bekommt sie in dem
   Augenblick, in dem eine Datei ueber ihr haengt, und gibt sie danach wieder
   ab: zuruecknehmen statt ausblenden, in der Gegenrichtung.

   Das Feld selbst liegt nicht als unsichtbare Flaeche ueber dem ganzen Kasten.
   Es waere sonst ein Dateidialog, der aufgeht, wenn jemand neben den Knopf
   tippt. Bedient wird ueber die Beschriftung, die der Knopf des Hauses ist —
   `for` verbindet beide, und der Ring des Feldes wird am Knopf gezeigt. */
.belege-tor{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--takt-zeile);
  padding:var(--takt-eng) 1.6rem;
  margin-inline:-1.6rem;
  transition:outline-color var(--takt-hover) var(--kurve-hover),
             background var(--takt-hover) var(--kurve-hover);
  outline:1px solid transparent;outline-offset:0}
.belege-tor input[type=file]{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.belege-tor:has(input:focus-visible) .belege-knopf{
  outline:2px solid var(--dunkel);outline-offset:-4px}
.belege-tor[data-ueber]{outline-color:var(--titelfarbe);background:rgba(255,255,255,.06)}

.belege-knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:4.4rem;padding:.72rem 1.8rem;
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.02em;
  background:var(--titelfarbe);color:var(--dunkel);
  border-radius:2px;cursor:pointer;
  transition:background var(--takt-hover) var(--kurve-hover),
             color var(--takt-hover) var(--kurve-hover)}
@media (hover:hover){
  .belege-knopf:hover{background:var(--primary);color:var(--titelfarbe)}
}
.belege-knopf:active{background:var(--primary);color:var(--titelfarbe)}
.belege-ziehen{margin:0;font-size:var(--text-s);color:var(--text-still)}
/* Ziehen gibt es nur, wo ein feiner Zeiger ist. Auf einem Telefon zieht
   niemand eine Datei auf eine Flaeche, und ein Satz, der es anbietet, ist
   dort eine Auskunft ueber ein Geraet, das der Leser nicht hat. */
@media (hover:none),(pointer:coarse){.belege-ziehen{display:none}}

/* Die Zielhoehe einer Reihe. Niedriger als die Haengung des Hauses (26vh):
   dort haengen fertige Fotos an einer Wand, hier liegen fuenf Belege auf einem
   Schirm, der noch fuenf andere Dinge zeigt. Ein Beleg wird angesehen, nicht
   bewundert. */
.wand{--reihe:clamp(11rem, 15vh, 16rem);
  display:flex;flex-wrap:wrap;gap:var(--takt-eng);
  margin-top:var(--takt-zeile)}
.wand[hidden]{display:none}
/* Der Deckel auf der halben Breite ist das, was eine Haengung von einer Reihe
   unterscheidet, die sich streckt: bleibt ein Bild als einziges in seiner
   Reihe, waechst es sonst auf die volle Spalte und steht dreimal so hoch da
   wie seine Nachbarn — nicht, weil es wichtiger ist, sondern weil es zufaellig
   als drittes kam. Ein Bild, das als einziges eingereicht wurde, ist ein
   anderer Fall: es haengt gross, wie ein Bild, das allein an einer Wand
   haengt. Dieselbe Ausnahme kennt die Haengung des Hauses. */
.beleg{position:relative;margin:0;min-width:0;
  flex:var(--seite) 1 calc(var(--seite) * var(--reihe));
  max-width:calc(50% - var(--takt-eng) / 2)}
.wand .beleg:only-child{max-width:100%}
.beleg img{display:block;width:100%;height:auto;aspect-ratio:var(--seite);
  background:var(--dunkel)}
/* Die letzte Reihe endet, sie streckt sich nicht — sonst waeren die letzten
   zwei Belege das groesste Ereignis des Schirms. */
.wand::after{content:"";flex:999999 0 0;height:0}

/* Name und Griff stehen **unter** dem Bild und nicht darauf. Eine Marke im
   Bild braucht eine Flaeche, um lesbar zu bleiben — und eine Flaeche ueber
   einer fremden Arbeit verdeckt genau das, was hier zu sehen sein soll. Unter
   dem Bild braucht sie keine: dort ist die Wand. Es ist derselbe Satz wie bei
   der Haengung des Hauses, die ihren Nachweis auch nicht ins Bild schreibt. */
.beleg-fuss{display:flex;align-items:center;gap:.8rem;
  margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--linie)}
.beleg-name{flex:1 1 auto;min-width:0;margin:0;
  font-size:var(--text-xs);line-height:1.3;color:var(--text-gedaempft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beleg-weg{flex:0 0 auto;
  min-width:4.4rem;min-height:4.4rem;margin:-1.2rem -1.2rem -1.2rem 0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:Delight,sans-serif;font-weight:900;font-size:var(--text-l);
  line-height:1;color:var(--text-gedaempft);
  transition:color var(--takt-hover) var(--kurve-hover)}
.beleg-weg:hover,.beleg-weg:active{color:var(--primary-hell)}

.belege-stand{margin:var(--takt-eng) 0 0;
  font-size:var(--text-s);line-height:1.5;color:var(--text-gedaempft)}
.belege-stand:empty{display:none}
.belege-stand[data-art=fehler]{color:var(--primary-hell)}


/* ---------- Wann? ----------
   Zwei Datumsfelder nebeneinander, weil sie eine Spanne sind und nicht zwei
   Angaben. Darunter, was bei uns schon steht. */
.spanne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--takt-eng) var(--takt-zeile)}

.umher{margin-top:var(--takt-block);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie)}
/* Die Programmzeilen kommen aus `eventzeile.php` und bringen die Grammatik der
   Programmliste mit — dieselbe Zeile, damit niemand zweimal lernen muss zu
   lesen. **Aber es ist eine Auskunft und keine Programmwand**, und sie steht
   in einer Spalte von 62 Zeichen statt auf der ganzen Wand. Der Satz ist
   derselbe wie bei den Belegen der bookingapp: die Zeile des Hauses mit ihren
   26 px Innenabstand und ihrem Titel in --h2 waere hier eine Rolltreppe — und
   »Performancebuehne« bricht in dieser Spalte strichlos mitten durch, weil ein
   Wort breiter wird als die Spalte, die es traegt.

   Zurueckgenommen wird der Massstab, nicht die Grammatik: dieselben Teile in
   derselben Reihenfolge, eine Stufe leiser. Die dritte Spalte faellt weg — sie
   traegt den Preis, den es hier nie gibt, und stuende als 15fr totes Land
   neben einem Titel, der schon zu wenig Platz hat. */
.umher-liste{border-top:1px solid var(--linie)}
.umher-liste .zeile{
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:var(--takt-zeile);
  padding-block:var(--takt-eng);
}
.umher-liste .zeile .wann{font-size:var(--text-m);line-height:1.35}
.umher-liste .zeile .titel{font-size:var(--text-l);line-height:1.3}
.umher-liste .zeile .meta,
.umher-liste .zeile .kat{font-size:var(--text-xs);line-height:1.5}
/* Das Plakat im Fluss der Zeile gehoert der Programmliste: dort ist es der
   Ersatz fuer die Vorschau am Zeiger. Hier ist der Abend eine Randbemerkung
   auf einem Formularschirm, und ein Ankuendigungsbild darin waere das
   groesste Ding auf der Seite. */
.umher-liste .zeile-plakat{display:none}
.umher-zeile[hidden]{display:none}

/* Leer ist hier tatsaechlich leer und nicht unbekannt: das Haus weiss, was in
   seinem eigenen Programm steht. Der Satz sagt deshalb, was er weiss. */
.leerer-umkreis{margin:0;max-width:52ch;
  font-size:var(--text-m);line-height:1.7;color:var(--text-still)}
.leerer-umkreis[hidden]{display:none}


/* ---------- Der Nutzungssatz ----------
   Er steht ueber dem Knopf, weil er die Bedingung des Knopfes ist. Solange der
   Verein ihn nicht geschrieben hat, steht hier, dass er fehlt: eine markierte
   Luecke ist ehrlicher als ein erfundener Satz darueber, was mit fremden
   Arbeiten geschieht. */
.nutzung{margin-top:var(--takt-block);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie);
  max-width:56ch;font-size:var(--text-s);line-height:1.6;color:var(--text-gedaempft)}
.nutzung p{margin:0}
/* Die Luecke traegt eckige Klammern, wie die How-to-Texte hinter der Theke:
   sie sagt in ihrer Form, dass hier noch niemand geschrieben hat. */
.nutzung-luecke{color:var(--text-still)}
.nutzung-luecke::before{content:"[ "}
.nutzung-luecke::after{content:" ]"}

.absenden{margin:var(--takt-block) 0 0}


/* ---------- Der Ticket-Knopf ----------
   Derselbe Knopf, der an der Veranstaltung steht: Titelweiss auf Tiefschwarz,
   im Druck Signalrot. fango.css bindet ihn dort an `.event-daten`; hier steht
   er mit denselben Werten, weil er dasselbe ist. Kein Radius ueber 2 px, kein
   Schatten. */
.stapel .ticket,
.quittung .ticket{display:inline-flex;align-items:center;justify-content:center;
  min-height:4.4rem;padding:.72rem 1.8rem;
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.02em;
  background:var(--titelfarbe);color:var(--dunkel);
  border:0;border-radius:2px;cursor:pointer;
  transition:background var(--takt-hover) var(--kurve-hover),
             color var(--takt-hover) var(--kurve-hover)}
/* Jede Hover-Regel hat ihre Schwester im Druck: fango.css nimmt das graue
   Rechteck des Browsers global weg, und diese Flaeche ist ausdruecklich fuer
   einen Daumen gebaut. */
.stapel .ticket:hover,
.stapel .ticket:active,
.quittung .ticket:hover,
.quittung .ticket:active{background:var(--primary);color:var(--titelfarbe)}
.stapel .ticket:focus-visible,
.quittung .ticket:focus-visible{outline-color:var(--dunkel);outline-offset:-4px}
/* `display:inline-flex` schlaegt `[hidden]` — ein Knopf, der auf dem letzten
   Schirm verschwinden soll, stuende sonst neben dem Absenden. */
.stapel .ticket[hidden]{display:none}
/* Ein gesperrter Knopf tritt zurueck, statt vom Browser ausgegraut zu werden —
   sonst entstuende ein Grauwert, den das System nicht kennt. */
.stapel .ticket[disabled],
.quittung .ticket[disabled]{
  background:var(--dunkel);color:var(--text-still);
  box-shadow:inset 0 0 0 1px var(--linie);cursor:default}
.stapel .ticket[disabled]:hover,
.quittung .ticket[disabled]:hover{background:var(--dunkel);color:var(--text-still)}

/* Zurueck ist kein Ticket. Es ist die stille Beschriftung des Systems und
   traegt trotzdem die volle Grifflaeche — was klein aussieht, muss nicht klein
   zu treffen sein. */
.zurueck-knopf{background:none;border:0;padding:0 1.2rem;margin-inline:-1.2rem;
  min-height:4.4rem;cursor:pointer;
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-gedaempft);
  transition:color var(--takt-hover) var(--kurve-hover)}
.zurueck-knopf:hover,.zurueck-knopf:active{color:var(--titelfarbe)}
.zurueck-knopf[hidden]{display:none}


/* ---------- Die Standlinie ----------
   Die eine Bewegung dieser Flaeche. Ist eine Frage beantwortet, zieht sich die
   Haarlinie am Fuss in 180 ms mit der Hauskurve weiter — kein Balken, kein
   Prozentwert, kein Kreisel. Dieselbe Bewegung wie der gesetzte Haken hinter
   der Theke, dieselbe Laenge, dieselbe Kurve.

   Sie zaehlt bis acht und wird auf dieser Flaeche nie voll: der achte Schirm
   ist der Link, und der liegt hinter dem Absenden. Voll steht sie auf der
   Quittung.

   Die Marke traegt eine Auskunft und steht deshalb in Titelweiss; das Band
   darunter trennt nur und bleibt die Haarlinie. */
.standlinie{margin-top:var(--takt-block);padding-top:var(--takt-zeile)}
.standlinie[hidden]{display:none}

/* Gezogen wird mit `scaleX` und nicht mit `width`: eine Breite in Bewegung
   laesst den Browser in jedem Bild neu setzen, und der Balken ist eine
   Flaeche ohne Inhalt — an ihr ist nichts zu verzerren. Aussehen und Dauer
   sind dieselben, die Arbeit dahinter ist keine. */
.standlinie-band{position:relative;height:1px;background:var(--linie);
  overflow:hidden}
.standlinie-marke{position:absolute;inset:0;
  background:var(--titelfarbe);
  transform-origin:left center;
  transform:scaleX(calc(var(--stand, 1) / var(--schirme, 8)));
  transition:transform var(--takt-hover) var(--kurve-hover)}

.standlinie-zeile{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--takt-eng) var(--takt-zeile);
  margin-top:var(--takt-zeile)}
.standlinie-zahl{margin:0;
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-still);
  font-variant-numeric:tabular-nums}
.standlinie-weg{display:flex;align-items:center;gap:var(--takt-zeile);
  margin-left:auto}


/* ---------- Der Schirmwechsel ----------
   Eine Bewegung auf einer Achse und kein Seitenwechsel: der alte Schirm
   schiebt in die Richtung des Weges hinaus, der neue herein. Waagerecht, weil
   ein Stapel eine Folge ist — der Jahressprung im Rueckblick ist senkrecht,
   weil eine Zeitachse senkrecht liegt.

   Die Dauer ist die des Filterwechsels und nicht die des wandernden Titels.
   Derselbe Grund: der Sprung auf eine Detailseite passiert einmal und darf
   sich Zeit nehmen; hier wird sieben Mal hintereinander geblaettert, und eine
   halbe Sekunde, die beim ersten Mal traegt, steht beim siebten im Weg.

   Ohne View Transitions — heute Firefox — wechselt der Schirm hart. Das
   Skript prueft das und arbeitet dann ohne Uebergang weiter. */
@media (prefers-reduced-motion:no-preference){
  /* Der Name steht nur waehrend des Wechsels da, und das ist keine
     Sparsamkeit, sondern Notwendigkeit: `view-transition-name` macht aus dem
     Element einen Stapelkontext, und ein dauerhaft benannter Schirm schloesse
     alles, was in ihm liegt, in eine eigene Lage ein. Dieselbe Bauart und
     dieselbe Begruendung wie beim Jahressprung im Rueckblick — und aus
     demselben Grund haengt das Attribut am `<html>` und nicht am Formular. */
  html[data-stapelwechsel] .schirme{view-transition-name:schirme}

  html[data-stapelwechsel]::view-transition-old(schirme),
  html[data-stapelwechsel]::view-transition-new(schirme){
    animation-duration:.2s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

  html[data-stapelwechsel=weiter]::view-transition-old(schirme){
    animation-name:schirm-links-raus}
  html[data-stapelwechsel=weiter]::view-transition-new(schirme){
    animation-name:schirm-links-rein}
  html[data-stapelwechsel=zurueck]::view-transition-old(schirme){
    animation-name:schirm-rechts-raus}
  html[data-stapelwechsel=zurueck]::view-transition-new(schirme){
    animation-name:schirm-rechts-rein}
}

@keyframes schirm-links-raus{to{transform:translateX(-6%);opacity:0}}
@keyframes schirm-links-rein{from{transform:translateX(6%);opacity:0}}
@keyframes schirm-rechts-raus{to{transform:translateX(6%);opacity:0}}
@keyframes schirm-rechts-rein{from{transform:translateX(-6%);opacity:0}}

/* Bei abgeschalteter Bewegung ist die Linie da, wo sie hingehoert, statt sich
   zu ziehen — und der Schirm steht da, statt zu laufen. */
@media (prefers-reduced-motion:reduce){
  .standlinie-marke{transition:none}
}


/* ---------- Die Quittung ----------
   Der achte Schirm. Kein »Danke, Ihre Bewerbung wurde uebermittelt«: die
   Adresse, gross, kopierbar, mit dem Satz, was ab jetzt dort steht.

   Dieselbe Standlinie wie am Formular, und hier steht sie voll. Es ist ein
   Instrument ueber zwei Flaechen — deshalb liegt es in diesem Blatt und nicht
   in zweien. */
.quittung{max-width:62ch;margin:var(--takt-block) auto var(--takt-fuss)}

.quittung-satz{margin:0 0 var(--takt-zeile);
  font-family:Delight,sans-serif;font-weight:900;
  font-size:var(--h1);line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;color:var(--titelfarbe);text-wrap:balance}
.quittung-dazu{margin:0 0 var(--takt-block);max-width:56ch;
  font-size:var(--text-m);line-height:1.7;color:var(--text-gedaempft)}

/* Die Adresse ist die Sache, um die es hier geht — sie steht deshalb gross,
   ganz, und in einer Schrift, in der sich Null und O unterscheiden lassen.
   Sie bricht an jeder Stelle um: eine Adresse, die aus dem Fenster laeuft,
   ist keine. */
.quittung-link{display:block;margin:0;padding-block:var(--takt-zeile);
  border-block:1px solid var(--linie);
  font-size:var(--text-l);line-height:1.4;color:var(--titelfarbe);
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
  text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--trennpunkt);
  transition:text-decoration-color var(--takt-hover) var(--kurve-hover)}
.quittung-link:hover{text-decoration-color:var(--titelfarbe)}

.quittung-meldung{margin:var(--takt-zeile) 0 0;
  font-size:var(--text-s);line-height:1.6;color:var(--text-gedaempft)}

.quittung-abschrift{margin-top:var(--takt-block);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie)}
.quittung-abschrift h2{margin:0 0 var(--takt-zeile);
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-still)}

/* Die eigene Bewerbung, wie sie abgeschickt wurde. Beschriftung links, Angabe
   rechts, Haarlinie dazwischen — die Grammatik der Termindaten. */
/* Die Gasse zwischen Beschriftung und Angabe ist der Takt der Zeile — ohne sie
   stossen »WER ODER WAS« und der Name aneinander, und die Beschriftung liest
   sich als Anfang der Angabe. */
.abschrift{margin:0;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  row-gap:0;column-gap:var(--takt-zeile)}
.abschrift>dt{padding-block:var(--takt-eng);border-top:1px solid var(--linie);
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-still)}
.abschrift>dd{margin:0;padding-block:var(--takt-eng);border-top:1px solid var(--linie);
  font-size:var(--text-m);line-height:1.6;color:var(--titelfarbe);
  overflow-wrap:anywhere}
.abschrift>dd p{margin:0 0 1em}
.abschrift>dd>:last-child{margin-bottom:0}
.abschrift a{text-decoration:underline;text-underline-offset:.2em}

.quittung-tuer{display:inline-block;margin-top:var(--takt-block);
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;
  text-decoration:underline;text-underline-offset:.3em}


/* ---------- Unter 900 px ----------
   Der Stapel ist von Haus aus mobil; was hier faellt, ist der Rand und nicht
   die Frage. Der Ueberstand der Artenleiste wird halbiert: --grid-gap faellt
   bis auf 16 px, und ein Ueberstand von ebenfalls 16 px setzte die umgekehrte
   Platte genau auf die Fensterkante. Auf dieser Flaeche beruehrt sonst nichts
   den Rand, also laese es sich als herausgerutscht und nicht als Markierung. */
@media (max-width:900px){
  .arten{margin-inline:-.8rem}
  .art{padding-inline:.8rem}
  .belege-tor{margin-inline:-.8rem;padding-inline:.8rem}
  .adresse{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"zahl name" ". url"}
  .adresse-zahl{grid-area:zahl}
  .adresse label:nth-of-type(1)+input{grid-area:name}
  .adresse label:nth-of-type(2)+input{grid-area:url}
  .abschrift{grid-template-columns:minmax(0,1fr)}
  .abschrift>dt{border-top:1px solid var(--linie);padding-bottom:0}
  .abschrift>dd{border-top:0;padding-top:.4rem}
}

@media (max-width:560px){
  .spanne{grid-template-columns:minmax(0,1fr)}
  .standlinie-weg{margin-left:0;width:100%;justify-content:space-between}
  .stapel .ticket{flex:1 1 auto}
}


/* ---------- Die Quittung, zweiter Teil ---------- */

.quittung-merken{margin:var(--takt-zeile) 0 0;max-width:52ch;
  font-size:var(--text-s);line-height:1.6;color:var(--text-gedaempft)}
.quittung-merken strong{font-weight:700;color:var(--titelfarbe)}

.quittung-griff{margin:var(--takt-zeile) 0 0}
.quittung-griff[hidden]{display:none}

/* Der Verlauf. Was das Haus geschrieben hat, steht in Titelweiss; was von
   aussen kam, steht gedaempft und eingerueckt — dieselbe Unterscheidung, die
   eine Zeile im Gespraech braucht, und keine zweite Farbe dafuer. */
.verlauf{margin-top:var(--takt-block);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie)}
.verlauf h2{margin:0 0 var(--takt-zeile);
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-still)}

.beitrag{margin:0}
.beitrag+.beitrag{margin-top:var(--takt-zeile);padding-top:var(--takt-zeile);
  border-top:1px solid var(--linie)}
/* Der eingerückte Beitrag braucht keine Linie über sich: sein senkrechter
   Strich trennt ihn schon, und eine waagerechte Kante über die ganze Spalte
   liefe an einem Kasten vorbei, der 26 px weiter innen anfängt. */
.beitrag--aussen{padding-left:var(--takt-zeile);
  border-left:1px solid var(--linie)}
.beitrag+.beitrag--aussen{border-top:0;padding-top:0;margin-top:var(--takt-zeile)}
.beitrag-wer{margin:0 0 .6rem;
  font-family:Delight,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:var(--text-s);letter-spacing:.05em;color:var(--text-still)}
.beitrag-punkt{color:var(--trennpunkt)}
.beitrag-text{margin:0;max-width:56ch;
  font-size:var(--text-m);line-height:1.7;color:var(--titelfarbe)}
.beitrag--aussen .beitrag-text{color:var(--text-gedaempft)}

.abschrift-adressen{list-style:none;margin:0;padding:0}
.abschrift-adressen li+li{margin-top:.6rem}

/* Die Belege an der Quittung haengen hoeher als am Formular: dort sind sie
   eine Auswahl, die noch bearbeitet wird, hier sind sie das Eingereichte. */
.wand--quittung{--reihe:clamp(14rem, 22vh, 24rem);margin-top:var(--takt-block)}

/* Voll heisst voll: die Marke steht ohne Uebergang am Ende, weil hier nichts
   weiterzieht — sie ist angekommen. */
.standlinie--voll{margin-top:var(--takt-block)}
.standlinie--voll .standlinie-marke{transition:none}
.standlinie--voll .quittung-tuer{margin-top:0;margin-left:auto}