/* Grounder v2 - Formularseiten
   ---------------------------------------------------------------------------
   Gehoert zu eintragen.html und spiel-eintragen.html und laedt NACH
   styles-v2.css. Die Auszeichnung der beiden Seiten ist unveraendert aus der
   ersten Fassung uebernommen, damit eintragen.js und spiel-eintragen.js
   weiterlaufen. Hier bekommen die alten Klassennamen nur neue Werte.
   --------------------------------------------------------------------------- */

.form-page { padding-bottom: clamp(var(--s-9), 7vw, var(--s-11)); }

/* --------------------------------------------------------------------------
   Kopfband der Formularseite
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-9), 7vw, var(--s-11)) clamp(var(--s-8), 5vw, var(--s-9));
  margin-bottom: clamp(var(--s-8), 5vw, var(--s-10));
}
.band .stage { display: none; }
.band::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background: url('assets/brand/silhouetten-band.webp') repeat-x center top;
  background-size: auto 290px;
  opacity: 0.1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.band-text { position: relative; z-index: 1; }
.band-text h1 {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: var(--fs-held);
  font-weight: 800;
  line-height: 0.92;
  margin: 0;
  max-width: 15ch;
}
.band-text .lead { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Zahlenleiste
   -------------------------------------------------------------------------- */

.zaehler { margin-bottom: clamp(var(--s-8), 5vw, var(--s-9)); }
.zaehler-reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zaehler-reihe > div {
  padding: var(--s-6) var(--s-5);
  border-inline-start: 1px solid var(--linie);
}
.zaehler-reihe > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.zaehler-reihe b {
  display: block;
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
}
.zaehler-reihe small {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--tinte-2);
}
@media (max-width: 760px) {
  .zaehler-reihe { grid-template-columns: repeat(2, 1fr); }
  .zaehler-reihe > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .zaehler-reihe > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */

.entry { max-width: 720px; }

/* Honigtopf: vor Menschen versteckt, Ausfuellroboter tippen hinein. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fstep {
  padding-block: clamp(var(--s-7), 4vw, var(--s-8));
  border-top: 1px solid var(--linie);
}
.fstep:first-of-type { border-top: 0; padding-top: 0; }
.fstep-last { border-top: 1px solid var(--linie); }

.fstep-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.fstep-no {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--rasen);
  line-height: 1;
}
.fstep-head h2 {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 0.95;
  margin: 0;
}

.field { margin-bottom: var(--s-6); }
.field > label, .field > .label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  font-variation-settings: 'wdth' 96, 'wght' 650;
}
.req {
  margin-inline-start: var(--s-2);
  font-size: var(--fs-mini);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  color: var(--rasen);
}
.req.opt { color: var(--tinte-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--linie-hi);
  border-radius: var(--r);
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--tinte-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rasen);
  box-shadow: 0 0 0 3px var(--rasen-hauch, rgba(22, 120, 58, 0.14));
}

.fhint, .fnote {
  margin-top: var(--s-2);
  font-size: var(--fs-mini);
  color: var(--tinte-2);
  max-width: 60ch;
}
.fnote { margin-top: var(--s-5); }
.map-box + .fnote { margin-bottom: var(--s-6); }
.ferr {
  margin-top: var(--s-2);
  font-size: var(--fs-mini);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  color: #B3261E;
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; gap: 0; } }

/* Auswahlkarten */
.pick { display: grid; gap: var(--s-3); }
.pick-card {
  display: block;
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--linie-hi);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.pick-card:hover { border-color: var(--tinte-3); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card:has(input:checked) {
  border-color: var(--rasen);
  background: var(--rasen-hauch, rgba(22, 120, 58, 0.07));
}
.pick-card:has(input:focus-visible) { outline: 2px solid var(--rasen); outline-offset: 2px; }
.pick-title {
  display: block;
  font-variation-settings: 'wdth' 94, 'wght' 700;
}
.pick-sub { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--tinte-2); }

/* Merkmal-Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--linie-hi);
  border-radius: var(--r);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  border-color: var(--rasen);
  background: var(--rasen);
  color: var(--auf-rasen);
}

/* Kartenausschnitt und Adressvorschlaege */
.map-box {
  height: 300px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}
.map-box #map { height: 100%; width: 100%; }
.ac {
  margin-top: var(--s-2);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--papier);
  box-shadow: 0 12px 28px -18px rgba(14, 18, 16, 0.5);
}
.ac > * {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-top: 1px solid var(--linie);
  background: none;
  text-align: start;
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}
.ac > *:first-child { border-top: 0; }
.ac > *:hover { background: var(--papier-2); }

/* Fotos */
.drop {
  display: block;
  margin-top: var(--s-4);
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--linie-hi);
  border-radius: var(--r);
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.drop:hover { border-color: var(--rasen); background: var(--papier-2); }
.drop-title { display: block; font-variation-settings: 'wdth' 94, 'wght' 700; }
.drop-sub { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--tinte-2); }
.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.thumbs img, .thumbs > * > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
}

/* Gewaehltes Spiel, Paarung, Wappen */
.gewaehlt {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rasen);
  border-radius: var(--r);
  background: var(--rasen-hauch, rgba(22, 120, 58, 0.07));
}
.gewaehlt-name { display: block; font-variation-settings: 'wdth' 94, 'wght' 700; }
.gewaehlt-zusatz { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--tinte-2); }

.paarung { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--s-4); }
.paarung-gegen {
  align-self: center;
  padding-top: var(--s-6);
  font-variation-settings: 'wdth' 90, 'wght' 700;
  color: var(--tinte-3);
}
@media (max-width: 560px) {
  .paarung { grid-template-columns: 1fr; }
  .paarung-gegen { padding-top: 0; }
}

.wappen { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.wappen-bild { width: 34px; height: 34px; object-fit: contain; }
.wappen-text { font-size: var(--fs-small); color: var(--tinte-2); }

.ergebnis { display: flex; align-items: center; gap: var(--s-3); }
.ergebnis input { text-align: center; max-width: 88px; }
.ergebnis-doppelpunkt {
  font-family: 'Big Shoulders Display', 'Archivo', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--tinte-3);
}

/* Knoepfe der ersten Fassung auf die Knopfform der zweiten bringen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-size: var(--fs-small);
  font-variation-settings: 'wdth' 96, 'wght' 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--rasen); color: var(--auf-rasen); border-color: var(--rasen); }
.btn-primary:hover { background: var(--rasen-tief); border-color: var(--rasen-tief); }
.btn-ghost { background: transparent; color: var(--tinte); border-color: var(--linie-hi); }
.btn-ghost:hover { border-color: var(--tinte); background: var(--papier-2); }
.btn-sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--fs-mini); }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.actions-left { justify-content: flex-start; }

.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--tinte-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linklike:hover { color: var(--tinte); }

/* Danke-Bildschirm */
.done {
  max-width: 620px;
  padding: clamp(var(--s-7), 5vw, var(--s-9));
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier-2);
}
.done h2 {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 0.95;
  margin: 0 0 var(--s-4);
}
.done p { color: var(--tinte-2); }
.done .actions { margin-top: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .btn, input, select, textarea, .pick-card, .chip, .drop { transition: none; }
  .btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Vereinsbereich: Anmeldung und Zugangsantrag. Das Portal dahinter haengt an
   verein.css und bleibt unberuehrt.
   -------------------------------------------------------------------------- */

.dash { padding-block: clamp(var(--s-9), 7vw, var(--s-11)); }

.tor {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.tor h1, .tor h2 {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 800;
  line-height: 0.92;
  margin: 0 0 var(--s-4);
}
.tor h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); }
.tor h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); }
.tor > p { color: var(--tinte-2); margin-bottom: var(--s-6); }
.tor .field { margin-bottom: var(--s-5); }
.tor .fnote { margin-top: var(--s-4); }

.tor-antrag {
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--linie);
}
.tor.tor-antrag h2 {
  font-family: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.92;
  color: var(--tinte);
  margin: 0 0 var(--s-4);
}
.tor.tor-antrag > p { color: var(--tinte-2); }
.is-zu { display: none; }

/* Kategorie-Felder: `.two` setzt display:grid und schlaegt sonst das hidden-Attribut. */
[data-for][hidden] { display: none !important; }

/* Getraenkeliste der Bar: Name, Preis, Entfernen. */
.getraenke { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.getraenke:empty { display: none; }
.getraenke li { display: grid; grid-template-columns: 1fr 7.5rem auto; gap: var(--s-2); align-items: center; }
.getraenke .thumb-x { position: static; }

/* Mannschaften des Vereins: Name, Liga, Spielort, Entfernen. */
.mannschaften { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; gap: var(--s-2); }
.mannschaften:empty { display: none; }
.mannschaften li { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--s-2); align-items: center; }
.mannschaften .thumb-x { position: static; }
@media (min-width: 641px) { .mannschaften.zwei li { grid-template-columns: 1fr 1fr auto; } }
@media (max-width: 640px) {
  .mannschaften li { grid-template-columns: 1fr auto; padding-bottom: var(--s-3); border-bottom: 1px solid var(--linie); }
  .mannschaften li > input { grid-column: 1; }
  .mannschaften li > .thumb-x { grid-column: 2; grid-row: 1; }
}

/* Logo-Vorschau: ein Wappen, kein Fotoraster. */
.logo-vorschau { position: relative; display: inline-grid; place-items: center; width: 160px; height: 160px; margin-top: var(--s-4); border: 1px solid var(--linie); border-radius: var(--r); background: var(--papier-2); }
.logo-vorschau img { max-width: 128px; max-height: 128px; object-fit: contain; }
.logo-vorschau[hidden] { display: none; }