/*
 * MVPTreff Events – Stylesheet.
 *
 * Farben sind Variablen, standardmäßig auf die Astra Global Colors
 * gemappt (falls vorhanden), sonst auf die echten Markenwerte von
 * mvptreff.de — dunkles Marineblau, Signalblau, Zyan als Akzent. Auf der
 * laufenden Website (Theme Blocksy) greift der Rückfall, denn die
 * Astra-Variablen gibt es dort nicht. Schriften erben vom Theme – keine
 * externen Fonts. Bewegung ist statisch (Gradient, kein Keyframe), damit
 * `prefers-reduced-motion` nichts abzuschalten hat.
 */
.mvpe {
  --mvpe-navy: var(--ast-global-color-0, #0B1A3A);
  --mvpe-blue: var(--ast-global-color-1, #0F6FFF);
  --mvpe-blue-light: var(--ast-global-color-2, #5FA8FF);
  --mvpe-cyan: #00D8C8;
  --mvpe-coral: #FF7A50;
  --mvpe-paper: var(--ast-global-color-4, #F3F7FF);
  --mvpe-line: var(--ast-global-color-5, #E1E8F7);
  --mvpe-ink: var(--ast-global-color-3, #101A33);
  --mvpe-muted: #5C6A8C;
  --mvpe-radius: 14px;
  --mvpe-hero-bg-1: #030C1A;
  --mvpe-hero-bg-2: #0A0F1E;
  --mvpe-hero-ink: rgba(255, 255, 255, .95);
  --mvpe-hero-muted: rgba(255, 255, 255, .62);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 64px;
  color: var(--mvpe-ink);
}

.mvpe a { color: var(--mvpe-blue); }
.mvpe-muted { color: var(--mvpe-muted); }

/* Hero — bricht bewusst aus der Spaltenbreite, damit die Seite wie
   mvptreff.de aussieht und nicht wie eine generische Theme-Unterseite. */
.mvpe-hero {
  margin: 0 calc(50% - 50vw) 32px;
  padding: 56px max(calc(50vw - 50% + 16px), 16px) 40px;
  background: radial-gradient(ellipse 70% 90% at 85% -10%, rgba(15, 111, 255, .35) 0%, transparent 60%),
              radial-gradient(ellipse 60% 70% at 0% 100%, rgba(0, 216, 200, .16) 0%, transparent 55%),
              linear-gradient(160deg, var(--mvpe-hero-bg-1) 0%, var(--mvpe-hero-bg-2) 100%);
  color: var(--mvpe-hero-ink);
}
.mvpe-hero-inner { max-width: 760px; }
.mvpe-eyebrow { margin: 0 0 4px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mvpe-cyan); font-weight: 600; }
.mvpe-hero h1 { margin: 0 0 8px; color: var(--mvpe-hero-ink); }
.mvpe-lead { margin: 0 0 20px; max-width: 60ch; color: var(--mvpe-hero-muted); }
.mvpe-stats { display: flex; gap: 16px; margin: 0; flex-wrap: wrap; }
.mvpe-stats div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--mvpe-radius); padding: 10px 16px; min-width: 140px; backdrop-filter: blur(6px); }
.mvpe-stats dt { font-size: .75rem; color: var(--mvpe-hero-muted); margin: 0; }
.mvpe-stats dd { font-size: 1.5rem; font-weight: 700; margin: 0; color: #fff; }

/* Zweispaltiges Layout: Filter links, Ergebnisse rechts — wie bei einer
   klassischen Ereignis-/Presseübersicht, nur mit unseren Farben. */
.mvpe-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.mvpe-layout.mvpe-laedt { opacity: .55; transition: opacity .1s ease .1s; pointer-events: none; }
.mvpe-sidebar { position: sticky; top: 16px; }
.mvpe-results { min-width: 0; }
.mvpe-results-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

/* Filter, senkrecht */
.mvpe-sidebar-filter { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--mvpe-line); border-radius: var(--mvpe-radius); background: var(--mvpe-paper); }
.mvpe-filtergruppe { display: flex; flex-direction: column; gap: 6px; }
.mvpe-filtergruppe-label, .mvpe-sidebar-filter label[for] { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mvpe-navy); }
.mvpe-sidebar-filter input[type="search"], .mvpe-sidebar-filter select { border: 1px solid var(--mvpe-line); border-radius: 10px; padding: 9px 12px; background: #fff; font: inherit; color: inherit; width: 100%; }
.mvpe-radiozeile { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.mvpe-radiozeile input { accent-color: var(--mvpe-blue); }
.mvpe-reset { font-size: .85rem; text-align: center; }
.mvpe-count { margin: 0; font-size: .9rem; color: var(--mvpe-muted); }

/* Filter, waagerecht — die kompakte Zeile im Shortcode
   (`show_filters="yes"`), etwa als Startseiten-Einbindung. */
.mvpe-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.mvpe-filters input, .mvpe-filters select { border: 1px solid var(--mvpe-line); border-radius: 10px; padding: 8px 12px; background: #fff; font: inherit; color: inherit; }
.mvpe-filters .mvpe-search { flex: 1 1 240px; min-width: 200px; }
.mvpe-filters .mvpe-reset { margin-left: auto; }

/* Ansicht: Liste/Kalender als zwei Verweise, keine Skripte nötig */
.mvpe-ansicht-umschalter { display: inline-flex; border: 1px solid var(--mvpe-line); border-radius: 999px; padding: 3px; background: #fff; }
.mvpe-ansicht-knopf { padding: 6px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--mvpe-muted) !important; text-decoration: none !important; }
.mvpe-ansicht-knopf.aktiv { background: var(--mvpe-blue); color: #fff !important; }

/* Knopf — !important gegen Theme-Regeln wie ".entry-content a", die dank
   höherer Spezifität sonst die Textfarbe in Inhaltsbereichen
   überschreiben — beobachtet mit Blocksy auf mvptreff.de: der Knopftext
   wurde nahezu unsichtbar, weil die Theme-Linkfarbe fast dem eigenen
   Hintergrund entsprach (#203, Fehlerbericht 20.09.2026). */
.mvpe-button { display: inline-block; border: 1px solid var(--mvpe-blue); border-radius: 10px; padding: 8px 16px; background: #fff !important; color: var(--mvpe-blue) !important; font: inherit; font-size: 1rem; line-height: normal; text-indent: 0; font-weight: 600; cursor: pointer; text-decoration: none !important; }
.mvpe-button-primary { background: var(--mvpe-blue) !important; color: #fff !important; width: 100%; text-align: center; padding: 12px 16px; margin-top: 16px; }
.mvpe-button-primary[aria-disabled="true"] { background: var(--mvpe-muted) !important; border-color: var(--mvpe-muted); cursor: default; }

/* Liste */
.mvpe-month { position: sticky; top: 0; background: #fff; margin: 0 0 12px; padding: 10px 0; font-size: 1rem; font-weight: 700; color: var(--mvpe-navy); border-bottom: 1px solid var(--mvpe-line); z-index: 2; }
.mvpe-month:not(:first-child) { margin-top: 24px; }
.mvpe-list { list-style: none; margin: 0; padding: 0; }
.mvpe-row { border: 1px solid var(--mvpe-line); border-left: 4px solid var(--mvpe-blue); border-radius: var(--mvpe-radius); background: #fff; margin: 0 0 12px; box-shadow: 0 2px 10px rgba(11, 26, 58, .04); transition: transform .12s ease, box-shadow .12s ease; }
.mvpe-row:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 26, 58, .1); }
.mvpe-format-online .mvpe-row, .mvpe-row.mvpe-format-online { border-left-color: var(--mvpe-cyan); }
.mvpe-row.mvpe-format-hybrid { border-left-color: var(--mvpe-navy); }
.mvpe-row.mvpe-cancelled { opacity: .7; }
.mvpe-row.mvpe-cancelled .mvpe-row-title { text-decoration: line-through; }
.mvpe-row-link { display: grid; grid-template-columns: 64px 1fr 24px; gap: 16px; align-items: center; padding: 16px; color: inherit; text-decoration: none; }
.mvpe-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; padding: 6px 0; border-radius: 10px; background: var(--mvpe-paper); color: var(--mvpe-navy); line-height: 1.1; position: relative; }
.mvpe-badge-day { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mvpe-muted); }
.mvpe-badge-num { font-size: 1.5rem; font-weight: 700; }
.mvpe-badge-month { font-size: .75rem; }
.mvpe-today .mvpe-badge { background: var(--mvpe-navy); color: #fff; }
.mvpe-today .mvpe-badge-day { color: rgba(255,255,255,.7); }
.mvpe-badge-today { position: absolute; top: -8px; right: -8px; background: var(--mvpe-cyan); color: var(--mvpe-navy); font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; }
.mvpe-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; margin-bottom: 4px; }
.mvpe-tag { padding: 2px 8px; border-radius: 999px; background: var(--mvpe-paper); color: var(--mvpe-navy); font-weight: 600; }
.mvpe-tag-online { background: rgba(0, 216, 200, .16); }
.mvpe-tag-cancelled { background: var(--mvpe-coral); color: #fff; }
.mvpe-community { color: var(--mvpe-muted); }
.mvpe-via { color: var(--mvpe-muted); font-style: italic; }
.mvpe-row-title { margin: 0 0 4px; font-size: 1.1rem; color: var(--mvpe-navy); }
.mvpe-row-details { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; color: var(--mvpe-muted); }
.mvpe-row-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mvpe-chip { font-size: .75rem; padding: 2px 8px; border: 1px solid var(--mvpe-line); border-radius: 999px; color: var(--mvpe-muted); }
.mvpe-row-arrow { color: var(--mvpe-blue); font-size: 1.2rem; }
.mvpe-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--mvpe-line); border-radius: var(--mvpe-radius); }
.mvpe-past, .mvpe-subscribe { margin-top: 24px; text-align: center; font-size: .9rem; }
.mvpe-sidebar .mvpe-subscribe { margin-top: 16px; }

/* Kalender — Monatsraster Mo–So, serverseitig gerendert wie die Liste. */
.mvpe-kalender-kopf { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.mvpe-kalender-kopf h2 { margin: 0; min-width: 14ch; text-align: center; font-size: 1.15rem; color: var(--mvpe-navy); text-transform: capitalize; }
.mvpe-kalender-kopf .mvpe-button { padding: 6px 14px; line-height: 1; }
.mvpe-kalender-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--mvpe-line); border: 1px solid var(--mvpe-line); border-radius: var(--mvpe-radius); overflow: hidden; }
.mvpe-kalender-wochentag { background: var(--mvpe-paper); color: var(--mvpe-navy); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 8px 4px; }
.mvpe-kalender-tag { background: #fff; min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.mvpe-kalender-tag.mvpe-ausserhalb { background: #FBFCFF; }
.mvpe-kalender-tag.mvpe-ausserhalb .mvpe-kalender-tagnummer { color: var(--mvpe-muted); opacity: .55; }
.mvpe-kalender-tag.mvpe-heute { background: rgba(0, 216, 200, .08); box-shadow: inset 0 0 0 2px var(--mvpe-cyan); }
.mvpe-kalender-tagnummer { font-size: .82rem; font-weight: 700; color: var(--mvpe-navy); }
.mvpe-kalender-pille { display: block; font-size: .72rem; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: var(--mvpe-paper); color: var(--mvpe-navy) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--mvpe-blue); }
.mvpe-kalender-pille.mvpe-format-online { border-left-color: var(--mvpe-cyan); }
.mvpe-kalender-pille.mvpe-format-hybrid { border-left-color: var(--mvpe-navy); }
.mvpe-kalender-pille.mvpe-abgesagt { border-left-color: var(--mvpe-coral); text-decoration: line-through !important; opacity: .7; }
.mvpe-kalender-zeit { font-weight: 700; }
.mvpe-kalender-mehr { font-size: .7rem; color: var(--mvpe-muted); padding: 0 6px; }

/* Detailseite */
.mvpe-banner { background: var(--mvpe-paper); border: 1px solid var(--mvpe-line); border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; }
.mvpe-banner-cancelled { background: var(--mvpe-coral); border-color: var(--mvpe-coral); color: #fff; font-weight: 600; }
.mvpe-back { display: inline-block; margin: 24px 0 16px; font-size: .9rem; }
.mvpe-single-head { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; margin-bottom: 24px; }
.mvpe-single-head h1 { margin: 4px 0; color: var(--mvpe-navy); }
.mvpe-when { margin: 0; color: var(--mvpe-muted); }
.mvpe-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.mvpe-single-side { position: sticky; top: 24px; }
.mvpe-card { border: 1px solid var(--mvpe-line); border-radius: var(--mvpe-radius); padding: 20px; background: #fff; box-shadow: 0 6px 18px rgba(11, 26, 58, .06); }
.mvpe-card dl { margin: 0; }
.mvpe-card dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mvpe-muted); margin-top: 12px; }
.mvpe-card dd { margin: 2px 0 0; }
.mvpe-secondary { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: .9rem; }
.mvpe-footnote { margin: 12px 0 0; font-size: .75rem; color: var(--mvpe-muted); text-align: center; }
.mvpe-image { border-radius: var(--mvpe-radius); margin-bottom: 16px; }
.mvpe-agenda { width: 100%; border-collapse: collapse; }
.mvpe-agenda td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--mvpe-line); vertical-align: top; }
.mvpe-agenda-time { white-space: nowrap; font-weight: 600; color: var(--mvpe-navy); width: 5em; }

@media (max-width: 900px) {
  .mvpe-layout { grid-template-columns: 1fr; }
  .mvpe-sidebar { position: static; }
  .mvpe-sidebar-filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .mvpe-filtergruppe { flex: 1 1 160px; }
  .mvpe-single-grid { grid-template-columns: 1fr; }
  .mvpe-single-side { position: static; }
}

@media (max-width: 640px) {
  .mvpe-hero { padding: 40px 16px 32px; }
  .mvpe-row-link { grid-template-columns: 52px 1fr; }
  .mvpe-row-arrow { display: none; }
  .mvpe-badge { width: 52px; }
  .mvpe-badge-num { font-size: 1.25rem; }
  .mvpe-stats div { min-width: 0; flex: 1 1 30%; }
  .mvpe-kalender-tag { min-height: 72px; }
  .mvpe-kalender-pille { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mvpe-row { transition: none; }
  .mvpe-row:hover { transform: none; }
}