/*
 * File: theme.css
 * Munich Musicians DB - Skin-/Token-Layer (Re-Skin 2026-08-28)
 *
 * DIE EINZIGE Datei, in der Farbwerte definiert werden. Alle anderen
 * Stylesheets (assets/css/*, booking-manager/assets/css/*, competition/*,
 * request-manager/*, ticketing/payments-Templates) referenzieren ab jetzt nur
 * noch die var(--mmdb-*)-Tokens von hier.
 *
 * Wird als ERSTE Datei geladen (Handle 'imm-theme'); base.css & Co. haengen
 * per Dependency daran. Deshalb gewinnen modul-spezifische Regeln weiterhin
 * gegen die Grundregeln hier - genau so ist es gewollt.
 *
 * Skin: warmes Dunkel als Seiten-Grund (aus dem MMDB-Logo abgeleitet), weisse
 * Inhalts-Karten darauf, blauer Akzent, Bernstein fuer Labels/Highlights.
 * Schrift: Oswald (Ueberschriften, Versalien) + Barlow (Flieszttext).
 *
 * WICHTIG: Reines Re-Skin. Keine Klassen-/ID-Umbenennung (das JS selektiert
 * darauf), keine Layout-Logik, keine Funktionsaenderung.
 */

/* ============================================================
   1. SCHRIFTEN - selbst gehostet (DSGVO: kein Google-Fonts-CDN)
   ============================================================ */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oswald-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oswald-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
  /* --- Flaechen --- */
  --mmdb-bg:            #221f1d;  /* Seitengrund, warmes Fast-Schwarz */
  --mmdb-bg-deep:       #1a1715;  /* Hero-Verlauf, Footer */
  --mmdb-panel:         #2e2a26;  /* dunkles Panel (Filter, Sidebar, Summary) */
  --mmdb-panel-soft:    #35302b;  /* dunkles Panel, eine Stufe heller */
  --mmdb-card:          #ffffff;  /* Inhalts-Karte auf dem dunklen Grund */
  --mmdb-card-sub:      #f6f7f8;  /* Kartenkopf-Streifen, Tabellenkopf */
  --mmdb-card-sub-warm: #f8f7f5;  /* eingelassener Formularkasten in der Karte */
  --mmdb-card-hover:    #f7f4f0;  /* Zeilen-Hover in Tabellen/Listen */

  /* --- Text --- */
  --mmdb-text:          #e8eaed;  /* auf Dunkel */
  --mmdb-text-muted:    #b6bec6;  /* auf Dunkel, sekundaer */
  --mmdb-text-dim:      #a49b90;  /* auf Dunkel, Labels (warm) */
  --mmdb-text-faint:    #8b8578;  /* auf Dunkel, Platzhalter */
  --mmdb-text-soft:     #c4ccd4;  /* auf Dunkel, Filter-/Formularbeschriftung */
  --mmdb-ink:           #14171a;  /* auf Weiss */
  --mmdb-ink-soft:      #3c4247;  /* auf Weiss, Flieszttext */
  --mmdb-ink-muted:     #6b7379;  /* auf Weiss, sekundaer */
  --mmdb-ink-faint:     #79828a;  /* auf Weiss, Platzhalter + Kleinlabels (>=4:1) */

  /* --- Akzente --- */
  --mmdb-accent:        #3d92d1;  /* Akzent: Linien, Unterstriche, Fokusring, Icons */
  /* Fuellung UNTER weisser Schrift. Gleicher Farbton und dieselbe Saettigung wie
     --mmdb-accent, nur 9% dunkler: Weiss auf #3d92d1 ergibt 3.37:1 und ist fuer
     Knopfbeschriftungen zu wenig (AA verlangt 4.5:1) - #2b7bb7 erreicht 4.55:1.
     Bewusste, minimale Abweichung vom Handoff; im Blindvergleich nicht zu
     unterscheiden, aber lesbar. Ueberall sonst bleibt --mmdb-accent unveraendert. */
  --mmdb-accent-fill:   #2b7bb7;
  --mmdb-accent-deep:   #22648f;  /* Verlaufsende, Abschnitts-Ueberschriften */
  --mmdb-accent-dark:   #1b4f71;  /* Hover-Ende dunkler Verlauf */
  --mmdb-accent-link:   #6fb6e8;  /* Links auf Dunkel */
  --mmdb-accent-hover:  #a8d5f5;  /* Link-Hover auf Dunkel */
  --mmdb-accent-soft:   #e8f2fb;  /* Akzentflaeche auf Weiss */
  --mmdb-warm:          #d99b4e;  /* Logo-Bernstein, Eyebrow-Labels */
  --mmdb-warm-light:    #e8b978;  /* Highlight auf Dunkel, Sterne, Timer */
  --mmdb-warm-deep:     #8a5a16;  /* Bernstein-Text auf Weiss */
  --mmdb-warm-fill-dark: rgba(217,155,78,.18); /* aktive Bernstein-Pille auf Dunkel */
  --mmdb-warn-line-dark: rgba(217,155,78,.32); /* Rahmen des Bernstein-Kastens auf Dunkel */

  /* --- Status (Chips, Badges, Meldungen) --- */
  --mmdb-ok:      #1c7a4a;  --mmdb-ok-bg:      #e4f5ec;  --mmdb-ok-line:     #b9e3cd;
  --mmdb-warn:    #8a4b12;  --mmdb-warn-bg:    #fbeedd;  --mmdb-warn-line:   #eed3ae;
  --mmdb-info:    #22648f;  --mmdb-info-bg:    #e8f2fb;  --mmdb-info-line:   #c2ddf2;
  --mmdb-neutral: #5f676e;  --mmdb-neutral-bg: #f2f3f4;  --mmdb-neutral-line:#dfe2e5;
  --mmdb-danger:  #d63638;  --mmdb-danger-bg:  #fff0f0;  --mmdb-danger-line: #f0c4c4;
  --mmdb-danger-deep: #a13b3b; /* ruhige Variante in Listenzeilen */
  /* Gefahr auf DUNKLEM Grund: #d63638 hat auf --mmdb-panel nur 3.0:1 - das
     helle Rot der Skin-Vorlage kommt auf 6.4:1. */
  /* Erfolg auf DUNKLEM Grund: #1c7a4a kommt auf --mmdb-panel nur auf 2.2:1;
     der helle Ton der Skin-Vorlage (Prototyp "Revenue share") auf 8.9:1. */
  --mmdb-ok-on-dark:          #8ddcae;
  --mmdb-danger-on-dark:      #e0a0a0;
  --mmdb-danger-on-dark-bg:   rgba(224,160,160,.12);
  --mmdb-danger-line-dark:    rgba(224,160,160,.5);

  /* --- Marken (Wortmarken-Lockups, z.B. Zahlungsprovider-Karte) ---
     Offizielle Markenfarben - bewusst KEINE Skin-Toene: die Wortmarke soll
     aussehen wie die Marke, nicht wie der Skin. Nur fuer Logos verwenden. */
  --mmdb-brand-stripe:       #635bff;  /* Stripe "Blurple" */
  --mmdb-brand-paypal-navy:  #003087;  /* PayPal "Pay" */
  --mmdb-brand-paypal-blue:  #009cde;  /* PayPal "Pal" */

  /* --- Linien --- */
  --mmdb-line-dark:  rgba(255,255,255,.09);  /* Trenner auf Dunkel */
  --mmdb-line-dark2: rgba(255,255,255,.16);  /* Button-Rahmen auf Dunkel */
  --mmdb-line-dark3: rgba(255,255,255,.28);  /* Kontrollrahmen auf Dunkel */
  --mmdb-fill-dark:  rgba(255,255,255,.07);  /* inaktive Pille auf Dunkel */
  --mmdb-fill-dark2: rgba(255,255,255,.12);  /* Hover auf Dunkel */
  --mmdb-line:       #e6e8ea;                /* Trenner auf Weiss */
  --mmdb-line-soft:  #eff1f2;                /* Tabellen-Zeilentrenner */
  --mmdb-line-input: #d8dce0;                /* Eingabe-Rahmen auf Weiss */

  /* --- Schatten --- */
  --mmdb-shadow-card:  0 1px 2px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.18);
  --mmdb-shadow-pop:   0 10px 40px rgba(0,0,0,.45);
  --mmdb-shadow-ctl:   0 1px 2px rgba(0,0,0,.06);
  --mmdb-focus-ring:   0 0 0 3px rgba(61,146,209,.22);

  /* --- Form --- */
  --mmdb-r-card: 12px;
  --mmdb-r-ctl:  8px;
  --mmdb-r-ctl-sm: 7px;   /* Zeilen-Knoepfe, Pager-Tasten */
  --mmdb-r-chip: 6px;
  --mmdb-r-photo: 14px;   /* Profilfoto im Detail-Hero (Prototyp) */
  --mmdb-r-pill: 999px;

  /* --- Typografie --- */
  --mmdb-font-head: 'Oswald', system-ui, sans-serif;
  --mmdb-font-body: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Raster --- */
  --mmdb-maxw: 1180px;
}

/* ============================================================
   3. SEITEN-SHELL
   Body-Klasse wird gesetzt, sobald Plugin-Inhalt auf der Seite ist
   (munich-musicians-db.php::skin_body_class). Das Theme selbst bleibt
   unangetastet - wir neutralisieren nur seine hellen Flaechen.
   ============================================================ */
body.mmdb-skin {
  background-color: var(--mmdb-bg) !important;
  color: var(--mmdb-text);
  font-family: var(--mmdb-font-body);
}
body.mmdb-skin .wp-site-blocks,
body.mmdb-skin .wp-block-post-content,
body.mmdb-skin .wp-block-group,
body.mmdb-skin .entry-content,
body.mmdb-skin .site-content,
body.mmdb-skin #content,
body.mmdb-skin main,
body.mmdb-skin article {
  background-color: transparent;
}
/* Der Gast-Hinweis (imm-guest-account) toente den Grund frueher warm-hell.
   Auf dem dunklen Skin bleibt der Hinweis als warmer Stich erhalten. */
body.mmdb-skin.imm-guest-account { background-color: #2a231b !important; }

/* Fliesztext im Plugin-Inhalt.
   WICHTIG - die Standardfarbe hier ist DUNKEL, nicht hell: praktisch der
   gesamte Inhalt steht in weissen Karten, und eine geerbte helle Farbe waere
   dort unsichtbar. Alles, was BEWUSST auf dem dunklen Grund liegt (Hero,
   Laschenleiste, dunkles Panel, Pagination, .mmdb-on-dark), setzt seine helle
   Farbe explizit. */
body.mmdb-skin .imm-wrap {
  color: var(--mmdb-ink-soft);
  max-width: var(--mmdb-maxw);
  font-size: 16px;
  line-height: 1.55;
}
/* Links im Inhalt. Die :not()-Kette ist KEIN Schmuck: ohne sie schlaegt diese
   Regel (0,2,1) jede Button-Klasse (0,1,0) und faerbt den Text gefuellter
   Knopf-Links dunkelblau - genau so ist "ANZEIGEN" auf dem Profil unlesbar
   geworden. Knopf-Links holen ihre Farbe aus der Button-Ebene (Abschnitt 5.1). */
body.mmdb-skin .imm-wrap a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn) { color: var(--mmdb-accent-deep); }
body.mmdb-skin .imm-wrap a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn):hover { color: var(--mmdb-accent); }

/* Direkt auf dem dunklen Grund: helle Schrift, helle Links. */
body.mmdb-skin .mmdb-on-dark,
body.mmdb-skin .mmdb-hero,
body.mmdb-skin .mmdb-panel,
body.mmdb-skin .mmdb-tabstrip,
body.mmdb-skin .mmdb-pagination,
body.mmdb-skin .imm-wrap > .pub-toggle-group {
  color: var(--mmdb-text);
}
/* WICHTIG - dieselbe :not()-Kette wie die generische Link-Regel oben, sonst
   verliert sie: die Kette zaehlt fuenf Klassen mit, die generische Regel kommt
   damit auf (0,7,2). Die frueheren zwei :not() ergaben nur (0,4,2) - Links auf
   dunklem Grund waeren dunkelblau geblieben (2.79:1 im Begruessungsfeld der
   Anmeldeseite, 2026-08-29). */
body.mmdb-skin .mmdb-on-dark a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn),
body.mmdb-skin .mmdb-hero a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn),
body.mmdb-skin .mmdb-panel a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn) { color: var(--mmdb-accent-link); }
body.mmdb-skin .mmdb-on-dark a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn):hover,
body.mmdb-skin .mmdb-hero a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn):hover,
body.mmdb-skin .mmdb-panel a:not(.button):not([class*="-btn"]):not([class^="btn"]):not(.mmdb-btn):not(.pub-toggle-btn):hover { color: var(--mmdb-accent-hover); }
body.mmdb-skin .mmdb-on-dark .help,
body.mmdb-skin .mmdb-panel .help,
body.mmdb-skin .mmdb-on-dark .small { color: var(--mmdb-text-dim); }

/* Ueberschriften: Oswald, Versalien. Farbe wird IMMER geerbt, damit dieselbe
   Ueberschrift auf der weissen Karte dunkel und auf dem Grund hell ist. */
.imm-wrap h1, .imm-wrap h2, .imm-wrap h3, .imm-wrap h4,
.mmdb-hero h1, .mmdb-card > h2, .mmdb-card > h3 {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  letter-spacing: .03em;
}
.imm-wrap h1 { font-size: 34px; line-height: 1.1; text-transform: uppercase; }
.imm-wrap h2 { font-size: 22px; line-height: 1.2; text-transform: uppercase; }
.imm-wrap h3 { font-size: 18px; line-height: 1.25; }

/* ============================================================
   4. STRUKTUR-UTILITIES (Hero / Karte / Panel)
   ============================================================ */

/* 4.1 Seiten-Hero: Foto unter dunklem Verlauf, Oswald-Versalien */
.mmdb-hero {
  background-image: linear-gradient(180deg, rgba(26,23,21,.84), rgba(26,23,21,.94)),
                    url('../img/mmdb-hero.jpg');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--mmdb-line-dark);
  margin: 0 0 26px;
  border-radius: var(--mmdb-r-card);
  overflow: hidden;
}
.mmdb-hero-inner { padding: 34px 30px; }
.mmdb-hero h1,
.mmdb-hero .mmdb-hero-title {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.08;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  text-transform: uppercase;
  color: var(--mmdb-text);
}
.mmdb-hero p,
.mmdb-hero .mmdb-hero-sub {
  margin: 0;
  color: var(--mmdb-text-muted);
  font-size: 17px;
  max-width: 70ch;
}
.mmdb-hero .mmdb-eyebrow { margin-bottom: 12px; }
/* Hero mit Aktion rechts (Prototyp "Edit Profile": Titel links, Knopf rechts) */
.mmdb-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mmdb-hero-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 4.2 Inhalts-Karte: weiss, schwebt auf dem dunklen Grund */
.mmdb-card {
  /* Polsterung als Token: die Kartenfuss-Leiste (5.9) rechnet mit denselben
     Werten und bleibt so auch auf schmalen Geraeten randlos statt ueberstehend. */
  --mmdb-pad-y: 26px;
  --mmdb-pad-x: 28px;
  /* border-box: sonst zaehlt eine gesetzte max-width nur den INHALT und die
     Karte wird um ihre Polsterung breiter als die Bloecke darueber (2026-08-29
     auf der Registrierungsseite: Kopf 820px, Karte 876px). */
  box-sizing: border-box;
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
  border-radius: var(--mmdb-r-card);
  padding: var(--mmdb-pad-y) var(--mmdb-pad-x);
  margin: 0 0 22px;
  box-shadow: var(--mmdb-shadow-card);
}
.mmdb-card > :first-child { margin-top: 0; }
.mmdb-card > :last-child  { margin-bottom: 0; }
.mmdb-card a { color: var(--mmdb-accent-deep); }
.mmdb-card a:hover { color: var(--mmdb-accent); }
.mmdb-card-flush { padding: 0; overflow: hidden; }
/* Durchsichtige Karte: Huelle ohne Flaeche, damit KIND-Karten (Bands/
   Projects-Sektionen, Prototyp 2026-08-29) direkt auf dem dunklen Grund
   stehen. form-core.js schaltet die Klasse beim Laschenwechsel. */
body.mmdb-skin .mmdb-card-clear {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Auf der Bands-Lasche gibt es nichts per Sammel-Speichern - die
   Kartenfuss-Leiste stuende sonst als loser heller Balken auf dem Grund. */
body.mmdb-skin .mmdb-card-clear > .profile-save-section { display: none; }

/* 4.3 Info-Panel: dunkel, fuer Filter, Sidebars, Zusammenfassungen */
.mmdb-panel {
  box-sizing: border-box;
  background: var(--mmdb-panel);
  border: 1px solid var(--mmdb-line-dark);
  border-radius: var(--mmdb-r-card);
  padding: 22px 24px;
  margin: 0 0 22px;
  color: var(--mmdb-text);
}
.mmdb-panel > :first-child { margin-top: 0; }
.mmdb-panel > :last-child  { margin-bottom: 0; }

/* 4.4 Kartenkopf: Ueberschrift + Unterzeile ------------------
   Gold-Standard ist der Event Manager (User 2026-08-29: "Alle Karten unter
   allen Avatar-Menuepunkten sollen oben so aussehen: Laschen (falls
   vorhanden), abgerundete Ecken fuer Content, Ueberschrift (in dieser Farbe
   und Schriftart), Subueberschrift (in dieser Farbe und Schriftart), dann
   Content."). EIN Mass fuer alle drei bisherigen Titel-Klassen - vorher
   standen 20px (.mmdb-card-title), 22px (.bm-card-title) und 24px
   (.mmdb-sheet-title) nebeneinander. */
.mmdb-card-title,
.mmdb-sheet-title,
.mmdb-head-title,
.mmdb-card > h2:first-child {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-accent-deep);
  margin: 0 0 16px;
}
/* Unterzeile direkt unter dem Titel; sie traegt dann die Kopf-Trennlinie. */
.mmdb-head-sub {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mmdb-line);
  font-family: var(--mmdb-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--mmdb-ink-muted);
}
/* Titel MIT Unterzeile: die Linie gehoert unter das Paar, nicht dazwischen. */
.mmdb-card-title.has-sub,
.mmdb-sheet-title.has-sub,
.mmdb-head-title.has-sub {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* 4.5 Eyebrow-Label (Bernstein, gesperrt) */
.mmdb-eyebrow {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mmdb-warm);
  font-weight: 600;
}

/* 4.6 Formular-Kopfzeile im Hero-Band -------------------------
   Titel links, "Anzeigen"-Knopf rechts. Bisher NUR im Style-Block
   des Event-Formulars definiert - das Spielstaetten-Formular sah
   deshalb anders aus (User 2026-08-29: "Ueberschrift ist nicht
   lesbar"). Gehoert in die gemeinsame Ebene. */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.form-header h2 {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--mmdb-font-head) !important;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.08;
  text-transform: uppercase;
}
.mmdb-hero .form-header { margin-top: 16px; }
.mmdb-hero .form-header h2 { color: var(--mmdb-text); }
.show-detail-btn {
  text-decoration: none !important;   /* die Theme-Link-Regel gewinnt sonst */
  padding: 11px 22px;
  background: var(--mmdb-accent-fill);
  color: #fff !important;
  border-radius: var(--mmdb-r-ctl);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s ease;
}
.show-detail-btn:hover { background: var(--mmdb-accent-deep); transform: translateY(-1px); }
@media (max-width: 480px) {
  .form-header { flex-direction: column; align-items: flex-start; }
  /* In der SPALTE wird die flex-basis des Titels (1 1 240px, oben fuer die
     ZEILE gedacht) zur HOEHE: 240px+ leerer dunkler Raum zwischen Titel und
     "Anzeigen" (Live-Befund mobil 2026-08-30, Spielstaetten-Formular). */
  .form-header h2 { flex: 0 0 auto; }
  .show-detail-btn { align-self: flex-start; }
}

/* 4.6b Gast-Teaser (Discovery, User 2026-08-30) ---------------
   Hinweis fuer Ausgeloggte auf dem dunklen Grund zwischen Hero und
   Laschenleiste: Mitglieder haben mehr Funktionen/Suche/Sichtbarkeit.
   Links erben ihre helle Farbe aus der .mmdb-on-dark-Kette. */
.imm-guest-teaser {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--mmdb-fill-dark);
  border: 1px solid var(--mmdb-line-dark2);
  border-radius: var(--mmdb-r-ctl);
  color: var(--mmdb-text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.imm-guest-teaser a { font-weight: 600; }

/* 4.7 Welcome-Page (Block-Editor-Seite, docs/welcome-page/) ----
   Setzt das Welcome-Artboard des Design-Handoffs um: Foto-Hero mit
   Eyebrow und MMDB-Karte, weisse Nummern-Kacheln
   "What you can do here", Partner-Foto-Panel, CTA-Band. Die Seite
   liegt AUSSERHALB von .imm-wrap; alle Sektionen malen Grund und
   Schrift selbst und funktionieren mit UND ohne site-wide-Skin
   (wp-theme-skin.css nimmt :has(.imm-welcome)-Seiten von der
   weissen Inhalts-Karte aus). Farbwerte duerfen hier stehen -
   theme.css ist die einzige Farbdatei. ALLE Deklarationen sind gehaertet
   (!important): die Seiten-Shell selbst stellt .wp-block-group transparent
   (Abschnitt 3, (0,2,0) schlaegt die Bausteinklasse), und Theme-Regeln wie
   "body.page #content .entry-content p" kommen mit ID-Spezifitaet - beides
   im Harness gemessen (render_welcome.php/test_welcome.js, 2026-08-30). */

/* Der Theme-Seitentitel ("Welcome"/"Willkommen" ueber dem Hero) entfaellt -
   der Hero traegt den Titel selbst (User 2026-08-30). Deckt Block-Themes
   (.wp-block-post-title) und klassische Themes (.entry-header) ab. */
body:has(.imm-welcome) .entry-header,
body:has(.imm-welcome) .wp-block-post-title,
body:has(.imm-welcome) .page-header,
body:has(.imm-welcome) h1.entry-title,
body:has(.imm-welcome) h1.page-title { display: none !important; }

/* ... und mit ihm sein PLATZ (User-Befund 2026-08-30: "leerer Platz oben").
   Der Titel war ausgeblendet, die vom Theme dafuer reservierte Flaeche nicht:
   Block-Themes polstern das <main>/die Titel-Gruppe ueber die Spacing-Presets
   (padding-top: var(--wp--preset--spacing--50/60), 60-130px) und setzen den
   Blockabstand als margin-block-start auf den ersten Inhaltsblock; klassische
   Themes tun dasselbe an #content/.site-main/.entry-header. Ergebnis war ein
   leeres dunkles Band zwischen Kopfleiste und Foto-Hero - der Hero soll aber
   randlos DIREKT unter der Kopfleiste sitzen. Nur der OBERE Abstand faellt
   weg (seitliche Polsterung bleibt, der Bleed rechnet mit dem zentrierten
   Container). NUR auf Welcome-Seiten - andere Seiten behalten ihre Luft. */
body:has(.imm-welcome) :is(
  .wp-site-blocks, main, #content, #primary, #main,
  .site-content, .content-area, .site-main,
  article, .entry, .hentry, .page-content, .post-content,
  .inside-article, .entry-content-wrap, .nv-content-wrap,
  .entry-content, .wp-block-post-content
) { padding-top: 0 !important; margin-top: 0 !important; }
/* Leere Titel-Huelle: Block-Themes stecken den (ausgeblendeten) Seitentitel in
   eine eigene wp:group mit eigener Polsterung - die bliebe als leerer Kasten
   stehen. Nur Gruppen OHNE den Inhaltsblock treffen (sonst verschwaende die
   Regel die ganze Seite). */
body:has(.imm-welcome) .wp-block-group:has(> .wp-block-post-title):not(:has(.wp-block-post-content)):not(:has(.imm-welcome)) {
  display: none !important;
}
.imm-welcome { margin-top: 0 !important; }
.imm-welcome > *:first-child { margin-top: 0 !important; }

/* Voller Seitenbreiten-Ausbruch aus dem Theme-Container; clip am
   body faengt die 100vw-Scrollbar-Breite (sonst H-Scroll). */
body:has(.imm-welcome) { overflow-x: clip !important; }
.imm-welcome { color: var(--mmdb-text) !important; }
.imm-welcome-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.imm-welcome-inner {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* Hero: Foto + Verlauf wie .mmdb-hero, aber randlos (Prototyp) */
.imm-welcome-hero {
  background-image: linear-gradient(180deg, rgba(26,23,21,.74), rgba(26,23,21,.93)),
                    url('../img/mmdb-hero.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid var(--mmdb-line-dark) !important;
}
.imm-welcome-hero .imm-welcome-hero-grid {
  padding-top: 92px !important;
  padding-bottom: 36px !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 56px !important;
  align-items: center !important;
}
/* Zahlenleiste DIREKT IM Hero (User 2026-08-30), unter den zwei Spalten */
.imm-welcome-hero .imm-welcome-hero-stats {
  padding-top: 0 !important;
  padding-bottom: 56px !important;
}
.imm-welcome-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
  flex-wrap: wrap !important;
}
.imm-welcome-kicker p { margin: 0 !important; }
.imm-welcome h1.imm-welcome-title {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 600 !important;
  font-size: clamp(38px, 6vw, 64px) !important;
  line-height: 1.02 !important;
  margin: 0 0 20px !important;
  text-transform: uppercase !important;
  color: var(--mmdb-text) !important;
  text-wrap: balance !important;
}
.imm-welcome p.imm-welcome-lede {
  margin: 0 0 30px !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--mmdb-text-soft) !important;
  max-width: 52ch !important;
  text-wrap: pretty !important;
}
.imm-welcome p.imm-welcome-login {
  margin: 20px 0 0 !important;
  font-size: 15px !important;
  color: var(--mmdb-text-muted) !important;
}
.imm-welcome p.imm-welcome-login a { color: var(--mmdb-accent-link) !important; text-decoration: none !important; }
.imm-welcome p.imm-welcome-login a:hover { color: var(--mmdb-accent-hover) !important; }

/* "What the MMDB is"-Karte rechts im Hero */
.imm-welcome-mmdb-card {
  background: rgba(46,42,38,.86) !important;
  border: 1px solid var(--mmdb-line-dark2) !important;
  border-radius: var(--mmdb-r-card) !important;
  padding: 28px 30px !important;
}
.imm-welcome h2.imm-welcome-card-title {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 14px !important;
  color: var(--mmdb-text) !important;
}
.imm-welcome .imm-welcome-mmdb-card p {
  margin: 0 0 12px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--mmdb-text-soft) !important;
  text-wrap: pretty !important;
}
.imm-welcome .imm-welcome-mmdb-card p:last-child { margin-bottom: 0 !important; }

/* Live-Kennzahlen ([imm_startpage_stats], User 2026-08-30): sechs dunkle
   Kacheln als EINE Zeile in der Hero-Stats-Leiste. Flex mit content-
   basierter Breite: Labels bleiben EINZEILIG (kleinere Schrift statt
   Zweizeiligkeit, User-Vorgabe) und lange Labels machen ihre Kachel
   breiter statt Leerraum in den anderen zu erzeugen; auf schmalen
   Geraeten bricht die Leiste kachelweise um. */
.imm-welcome-stat-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.imm-welcome-stat {
  flex: 1 1 auto !important;
  background: var(--mmdb-fill-dark) !important;
  border: 1px solid var(--mmdb-line-dark2) !important;
  border-radius: var(--mmdb-r-card) !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.imm-welcome-stat-value {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  color: var(--mmdb-text) !important;
}
.imm-welcome-stat-label {
  margin-top: 5px !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mmdb-text-muted) !important;
  white-space: nowrap !important;
}
.imm-welcome-stat-collab .imm-welcome-stat-value { color: var(--mmdb-warm-light) !important; }

/* Sektions-Ueberschriften (Prototyp: Oswald 30, Versalien) */
.imm-welcome h2.imm-welcome-h2 {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  margin: 0 0 28px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: var(--mmdb-text) !important;
}

/* "What you can do here": weisse Nummern-Kacheln im 3er-Raster */
.imm-welcome-features .imm-welcome-inner {
  padding-top: 64px !important;
  padding-bottom: 8px !important;
}
.imm-welcome-tilegrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
/* Theme-Blockabstaende (margin-block auf .entry-content > * bzw. Block-Gap)
   verschieben Grid-Items INNERHALB ihrer Zeile - die Kacheln standen dadurch
   versetzt und ungleich hoch (Live-Befund 2026-08-30). Im Raster gilt: kein
   Eigenabstand, die Luft macht das gap; die Zeilenhoehe gleicht align-items:
   stretch an (KEIN height:100% - das laesst Kacheln in auto-Zeilen ueber den
   Track hinauswachsen und Zeilen ueberlappen, Harness-Befund). */
.imm-welcome-tilegrid > .imm-welcome-tile { margin: 0 !important; height: auto !important; }
.imm-welcome-tile {
  background: var(--mmdb-card) !important;
  border-radius: var(--mmdb-r-card) !important;
  color: var(--mmdb-ink) !important;
  padding: 24px 22px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
.imm-welcome p.imm-welcome-num {
  font-family: var(--mmdb-font-head) !important;
  font-size: 15px !important;
  color: var(--mmdb-accent-deep) !important;
  letter-spacing: .1em !important;
  margin: 0 !important;
}
.imm-welcome .imm-welcome-tile p:not(.imm-welcome-num) {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--mmdb-ink-soft) !important;
  text-wrap: pretty !important;
}

/* Partner-Panel (An initiative of ...): Foto-Karte mit 2 Spalten */
.imm-welcome-partner .imm-welcome-inner {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.imm-welcome-partner-card {
  background-image: linear-gradient(180deg, rgba(26,23,21,.86), rgba(26,23,21,.94)),
                    url('../img/mmdb-hero.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--mmdb-line-dark) !important;
  border-radius: 14px !important;
  padding: 40px 44px !important;
}
.imm-welcome-partner-card .mmdb-eyebrow { margin: 0 0 10px !important; }
.imm-welcome-partner-card h2.imm-welcome-h2 { margin-bottom: 28px !important; }
.imm-welcome-partner-card .wp-block-columns { gap: 40px !important; }
.imm-welcome h3.imm-welcome-partner-name {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500 !important;
  font-size: 21px !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  color: var(--mmdb-text) !important;
}
.imm-welcome .imm-welcome-partner-card p {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--mmdb-text-muted) !important;
  text-wrap: pretty !important;
}
.imm-welcome p.imm-welcome-partner-link { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; }
.imm-welcome p.imm-welcome-partner-link a { color: var(--mmdb-accent-link) !important; text-decoration: none !important; }
.imm-welcome p.imm-welcome-partner-link a:hover { color: var(--mmdb-accent-hover) !important; }
/* Logo optional: leerer Bild-Block, wird ueber die Mediathek gefuellt */
.imm-welcome .imm-partner-logo { margin: 0 0 14px !important; }
.imm-welcome .imm-partner-logo img { max-height: 120px !important; width: auto !important; border-radius: 10px !important; }
/* Solange KEIN Logo aufgeloest ist (kein src, leeres src aus einem nicht
   gefundenen #mmdb-media:-Platzhalter, oder der rohe Platzhalter selbst),
   im Frontend nichts zeigen - sonst steht ein kaputtes Bild-Icon mit
   Alt-Text da. Im Editor bleibt der Block klickbar. */
.imm-welcome .imm-partner-logo img:not([src]),
.imm-welcome .imm-partner-logo img[src=""],
.imm-welcome .imm-partner-logo img[src^="#"] { display: none !important; }

/* CTA-Band "... by you for you!" */
.imm-welcome-cta {
  background: var(--mmdb-bg-deep) !important;
  border-top: 1px solid var(--mmdb-line-dark) !important;
}
.imm-welcome-cta .imm-welcome-inner {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}
.imm-welcome h2.imm-welcome-cta-title {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  margin: 0 0 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: var(--mmdb-text) !important;
}
.imm-welcome p.imm-welcome-cta-sub {
  margin: 0 !important;
  font-size: 17px !important;
  color: var(--mmdb-text-muted) !important;
  max-width: 52ch !important;
  text-wrap: pretty !important;
}

/* Eyebrows im Welcome-Kontext haerten - die Basisklasse (4.5, (0,1,1))
   verliert sonst gegen Theme-Regeln wie "body.page #content .entry-content p"
   (Harness-Befund 2026-08-30: Eyebrow dunkelgrau statt Bernstein) */
.imm-welcome .mmdb-eyebrow {
  color: var(--mmdb-warm) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Ohne block-library-CSS (und gegen Theme-Resets): Buttons nebeneinander,
   Partner-Spalten als echte Spalten - beides selbst herstellen statt sich
   auf WP-Core-Styles zu verlassen */
.imm-welcome .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.imm-welcome .wp-block-button__link {
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.imm-welcome-partner-card .wp-block-columns {
  display: flex !important;
  gap: 40px !important;
}
.imm-welcome-partner-card .wp-block-column { flex: 1 1 0 !important; min-width: 0 !important; }

/* Hero-/CTA-Knoepfe: Marketing-Groesse des Prototyps (15/30, 17px);
   Rollen/Farben kommen aus den imm-button-Klassen (gutenberg-buttons.css) */
.imm-welcome .wp-block-buttons { gap: 12px !important; }
.imm-welcome .wp-block-buttons .wp-block-button .wp-block-button__link {
  padding: 15px 30px !important;
  font-size: 17px !important;
}
/* Geist-Knopf auf dem Foto-Hero (Browse the directory) */
.imm-welcome .wp-block-button.imm-button-ghost .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--mmdb-line-dark3) !important;
  color: var(--mmdb-text) !important;
  border-radius: var(--mmdb-r-ctl) !important;
  font-family: var(--mmdb-font-body) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}
.imm-welcome .wp-block-button.imm-button-ghost .wp-block-button__link:hover {
  background: var(--mmdb-fill-dark) !important;
  color: var(--mmdb-text) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  .imm-welcome-hero .imm-welcome-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 56px !important; padding-bottom: 28px !important; }
  /* Kennzahlen mobil: GLEICH grosse Boxen (User 2026-08-30, Screenshot) -
     das content-basierte Flex ergab ungleiche Breiten; im 2er-Raster
     duerfen Labels umbrechen, stretch haelt die Zeilen gleich hoch */
  .imm-welcome-stat-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
  .imm-welcome-stat-label { white-space: normal !important; }
  .imm-welcome-tilegrid { grid-template-columns: repeat(2, 1fr) !important; }
  .imm-welcome-partner-card { padding: 28px 26px !important; }
}
@media (max-width: 600px) {
  .imm-welcome-tilegrid { grid-template-columns: 1fr !important; }
  .imm-welcome-partner-card .wp-block-columns { display: flex !important; flex-direction: column !important; }
}

/* ============================================================
   5. KONTROLLEN
   Grundskin fuer die wiederkehrenden Bausteine. Modul-CSS mit gleicher
   Spezifitaet gewinnt weiterhin (theme.css laedt zuerst) - hier steht
   also der gemeinsame Nenner, nicht der Sonderfall.
   ============================================================ */

/* 5.1 Buttons -------------------------------------------------
   VERBINDLICHE Vorgabe des Skins (Handoff Step 4). EINE Form fuer alles,
   vier Rollen, zwei Groessen. Merkmale, die IMMER gelten:
     - FLACHE Fuellung, KEIN Farbverlauf
     - KEIN Schlagschatten (nur der Hover hebt um 1px)
     - Radius aus dem Token (8px normal, 7px in Zeilen)
     - Text auf gefuellten Knoepfen ist weiss

   Rollen:
     Primaer     Akzent-Fuellung, weiss                     .button-primary / .mmdb-btn-primary
     Sekundaer   weiss, 1px --mmdb-line-input, Ink          .button / .mmdb-btn
     Geist       transparent, 1px --mmdb-line-dark2, hell   .mmdb-btn-ghost  (auf Dunkel)
     Gefahr      --mmdb-danger-Fuellung, weiss              .mmdb-btn-danger
                 leise Variante in Listenzeilen:            .mmdb-btn-danger-quiet
                 Umriss-Variante auf DUNKEL:                .mmdb-btn-danger-ghost

   Groessen - genau ZWEI, beide gemischt geschrieben (KEINE Versalien):
     normal      padding 11px 22px, 15px/600   jeder Knopf
     klein       padding 8px 14px,  13px/600   .mmdb-btn-sm, fuer dichte
                 Listen-/Kartenzeilen (Event Manager, Spielstaetten, Bands)

   NICHT hier drin und bewusst ausgenommen: Laschen (.tab-btn & Co.),
   Filter-Pillen (.pub-toggle-btn, *-filter-btn), Pager-Tasten und
   Schliesskreuze - die haben ihre eigenen Abschnitte. */
.imm-wrap .button,
.imm-wrap button.button,
.imm-wrap a.button,
.imm-wrap .button-secondary,
.mmdb-btn {
  display: inline-block;
  border: 1px solid var(--mmdb-line-input);
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
  border-radius: var(--mmdb-r-ctl);
  padding: 11px 22px;
  font-family: var(--mmdb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.imm-wrap .button:hover,
.imm-wrap .button-secondary:hover,
.mmdb-btn:hover { transform: translateY(-1px); }
.imm-wrap .button:disabled,
.imm-wrap .button[disabled],
.mmdb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.imm-wrap .button-primary,
.imm-wrap button.button-primary,
.imm-wrap a.button-primary,
.mmdb-btn-primary {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
  color: #fff;
}
.imm-wrap .button-primary:hover,
.mmdb-btn-primary:hover {
  background: var(--mmdb-accent-deep);
  border-color: var(--mmdb-accent-deep);
  color: #fff;
}
/* Auch die Rollen sind .imm-wrap-qualifiziert - eine einfache Klasse (0,1,0)
   verliert sonst gegen .imm-wrap .button (0,2,0) und der Gefahr-Knopf saehe
   aus wie ein sekundaerer. */
.mmdb-btn-danger,
.imm-wrap .mmdb-btn-danger,
.imm-wrap .button.mmdb-btn-danger {
  background: var(--mmdb-danger);
  border-color: var(--mmdb-danger);
  color: #fff;
}
.mmdb-btn-danger:hover,
.imm-wrap .mmdb-btn-danger:hover { background: #b52b2d; border-color: #b52b2d; color: #fff; }
/* leise Gefahr-Variante fuer Listenzeilen (Handoff Step 4) */
.mmdb-btn-danger-quiet,
.imm-wrap .mmdb-btn-danger-quiet,
.imm-wrap .button.mmdb-btn-danger-quiet {
  background: var(--mmdb-card);
  border: 1px solid var(--mmdb-danger-line);
  color: var(--mmdb-danger-deep);
}
.mmdb-btn-danger-quiet:hover,
.imm-wrap .mmdb-btn-danger-quiet:hover { background: var(--mmdb-danger-bg); color: var(--mmdb-danger); }
/* Gefahr auf DUNKLEM Grund (Panel): Umriss statt Fuellung - so warnt der Knopf,
   ohne auf dem dunklen Panel zu schreien. Skin-Vorlage: Datenloeschung am Fuss
   der Einstellungen. Das gefuellte --mmdb-danger hat auf dem Panel nur 3.0:1. */
.mmdb-btn-danger-ghost,
.imm-wrap .mmdb-btn-danger-ghost,
.imm-wrap .button.mmdb-btn-danger-ghost,
.mmdb-panel .button.mmdb-btn-danger-ghost,
.mmdb-hero .button.mmdb-btn-danger-ghost {
  background: transparent;
  border: 1px solid var(--mmdb-danger-line-dark);
  color: var(--mmdb-danger-on-dark);
}
.mmdb-btn-danger-ghost:hover,
.imm-wrap .mmdb-btn-danger-ghost:hover,
.mmdb-panel .button.mmdb-btn-danger-ghost:hover,
.mmdb-hero .button.mmdb-btn-danger-ghost:hover {
  background: var(--mmdb-danger-on-dark-bg);
  border-color: var(--mmdb-danger-on-dark);
  color: var(--mmdb-danger-on-dark);
}

/* Zweite und einzige weitere Groesse: Knopf in dichten Listen-/Kartenzeilen.
   Versalien bleiben - aber NUR hier (Vorgabe 2026-08-29). Der Unterschied zur
   normalen, gemischt geschriebenen Groesse ist damit bewusste Hierarchie und
   nicht mehr der Zufall, dass eine Regel historisch anders aussah. */
/* Zweite und einzige weitere Groesse: Knopf in dichten Listen-/Kartenzeilen.
   KEINE Versalien (Vorgabe 2026-08-29, zweite Runde): die Zeilen-Knoepfe des
   Event Managers sollen aussehen wie die des Band Managers - kleiner und
   gemischt geschrieben. Damit tragen Knoepfe nirgends mehr Versalien.
   .imm-wrap-qualifiziert, sonst gewinnt .imm-wrap .button (0,2,0) gegen die
   einfache Klasse (0,1,0). */
.mmdb-btn-sm,
.imm-wrap .mmdb-btn-sm,
.imm-wrap .button.mmdb-btn-sm {
  padding: 8px 14px;
  border-radius: var(--mmdb-r-ctl-sm);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Geister-Button auf dem dunklen Grund.
   Selektor bewusst .imm-wrap-qualifiziert: sonst gewinnt die allgemeine
   .imm-wrap .button-Regel darueber (gleiche Datei, hoehere Spezifitaet). */
.mmdb-btn-ghost,
.imm-wrap .mmdb-btn-ghost,
.imm-wrap .button.mmdb-btn-ghost,
.mmdb-hero .button,
.mmdb-panel .button {
  background: transparent;
  border: 1px solid var(--mmdb-line-dark2);
  color: var(--mmdb-text);
  box-shadow: none;
}
.mmdb-btn-ghost:hover,
.imm-wrap .mmdb-btn-ghost:hover,
.mmdb-hero .button:hover,
.mmdb-panel .button:hover { background: var(--mmdb-fill-dark); color: #fff; }
/* … ausgenommen die klar als Primaeraktion markierten */
.mmdb-hero .button-primary,
.mmdb-panel .button-primary {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
  color: #fff;
}

/* Kopfband-Knoepfe der Detailseiten (Share / Edit) -------------
   EINE Definition fuer Artist-, Band-, Organizer-, Spielstaetten- und
   Event-Detail. Vorher stand dieselbe Klasse dreimal da und lief
   auseinander: weiss gefuellt in 13px (detail-pages.css), Geist in 14px
   (Event-Detail) und weiss in 15px (Spielstaette) - je nachdem, welches
   Blatt zuletzt geladen wurde. Der Prototyp zeigt in JEDEM Kopfband den
   Geist-Knopf auf Dunkel; die Groesse ist die vereinbarte Zeilen-Groesse
   (theme.css 5.1, .mmdb-btn-sm) - eine dritte Groesse gibt es nicht. */
body.mmdb-skin .detail-edit-btn,
body.mmdb-skin .detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--mmdb-line-dark2);
  border-radius: var(--mmdb-r-ctl-sm);
  color: var(--mmdb-text) !important;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, transform .15s ease;
}
body.mmdb-skin .detail-edit-btn:hover,
body.mmdb-skin .detail-share-btn:hover {
  background: var(--mmdb-fill-dark);
  border-color: var(--mmdb-line-dark3);
  color: #fff !important;
  transform: translateY(-1px);
}
body.mmdb-skin .detail-edit-btn:focus-visible,
body.mmdb-skin .detail-share-btn:focus-visible {
  outline: 2px solid var(--mmdb-text);
  outline-offset: 2px;
}

/* Kontrast-Garantie: Text auf einer gefuellten Aktion ist IMMER weiss.
   Ohne diese Regel faerben Theme- oder Link-Regeln den Text eines
   <a class="…-btn"> um - genau daran war "ANZEIGEN" auf dem Profil
   unlesbar. Gilt fuer alle Knopf-Klassen des Projekts, ausgenommen die
   bewusst hellen Flaechen (Laschen, Pillen, Pager, Schliesskreuze). */
body.mmdb-skin a[class*="-btn"]:not([class*="tab-btn"]):not(.pub-toggle-btn):not([class*="filter-btn"]):not(.pagination-btn):not([class*="close"]),
body.mmdb-skin a.button-primary,
body.mmdb-skin a.mmdb-btn-primary { text-decoration: none; }

/* --- Fliesztext in Dialogen AUSSERHALB von .imm-wrap -------------
   Dieselben Huellen wie unten bei den Knoepfen: Online-Hilfe, GDPR-Dialog,
   Kontakt-Dialog, Hinweis-Blase, Band-/Event-Dialoge, Datumswaehler haengen
   per JS an <body>. Ihr Inhalt ist IMMER eine weisse Karte auf dunklem Schleier
   - ohne eigene Farbe erbte er die HELLE Shell-Farbe von body.mmdb-skin und
   stand weiss auf weiss (User-Befund 2026-08-31 zur Online-Hilfe). Die Huelle
   selbst traegt nur den Schleier, hier steht kein eigener Text. */
body.mmdb-skin :is(
  .imm-help-overlay, .gdpr-modal, .imm-contact-modal-overlay,
  .imm-pending-popup, .imm-modal-overlay, .imm-modal, .flatpickr-calendar
) { color: var(--mmdb-ink-soft); }

/* --- Knoepfe AUSSERHALB von .imm-wrap ---------------------------
   Mehrere Dialoge und Einblendungen haengt das JS direkt an <body>
   (GDPR-Dialog, Band-Kategorie-Dialog, Kontakt-Dialog, Hinweis-Blase,
   System-Hinweis des Event-Formulars, Datumswaehler). Dort greifen die
   .imm-wrap-qualifizierten Rollen oben NICHT - die Knoepfe standen als
   graue Browser-Knoepfe da (User 2026-08-29 zum Datumswaehler:
   "Das hier hat nichts mit unserem neuen Layout zu tun! BUTTONS!").
   Deshalb dieselben Rollen noch einmal, gezielt auf genau diese Huellen.
   BEWUSST NICHT body-weit: .button ist eine WordPress-Klasse, das Theme
   hat eigene Knoepfe. */
body.mmdb-skin .gdpr-modal .button,
body.mmdb-skin .imm-contact-modal-overlay .button,
body.mmdb-skin .imm-pending-popup .button,
body.mmdb-skin .imm-modal-overlay .button,
body.mmdb-skin .imm-modal .button,
body.mmdb-skin .flatpickr-calendar .button,
body.mmdb-skin .gdpr-modal .button-secondary,
body.mmdb-skin .imm-contact-modal-overlay .button-secondary,
body.mmdb-skin .imm-pending-popup .button-secondary,
body.mmdb-skin .imm-modal-overlay .button-secondary,
body.mmdb-skin .imm-modal .button-secondary,
body.mmdb-skin .flatpickr-calendar .button-secondary {
  display: inline-block;
  border: 1px solid var(--mmdb-line-input);
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
  border-radius: var(--mmdb-r-ctl);
  padding: 11px 22px;
  font-family: var(--mmdb-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
body.mmdb-skin .gdpr-modal .button:hover,
body.mmdb-skin .imm-contact-modal-overlay .button:hover,
body.mmdb-skin .imm-pending-popup .button:hover,
body.mmdb-skin .imm-modal-overlay .button:hover,
body.mmdb-skin .imm-modal .button:hover,
body.mmdb-skin .flatpickr-calendar .button:hover { transform: translateY(-1px); }

body.mmdb-skin .gdpr-modal .button-primary,
body.mmdb-skin .imm-contact-modal-overlay .button-primary,
body.mmdb-skin .imm-pending-popup .button-primary,
body.mmdb-skin .imm-modal-overlay .button-primary,
body.mmdb-skin .imm-modal .button-primary,
body.mmdb-skin .flatpickr-calendar .button-primary {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
  color: #fff;
}
body.mmdb-skin .gdpr-modal .button-primary:hover,
body.mmdb-skin .imm-contact-modal-overlay .button-primary:hover,
body.mmdb-skin .imm-pending-popup .button-primary:hover,
body.mmdb-skin .imm-modal-overlay .button-primary:hover,
body.mmdb-skin .imm-modal .button-primary:hover,
body.mmdb-skin .flatpickr-calendar .button-primary:hover {
  background: var(--mmdb-accent-deep);
  border-color: var(--mmdb-accent-deep);
  color: #fff;
}

/* 5.2 Eingaben ----------------------------------------------- */
.imm-wrap input[type="text"],
.imm-wrap input[type="email"],
.imm-wrap input[type="url"],
.imm-wrap input[type="tel"],
.imm-wrap input[type="password"],
.imm-wrap input[type="number"],
.imm-wrap input[type="search"],
.imm-wrap input[type="date"],
.imm-wrap input[type="time"],
.imm-wrap input[type="datetime-local"],
.imm-wrap select,
.imm-wrap textarea {
  font-family: var(--mmdb-font-body);
  font-size: 16px;
  color: var(--mmdb-ink);
  background: var(--mmdb-card);
  border: 1px solid var(--mmdb-line-input);
  border-radius: var(--mmdb-r-ctl);
  padding: 11px 13px;
}
.imm-wrap input:focus,
.imm-wrap select:focus,
.imm-wrap textarea:focus {
  outline: none;
  border-color: var(--mmdb-accent);
  box-shadow: var(--mmdb-focus-ring);
}
.imm-wrap ::placeholder { color: var(--mmdb-ink-faint); opacity: 1; }
.imm-wrap input[type="radio"] { accent-color: var(--mmdb-accent); }

/* --- Checkbox: EINE Komponente fuer JEDE Frontend-Checkbox ---------------
   (User 2026-08-29: "Wie kann sichergestellt werden, dass ALLE Frontend-
   Checkboxen einheitlich und ohne Haken sind?") Antwort: die Regel haengt an
   body.mmdb-skin und trifft damit jede Checkbox der Plugin-Seiten - auch die
   in per JS an <body> gehaengten Dialogen; scripts/ui-harness/test_skin.js
   misst zusaetzlich am berechneten Stil, dass keine Checkbox nativ rendert.
   Angekreuzt = schlicht gefuelltes Quadrat OHNE Haken (Prototyp). */
body.mmdb-skin input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mmdb-line-input);
  border-radius: 4px;
  background: var(--mmdb-card);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease;
}
body.mmdb-skin input[type="checkbox"]:hover { border-color: var(--mmdb-ink-muted); }
body.mmdb-skin input[type="checkbox"]:checked {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
}
body.mmdb-skin input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mmdb-accent);
  outline-offset: 2px;
}
body.mmdb-skin input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}
/* --- Schieber (.imm-switch): Checkbox als iOS-Schalter -------------------
   (Prototyp Band-Editor 2026-08-29: "Ja/Nein-Dropdowns durch Schieber
   ersetzen"). Bewusste ZWEITE Checkbox-Form - der Skin-Waechter nimmt
   .imm-switch-Eingaben von der 17px-Pruefung aus. */
body.mmdb-skin .imm-switch {
  display: inline-flex;
  /* row erzwingen - die Formular-Grundregel stellt label auf column
     (forms.css), damit stand der Text UNTER dem Schalter */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--mmdb-ink-soft);
  margin: 0;
}
body.mmdb-skin .imm-switch input[type="checkbox"] {
  width: 46px;
  min-width: 46px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mmdb-neutral-line);
  transition: background .18s ease;
}
body.mmdb-skin .imm-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mmdb-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: left .18s ease;
}
body.mmdb-skin .imm-switch input[type="checkbox"]:checked {
  background: var(--mmdb-accent-fill);
}
body.mmdb-skin .imm-switch input[type="checkbox"]:checked::before { left: 23px; }
body.mmdb-skin .imm-switch input[type="checkbox"]:hover { border: 0; }

/* Schieber-Leiste: heller Streifen mit den Schaltern nebeneinander */
body.mmdb-skin .imm-switch-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--mmdb-card-sub);
  border-radius: var(--mmdb-r-card);
  padding: 16px 20px;
}

/* Auf DUNKLEM Grund: transparente Flaeche + heller Rahmen */
body.mmdb-skin .mmdb-panel input[type="checkbox"],
body.mmdb-skin .mmdb-on-dark input[type="checkbox"],
body.mmdb-skin .mmdb-filterbar input[type="checkbox"] {
  background: transparent;
  border-color: var(--mmdb-line-dark3);
}
body.mmdb-skin .mmdb-panel input[type="checkbox"]:hover,
body.mmdb-skin .mmdb-on-dark input[type="checkbox"]:hover,
body.mmdb-skin .mmdb-filterbar input[type="checkbox"]:hover { border-color: var(--mmdb-text-dim); }
body.mmdb-skin .mmdb-panel input[type="checkbox"]:checked,
body.mmdb-skin .mmdb-on-dark input[type="checkbox"]:checked,
body.mmdb-skin .mmdb-filterbar input[type="checkbox"]:checked {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
}

/* Eingaben IM dunklen Panel */
.mmdb-panel input[type="text"],
.mmdb-panel input[type="email"],
.mmdb-panel input[type="search"],
.mmdb-panel input[type="number"],
.mmdb-panel input[type="date"],
.mmdb-panel select,
.mmdb-panel textarea {
  background: var(--mmdb-bg);
  border-color: rgba(255,255,255,.14);
  color: var(--mmdb-text);
}
.mmdb-panel ::placeholder { color: var(--mmdb-text-faint); }
.mmdb-panel label { color: var(--mmdb-text-muted); }

/* 5.3 Status-Chip ---------------------------------------------
   DIE eine Form fuer ALLE Status-Chips im Frontend (User 2026-08-30):
   3px 9px, var(--mmdb-r-chip), 11px/700, VERSALIEN, .06em, nowrap -
   Farben ueber die Status-Tokens. Groessere Ausnahme: NUR der
   Detail-Hero-Badge (.status-badge-large, 5px 12px/13px, gemischt).
   KEINE Chips (eigene Muster erlaubt): Zaehl-Bubbles (.pending-badge,
   .pub-toggle-count, .bm-badge-count, .badge-action-required),
   Content-/Personen-Tags (.tag, .badge-genre/-skill, .cmp-jury-chip,
   .category-chip), Filter-Pillen (.pub-toggle-btn,
   .bm-venue-filter-badge), Marken-Badges (PRO), Rang-Medaillen,
   ID-Plaketten (.occ-id-badge, .app-id-badge), Info-Kaesten
   (.applied-status-block, .meta-voting-badge) und der bewusst flache
   .cmp-bonus-badge (User 2026-08-29). Waechter: test_skin.js CHIPS. */
.mmdb-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--mmdb-r-chip);
  background: var(--mmdb-neutral-bg);
  color: var(--mmdb-neutral);
  white-space: nowrap;
}
.mmdb-chip-ok     { background: var(--mmdb-ok-bg);      color: var(--mmdb-ok); }
.mmdb-chip-warn   { background: var(--mmdb-warn-bg);    color: var(--mmdb-warn); }
.mmdb-chip-info   { background: var(--mmdb-info-bg);    color: var(--mmdb-info); }
.mmdb-chip-danger { background: var(--mmdb-danger-bg);  color: var(--mmdb-danger); }

/* 5.4 Filter-Pillen (pub-toggle) ------------------------------
   Verbindliches Muster aus bm-my-events.php. Auf dem dunklen Grund
   werden die Pillen zu gefuellten Chips, in der weissen Karte bleiben
   sie die bekannten Umriss-Pillen. */
.pub-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* stretch, NICHT center: Emoji-Glyphen (❌/🏁) machen einzelne Pillen ein
     paar Pixel hoeher - zentriert standen die Nachbarn dann auf versetzten
     Oberkanten (gemessen 2026-08-30: 369 vs. 372px in EINER Zeile), die Leiste
     wirkte zickzackig. Gestreckt sind alle Pillen gleich hoch und buendig. */
  align-items: stretch;
}
.pub-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--mmdb-r-pill);
  border: 1px solid transparent;
  background: var(--mmdb-fill-dark);
  color: #c4ccd4;
  font-family: var(--mmdb-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.pub-toggle-btn:hover { background: var(--mmdb-fill-dark2); color: #fff; }
.pub-toggle-btn.active {
  background: var(--mmdb-accent-fill);
  border-color: var(--mmdb-accent-fill);
  color: #fff;
  font-weight: 600;
}
.pub-toggle-count {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--mmdb-r-pill);
  background: rgba(255,255,255,.14);
  color: inherit;
}
.pub-toggle-btn.active .pub-toggle-count { background: rgba(255,255,255,.26); }
/* Mobil wird JEDE pub-toggle-Leiste zum Raster gleich breiter Pillen - die
   Regel stand bis 2026-08-30 NUR im Style-Block von bm-my-events.php, die
   gleichen Leisten der Ticket-Verwaltung (Slips-/Kaufvorgangs-/Einnahmen-
   Filter) brachen deshalb weiter im Zickzack um (Live-Befund mobil). Werte
   identisch mit bm-my-events/bm-event-applications - wer hier aendert,
   aendert dort mit. */
@media (max-width: 600px) {
  .pub-toggle-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .pub-toggle-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* … dieselbe Leiste innerhalb einer weissen Karte */
.mmdb-card .pub-toggle-btn,
.mmdb-card-flush .pub-toggle-btn {
  background: var(--mmdb-card);
  border: 2px solid var(--mmdb-line-input);
  color: var(--mmdb-ink-soft);
  border-radius: var(--mmdb-r-ctl);
  padding: 7px 13px;
}
.mmdb-card .pub-toggle-btn:hover { border-color: var(--mmdb-accent); color: var(--mmdb-accent); background: var(--mmdb-card); }
.mmdb-card .pub-toggle-btn.active { background: var(--mmdb-accent-fill); border-color: var(--mmdb-accent-fill); color: #fff; }
.mmdb-card .pub-toggle-count { background: var(--mmdb-neutral-bg); color: var(--mmdb-ink-muted); }
.mmdb-card .pub-toggle-btn.active .pub-toggle-count { background: rgba(255,255,255,.28); color: #fff; }

/* 5.5 Tabellen ------------------------------------------------
   Tabellen leben IMMER in einer weissen Karte: volle Breite,
   dynamische Spalten, horizontal scrollbar im Wrapper. */
.mmdb-table-wrap { width: 100%; overflow-x: auto; }
.mmdb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  color: var(--mmdb-ink-soft);
}
.mmdb-table thead th {
  background: var(--mmdb-card-sub);
  color: var(--mmdb-ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--mmdb-line);
}
.mmdb-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--mmdb-line-soft);
  vertical-align: middle;
}
.mmdb-table tbody tr:hover { background: var(--mmdb-card-hover); }
.mmdb-table .col-actions { width: 1%; white-space: nowrap; }

/* 5.6 Meldungen ---------------------------------------------- */
.notice.ok,
.notice.err,
.notice.info,
.notice.warn { border-radius: var(--mmdb-r-ctl); }

/* 5.7 Pagination ----------------------------------------------
   EIN Seitenumschalter fuer JEDE Liste. Gebaut wird er an genau einer Stelle
   (assets/imm-pager.js), gestylt an genau dieser.

   Aufbau (User-Vorgabe 2026-08-29: die Treffer-pro-Seite-Auswahl gehoert
   NICHT in die Tastenzeile, sondern zentriert darunter):

     « Erste  ‹ Zurueck   Seite 1 von 8 (39 gesamt)   Weiter ›  Letzte »
                    Ergebnisse pro Seite: [10 v]

   Beide Reihen sind zentriert; die Reihenfolge kommt aus `order`, damit die
   Komponente ihr Markup nicht umbauen muss.

   Die Alt-Klassen stehen mit im Selektor, solange noch nicht jede Liste auf
   die Komponente umgestellt ist. */
.mmdb-pager,
.directory-pagination-bottom,
.opportunities-pagination,
.opp-suggestions-pagination,
.suggestions-pagination,
.upcoming-events-pagination,
.occurrences-pagination,
.bm-pagination,
.dc-pagenav,
#community-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  /* Untere Polsterung: der Umschalter ist auf der Trefferliste das LETZTE
     Element der Karte - ohne sie klebt die Treffer-pro-Seite-Auswahl am
     Kartenrand (User 2026-08-29: "Etwas groesseren Abstand darunter"). */
  padding-bottom: 18px;
  border-top: 1px solid var(--mmdb-line);
  font-size: 14px;
  color: var(--mmdb-ink-muted);
}
.mmdb-pager-nav {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.mmdb-pager-size {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.mmdb-pager-size label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-direction: row;
  font-size: 14px;
  font-weight: 600;
  color: var(--mmdb-ink-muted);
  white-space: nowrap;
}

/* --- Zweite Groesse: Umschalter in einer SCHMALEN Spalte ---
   Nur dort, wo die normale Form umbricht: die Ereignisliste neben der Karte ist
   rund 300px breit, dort standen fuenf Tasten plus Seitenangabe in zwei Zeilen
   (User 2026-08-29). Genau ZWEI Pager-Groessen, wie bei den Knoepfen; der
   Harness prueft das. */
body.mmdb-skin .mmdb-pager-sm { gap: 8px; padding-top: 12px; padding-bottom: 12px; font-size: 13px; }
body.mmdb-skin .mmdb-pager-sm .mmdb-pager-nav { gap: 5px; }
body.mmdb-skin .mmdb-pager-sm .mmdb-pager-btn,
body.mmdb-skin .mmdb-pager-sm button,
body.mmdb-skin .mmdb-pager-sm a {
  min-width: 30px;
  padding: 5px 9px;
  font-size: 13px;
  border-radius: var(--mmdb-r-ctl-sm);
}
body.mmdb-skin .mmdb-pager-sm .page-info { font-size: 12px; }
/* In der schmalen Form tragen die Tasten NUR das Zeichen - die Woerter haben
   die Zeile in der Kartenspalte trotz kleiner Form umbrechen lassen
   (User 2026-08-29). aria-label/title behalten die volle Beschriftung. */
body.mmdb-skin .mmdb-pager-sm .mmdb-pager-label { display: none; }

/* Auf schmalen Viewports gilt das fuer JEDEN Umschalter (User 2026-08-30:
   "Pagination skaliert nicht. -> Labels entfernen"): funf Wort-Tasten plus
   Seitenangabe brechen bei 390px zwangslaeufig in Zickzack-Zeilen - nur die
   Zeichen «‹›» plus Seitenangabe passen in EINE Zeile. aria-label/title
   behalten die volle Beschriftung (JS-Pager setzt sie; der PHP-Pager ebenso). */
@media (max-width: 600px) {
  body.mmdb-skin .mmdb-pager .mmdb-pager-label,
  .mmdb-pager .mmdb-pager-label { display: none; }
  .mmdb-pager .mmdb-pager-btn { min-width: 38px; justify-content: center; }
}

/* --- Tasten --- */
body.mmdb-skin .mmdb-pager-btn,
body.mmdb-skin .mmdb-pager button,
body.mmdb-skin .mmdb-pager a,
body.mmdb-skin .directory-pagination-bottom .pagination-btn,
body.mmdb-skin .opportunities-pagination button,
body.mmdb-skin .opp-suggestions-pagination button,
body.mmdb-skin .suggestions-pagination button,
body.mmdb-skin .upcoming-events-pagination button,
body.mmdb-skin .occurrences-pagination .pagination-btn,
body.mmdb-skin .bm-pagination button,
body.mmdb-skin .dc-pagenav button,
body.mmdb-skin #community-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 8px 14px;
  border: 1px solid var(--mmdb-line-input);
  border-radius: var(--mmdb-r-ctl-sm);
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
  font-family: var(--mmdb-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body.mmdb-skin .mmdb-pager-btn:hover:not(:disabled),
body.mmdb-skin .mmdb-pager button:hover:not(:disabled),
body.mmdb-skin .directory-pagination-bottom .pagination-btn:hover:not(:disabled),
body.mmdb-skin .opportunities-pagination button:hover:not(:disabled),
body.mmdb-skin .opp-suggestions-pagination button:hover:not(:disabled),
body.mmdb-skin .suggestions-pagination button:hover:not(:disabled),
body.mmdb-skin .upcoming-events-pagination button:hover:not(:disabled),
body.mmdb-skin .occurrences-pagination .pagination-btn:hover:not(:disabled),
body.mmdb-skin .bm-pagination button:hover:not(:disabled),
body.mmdb-skin .dc-pagenav button:hover:not(:disabled),
body.mmdb-skin #community-pagination button:hover:not(:disabled) {
  background: var(--mmdb-card-sub);
  border-color: var(--mmdb-accent);
  color: var(--mmdb-accent-deep);
  transform: none;
}
/* Gesperrt = sichtbar gesperrt, nicht halb durchsichtig */
body.mmdb-skin .mmdb-pager-btn:disabled,
body.mmdb-skin .mmdb-pager button:disabled,
body.mmdb-skin .directory-pagination-bottom .pagination-btn:disabled,
body.mmdb-skin .opportunities-pagination button:disabled,
body.mmdb-skin .opp-suggestions-pagination button:disabled,
body.mmdb-skin .suggestions-pagination button:disabled,
body.mmdb-skin .upcoming-events-pagination button:disabled,
body.mmdb-skin .bm-pagination button:disabled,
body.mmdb-skin .dc-pagenav button:disabled,
body.mmdb-skin #community-pagination button:disabled {
  background: var(--mmdb-card-sub);
  border-color: var(--mmdb-line);
  color: var(--mmdb-ink-faint);
  opacity: 1;
  cursor: not-allowed;
}

/* --- Seitenanzeige --- */
body.mmdb-skin .mmdb-pager .page-info,
body.mmdb-skin .directory-pagination-bottom .page-info,
body.mmdb-skin .opportunities-pagination .page-info,
body.mmdb-skin .opp-suggestions-pagination .page-info,
body.mmdb-skin .suggestions-pagination .page-info,
body.mmdb-skin .upcoming-events-pagination .page-info,
body.mmdb-skin .occurrences-pagination .pagination-info,
body.mmdb-skin .bm-pagination-info,
body.mmdb-skin .dc-pagenav .page-info,
body.mmdb-skin #community-pagination .page-info {
  color: var(--mmdb-ink-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  margin: 0 6px;
}

/* --- Auswahlfeld "Treffer pro Seite" --- */
body.mmdb-skin .mmdb-pager-size select,
body.mmdb-skin .pagination-controls select {
  border: 1px solid var(--mmdb-line-input);
  border-radius: var(--mmdb-r-ctl-sm);
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
}
body.mmdb-skin .pagination-controls label { color: var(--mmdb-ink-muted); font-size: 14px; font-weight: 600; }

/* --- Pager auf dem DUNKLEN Grund (ausserhalb einer Karte) --- */
body.mmdb-skin .mmdb-panel .mmdb-pager,
body.mmdb-skin .mmdb-on-dark .mmdb-pager,
body.mmdb-skin .mmdb-pager.mmdb-on-dark,
body.mmdb-skin .imm-wrap > .mmdb-pager { border-top-color: var(--mmdb-line-dark); }
body.mmdb-skin .mmdb-panel .mmdb-pager button,
body.mmdb-skin .mmdb-on-dark .mmdb-pager button,
body.mmdb-skin .mmdb-pager.mmdb-on-dark button,
body.mmdb-skin .imm-wrap > .mmdb-pager button,
body.mmdb-skin .mmdb-panel .mmdb-pager select,
body.mmdb-skin .imm-wrap > .mmdb-pager select {
  background: transparent;
  border-color: var(--mmdb-line-dark2);
  color: var(--mmdb-text-muted);
}
body.mmdb-skin .mmdb-panel .mmdb-pager button:hover:not(:disabled),
body.mmdb-skin .mmdb-on-dark .mmdb-pager button:hover:not(:disabled),
body.mmdb-skin .mmdb-pager.mmdb-on-dark button:hover:not(:disabled),
body.mmdb-skin .imm-wrap > .mmdb-pager button:hover:not(:disabled) {
  background: var(--mmdb-fill-dark);
  border-color: var(--mmdb-line-dark3);
  color: #fff;
}
body.mmdb-skin .mmdb-panel .mmdb-pager button:disabled,
body.mmdb-skin .mmdb-on-dark .mmdb-pager button:disabled,
body.mmdb-skin .mmdb-pager.mmdb-on-dark button:disabled,
body.mmdb-skin .imm-wrap > .mmdb-pager button:disabled {
  background: transparent;
  border-color: var(--mmdb-line-dark);
  color: var(--mmdb-text-faint);
}
body.mmdb-skin .mmdb-panel .mmdb-pager .page-info,
body.mmdb-skin .mmdb-on-dark .mmdb-pager .page-info,
body.mmdb-skin .mmdb-pager.mmdb-on-dark .page-info,
body.mmdb-skin .imm-wrap > .mmdb-pager .page-info,
body.mmdb-skin .mmdb-panel .mmdb-pager .mmdb-pager-size label,
body.mmdb-skin .mmdb-on-dark .mmdb-pager .mmdb-pager-size label,
body.mmdb-skin .mmdb-pager.mmdb-on-dark .mmdb-pager-size label,
body.mmdb-skin .imm-wrap > .mmdb-pager .mmdb-pager-size label { color: var(--mmdb-text-muted); }

@media (max-width: 700px) {
  body.mmdb-skin .mmdb-pager-btn,
  body.mmdb-skin .mmdb-pager button { padding: 8px 11px; font-size: 13px; min-width: 34px; }
  body.mmdb-skin .mmdb-pager .page-info { text-align: center; }
}

/* 5.9 Speicherleiste als FUSS der umgebenden Karte -------------
   User 2026-08-29: "Auf allen Seiten des Event-Managements ist der
   Alles-Speichern-Knopf abgesetzt. Bei Profil/Bandprofil ist er
   Bestandteil der vorherigen Box - Letzteres ist mir lieber."
   Die Leiste sitzt deshalb randlos im Kartenfuss (negative Raender
   gleich der Kartenpolsterung 26px/28px), traegt die Karten-Rundung
   unten und wird nur oben von einer Linie abgesetzt. */
body.mmdb-skin .imm-wrap .mmdb-card > .profile-save-section,
body.mmdb-skin .imm-wrap.mmdb-sheet > .profile-save-section,
/* .mmdb-card-foot: fuer Leisten, die tiefer im Karteninneren stehen und
   deshalb nicht ueber den Kind-Selektor erreichbar sind (Band-Editor). Die
   Klasse wird NUR gesetzt, wenn zwischen Karte und Leiste kein gepolsterter
   Kasten liegt - sonst greifen die negativen Raender ins Leere. */
body.mmdb-skin .imm-wrap .mmdb-card .profile-save-section.mmdb-card-foot,
body.mmdb-skin .imm-wrap.mmdb-sheet .profile-save-section.mmdb-card-foot {
  margin: var(--mmdb-pad-y) calc(-1 * var(--mmdb-pad-x)) calc(-1 * var(--mmdb-pad-y)) !important;
  padding: 18px var(--mmdb-pad-x) !important;
  background: var(--mmdb-card-sub);
  border-top: 1px solid var(--mmdb-line);
  border-bottom: 0;
  border-radius: 0 0 var(--mmdb-r-card) var(--mmdb-r-card);
}

/* 5.10 Filterleiste (Discovery-Suche UND Heatmap) --------------
   EINE Komponente, nicht zwei. Bis 2026-08-29 definierten directory.css und
   heatmap.css dieselben Klassennamen (.filter-section, .filter-section-label,
   .filter-group-inline) unterschiedlich - dieselbe Leiste sah auf zwei Seiten
   verschieden aus, und keine von beiden folgte dem Prototyp: SHOW/VIEW BY
   standen als nackte Radio-Knoepfe da, ONLY/ADVANCED als Browser-Kaestchen.

   Vorgabe (Handoff, Bloecke isSearch und isHeatmap):
     Zeile        Label 12px/.1em/Versalien/700, min-width 74px
     Auswahl      Pille 7px 13px, Radius 7, 14px; aktiv Akzent-Fuellung + weiss
     Ankreuzfeld  17px, Radius 4, 1px Rahmen auf Dunkel; aktiv Akzent-Fuellung
   Die Radios/Checkboxen bleiben im Markup echte Formularelemente (das JS
   selektiert darauf und Tastatur/Screenreader brauchen sie) - sie werden nur
   optisch ersetzt. */
/* Die Leiste ist eine Spalte gleich weit auseinander liegender Zeilen -
   KEINE Trennlinien dazwischen. Der Prototyp setzt genau EINE Linie, naemlich
   ueber "Complex filters"; alles andere trennt der Abstand. Eine Linie pro
   Zeile sah gequetscht aus, weil sie oben 14px Luft hatte und unten keine. */
.mmdb-filterbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mmdb-filterbar .filter-section {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
/* [hidden] MUSS gewinnen: die display:flex-Regel oben (0,2,0) schlaegt sonst
   das UA-Stylesheet [hidden]{display:none} (0,1,0) - die per hidden-Attribut
   abgeschaltete "Date:"-Zeile des Kalender-Filters stand deshalb SEIT JEHER
   sichtbar auf der Seite (gemessen 2026-08-30: display:"flex" trotz hidden). */
.mmdb-filterbar .filter-section[hidden] { display: none !important; }

.mmdb-filterbar .filter-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mmdb-text-dim);
  min-width: 74px;
}

.mmdb-filterbar .filter-group-inline {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
/* Ankreuzfelder stehen weiter auseinander als Pillen (Prototyp: 18px). */
.mmdb-filterbar .filter-section-basic .filter-group-inline,
.mmdb-filterbar .filter-section-advanced .filter-group-inline { gap: 18px; }

.mmdb-filterbar .filter-group-inline label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--mmdb-text-soft);
  white-space: nowrap;
  cursor: pointer;
}
.mmdb-filterbar .filter-group-inline label.hidden-filter { display: none !important; }

/* --- Auswahl (Radio) als Pille --- */
.mmdb-filterbar .filter-group-inline label:has(input[type="radio"]) {
  gap: 0;
  padding: 7px 13px;
  border-radius: var(--mmdb-r-ctl-sm);
  background: var(--mmdb-fill-dark);
  transition: background .15s ease, color .15s ease;
}
.mmdb-filterbar .filter-group-inline label:has(input[type="radio"]):hover {
  background: var(--mmdb-fill-dark2);
  color: var(--mmdb-text);
}
.mmdb-filterbar .filter-group-inline label:has(input[type="radio"]:checked) {
  background: var(--mmdb-accent-fill);
  color: #fff;
  font-weight: 600;
}
/* Der Knopf selbst verschwindet - aber NICHT per display:none: so bleibt er
   fokussierbar und der Fokusring kann auf der Pille sichtbar werden. */
.mmdb-filterbar .filter-group-inline input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.mmdb-filterbar .filter-group-inline label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--mmdb-accent-link);
  outline-offset: 2px;
}
/* "VIEW BY" der Heatmap traegt im Prototyp den Bernstein-Ton. */
.mmdb-filterbar .filter-section-subfilter .filter-group-inline label:has(input[type="radio"]:checked) {
  background: var(--mmdb-warm-fill-dark);
  color: var(--mmdb-warm-light);
}

/* --- Ankreuzfeld --- */
/* Checkboxen: kommen KOMPLETT aus der globalen Komponente (5.2,
   body.mmdb-skin input[type="checkbox"] + dunkle Varianten) - hier steht
   bewusst nichts mehr, damit keine zweite Definition entsteht. */

/* --- Aufklappbarer Abschnitt (Complex filters) ---
   Der EINZIGE Trenner der Leiste, genau wie im Prototyp. */
.mmdb-filterbar .filter-section-tags {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  border-top: 1px solid var(--mmdb-line-dark);
  padding-top: 16px;
}
.mmdb-filterbar .filter-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
}
.mmdb-filterbar .filter-section-header:hover { background: transparent; }
.mmdb-filterbar .filter-section-header .filter-section-label {
  color: var(--mmdb-warm-light);
  min-width: 0;
}
.mmdb-filterbar .filter-section-hint {
  font-size: 12px;
  color: var(--mmdb-text-faint);
}
.mmdb-filterbar .toggle-arrow {
  color: var(--mmdb-warm-light);
  font-size: 11px;
  margin-left: auto;
  transition: transform .15s ease;
}

/* --- Tag-Chips im dunklen Filterpanel ---
   .tag traegt global --mmdb-info-bg (#e8f2fb, fast weiss) und erbt die
   Textfarbe. Auf dem dunklen Panel ist die hell - weiss auf fast weiss, der
   gesetzte Filter war schlicht nicht lesbar (Live-Befund 2026-08-29). Der
   Prototyp fuellt die Chips satt und schreibt weiss darauf: Instrumente/alles
   blau, Genres bernstein. */
.mmdb-filterbar .tagbox .tag,
.mmdb-panel .tagbox .tag {
  background: var(--mmdb-accent-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
}
.mmdb-filterbar #gl_box .tag,
.mmdb-panel #gl_box .tag { background: var(--mmdb-warm-deep); }
.mmdb-filterbar .tagbox .tag .x,
.mmdb-panel .tagbox .tag .x { color: #fff; opacity: .7; font-weight: 400; }
.mmdb-filterbar .tagbox .tag .x:hover,
.mmdb-panel .tagbox .tag .x:hover { opacity: 1; }
/* Der Fehlerzustand bleibt rot und muss sichtbar bleiben. */
.mmdb-filterbar .tagbox .tag.bad,
.mmdb-panel .tagbox .tag.bad {
  background: var(--mmdb-danger);
  color: #fff;
  border: 0;
  box-shadow: none;
}

/* --- Aktionszeile: Knoepfe inhaltsbreit, nicht ueber die volle Zeile --- */
.mmdb-filterbar .filter-section-actions {
  gap: 10px;
  justify-content: flex-start;
}

@media (max-width: 700px) {
  .mmdb-filterbar .filter-section { align-items: flex-start; gap: 8px; }
  .mmdb-filterbar .filter-section-label { min-width: 100%; }
}

/* 5.11 Detailseiten (Artist / Band / Organizer) ----------------
   Prototyp-Bloecke isArtist, isBand, isBooker: Hero mit Foto, Name und
   Status-Chips auf dem dunklen Grund; darunter ein zweispaltiges Raster -
   links weisse Inhalts-Karten, rechts dunkle Panels (Kontakt, Musik, Video,
   Social). Der Organizer ist einspaltig.

   Vorher war die ganze Seite EINE weisse Karte mit blauem Farbverlauf-Kopf und
   einer einzigen langen Spalte. Markup-IDs bleiben unveraendert - das JS
   fuellt sie. */
.mmdb-detail .mmdb-detail-nav { margin: 0 0 18px; }

.mmdb-detail-hero {
  background-image: linear-gradient(180deg, rgba(26,23,21,.82), rgba(26,23,21,.95)),
                    url('../img/mmdb-hero.jpg');
  background-size: cover;
  background-position: center;
  border: 0;
  border-bottom: 1px solid var(--mmdb-line-dark);
  border-radius: var(--mmdb-r-card);
  overflow: hidden;
  padding: 34px 30px;
  margin: 0 0 24px;
  color: var(--mmdb-text);
}
.mmdb-detail-head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.mmdb-detail-photo { min-width: 0; }
.mmdb-detail-ident { min-width: 0; }

/* Raster: Inhalt links, Panels rechts. Der Organizer traegt .is-single. */
.mmdb-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  padding: 0;
}
.mmdb-detail-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.mmdb-detail-main,
.mmdb-detail-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* .mmdb-card und .mmdb-panel bringen 22px Eigenrand mit (4.2/4.3). In einer
   Flex-Spalte kommt der ZUSAETZLICH zum gap - deshalb hier weg. */
.mmdb-detail-main > *,
.mmdb-detail-side > * { margin-bottom: 0; }

/* Leere Abschnitte verschwinden - das JS laesst sie leer, wenn es nichts zu
   zeigen gibt; als Karte waeren sie ein leerer weisser Kasten. */
.mmdb-detail-main > .mmdb-card:empty,
.mmdb-detail-side > .mmdb-panel:empty,
.mmdb-detail-main > .mmdb-panel:empty { display: none; }
/* Sammelkarte der Merkmalslisten: verschwindet, wenn ALLE Bloecke leer sind. */
.mmdb-detail-tags > :empty { display: none; }
.mmdb-detail-tags:not(:has(> *:not(:empty))) { display: none; }
.mmdb-detail-tags > * + *:not(:empty) { margin-top: 22px; }

/* In der Karte sitzen die Abschnitte direkt aneinander - der Abstand kommt aus
   dem Raster, nicht aus einem Rand pro Abschnitt. */
.mmdb-detail .mmdb-card > .artist-section,
.mmdb-detail .mmdb-card > .band-section,
.mmdb-detail .mmdb-card > .booker-section { margin-bottom: 0; }

/* Panel-Ueberschrift: der Prototyp setzt sie eine Stufe kleiner als den
   Kartentitel (17px statt 20px) und HELL, weil sie auf Dunkel steht.
   body.mmdb-skin davor ist Pflicht, kein Schmuck: die Abschnittsregel in
   detail-pages.css ist "body.mmdb-skin .artist-section h2" = (0,2,2), diese
   hier waere ohne das Praefix (0,2,1) und wuerde verlieren - die Ueberschrift
   stuende dann in --mmdb-accent-deep auf dem Panel, also 2.5:1. */
body.mmdb-skin .mmdb-detail-side .mmdb-panel h2,
body.mmdb-skin .mmdb-detail-side .mmdb-panel h3,
body.mmdb-skin .mmdb-panel > .mmdb-panel-title {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mmdb-text);
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
/* Die Kontakt-/Social-Listen sind in der 340px-Spalte einspaltig. */
.mmdb-detail-side .artist-contact,
.mmdb-detail-side .band-contact,
.mmdb-detail-side .social-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
/* Zweite und weitere Gruppen im selben Panel (Musik, Video) brauchen Luft nach
   oben, aber keinen Kartenabstand. */
body.mmdb-skin .mmdb-detail-side .mmdb-panel h2:not(:first-child),
body.mmdb-skin .mmdb-detail-side .mmdb-panel h3:not(:first-child) { margin-top: 20px; }

/* KEINE Unterstriche an Links - im ganzen Plugin-Inhalt und auch nicht beim
   Hover (User-Vorgabe 2026-08-29). Der Hover unterscheidet sich ueber die
   Farbe, nicht ueber eine Linie. */
body.mmdb-skin .imm-wrap a,
body.mmdb-skin .imm-wrap a:hover,
body.mmdb-skin .mmdb-detail-side a,
body.mmdb-skin .mmdb-detail-side a:hover { text-decoration: none; }

/* Social-Zeilen im Panel: schlichte Liste. KEIN Rahmen, keine Plattformfarbe
   als Rahmen beim Hover - .social-item trug border:2px solid transparent und
   faerbte ihn im Hover in --social-color, weshalb jeder Dienst einen anders
   farbigen Kasten bekam (User 2026-08-29). */
body.mmdb-skin .mmdb-detail-side .social-item,
body.mmdb-skin .mmdb-detail-side .social-item:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  padding: 0;
  font-weight: 400;
}
body.mmdb-skin .mmdb-detail-side .social-item { color: var(--mmdb-accent-link); }
body.mmdb-skin .mmdb-detail-side .social-item:hover { color: var(--mmdb-accent-hover); }

/* Merkmals-Chips: der Prototyp faerbt sie nach Abschnitt. Das Skript erzeugt
   fuer alle dieselbe Klasse .detail-tag, deshalb entscheidet hier der
   Abschnitts-Container - KEINE Aenderung am Markup noetig. */
.mmdb-detail .detail-tag {
  background: var(--mmdb-neutral-bg);
  color: var(--mmdb-ink-soft);
  border: 0;
  padding: 5px 11px;
  border-radius: var(--mmdb-r-chip);
  font-size: 14px;
  font-weight: 600;
}
.mmdb-detail #artist-instruments .detail-tag,
.mmdb-detail #band-looking-for .detail-tag {
  background: var(--mmdb-info-bg);
  color: var(--mmdb-info);
}
.mmdb-detail #artist-genres-like .detail-tag,
.mmdb-detail #band-genres .detail-tag {
  background: var(--mmdb-warn-bg);
  color: var(--mmdb-warn);
}
.mmdb-detail #artist-genres-dislike .detail-tag {
  background: var(--mmdb-danger-bg);
  color: var(--mmdb-danger-deep);
}
.mmdb-detail .tag-list { gap: 7px; }

/* Beschreibungstext: im Prototyp schlichter Flieszttext in der Karte, kein
   eingelassener Kasten mit Akzentkante. */
.mmdb-detail .mmdb-card .personal-note,
.mmdb-detail .mmdb-card .band-description {
  background: transparent;
  padding: 0;
  border-left: 0;
  border-radius: 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mmdb-ink-soft);
}

/* Kontakt- und Social-Zeilen im dunklen Panel: Zeilen, keine weissen Kaesten. */
.mmdb-detail-side .contact-item,
.mmdb-detail-side .social-item,
.mmdb-detail-side .social-media a {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 10px;
  font-size: 15px;
}
.mmdb-detail-side .contact-item:hover,
.mmdb-detail-side .social-item:hover { background: transparent; }
.mmdb-detail-side .contact-item a { color: var(--mmdb-accent-link); font-size: 15px; }
.mmdb-detail-side .contact-item a:hover { color: var(--mmdb-accent-hover); }
.mmdb-detail-side .contact-icon { font-size: 1.1rem; min-width: 0; color: var(--mmdb-text-dim); }

@media (max-width: 1000px) {
  .mmdb-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mmdb-detail-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mmdb-detail-hero { padding: 24px 18px; }
}

/* 5.8 Trenner ------------------------------------------------- */
.mmdb-card hr { border: 0; border-top: 1px solid var(--mmdb-line); margin: 22px 0; }
.mmdb-panel hr, .imm-wrap > hr { border: 0; border-top: 1px solid var(--mmdb-line-dark); margin: 22px 0; }

/* ============================================================
   6. LASCHEN (Tab-Strips)
   Flache Textlaschen auf einer Linie. Gilt einheitlich fuer
   .imm-dtab-btn (Discovery/Konto), .imm-tab-btn, .bm-etab-btn
   (Event-Bearbeiten) und .tab-btn (Event-Formular).
   ============================================================ */
.mmdb-tabstrip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mmdb-line-dark);
  margin: 0 0 22px;
}
.mmdb-tabstrip > button,
.mmdb-tabstrip > a {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 18px;
  font-family: var(--mmdb-font-body);
  font-size: 16px;
  color: var(--mmdb-text-dim);
  cursor: pointer;
  text-decoration: none;
}
.mmdb-tabstrip > button:hover,
.mmdb-tabstrip > a:hover { color: var(--mmdb-text); }
.mmdb-tabstrip > .active {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--mmdb-accent);
}
/* Laschen INNERHALB einer weissen Karte */
.mmdb-card .mmdb-tabstrip { border-bottom-color: var(--mmdb-line); }
.mmdb-card .mmdb-tabstrip > button,
.mmdb-card .mmdb-tabstrip > a { color: var(--mmdb-ink-muted); }
.mmdb-card .mmdb-tabstrip > .active { color: var(--mmdb-accent-deep); border-bottom-color: var(--mmdb-accent); }

/* ============================================================
   7. DIALOGE - gemeinsamer Rahmen
   Die Modal-Strukturen (.bm-modal, .gdpr-modal, .imm-contact-modal,
   .tagbox-modal, …) bleiben wie sie sind, nur die Optik wird neu.
   ============================================================ */
.mmdb-modal-overlay { background: rgba(0,0,0,.5); }
.mmdb-modal-box {
  background: var(--mmdb-card);
  color: var(--mmdb-ink);
  border-radius: var(--mmdb-r-card);
  box-shadow: var(--mmdb-shadow-pop);
  overflow: hidden;
}
.mmdb-modal-box h2,
.mmdb-modal-box h3 {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
/* Dialogfuss: dieselbe helle Leiste wie der Kartenfuss (5.9) - EIN Fuss-Muster
   fuer Karten UND Dialoge (User 2026-08-29: "Alle 'Aenderungen speichern'
   sollen so aussehen. Pruefe alle Dialoge."). */
.mmdb-modal-foot,
.imm-modal-footer,
.imm-contact-modal-footer,
.bm-modal-footer,
.form-actions {
  background: var(--mmdb-card-sub);
  border-top: 1px solid var(--mmdb-line);
}

/* ============================================================
   8. RESPONSIV
   ============================================================ */
@media (max-width: 900px) {
  .mmdb-hero h1, .mmdb-hero .mmdb-hero-title { font-size: 30px; }
  .mmdb-hero-inner { padding: 26px 20px; }
  .mmdb-card { --mmdb-pad-y: 20px; --mmdb-pad-x: 18px; }
  .mmdb-panel { padding: 18px 16px; }
}
@media (max-width: 600px) {
  .mmdb-hero h1, .mmdb-hero .mmdb-hero-title { font-size: 26px; }
  .mmdb-hero p, .mmdb-hero .mmdb-hero-sub { font-size: 15px; }
  .mmdb-card { --mmdb-pad-y: 18px; --mmdb-pad-x: 15px; border-radius: 10px; }
  .imm-wrap h1 { font-size: 26px; }
  .imm-wrap h2 { font-size: 19px; }
}

/* Fokus bleibt sichtbar - der Skin darf die Tastaturbedienung nicht kosten */
body.mmdb-skin :focus-visible {
  outline: 2px solid var(--mmdb-accent-link);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body.mmdb-skin * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   9. ZWEI WEGE ZUR KARTE - ohne neues Markup
   Damit der Re-Skin OHNE strukturelle Eingriffe in die Templates
   auskommt (das JS selektiert auf den vorhandenen Klassen/IDs),
   gibt es zwei Klassen, die auf VORHANDENE Elemente wandern:

   .mmdb-sheet      auf <div class="imm-wrap">  -> die ganze Seite ist EINE
                    weisse Karte (Formularseiten: Profil, Einstellungen,
                    Band-Verwaltung, Login, Registrierung, Feedback)
   .mmdb-hero-band  auf die vorhandene Ueberschrift oder ihre Kopfzeile
                    -> daraus wird das dunkle Hero-Band (Seiten, die darunter
                    schon eigene Karten mitbringen)
   ============================================================ */
body.mmdb-skin .imm-wrap.mmdb-sheet {
  --mmdb-pad-y: 28px;
  --mmdb-pad-x: 30px;
  box-sizing: border-box;
  background: var(--mmdb-card);
  color: var(--mmdb-ink-soft);
  border-radius: var(--mmdb-r-card);
  box-shadow: var(--mmdb-shadow-card);
  padding: var(--mmdb-pad-y) var(--mmdb-pad-x);
  margin-top: 22px;
  margin-bottom: 32px;
}
body.mmdb-skin .imm-wrap.mmdb-sheet > :first-child { margin-top: 0; }
body.mmdb-skin .imm-wrap.mmdb-sheet > :last-child  { margin-bottom: 0; }

/* Abschnitts-Ueberschrift auf dem weissen Blatt */
body.mmdb-skin .mmdb-sheet-title,
body.mmdb-skin .imm-wrap.mmdb-sheet > h2:first-child {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mmdb-accent-deep);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mmdb-line);
}
/* mit Unterzeile: Linie wandert unter das Paar (siehe 4.4) */
body.mmdb-skin .mmdb-sheet-title.has-sub,
body.mmdb-skin .imm-wrap.mmdb-sheet > h2.has-sub:first-child {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Hero-Band aus einer vorhandenen Ueberschrift/Kopfzeile */
body.mmdb-skin .mmdb-hero-band {
  background-image: linear-gradient(180deg, rgba(26,23,21,.84), rgba(26,23,21,.94)),
                    url('../img/mmdb-hero.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--mmdb-line-dark);
  border-radius: var(--mmdb-r-card);
  padding: 30px;
  margin: 22px 0 24px;
  color: var(--mmdb-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
/* Typografie des Bandes. WICHTIG: padding/margin werden nur auf VERSCHACHTELTE
   Ueberschriften genullt - traegt die Ueberschrift die Klasse selbst, laesst ein
   padding:0 hier das Band auf Texthoehe zusammenfallen (genau so ist die
   Kauf-Seite zunaechst als duenner Streifen gerendert). */
body.mmdb-skin h1.mmdb-hero-band,
body.mmdb-skin h2.mmdb-hero-band,
body.mmdb-skin .mmdb-hero-band > h1,
body.mmdb-skin .mmdb-hero-band > h2 {
  font-family: var(--mmdb-font-head) !important;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mmdb-text);
  flex: 1 1 auto;
  min-width: 0;
}
body.mmdb-skin .mmdb-hero-band > h1,
body.mmdb-skin .mmdb-hero-band > h2 {
  margin: 0;
  padding: 0;
  border: 0;
}
body.mmdb-skin .mmdb-hero-band p { color: var(--mmdb-text-muted); margin: 6px 0 0; }
body.mmdb-skin .mmdb-hero-band a:not(.button) { color: var(--mmdb-accent-link); }

@media (max-width: 600px) {
  body.mmdb-skin .imm-wrap.mmdb-sheet { --mmdb-pad-y: 20px; --mmdb-pad-x: 16px; }
  body.mmdb-skin .mmdb-hero-band { padding: 22px 18px; }
  body.mmdb-skin h1.mmdb-hero-band,
  body.mmdb-skin h2.mmdb-hero-band,
  body.mmdb-skin .mmdb-hero-band > h1,
  body.mmdb-skin .mmdb-hero-band > h2 { font-size: 26px; }
}

/* ============================================================
   10. LASCHEN AUF SEITEN, DIE EIN WEISSES BLATT SIND

   ABGELOEST am 2026-08-29. Bis dahin zog die Laschenleiste auf dem
   Profil die Blatt-Polsterung zurueck und trug oben im Blatt ein
   dunkles Band. Das sah aus der Naehe falsch aus: das Weiss begann
   ohne Rundung direkt unter den Laschen ("Profil bearbeiten hat oben
   immer noch spitze Ecken und ist zu nah an den Tabs. Vergleiche
   Event Manager.").

   Seitdem baut das Profil wie der Event Manager: Laschenleiste als
   eigenes Element auf dem dunklen Grund, darunter eine .mmdb-card mit
   runden Ecken. Die Optik der Laschen kommt aus Abschnitt 6, die Karte
   aus 4.2 - hier braucht es nichts mehr.
   ============================================================ */