/* Die Selbstauskunft der Standbetreiber.
 *
 * Eine eigene, kleine Datei und nicht css/admin.css: das Portal ist ein
 * Arbeitswerkzeug für zwei bis drei geübte Leute an großen Bildschirmen, diese Seite
 * ist ein einmaliges Formular für 43 Menschen, die eine Mail auf dem Telefon öffnen.
 * Dieselben Farben (css/tokens.css), aber größere Flächen, mehr Luft und keine
 * Tabelle.
 *
 * Zuerst schmal gedacht: der Regelfall ist ein Telefon.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lf-beton);
  color: var(--lf-ink);
  font-family: var(--lf-font-text);
  font-size: 17px;
  line-height: 1.55;
  /* Kein automatisches Vergrößern beim Drehen des Telefons. */
  -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 20px 18px 64px;
}

.lade { color: var(--lf-ink-60); padding: 40px 0; text-align: center; }

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

.kopf { margin: 8px 0 24px; }
.kopf__fest {
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
}
.kopf__titel {
  font-family: var(--lf-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.1;
  margin: 6px 0 4px;
}
.kopf__nr { margin: 0; color: var(--lf-ink-60); font-size: 15px; }

/* ------------------------------------------------- Der Satz, der zählt */

/* Nicht als Randbemerkung, sondern als Kasten: „das erscheint nicht sofort" ist die
   eine Information, ohne die jemand am nächsten Tag anruft. */
.merke {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--lf-signal);
  background: #fff;
  border-radius: 0 var(--lf-r-s) var(--lf-r-s) 0;
  font-size: 16px;
}
.merke--offen { border-left-color: #C99A2E; }
.merke--gut { border-left-color: #3E8E5A; }

.nachtrag { color: var(--lf-ink-60); font-size: 15px; margin: 0 0 24px; }

/* ---------------------------------------------------------------- Blöcke */

.block {
  background: #fff;
  border: 1px solid #DCD6C6;
  border-radius: var(--lf-r-m);
  padding: 18px 16px 6px;
  margin: 0 0 18px;
}

/* Der interne Kasten. Gestrichelt und mit anderem Grund — nicht als Warnung, sondern
   als „andere Art von Feld". Wer hier eine Handynummer eintippt, soll am Rahmen
   sehen, dass sie im Haus bleibt. */
.block--intern {
  border-style: dashed;
  background: #FBF9F4;
}

.block__titel {
  font-family: var(--lf-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 15px;
  margin: 0 0 4px;
}
.block__hinweis {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--lf-ink-60);
}

/* ----------------------------------------------------------------- Felder */

.feld { margin: 0 0 18px; }
.feld__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
  margin-bottom: 6px;
}
.feld__hinweis { margin: -2px 0 8px; font-size: 14px; color: var(--lf-ink-60); }
.feld__fehler {
  margin: 6px 0 0;
  font-size: 15px;
  color: #B3261E;
}

.eingabe {
  width: 100%;
  border: 1px solid #DCD6C6;
  border-radius: var(--lf-r-s);
  background: #fff;
  color: var(--lf-ink);
  font: inherit;
  /* 17px, damit iOS beim Hineintippen nicht heranzoomt — unter 16px tut es das. */
  font-size: 17px;
  padding: 12px 14px;
  /* Große Tippflächen: der Regelfall ist ein Daumen. */
  min-height: 50px;
}
.eingabe--lang { min-height: 108px; resize: vertical; line-height: 1.5; }
.eingabe:focus {
  outline: 2px solid var(--lf-signal);
  outline-offset: 1px;
  border-color: var(--lf-signal);
}

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flaeche { margin: -6px 0 16px; font-size: 15px; color: var(--lf-ink-60); }

/* ------------------------------------------------------- Zugewiesener Platz

   Auskunft, kein Feld — deshalb kein Rahmen und keine Beschriftung wie bei den
   Eingaben. Die Koordinaten in der Ziffernschrift (tnum), damit die beiden Zahlen
   gleich breite Stellen haben und untereinander vergleichbar bleiben. */
.platz__wert {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
}
.platz__leer { margin: 0; font-size: 15px; color: var(--lf-ink-60); }

/* Ein Link, der wie ein Knopf aussieht: er verlässt die Seite, und das soll man
   sehen, bevor man darauf tippt. Mindestens 44 px hoch — dieselbe Grenze wie bei
   allen anderen Zielen auf dieser Seite, sie wird am Telefon mit dem Daumen
   getroffen. */
.platz__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--lf-beton-3);
  border-radius: var(--lf-r-s);
  background: #fff;
  color: var(--lf-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.platz__link:hover { background: var(--lf-beton); }
/* Steht UNTER dem Link: dass der Marker der eigene Platz ist und nicht irgendein
   Punkt in der Nähe, erfährt man am besten, kurz bevor man ihn antippt. */
.platz__hinweis { margin: 8px 0 0; font-size: 14px; color: var(--lf-ink-60); }

/* --------------------------------------------------------------- Auswahl */

/* ------------------------------------------------------ Programmpunkte

   Eine Zeile je Punkt: Anfang, Ende, Titel, Wegnehmen. Auf dem Telefon bricht der
   Titel unter die Zeiten — bei 390 px Breite wären vier Felder in einer Zeile je
   Feld gut 80 px, und darin steht kein Titel. */
.programm__zeile {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  grid-template-areas:
    'von bis nach weg'
    'titel titel titel titel';
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--lf-beton-2);
}
.programm__zeile:first-of-type { border-top: 0; padding-top: 4px; }
.programm__zeile > :nth-child(2) { grid-area: von; }
.programm__zeile > .programm__bis { grid-area: bis; }
.programm__zeile > :nth-child(5) { grid-area: nach; }
.programm__zeile > :nth-child(7) { grid-area: titel; }
.programm__zeile > .programm__weg { grid-area: weg; }

@media (min-width: 560px) {
  /* Ab dieser Breite passt alles in eine Zeile. Die Zeiten bleiben schmal, der
     Titel nimmt den Rest. */
  .programm__zeile {
    grid-template-columns: 92px auto 92px 1fr auto;
    grid-template-areas: 'von bis nach titel weg';
  }
}

.eingabe--zeit { text-align: center; font-variant-numeric: tabular-nums; }
.programm__bis { color: var(--lf-ink-60); text-align: center; }

.programm__weg {
  width: 40px;
  height: 40px;
  border: 1px solid #DCD6C6;
  border-radius: var(--lf-r-s);
  background: #fff;
  color: var(--lf-ink-60);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.programm__weg:hover { border-color: var(--lf-rot); color: var(--lf-rot); }

.programm__leer { margin: 0 0 12px; color: var(--lf-ink-60); font-size: 15px; }

.programm__mehr {
  border: 0;
  background: none;
  padding: 8px 0;
  font: inherit;
  font-weight: 600;
  color: var(--lf-signal-dark);
  cursor: pointer;
}
.programm__mehr:hover { color: var(--lf-signal); }

/* ------------------------------------------- Die Musikliste (gema/index.html)

   Dieselbe Stilvorlage wie die Selbstauskunft, weil es dieselbe Seite in einer
   zweiten Ausführung ist: gleiche Kästen, gleiche Felder, gleiche Schrift. Nur die
   ZEILE ist eine andere — zwei Textfelder statt zweier Zeiten und eines Titels.

   Der Papierkorb und der „+"-Knopf teilen ihre Regeln mit den Programmpunkten: es
   sind dieselben Bedienelemente, und zwei Sätze Regeln wären die Stelle, an der eines
   der beiden Formulare eines Tages anders bedient wird. */
.setliste__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'titel titel'
    'komponist weg';
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--lf-beton-2);
}
.setliste__zeile:first-of-type { border-top: 0; padding-top: 4px; }
/* Die Beschriftungen sind `sr-only` und damit aus dem Fluss — gezählt werden sie
   trotzdem, deshalb die Kinder 2, 4 und 5. Dasselbe Muster wie bei .programm__zeile. */
.setliste__zeile > :nth-child(2) { grid-area: titel; }
.setliste__zeile > :nth-child(4) { grid-area: komponist; }
.setliste__zeile > .setliste__weg { grid-area: weg; }

@media (min-width: 560px) {
  /* Ab dieser Breite passt die Zeile in eine Reihe. Der Titel bekommt mehr Platz als
     der Komponist: er ist länger, und er ist die Angabe, an der man das Stück
     wiedererkennt. */
  .setliste__zeile {
    grid-template-columns: 1.4fr 1fr auto;
    grid-template-areas: 'titel komponist weg';
  }
}

.setliste__weg {
  width: 40px;
  height: 40px;
  border: 1px solid #DCD6C6;
  border-radius: var(--lf-r-s);
  background: #fff;
  color: var(--lf-ink-60);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.setliste__weg:hover { border-color: var(--lf-rot); color: var(--lf-rot); }

.setliste__mehr {
  border: 0;
  background: none;
  padding: 8px 0;
  font: inherit;
  font-weight: 600;
  color: var(--lf-signal-dark);
  cursor: pointer;
}
.setliste__mehr:hover { color: var(--lf-signal); }

.knopfliste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.wahl {
  border: 1px solid #DCD6C6;
  background: #fff;
  color: var(--lf-ink);
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: var(--lf-r-s);
  cursor: pointer;
  /* Mindestens 44 px hoch: kleinere Ziele treffen Daumen nicht zuverlässig. */
  min-height: 44px;
}
.wahl:hover { border-color: var(--lf-ink-60); }
.wahl[aria-pressed='true'] {
  background: var(--lf-ink);
  border-color: var(--lf-ink);
  color: var(--lf-beton);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Senden */

.senden {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--lf-r-s);
  background: var(--lf-signal);
  color: #fff;
  font-family: var(--lf-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 17px;
  font-weight: 600;
  padding: 17px 20px;
  cursor: pointer;
  margin-top: 8px;
}
.senden:disabled { opacity: .5; cursor: not-allowed; }

/* Ein Name, der nicht in der Mitte auseinanderfallen soll. „Loopfest-Orga-Team"
   trägt zwei Bindestriche, und dort bricht der Browser bevorzugt um — auf einem
   schmalen Schirm stand sonst „LOOPFEST-ORGA-" über „TEAM SENDEN". */
.zusammen { white-space: nowrap; }

/* Der Datenschutzhinweis vor dem Formular. Dieselben Formen wie in den
   Rechtstexten der Besucher-App (js/legal-text.js erzeugt sie): Absätze und
   Zwischenüberschriften, sonst nichts. Etwas kleiner gesetzt als das Formular —
   es ist ein Text zum Lesen und kein Feld zum Ausfüllen. */
.legal { margin: 0 0 24px; }
.legal .prose { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.legal__head {
  font-family: var(--lf-font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
  margin: 22px 0 8px;
}
.senden--ruhig {
  background: #fff;
  color: var(--lf-ink);
  border: 1px solid #DCD6C6;
}

.warnung {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--lf-r-s);
  background: #FDECEA;
  border: 1px solid #F0C3BD;
  color: #8C1D18;
  font-size: 15px;
}

/* --------------------------------------------------------- Breitere Fenster */

@media (min-width: 34rem) {
  .wrap { padding: 32px 24px 80px; }
  .block { padding: 22px 22px 8px; }
  .senden { width: auto; min-width: 22rem; }
}

/* ------------------------------------------------------------- Die Umfrage

   Die dritte Seite auf dieser Stilvorlage (js/umfrage-seite.js). Sie erbt Kästen,
   Felder und Knöpfe von oben — hier steht nur, was es vorher nicht gab. */

/* Die sechs Notenknöpfe.

   QUADRATISCH und mit einer Mindestbreite, damit sie eine SKALA ergeben und keine
   Reihe verschieden breiter Kästchen: in ihnen steht eine einzelne Ziffer, und „1"
   ist schmaler als „4". Ohne feste Breite sähe die Skala aus wie ein Zufall.

   Tabellenziffern, aus demselben Grund — in manchen Schnitten der Commissioner ist
   die Eins schmal, und dann stünden die Ziffern nicht untereinander. */
.wahl--note {
  min-width: 52px;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}

/* Eine Pflichtfrage, die beim Absenden gefehlt hat.

   Der Balken links und nicht ein roter Rahmen um alles: eine Notenfrage besteht aus
   sechs Knöpfen, einem Label und einem Hinweis — ein Rahmen darum wäre ein Kasten im
   Kasten. Der Balken zeigt auf die Stelle, ohne die Form zu ändern.

   ERST NACH DEM ERSTEN ABSENDEVERSUCH (siehe `versucht` in js/umfrage-seite.js). Ein
   Formular, das beim Öffnen schon rot ist, sieht aus, als hätte man etwas falsch
   gemacht, bevor man angefangen hat. */
.feld--offen {
  border-left: 3px solid var(--lf-rot);
  padding-left: 12px;
  margin-left: -15px;
}

/* Der Zusatz „(Pflicht)" am Fragentext. Leiser als die Frage selbst: er ist eine
   Angabe über die Frage und nicht Teil von ihr. */
.pflicht {
  color: var(--lf-ink-60);
  font-weight: 400;
  font-size: 14px;
}

/* Die Frage einer Umfrage ist ein SATZ und keine Feldbeschriftung.

   `.feld__label` steht in Versalien, und dort, wo es herkommt, ist das richtig: über
   „Titel", „Komponist", „Telefonnummer" — ein, zwei Wörter, die den Block benennen.
   Eine Umfragefrage ist etwas anderes: „Wie zufrieden wart ihr mit der Vorbereitung
   und Information im Vorfeld, also Anmeldung, Unterlagen und Kommunikation?" sind
   drei Zeilen, und drei Zeilen Versalien liest man nicht, man entziffert sie.
   Versalien haben keine Ober- und Unterlängen, an denen das Auge ein Wort erkennt;
   bei einer Zeile fällt das nicht ins Gewicht, bei elf Fragen schon.

   Größer ist sie außerdem: sie IST der Inhalt der Seite und nicht die Aufschrift über
   dem Inhalt. Fett und dunkel bleibt sie, damit die Fragen sich beim Scrollen
   voneinander abheben. */
.feld__label--frage {
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--lf-ink);
  margin-bottom: 10px;
}

/* Ein Verweis MITTEN IM SATZ.

   Nicht `.platz__link` daneben: der ist ein Kasten für einen Verweis, der für sich
   allein steht (die Karte des Standplatzes). Mitten in einem Satz wirkt er wie eine
   Schaltfläche, die aus der Zeile fällt — genau so sah die Mailadresse auf der
   Dankeseite zuerst aus. Hier genügt eine Unterstreichung. */
.textlink {
  color: var(--lf-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.textlink:hover { color: var(--lf-signal-dark); }

/* DIE HONIGFALLE — ein Feld, das im Formular steht und das kein Mensch sieht.

   Ein Formularautomat füllt jedes Feld, das er findet; steht hier etwas drin, wirft
   die Route die Antwort weg (functions/api/umfrage.js).

   NICHT `display: none` UND NICHT `hidden`: beides erkennt ein halbwegs gebauter Bot
   und lässt das Feld dann in Ruhe. Aus dem Sichtfeld geschoben und auf null Höhe
   gebracht bleibt es für ihn ein ganz gewöhnliches Feld.

   `aria-hidden` und `tabindex="-1"` stehen im Markup: ein Mensch mit Screenreader
   oder Tastatur soll hier genauso wenig landen wie einer mit Maus. Eine Falle, in die
   nur Blinde tappen, wäre die schlechteste Art Schutz. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}