/* Nur was style.css der Vereinsseite nicht schon hat.

   Gestaltung, Farben, Schriften und die ganze Formularmaske kommen von dort
   (assets/css/style.css, unverändert übernommen). Hier stehen die drei
   Dinge, die es dort nicht gibt: die Belege mit Kamera und Vorschau, die
   Aufnahmen im Einzelblatt und die Angabenpaare. */

/* ------------------------------------------------- Belege mit Kamera */

.beleg {
  grid-column: 1 / -1;
  display: grid; gap: .6rem;
  padding: .9rem 1rem 1rem;
  background: var(--papier);
  border: 1px solid var(--linie); border-radius: 4px;
}
.beleg--fehlt { border-color: #f0b4b4; background: #fff0f0; }
.beleg__kopf { margin: 0; display: grid; gap: .2rem; }
.beleg__titel { font-size: .8125rem; font-weight: 600; color: var(--nacht); }
.beleg__titel abbr { color: var(--blau-text); text-decoration: none; margin-left: .15rem; }
.beleg__kopf small { font-size: .75rem; color: var(--nebel); }

.beleg__bild {
  display: grid; place-items: center;
  min-height: 8rem; padding: .5rem;
  background: var(--weiss);
  border: 1px dashed var(--linie); border-radius: 3px;
}
.beleg__bild img { max-height: 15rem; width: auto; border-radius: 2px; }
.beleg__leer { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nebel); }

.beleg__knoepfe { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* .knopf--rand ist auf der Vereinsseite fuer den dunklen Hero gemacht (weisse
   Schrift) — hier steht er auf hellem Grund, darum dieselbe Anpassung, die
   style.css fuer die internen Seiten schon kennt. */
.beleg .knopf--rand { color: var(--nacht); border-color: var(--linie); }
.beleg .knopf--rand:hover { border-color: var(--nacht); color: var(--nacht); }
.beleg .knopf--rand.knopf--rot { color: #7a1c1c; border-color: #e0b0b0; }
.beleg .knopf:hover { transform: none; }
.beleg__stand { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--nebel); }
.beleg--fehlt .beleg__stand { color: #7a1c1c; font-weight: 600; }

/* Mit Skript waehlt man ueber die zwei Knoepfe; ohne Skript bleibt das
   Dateifeld selbst stehen und sieht aus wie auf der Vereinsseite. */
.beleg--bereit .beleg__eingabe, .beleg__kamera { position: absolute; left: -9999px; width: 1px; height: 1px; }
.beleg__eingabe { padding: .45rem .5rem; font-size: .8125rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 3px; width: 100%; }
.beleg__eingabe::file-selector-button { font: inherit; font-weight: 600; margin-right: .7rem;
  padding: .35rem .7rem; border: 0; border-radius: 3px; background: var(--nacht); color: var(--weiss); cursor: pointer; }

/* --------------------------------------- Aufnahmen im Einzelblatt */

.aufnahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.aufnahme { margin: 0; }
.aufnahme img, .aufnahme__leer {
  width: 100%; height: 11rem; object-fit: cover;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
}
.aufnahme__leer { display: grid; place-items: center; border-style: dashed;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; color: var(--nebel); }
.aufnahme figcaption { margin-top: .4rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .04em; color: var(--nebel); }

/* ------------------------------------------- Angaben als Paare */

.paare { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.paar { min-width: 0; }
.paar dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nebel); }
.paar dd { margin: .15rem 0 0; overflow-wrap: break-word; }

/* Hilfsklassen, die style.css nicht hat */
[hidden] { display: none !important; }
.internkarte--weit { max-width: none; }

/* .sektion__titel hat auf der Vereinsseite keinen Abstand nach unten — dort
   steht er in .sektion__kopf mit eigener Linie. Als Karten-Überschrift
   braucht er einen. */
.internkarte > .sektion__titel { margin-bottom: .9rem; }

/* ------------------------------ Wahl der Adresse für Informationen */

/* Hinter jeder Wahl steht, welche Adresse gemeint ist — das Skript setzt sie
   ein, sobald sie oben erfasst ist. */
.wahl--quelle label { align-items: flex-start; }
.quelle__adresse {
  font-family: var(--mono); font-style: normal; font-size: .8125rem; color: var(--nebel);
  overflow-wrap: anywhere;
}

/* ------------------------------------- Felder einer Zeile ausrichten */

/* Zwei Felder stehen nebeneinander, ihre Beschriftungen sind verschieden
   lang: „E-Mail des Spielers / der Spielerin" bricht auf zwei Zeilen,
   „AHV-Nummer" nicht — dann sitzen die Eingabefelder auf verschiedener
   Höhe. Mit subgrid teilen beide Felder die Zeilen der Gruppe
   (Beschriftung · Eingabe · Hinweis), also liegen die Eingaben gleich hoch.
   Ohne subgrid bleibt es, wie es war. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .feldgruppe > .feld:not(.feld--breit) {
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: .35rem;
      align-content: start;
    }
  }
}

/* Der Hinweis der Elterngruppe, wenn der Kontakt fehlt. */
.feldgruppe__text--fehlt { color: #7a1c1c; font-weight: 600; }

/* ------------------------------------------- Kopfzeile am Handy */

/* Die Kopfzeile der internen Seiten setzt padding: .8rem 0 und hebt damit
   den Seitenrand von .wrap auf — Wappen und Titel kleben am Bildschirmrand.
   Hier bekommt sie denselben Rand wie alles andere. */
.internkopf__inner { padding-inline: var(--bund); }

/* „FC Diepoldsau-Schmitter" bricht am Handy neben dem Seitentitel auf zwei
   Zeilen. Der zweite Teil des Namens fällt dort weg — „FC Diepoldsau"
   erkennt jeder, und das Wappen steht ohnehin daneben. */
@media (max-width: 560px) {
  .marke__lang { display: none; }
  .marke__name { font-size: 1.15rem; }
  /* Der Seitentitel neben dem Wappen darf umbrechen, statt die Seite
     breiter zu machen, als das Handy ist. */
  .internkopf__inner { flex-wrap: wrap; row-gap: .1rem; }
  .internkopf__titel { overflow-wrap: anywhere; }
}

/* ------------------------------------------- Schritte nach der Anmeldung */

/* In der Liste: eine Zeile mit dem Stand der drei Schritte. */
.schritte { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .5rem 0 0; }
.schritt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 2px; border: 1px solid var(--linie); color: var(--nebel);
}
/* Grün heisst: entschieden, rot: da steht noch etwas an. „Nicht nötig" ist
   so gut wie erledigt — der gestrichelte Rand sagt nur, dass hier nichts
   getan werden musste. Die Farben sind dieselben wie bei den Meldungen. */
.schritt--getan, .schritt--nichtnoetig { border-color: #b7e2c0; background: #eefaf0; color: #1f5a2c; }
.schritt--nichtnoetig { border-style: dashed; }
.schritt--offen { border-color: #f0b4b4; background: #fff5f5; color: #7a1c1c; }

.schritt__wann {
  font-family: var(--mono); font-style: normal; font-size: .7rem;
  letter-spacing: .04em; color: var(--nebel); margin-left: .4rem;
}

/* Der Stand in der Liste: erledigt grün, offen wie gehabt. */
.internmarke--erledigt { background: #eefaf0; border: 1px solid #b7e2c0; color: #1f5a2c; }

/* Die zwei Häkchen eines freiwilligen Schrittes stehen als Paar zusammen. */
.schrittpaar { display: grid; gap: .3rem; padding: .35rem 0; }
.schritt__zusatz { font-style: normal; color: var(--nebel); font-size: .8125rem; }