/* ============================================================
   Modus-Auswahl (modus.html)
   ============================================================
   Nur von modus.html geladen. Die Kacheln sind absichtlich groesser
   und farbiger als der Rest der Vereinsseiten: Max wollte, "dass das
   auch mehr aussieht wie ein Game". Der Kontrast zur sachlichen
   Termin- und Regelseite ist der Punkt, nicht ein Ausrutscher.
   ============================================================ */

.modus-liste {
  display: grid;
  gap: 14px;
  margin: 22px 0 8px;
}

.modus-kachel {
  display: block;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

.modus-kachel:hover,
.modus-kachel:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Die hervorgehobene Kachel ist die einzige dunkle Flaeche der Seite.
   Genau eine - zwei Hervorhebungen sind keine. */
.modus-kachel.hervorgehoben {
  background: linear-gradient(135deg, var(--marke) 0%, var(--marke-dunkel) 100%);
  border-color: var(--marke-dunkel);
  color: #fff;
}

.modus-kachel.gesperrt {
  opacity: .92;
  border-style: dashed;
  box-shadow: none;
}

/* Ein Modus, der noch keinen Inhalt hat, darf nicht wie ein spielbarer
   aussehen (Usability-Test Runde 2 und 3: beide Personen landeten in
   "Entscheiden" und standen vor einer leeren Seite). Die Kachel spricht
   deshalb dieselbe Sprache wie die gesperrten Punkte der Kopfleiste
   (.nav-deaktiviert in stil/kopf-fuss.css): graue Flaeche, gestrichelter
   Rand, cursor: not-allowed - und ein Wort statt eines Schlosses.
   Unterschied zu .gesperrt: dort fehlt dem Nutzer noch ein Schritt, hier
   fehlt uns noch der Inhalt. */
.modus-kachel.modus-vorbereitung {
  background: #f3f4f6;
  border-style: dashed;
  box-shadow: none;
  color: #4b5563;
  cursor: not-allowed;
}

/* Ohne diese Regel hebt sich auch die tote Kachel beim Zeigen an und
   verspricht damit genau die Bedienbarkeit, die sie nicht hat. */
.modus-kachel.modus-vorbereitung:hover,
.modus-kachel.modus-vorbereitung:focus-visible {
  transform: none;
  box-shadow: none;
}

.modus-pille.vorbereitung { background: var(--karte-gelb-hell); color: #8b5e00; }

.modus-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.modus-name {
  font-family: var(--font-titel);
  font-size: 1.15rem;
  font-weight: 700;
}

.modus-pille {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--marke);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.hervorgehoben .modus-pille {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.modus-pille.erledigt { background: var(--green-light); color: var(--green-dark); }
.modus-pille.neu      { background: var(--blau-hell);   color: var(--blau); }
.modus-pille.serie    { background: var(--karte-gelb-hell); color: #854d0e; }

.hervorgehoben .modus-pille.erledigt,
.hervorgehoben .modus-pille.neu,
.hervorgehoben .modus-pille.serie {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.modus-text {
  margin: 0;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--muted);
}

.hervorgehoben .modus-text { color: rgba(255, 255, 255, .82); }

.modus-balken {
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--marke-lighter);
  overflow: hidden;
}

.hervorgehoben .modus-balken { background: rgba(255, 255, 255, .2); }

.modus-balken > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width .3s ease;
}

.hervorgehoben .modus-balken > span { background: #fff; }

.modus-fuss {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--muted);
}

.hervorgehoben .modus-fuss { color: rgba(255, 255, 255, .75); }

/* Die Handlungszeile am Fuss einer Start-Kachel (Usability-Test Runde 3).
   Sie ist kein eigener Knopf, sondern die sichtbare Zusage der Kachel: ein
   Tipp startet die Runde. Deshalb liegt sie INNERHALB des Kachel-Links -
   ein <button> in einem <a> waere ungueltiges HTML und haette zwei
   konkurrierende Ziele auf derselben Flaeche erzeugt.
   44 px Mindesthoehe, damit sie auch als Ziel taugt, wenn jemand genau sie
   antippt statt die Kachel (WCAG 2.5.5). */
.modus-aktion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--marke);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}

/* Auf der hervorgehobenen (dunklen) Kachel dreht sich das Verhaeltnis um -
   sonst verschwindet der anthrazitfarbene Knopf im anthrazitfarbenen Grund. */
.hervorgehoben .modus-aktion {
  background: #fff;
  color: var(--marke-dunkel);
}

/* Die gesperrte Ueben-Kachel startet nichts und darf deshalb auch nicht so
   aussehen: Umriss statt Flaeche. Der Unterschied liegt nicht in der Farbe
   allein - die Kachel traegt zusaetzlich den gestrichelten Rand und die
   Pille "Noch gesperrt". */
.gesperrt .modus-aktion {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
}

.modus-anmelden {
  margin-top: 14px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--marke);
  color: #fff;
  font-family: var(--font-text);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.modus-anmelden:hover { background: var(--marke-dunkel); }

.modus-nachsatz {
  margin-top: 18px;
  font-size: .85rem;
  color: var(--muted);
}

/* Ohne diese Regel greift der Browser-Standard: blau und unterstrichen.
   Auf keiner anderen Vereinsseite sieht ein Link so aus. */
.modus-nachsatz a {
  color: var(--marke);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.modus-nachsatz a:hover { border-bottom-color: var(--marke); }

/* Ab Tablet nebeneinander. Auf dem Handy bleibt es eine Spalte - Max:
   "Das ist handy." */
@media (min-width: 720px) {
  .modus-liste { grid-template-columns: 1fr 1fr; }
  .modus-kachel { display: flex; flex-direction: column; }
  .modus-text { flex: 1; }
}