/* ===========================================================================
   Modul Online-Meldungen — UEBERGABE.md, Abschnitt 19

   Zwei Welten in einer Datei, weil sie dasselbe Modul sind:

     `.melde-*`  Das **öffentliche Formular**. Es sieht niemand, der sich in
                 dieser Anwendung auskennt: ein Vereinsbetreuer, einmal im
                 Jahr, meist abends auf dem Sofa am Telefon. Deshalb luftig,
                 eine Spalte, große Felder, jede Beschriftung über dem Feld.
     `.om-*`     Der **Eingangskorb** der Turnierleitung. Er liegt im Reiter
                 des Turnierbetriebs und übernimmt dessen Dichte; hier stehen
                 nur die paar Ergänzungen, die es dort noch nicht gibt.

   Beide bekommen ihre Farben aus den Variablen in app.css und funktionieren
   damit in hell und dunkel, ohne dass hier ein einziger Farbwert steht.
   =========================================================================== */


/* --- 1  Die öffentliche Seite ---------------------------------------------
   Aufbau wie die Anmeldeseite (app.css, Abschnitt 4) — dieselbe Karte auf
   dunklem Grund, damit die Anwendung auch dem wiedererkennbar ist, der sonst
   nur diese eine Seite sieht. Nur breiter: Ein Meldeformular hat mehr Felder
   als eine Anmeldung, und auf dem Desktop stehen zwei nebeneinander.
   -------------------------------------------------------------------------- */

/* `.meldeseite`, `.meldekarte` und `.meldekopf` stehen in **app.css**
   (Abschnitt 4, bei der Anmeldekarte): Die Mitzählen-App unter `/z/<code>/`
   benutzt dieselbe Karte und lädt dieses Blatt hier nicht. */

/* Ein Block je Meldung. `fieldset` ist hier keine Förmlichkeit: Die Legende
   nennt „Meldung 2“, und Screenreader lesen sie zu jedem Feld darin mit —
   sonst hörte man achtmal hintereinander „Vorname“ ohne zu wissen, wessen. */
.melde-block {
  display: grid;
  gap: var(--s4);
  margin: 0 0 var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.melde-block > legend {
  padding: 0 var(--s2);
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.melde-paar { display: grid; gap: var(--s4); }

.melde-spieler {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.melde-spieler h3 {
  font-size: 0.92rem;
  font-weight: 700;
}

/* Der Haken „Ich suche noch einen Partner“. Die ganze Zeile ist Trefferfläche
   — auf einem Telefon trifft niemand zuverlässig ein 16-Pixel-Kästchen
   (ARCHITEKTUR.md, Abschnitt 1). */
.melde-kasten {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  cursor: pointer;
}

.melde-kasten:hover { background: var(--surface-2); }

.melde-kasten input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  cursor: pointer;
}

.melde-kasten span { display: grid; gap: 2px; font-size: 0.92rem; }
.melde-kasten small { color: var(--ink-3); font-size: 0.8rem; }

.melde-summe {
  display: grid;
  gap: 2px;
  padding: var(--s4);
  border-radius: var(--r2);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.melde-summe:empty { display: none; }
.melde-summe .zusatztext { color: inherit; opacity: 0.85; }

/* Die Bestätigung nach dem Absenden: je Meldung ein Block mit dem Link zum
   Zurücknehmen. Ohne Mailserver ist das der einzige Weg zurück — deshalb
   steht er groß und nicht als Fußnote. */
.melde-liste {
  display: grid;
  gap: var(--s4);
  margin: var(--s5) 0;
  padding: 0;
  list-style: none;
}

.melde-liste li {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
  font-size: 0.92rem;
}

.melde-liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--brand-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.melde-werte {
  display: grid;
  gap: var(--s4);
  margin: 0 0 var(--s5);
}

.melde-werte > div { display: grid; gap: 2px; }
.melde-werte dt { color: var(--ink-3); font-size: 0.78rem; font-weight: 650; }
.melde-werte dd { margin: 0; font-size: 0.98rem; }

@media (min-width: 600px) {
  .meldekarte { padding: var(--s7); }
  /* Erst hier zwei Spalten: Bei 360 px stünden „Vorname“ und „Nachname“
     nebeneinander in je 150 px — technisch möglich, zum Tippen unbrauchbar. */
  .melde-paar { grid-template-columns: 1fr 1fr; }
}


/* Der Zahlungsteil der Bestätigungsseite. Er steht über den Rücknahme-Links
   und ist deshalb hervorgehoben: Wer gerade abgeschickt hat, will als Nächstes
   bezahlen (UEBERGABE.md, Abschnitt 20.5). */
.melde-zahlung {
  display: grid;
  gap: var(--s4);
  margin: var(--s5) 0;
  padding: var(--s5);
  border: 1px solid var(--brand);
  border-radius: var(--r2);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.melde-zahlung h2 { font-size: 1.05rem; }
.melde-zahlung .zusatztext { color: inherit; opacity: 0.88; }
.melde-zahlung .melde-werte { margin: 0; }
.melde-zahlung dt { color: inherit; opacity: 0.75; }

/* Weiß und nicht die Kartenfarbe: Ein QR-Code auf getöntem Grund ist für
   manche Kamera Glückssache — und dieser hier soll beim ersten Versuch
   gelesen werden. */
.melde-qr {
  display: grid;
  justify-items: center;
  padding: var(--s4);
  border-radius: var(--r2);
  background: #fff;
}

.melde-qr .qr { width: min(240px, 100%); height: auto; }

/* Die IBAN wird abgelesen und verglichen — Ziffer für Ziffer. Dafür taugt nur
   eine Schrift mit gleich breiten Zeichen. */
.melde-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}


/* Die Spielersuche über einem Spieler (UEBERGABE.md, Abschnitt 35.4).
   Sie sitzt **über** den Namensfeldern, nicht daneben: Sie ist der Weg, den
   man zuerst versucht — die Felder darunter bleiben der Weg, der immer geht. */
.melde-suche {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: var(--s3);
  border-radius: var(--r2);
  background: var(--surface);
}

.melde-suche > label {
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 650;
}

.melde-treffer {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: var(--r1);
}

.melde-treffer[hidden] { display: none; }
.melde-treffer p { margin: 0; padding: var(--s2) var(--s3); }

/* Ein Treffer ist ein Knopf und keine Zeile in einer Liste: Er wird am Telefon
   mit dem Daumen getroffen (ARCHITEKTUR.md, Abschnitt 1). */
.melde-treffer-zeile {
  display: grid;
  gap: 1px;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.melde-treffer-zeile:hover,
.melde-treffer-zeile:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.melde-treffer-zeile small { color: var(--ink-3); font-size: 0.8rem; }


/* --- 2  Der Eingangskorb --------------------------------------------------
   Er sitzt im Reiterrahmen des Turnierbetriebs und benutzt dessen Tabelle
   (`.tb-tabelle`, die auf schmalen Geräten von selbst zu Karten wird). Hier
   steht nur, was dort fehlt.
   -------------------------------------------------------------------------- */

.om-link {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r2);
}

/* Der Meldelink ist lang. Er darf umbrechen — sonst schiebt er auf einem
   360-Pixel-Gerät die ganze Seite in die Breite, und das ist ausdrücklich
   verboten (ARCHITEKTUR.md, Abschnitt 1). */
.om-link code {
  display: block;
  padding: var(--s3);
  border-radius: var(--r1);
  background: var(--surface-2);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.om-qr {
  display: grid;
  justify-items: center;
  padding: var(--s4);
  border-radius: var(--r2);
  /* Weiß und nicht `--surface`: Ein QR-Code auf dunklem Grund ist von keiner
     Kamera zu lesen. Deshalb bleibt er auch im dunklen Farbschema hell — das
     ist keine Unachtsamkeit, sondern der Zweck. */
  background: #fff;
}

.om-qr .qr { width: min(200px, 100%); height: auto; }

/* Der Inhalt einer Tabellenzelle als ein Knoten: Wert und Unterzeilen rücken
   damit eng zusammen, statt im Zeilenabstand der Karte auseinanderzufallen.
   Am Turniertisch sind Mailadresse und Telefonnummer anwählbar — die Rückfrage
   am Vorabend ist der häufigste Grund, warum jemand diese Spalte ansieht. */
.om-zelle { display: grid; gap: 2px; }

.om-zelle a.zusatztext {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* Die Felder einer Zahlungsart. Umgeblendet wird über `hidden`, nicht über
   Neuzeichnen: Sonst verlöre man beim Umschalten, was man schon eingetragen
   hat. */
.om-zahlfelder { display: grid; gap: var(--s4); }
.om-zahlfelder[hidden] { display: none; }

/* Eine offene Erstattung. Sie ist eine Forderung an den Verein und darf
   deshalb nicht wie ein Zustand aussehen, den man übersieht. */
.om-erstattung {
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 650;
}

/* Die Zahl am Filterknopf. Etwas zurückgenommen, damit das Wort führt und die
   Zahl folgt — man sucht „Offen“ und liest dann, wie viele es sind. */
.om-zahl { opacity: 0.7; font-variant-numeric: tabular-nums; }

.om-filter {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Der Doppelmeldungshinweis. Er warnt, er sperrt nicht — deshalb die ruhige
   Farbe der Hinweise und nicht die der Gefahr. */
.om-doppelt {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 650;
}

/* Fremder Text, den ein Melder eingetippt hat: Er kann alles enthalten, auch
   ein Wort ohne Leerzeichen über die halbe Bildschirmbreite. */
.om-hinweistext {
  margin-top: var(--s2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* --- 3  Fingerbedienung ---------------------------------------------------
   Ein Tablet im Querformat ist breit *und* fingerbedient — die Höhe hängt
   deshalb am Zeigegerät und nicht an der Breite (wie in turnierbetrieb.css).
   `.tb-zeilenaktionen .knopf.klein` ist dort schon abgedeckt; hier kommen die
   kleinen Knöpfe dazu, die es dort noch nicht gab.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .om-filter .knopf,
  .om-link .knopf,
  .om-sammelaktionen .knopf { min-height: var(--touch); }
}

/* Die aufgeklappte Zeile unter einer Meldung (UEBERGABE.md, Abschnitt 39).

   Sie gehört sichtbar zu der Zeile darüber, deshalb kein eigener Kasten,
   sondern ein farbiger Rand links und ein abgesetzter Grund. Der Rand trägt
   die Hausfarbe und nicht die der Gefahr: Es wird hier nichts zerstört. */
.om-uebernahme-zeile > td {
  padding: 0;
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
}

.om-uebernahme {
  padding: var(--s4);
}

/* In der Kartenansicht ist jede Zeile eine eigene Karte. Diese hier soll an
   der Karte darüber kleben, statt als zweite danebenzustehen — sie ist kein
   eigener Eintrag, sondern das aufgeklappte Innere des vorigen. */
@media (max-width: 767px) {
  .om-uebernahme-zeile {
    margin-top: calc(var(--s3) * -1);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* Die Kartenansicht setzt sonst vor jede Zelle ihre Spaltenüberschrift.
     Hier gibt es keine — die Zelle ist ein Formular und keine Angabe. */
  .om-uebernahme-zeile > td::before { display: none; }
  .om-uebernahme-zeile > td { display: block; }
}