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