/* ============================================================================
   SOCIAL CLUB · update-43.css
   ----------------------------------------------------------------------------
   Update 43 · Fassung 43.0 vom 26.09.2026
   Wird als LETZTE Stildatei geladen. Ändert keine Bestandsdatei.

   1. KOPFZEILE AM HANDY
      Ursache des Fehlers: Update 37 hat allen Menüpunkten oben eine
      Klickfläche von 44 Pixeln gegeben und dafür "display:inline-flex"
      gesetzt. Diese Regel ist spezifischer als die alte Regel, die am Handy
      die Desktop-Menüpunkte ausblendet. Folge: Auf jedem Handy standen alle
      Menüpunkte nebeneinander, die Seite war 618 Pixel breit, "Mitglied
      werden", "Login" und das Menü lagen außerhalb des Bildschirms.
      Neu am Handy: Logo, "Mitglied werden", "Login", Menü. Immer sichtbar,
      ohne Wischen, auch bei 320 Pixeln.

   2. "NUR FÜR MITGLIEDER" (Hinweis auf exklusive Events)
   3. MITGLIEDSAUSWEIS im Profil
   4. "CODE VERGESSEN" im Anmeldefenster
   5. ZUSTELLFENSTER für Zugangscodes (ergänzt update-42)

   Nur Tokens aus styles.css. Radien 999 / 14 / 8. Klickflächen 44 Pixel.
   ========================================================================== */


/* ===========================================================================
   1) KOPFZEILE
   ======================================================================== */

@media (max-width: 820px) {
  header .hwrap { padding: 10px 14px; gap: 10px; }
  header .hwrap nav { display: flex; align-items: center; gap: 8px; flex: none; }

  /* Die Desktop-Menüpunkte wandern ins Menü. "!important", weil Update 37
     genau diese Regel mit höherer Spezifität überschrieben hat. */
  header nav a.desk:not(.nav-cta) { display: none !important; }

  /* "Mitglied werden" bleibt als goldener Knopf sichtbar */
  header nav a.nav-cta {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-height: 44px; margin: 0 !important; padding: 0 16px;
    background: var(--gold); color: var(--felt-deep) !important;
    border-radius: 999px; font-size: 15px; font-weight: 700; opacity: 1;
    white-space: nowrap; text-decoration: none;
  }
  header nav a.nav-cta:hover { background: var(--gold-soft); color: var(--felt-deep) !important; }

  header nav a.nav-login { margin: 0 !important; padding: 0 14px; font-size: 15px; opacity: 1; }
  header nav a.nav-login.nav-me { padding: 0; }

  header #burgerBtn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; margin: 0 !important; padding: 0;
    border-radius: 8px; font-size: 20px; line-height: 1;
  }
  header .brand { min-width: 0; flex: 1 1 auto; }
  header .brand-sub { display: none; }
}

/* Schmale Handys: nur das Logo, damit die drei Knöpfe Platz haben */
@media (max-width: 480px) {
  header .brand > div:not(.brand-mark) { display: none; }
  header .brand-mark { width: 40px; height: 40px; flex: none; }
}
@media (max-width: 359px) {
  header .hwrap { padding: 8px 10px; gap: 6px; }
  header .hwrap nav { gap: 6px; }
  header nav a.nav-cta { padding: 0 12px; font-size: 14px; }
  header nav a.nav-login { padding: 0 11px; font-size: 14px; }
}

/* Angemeldet: "Mitglied werden" ist sinnlos, dafür darf der Name wieder hin */
body.sc43-angemeldet header nav a.nav-cta { display: none !important; }
@media (max-width: 480px) {
  body.sc43-angemeldet header .brand > div:not(.brand-mark) { display: block; }
}

/* Das Klappmenü am Handy ebenfalls mit 44-Pixel-Zeilen */
#mobileMenu a { min-height: 44px; display: flex; align-items: center; }

/* Unterseiten (Events, Fragen, Über uns, Mitglied werden): Login-Knopf */
.sp-head .sp-nav a.sp-login {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(227, 197, 95, .55); color: var(--cream);
  font-size: 15px; font-weight: 600; opacity: 1; text-decoration: none; white-space: nowrap;
}
.sp-head .sp-nav a.sp-login:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
@media (max-width: 480px) {
  .sp-head .sp-brand > span:last-child { display: none; }
  .sp-head .sp-nav { gap: 8px; }
  .sp-head .sp-nav a.sp-cta-btn { padding: 0 14px; min-height: 44px; font-size: 15px; }
}
@media (max-width: 359px) {
  .sp-head-in { padding: 8px 10px; gap: 6px; }
  .sp-head .sp-nav { gap: 6px; }
  .sp-head .sp-nav a.sp-cta-btn { padding: 0 12px; font-size: 14px; }
  .sp-head .sp-nav a.sp-login { padding: 0 11px; font-size: 14px; }
}


/* ===========================================================================
   2) NUR FÜR MITGLIEDER
   ======================================================================== */

.sc43-ex { padding: 28px 20px 4px; }
.sc43-ex-karte {
  max-width: 1100px; margin: 0 auto;
  background: var(--felt-deep); color: var(--cream);
  border: 1px solid rgba(227, 197, 95, .38); border-radius: 14px;
  padding: 26px 26px 24px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px;
  box-shadow: 0 18px 50px rgba(12, 28, 20, .22);
}
.sc43-ex-flag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--felt-deep);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700;
}
.sc43-ex-flag svg { width: 16px; height: 16px; }
.sc43-ex h2 {
  font-family: 'Bricolage Grotesque', Georgia, serif; font-weight: 800; line-height: 1.1;
  font-size: clamp(24px, 4.2vw, 34px); color: var(--cream); margin: 14px 0 0; max-width: 20ch;
}
.sc43-ex-text { font-size: 17px; line-height: 1.6; color: var(--cream-dim); margin: 12px 0 0; max-width: 60ch; }
.sc43-ex-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sc43-ex-knoepfe a, .sc43-ex-knoepfe button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer;
  text-decoration: none; font-family: inherit; transition: background 160ms ease-out, color 160ms ease-out;
}
.sc43-ex-haupt { background: var(--gold); color: var(--felt-deep); border: 0; }
.sc43-ex-haupt:hover { background: var(--gold-soft); }
.sc43-ex-zweit { background: transparent; color: var(--cream); border: 1px solid rgba(227, 197, 95, .6); }
.sc43-ex-zweit:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.sc43-ex-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.sc43-ex-termin {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
.sc43-ex-datum {
  text-align: center; border-right: 1px solid rgba(255, 255, 255, .12); padding-right: 10px;
  font-size: 14px; line-height: 1.2; color: var(--cream-dim);
}
.sc43-ex-datum b { display: block; font-family: 'Bricolage Grotesque', Georgia, serif; font-size: 22px; color: var(--gold-soft); }
.sc43-ex-titel { font-size: 16px; font-weight: 600; color: var(--cream); line-height: 1.35; overflow-wrap: anywhere; }
.sc43-ex-datum span { display: block; }
.sc43-ex-info { font-size: 14px; line-height: 1.45; color: var(--cream-dim); margin-top: 3px; }
.sc43-ex-wdh { font-size: 14px; color: var(--gold-soft); margin-top: 4px; }
/* Überraschungszeile bricht bewusst das Raster: gestrichelt, Gold als Akzent */
.sc43-ex-geheim { background: transparent; border: 1px dashed rgba(227, 197, 95, .55); }
.sc43-ex-geheim .sc43-ex-titel { color: var(--gold-soft); }
.sc43-ex-mehr { font-size: 14px; color: var(--cream-dim); margin: 2px 2px 0; }
.sc43-ex-hinweis { font-size: 14px; color: var(--cream-dim); margin: 14px 0 0; }
.sc43-ex a:focus-visible, .sc43-ex button:focus-visible {
  outline: 2px solid var(--gold-soft); outline-offset: 2px;
}
@media (max-width: 820px) {
  .sc43-ex-karte { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
}
@media (max-width: 560px) {
  .sc43-ex { padding: 20px 14px 4px; }
  .sc43-ex-knoepfe a, .sc43-ex-knoepfe button { width: 100%; }
}

/* Die Variante im Mitgliederbereich, heller und kleiner */
.sc43-mv { background: var(--paper); border: 1px solid var(--cream-dim); border-radius: 14px; padding: 18px 18px 16px; margin: 14px 0; }
.sc43-mv h2 { font-family: 'Bricolage Grotesque', Georgia, serif; font-size: 20px; margin: 0 0 4px; color: var(--ink); }
.sc43-mv p { font-size: 15px; line-height: 1.55; color: var(--felt-soft); margin: 0 0 10px; }
.sc43-mv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc43-mv li button {
  width: 100%; min-height: 44px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 10px;
  align-items: center; text-align: left; background: var(--cream); border: 1px solid var(--cream-dim);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.sc43-mv li button:hover { border-color: var(--felt-soft); }
.sc43-mv li button:focus-visible { outline: 2px solid var(--felt-soft); outline-offset: 2px; }
.sc43-mv .d { font-size: 14px; color: var(--felt-soft); font-weight: 600; }
.sc43-mv .t { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.sc43-mv .g { grid-column: 2; font-size: 14px; color: var(--felt-soft); line-height: 1.45; }
.sc43-mv .sc43-mv-fuss { font-size: 14px; color: var(--felt-soft); margin: 10px 0 0; }
.sc43-mv .sc43-mv-fuss a { color: var(--felt-deep); font-weight: 600; }


/* ===========================================================================
   3) MITGLIEDSAUSWEIS
   ======================================================================== */

.sc43-ausweis {
  position: relative; overflow: hidden; margin: 16px 0 6px;
  background: var(--felt-deep); color: var(--cream);
  border: 1px solid rgba(227, 197, 95, .45); border-radius: 14px;
  padding: 18px 18px 16px; max-width: 460px;
  box-shadow: 0 14px 34px rgba(12, 28, 20, .22);
}
.sc43-ausweis::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px;
  border-radius: 999px; border: 18px solid rgba(227, 197, 95, .10); pointer-events: none;
}
.sc43-aw-kopf { display: flex; align-items: center; gap: 10px; }
.sc43-aw-kopf img { width: 36px; height: 36px; border-radius: 999px; }
.sc43-aw-kopf b { display: block; font-size: 15px; letter-spacing: .08em; }
.sc43-aw-kopf small { display: block; font-size: 14px; color: var(--gold-soft); }
.sc43-aw-mitte { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.sc43-aw-bild {
  width: 72px; height: 72px; flex: none; border-radius: 14px; overflow: hidden;
  background: var(--felt-soft); display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', Georgia, serif; font-size: 26px; font-weight: 800; color: var(--gold-soft);
  border: 2px solid rgba(227, 197, 95, .55);
}
.sc43-aw-bild img { width: 100%; height: 100%; object-fit: cover; }
.sc43-aw-name { font-family: 'Bricolage Grotesque', Georgia, serif; font-size: 22px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.sc43-aw-nr { font-size: 14px; color: var(--cream-dim); margin-top: 4px; }
.sc43-aw-nr span { font-family: 'Spline Sans Mono', ui-monospace, monospace; color: var(--gold-soft); letter-spacing: .06em; }
.sc43-aw-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sc43-aw-wert { background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 8px 10px; }
.sc43-aw-wert small { display: block; font-size: 14px; color: var(--cream-dim); }
.sc43-aw-wert b { display: block; font-size: 17px; color: var(--cream); margin-top: 2px; }
.sc43-aw-fuss { font-size: 14px; color: var(--cream-dim); margin-top: 12px; }
.sc43-aw-id { font-family: 'Spline Sans Mono', ui-monospace, monospace; color: var(--gold-soft); }
.sc43-aw-kopie { min-height: 44px; padding: 0 14px; margin-left: 4px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--cream); border: 1px solid rgba(227, 197, 95, .6); font-family: inherit; font-size: 14px; }
.sc43-aw-kopie:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }


/* ===========================================================================
   4) CODE VERGESSEN
   ======================================================================== */

.sc43-vergessen { margin-top: 14px; border-top: 1px solid var(--cream-dim); padding-top: 12px; }
.sc43-vergessen > button.sc43-link {
  background: none; border: 0; padding: 0 2px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--felt-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.sc43-vergessen > button.sc43-link:focus-visible { outline: 2px solid var(--felt-soft); outline-offset: 2px; border-radius: 8px; }
.sc43-vg-box { margin-top: 6px; }
.sc43-vg-box p { font-size: 15px; line-height: 1.55; color: var(--felt-soft); margin: 0 0 10px; }
.sc43-vg-box input {
  width: 100%; min-height: 44px; border: 1.5px solid var(--cream-dim); border-radius: 8px;
  padding: 0 14px; font-size: 16px; font-family: inherit; background: #fff; color: var(--ink); margin-bottom: 8px;
}
.sc43-vg-box input:focus-visible { outline: 2px solid var(--felt-soft); outline-offset: 1px; }
.sc43-vg-msg { display: none; margin-top: 10px; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.5; }
.sc43-vg-msg.ok { display: block; background: var(--cream); border-left: 4px solid var(--felt-soft); color: var(--ink); }
.sc43-vg-msg.schlecht { display: block; background: var(--cream); border-left: 4px solid var(--red); color: var(--ink); }


/* ===========================================================================
   5) ZUSTELLFENSTER (ergänzt das Fenster aus update-42)
   ======================================================================== */

.sc43-wege { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.sc43-wege a {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; border-radius: 999px; border: 2px solid var(--felt-soft);
  color: var(--felt-soft); font-size: 16px; font-weight: 600; text-decoration: none;
}
.sc43-wege a:hover { background: var(--cream); }
.sc43-wege a:focus-visible { outline: 2px solid var(--felt-soft); outline-offset: 2px; }
.sc43-wege-titel { font-size: 15px; font-weight: 600; color: var(--ink); margin: 6px 0 6px; }

/* Kurzmeldung unten, z. B. wenn eine Nachricht nicht zugestellt wurde */
.sc43-meldung {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 12002; max-width: 560px; margin: 0 auto;
  background: var(--felt-deep); color: var(--cream); border-radius: 14px; padding: 14px 16px;
  font-size: 15px; line-height: 1.5; box-shadow: 0 12px 32px rgba(18, 41, 31, .34);
}
.sc43-meldung.schlecht { border-left: 4px solid var(--red); }
.sc43-meldung button {
  margin-top: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--gold-soft); border: 2px solid var(--gold-soft);
  font-family: inherit; font-size: 15px; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sc43-ex-knoepfe a, .sc43-ex-knoepfe button { transition: none; }
}