/* =============================================================================
   SOCIAL CLUB · UPDATE 37 · Designregelwerk in Kraft setzen
   Stand: 05.09.2026

   WAS DIESE DATEI IST
   Eine reine Ergänzungsdatei. Sie ändert keine Bestandsdatei und keine Logik.
   Sie wird als LETZTE Stylesheet-Datei geladen, also nach styles.css und nach
   update.css, und bessert dort nach, wo die Seite gegen das Regelwerk in
   claude/designregelwerk-social-club.md verstößt.

   ABSCHALTEN
   Eine Zeile in der index.html auskommentieren, dann ist der Zustand vorher
   wieder da. Es geht nichts verloren.

   VIER BAUSTELLEN, GEMESSEN AM 05.09.2026
   1. Monospace: 113 Elemente. Regel erlaubt zwei pro Bildschirm.
   2. Kontrast: 76 Textstellen unter WCAG AA, schlimmster Wert 1,59.
   3. Klickflächen: 78 von 86 unter 44 Pixel.
   4. Fokus: eine einzige :focus-visible Regel im gesamten CSS.
   ========================================================================== */


/* ===========================================================================
   1. MONOSPACE ZURÜCKBAUEN
   ---------------------------------------------------------------------------
   Spline Sans Mono bleibt ausschließlich für Sektions-Label und für die
   Countdown-Ziffern, wo gleich breite Ziffern eine Funktion haben.
   Alles Lesbare geht auf Instrument Sans.
   Betrifft 95 der 113 gemessenen Elemente.
   ======================================================================== */

.t-date,
.t-date span,
.t-tags,
.mbtn,
.mbtn.tag,
.cd-lab,
.an-when,
#viewSwitch button,
[data-view-switch] button {
  font-family: "Instrument Sans", system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* ---------------------------------------------------------------------------
   1b. NEBENBEFUND VOM 05.09.2026: 49 ELEMENTE STANDEN IN ARIAL
   ---------------------------------------------------------------------------
   Ein Browser vererbt die Schrift NICHT in Formularelemente. Weil die Buttons
   "Flyer" und "Platz sichern" keine eigene Schriftangabe hatten, standen genau
   die 48 wichtigsten Buttons der Seite, nämlich alle Anmeldebuttons, in Arial
   statt in Instrument Sans. Dazu das Menüzeichen in der Kopfzeile.
   Das war vorher weder im Code noch mit bloßem Auge aufgefallen.
   ------------------------------------------------------------------------ */

button,
input,
select,
textarea { font-family: inherit; }

.chip,
.chip.alt {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 15px;
}


/* ===========================================================================
   2. LESBARKEIT: KEIN TEXT UNTER 14 PIXEL, KEIN KONTRAST UNTER 4,5
   ---------------------------------------------------------------------------
   Die Grautöne rgb(122,132,125) mit Kontrast 3,87 und rgb(154,163,157) mit
   Kontrast 2,59 werden durch --felt-soft ersetzt, Kontrast 8,32 auf Papier.
   ======================================================================== */

/* Datum in den Eventkarten, 20 Vorkommen, vorher 12px und Kontrast 3,87

   KORREKTUR VOM 07.09.2026: Hier stand ursprünglich ".t-date span" ohne
   Einschränkung. Die Badges "Angemeldet", "Mitglieder" und "Anmeldeschluss"
   sind aber ebenfalls span-Elemente innerhalb von .t-date. Sie haben dadurch
   die Schriftfarbe felt-soft bekommen, also dunkelgrüne Schrift auf
   dunkelgrünem Grund, Kontrast unter 1,5. Das :not(.t-badge) nimmt sie aus.
   Ihre Gestaltung steht in update-40-design.css. */

.t-date,
.t-date span:not(.t-badge) {
  font-size: 14px !important;
  color: var(--felt-soft) !important;
  font-weight: 600;
}

/* Merkmale der Eventkarten, 20 Vorkommen, vorher 10,5px und Kontrast 2,59 */
.t-tags {
  font-size: 14px !important;
  color: var(--felt-soft) !important;
  line-height: 1.5;
}

/* Hinweiszeile in den Karten, vorher Kontrast 3,87 */
.t-note {
  font-size: 14px !important;
  color: var(--felt-soft) !important;
}

/* Countdown-Beschriftung, vorher 10px und Kontrast 3,65.
   Die Ziffern darüber bleiben bewusst in Monospace. */
.cd-lab {
  font-size: 14px !important;
  color: var(--felt-soft) !important;
}

/* Sektions-Label. Sie dürfen Monospace und Versalien behalten,
   aber nicht unter 14 Pixel liegen. */
.eyebrow,
.next-label,
.m-cat,
.biz-badge,
.an-flag,
.an-m-t,
.rec-day,
.an-when {
  font-size: 14px !important;
}

/* Filterleiste */
.mbtn { font-size: 15px !important; }
.mbtn.tag {
  font-size: 15px !important;
  color: var(--felt-soft) !important;
}


/* ===========================================================================
   3. GOLD IST AUF HELLEM GRUND KEINE TEXTFARBE
   ---------------------------------------------------------------------------
   Gold auf Papier erreicht Kontrast 2,28, gold-soft nur 1,59.
   Der Button "Partner werden" in der Business-Sektion trägt diese Farbe als
   Inline-Angabe im HTML, deshalb hier mit !important, zusätzlich wird die
   Inline-Angabe in der index.html entfernt.
   Ghost-Buttons auf dunklem Grund bleiben unberührt.
   ======================================================================== */

#business .btn-ghost,
.biz .btn-ghost {
  color: var(--felt-soft) !important;
  border-color: var(--felt-soft) !important;
}

#business .btn-ghost:hover,
.biz .btn-ghost:hover {
  background: var(--felt-soft) !important;
  color: var(--paper) !important;
}


/* ===========================================================================
   4. KLICKFLÄCHEN AUF 44 PIXEL
   ---------------------------------------------------------------------------
   Vorgabe aus dem Regelwerk und aus WCAG 2.5.8. Gemessen waren 78 von 86
   Elementen zu klein. Links mitten im Fließtext sind ausgenommen, dafür gibt
   es in WCAG eine ausdrückliche Ausnahme.
   ======================================================================== */

.chip,
.chip.alt,
.mbtn,
.mbtn.tag,
#viewSwitch button,
[data-view-switch] button,
.nav-login {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Etwas mehr Luft, damit die größeren Flächen nicht aneinanderkleben.
   Regelwerk: mindestens 8 Pixel Abstand zwischen zwei Klickflächen. */
.chip,
.chip.alt { padding-left: 18px; padding-right: 18px; }
.mbtn,
.mbtn.tag { padding-left: 16px; padding-right: 16px; margin-bottom: 8px; }

/* Navigation oben und Links in der Fußzeile */
header nav a,
header .hwrap nav a,
footer .foot-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}


/* ===========================================================================
   5. FOKUS SICHTBAR MACHEN
   ---------------------------------------------------------------------------
   Vorher existierte im gesamten CSS genau eine :focus-visible Regel bei 957
   Regeln. Wer mit der Tastatur navigiert, sah praktisch nicht, wo er steht.
   Auf hellem Grund --felt-soft, auf dunklem Grund --gold-soft.
   ======================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--felt-soft);
  outline-offset: 2px;
  border-radius: 6px;
}

.hero a:focus-visible,
.hero button:focus-visible,
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
.share a:focus-visible,
.share button:focus-visible,
.an-card a:focus-visible,
.an-card button:focus-visible,
.rec-card a:focus-visible,
.rec-card button:focus-visible {
  outline-color: var(--gold-soft);
}


/* ===========================================================================
   6. ZUSTÄNDE, DIE VORHER GEFEHLT HABEN
   ---------------------------------------------------------------------------
   Ein Element ohne sichtbare Rückmeldung wirkt tot.
   ======================================================================== */

.chip,
.mbtn,
#viewSwitch button,
[data-view-switch] button {
  transition: background-color .18s ease-out, color .18s ease-out,
              border-color .18s ease-out, transform .18s ease-out;
}

.chip:hover,
.mbtn:hover { transform: translateY(-1px); }

.chip:active,
.mbtn:active { transform: translateY(0); }

/* Aktiver Filter muss deutlich zu erkennen sein, nicht nur an einer
   dünnen Linie. */
.mbtn[aria-pressed="true"],
.mbtn.is-active,
#viewSwitch button[aria-pressed="true"] {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .chip, .mbtn, #viewSwitch button, [data-view-switch] button {
    transition: none;
  }
  .chip:hover, .mbtn:hover { transform: none; }
}


/* ===========================================================================
   7. KLEINE OPTISCHE KORREKTUREN GEGEN DEN GENERIERTEN EINDRUCK
   ---------------------------------------------------------------------------
   Radien nach Bedeutung statt überall gleich. Vorher trug 999px allein
   72 Elemente, dadurch verliert die volle Rundung ihre Wirkung.
   ======================================================================== */

/* Karten bekommen die Kartenrundung, nicht die Buttonrundung */
.t-card,
.rec-card,
.an-card,
.voice { border-radius: 14px; }

/* Eingabefelder bekommen die kleinste Stufe */
input, select, textarea { border-radius: 8px; }