/* =============================================================================
   SOCIAL CLUB · UPDATE 40 · Badges und Ghost-Buttons
   Stand: 07.09.2026

   WAS DIESE DATEI IST
   Eine reine Ergänzungsdatei, wie update-37-design.css. Sie ändert keine
   Bestandsdatei und keine Logik. Sie wird als LETZTE Stylesheet-Datei geladen,
   also nach update-37-design.css, und behebt zwei Fehler, die du an den
   Bildschirmausschnitten erkannt hast, plus einen dritten, der dabei auffiel.

   ABSCHALTEN
   Eine Zeile in der index.html auskommentieren.

   DIE DREI BAUSTELLEN

   1. Die Badges "Angemeldet" und "Mitglieder" sahen falsch aus.
      Ursache: .t-badge in styles.css hat font-size 10px und
      letter-spacing .16em, aber KEINE eigene Schriftangabe. Dadurch erbt es
      die Schrift des Elternelements .t-date, und das ist Spline Sans Mono.
      Die Badges standen also in Monospace, gesperrt, in 10 Pixel. Genau das
      Muster, das Update 37 überall sonst entfernt hat.

   2. Die Buttons "Weitere Fragen", "Zum Eventkalender", "Häufige Fragen" und
      "Was drin ist" waren praktisch unsichtbar.
      Ursache: .btn-ghost setzt color auf --cream. Auf dunklem Grund ergibt das
      Kontrast 13,31 und ist richtig. Auf hellem Grund ergibt Creme auf Papier
      Kontrast 1,04, also nahezu unsichtbar. Der Button war nie für helle
      Flächen gebaut, wird dort aber verwendet.

   3. Das Badge "Anmeldeschluss" erreicht Kontrast 2,24.
      Creme auf dem Grauton 9AA39D. Ebenfalls zu blass zum Lesen.
   ========================================================================== */


/* ===========================================================================
   1. BADGES AUF DEN EVENTKARTEN
   ---------------------------------------------------------------------------
   Instrument Sans statt geerbter Monospace, 14 statt 10 Pixel, keine
   Sperrung, mehr Innenabstand, damit die Pille zur größeren Schrift passt.
   ======================================================================== */

/* WICHTIG, EIGENER FEHLER AUS UPDATE 37:
   In update-37-design.css steht die Regel
       .t-date, .t-date span { color: var(--felt-soft) !important; }
   Sie war für das Datum gedacht. Die Badges sind aber ebenfalls span-Elemente
   innerhalb von .t-date, also hat die Regel auch ihre Schriftfarbe auf
   felt-soft gezogen. Dunkelgrüne Schrift auf dunkelgrünem Grund, Kontrast
   unter 1,5. Das ist der Grund, warum "Angemeldet" und "Mitglieder" seit
   Update 37 schlecht lesbar waren. Hier wird es zurückgeholt. */

/* Die Selektoren sind bewusst mit .t-date davor geschrieben. Nur so schlagen
   sie die Regel aus Update 37, die dieselbe Stärke, aber eine Klasse weniger
   hat. Ohne das bleibt die Schriftfarbe felt-soft und der Fehler bestehen. */

.t-badge,
.t-date .t-badge,
.t-date span.t-badge {
  font-family: "Instrument Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--cream) !important;
  font-weight: 600;
  padding: 5px 13px;
  line-height: 1.3;
}

.t-date .t-badge.mine,
.t-date span.t-badge.mine { color: #EAFFF3 !important; }

/* Geprüfte Kontraste der Badge-Varianten, Schrift ist überall --cream:
   Standard auf --felt  10,29   ·  today auf --red  5,07
   members auf 7A1F2B    8,81   ·  mine (EAFFF3 auf 1F6B48)  6,17
   Alle über der Anforderung von 4,5. Nur "closed" lag bei 2,24. */

.t-badge.closed {
  background: #4C554F !important;   /* vorher 9AA39D, Kontrast 2,24 → jetzt 6,67 */
}

.t-badge.pending {
  background: #8F5220 !important;   /* vorher B0692C, Kontrast 3,70 → jetzt 5,34 */
}


/* ===========================================================================
   2. GHOST-BUTTONS, DIE SICH IHREM UNTERGRUND ANPASSEN
   ---------------------------------------------------------------------------
   Statt für jede Sektion eine eigene Regel zu schreiben, bekommt der Button
   eine Farbvariable. Sie steht standardmäßig auf der dunklen Schriftfarbe,
   weil die meisten Flächen hell sind, und wird in den dunklen Bereichen auf
   Creme umgestellt. Neue Sektionen erben damit automatisch das Richtige.

   Das !important ist nötig, weil einige dieser Buttons ihre Farbe als
   style-Angabe direkt im HTML tragen.
   ======================================================================== */

:root {
  --ghost-fg: var(--felt-soft);   /* auf hellem Grund: Kontrast 8,32 */
  --ghost-hover-fg: var(--paper);
}

.hero,
header,
footer,
.share,
.an-card,
.rec-card,
.t-band,
.ov,
.overlay,
[id$="Overlay"],
[class*="overlay"],
[class*="modal"] {
  --ghost-fg: var(--cream);       /* auf dunklem Grund: Kontrast 13,31 */
  --ghost-hover-fg: var(--felt-deep);
}

.btn-ghost {
  color: var(--ghost-fg) !important;
  border-color: var(--ghost-fg) !important;
  background: transparent !important;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--ghost-fg) !important;
  color: var(--ghost-hover-fg) !important;
}

/* Zweite Sicherung, gesetzt von update-40-design.js.
   Die Klassenliste oben kann eine dunkle Fläche nur erkennen, wenn ihre
   Klasse dort steht. Auf business.html heißt der dunkle Kopfbereich zum
   Beispiel .bh-hero und nicht .hero, deshalb hätte die Liste ihn verfehlt.
   Das Skript misst stattdessen die tatsächliche Helligkeit der Fläche hinter
   dem Button und setzt data-grund. Damit ist der Fall für jede künftige
   Sektion abgedeckt, ohne dass hier eine Klasse nachgetragen werden muss. */

.btn-ghost[data-grund="dunkel"] {
  color: var(--cream) !important;
  border-color: var(--cream) !important;
}

.btn-ghost[data-grund="dunkel"]:hover,
.btn-ghost[data-grund="dunkel"]:focus-visible {
  background: var(--cream) !important;
  color: var(--felt-deep) !important;
}

.btn-ghost[data-grund="hell"] {
  color: var(--felt-soft) !important;
  border-color: var(--felt-soft) !important;
}

.btn-ghost[data-grund="hell"]:hover,
.btn-ghost[data-grund="hell"]:focus-visible {
  background: var(--felt-soft) !important;
  color: var(--paper) !important;
}


/* ===========================================================================
   3. KLEINE NACHZIEHER AUS DEM REGELWERK
   ---------------------------------------------------------------------------
   Diese Werte standen in styles.css noch unter der Mindestgröße von 14 Pixel.
   ======================================================================== */

.t-meta     { font-size: 14px; }   /* vorher 13,5 */
.t-count    { font-size: 14px; }   /* vorher 13   */
.t-deadline { font-size: 14px; }   /* vorher 12,5 */


/* ===========================================================================
   4. DER EVENTTITEL DARF DAS RASTER BRECHEN
   ---------------------------------------------------------------------------
   Regelwerk, Abschnitt 4: In jeder Kartenliste bricht mindestens ein Element
   bewusst das Raster. Die erste Karte, also das nächste anstehende Event,
   bekommt einen etwas größeren Titel und eine deutlichere Kante. Das kostet
   nichts und nimmt der Liste den generierten Eindruck.
   ======================================================================== */

.t-card:first-child .t-title { font-size: 24px; }
.t-card:first-child { box-shadow: 0 2px 14px rgba(20, 32, 26, .10); }