/* Bereich «Aktuelles» (aktuelles.html, WordPress-Seite «Aktuelles»): Termine als Tabelle (Logbuch) und Detailansicht. Nutzt die Farben aus site.css. */

.sec.sec--wide { width: min(980px, 100%); justify-self: center; }
/* Abschnitt so breit wie die Termin-Box; Titel «Aktuelles» und Einleitung eingerückt wie der Inhalt der Box (Rand 1 px +
   Innenabstand wie .sec in site.css), so stehen sie auf derselben linken Flucht wie «Demnächst» */
#aktuelles.scene { width: min(980px, 100%); }
#aktuelles .scene-head { padding-inline: calc(clamp(22px, 4vw, 46px) + 1px); }
.bl { margin-top: 18px; }
.sec > .bl:first-child { margin-top: 0; }
/* Zwischentitel «Demnächst» und «Rückblick»: grösser als normale Zwischentitel (04.11.2026), der erste ohne Abstand oben */
.bl h3 { margin: 44px 0 10px; font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.bl > h3:first-child { margin-top: 0; }
.bl-tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; vertical-align: 2px; color: #0a0c20; background: var(--acc); }
.bl-tag--reise, .bl-tag--ausflug { background: #ffd23f; }
.bl-tag--himmel { background: #c9b8ff; }
.bl-tag--vortrag, .bl-tag--kurs { background: #9fe3c4; }
.bl-tag--verein { background: #f6c1a8; }

/* ---------- A: Logbuch ---------- */
.bl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Spaltentitel (04.11.2026 etwas grösser und heller: 14 px in der Fliesstextfarbe statt 12 px gedämpft) */
.bl-table th { text-align: left; padding: 8px 12px 8px 0; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--body); border-bottom: 1px solid var(--line); }
.bl-table td { padding: 12px 12px 12px 0; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--body); }
.bl-table b { color: #fff; font-weight: 700; }
.bl-table p { margin: 4px 0 0; font-size: 14px; }
.bl-date { width: 11em; } .bl-date b { display: block; font-weight: 400; } .bl-date span { font-size: 13px; color: var(--muted); }
.bl-place { width: 13em; color: var(--muted) !important; font-size: 14px; }
.bl-past { opacity: .85; }
@media (max-width: 640px) {
  .bl-table thead { display: none; }
  .bl-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bl-table td { display: block; width: auto; padding: 2px 0; border: 0; }
}

/* ---------- Links, die die Detailansicht öffnen ---------- */
/* Immer unterstrichen, damit die Titel als Links erkennbar sind; beim Darüberfahren in der Akzentfarbe */
.bl-open { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-open:hover, .bl-open:focus-visible { text-decoration-color: var(--acc); text-decoration-thickness: 2px; }

/* ---------- Detailansicht ---------- */
.bl-dialog { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 22px;
  background: #0b0f2a; color: var(--body); overflow: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.bl-dialog::backdrop { background: rgba(3, 4, 14, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bl-dialog[open] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bl-d-media { position: relative; background: #03040e; min-height: 260px; }
/* Mit Fotos ist die Box immer gleich gross, egal ob Hoch- oder Querformat: feste Höhe, das Bild passt sich ein (contain),
   ein langer Text scrollt in der rechten Spalte */
.bl-dialog[open]:not(.no-media) { height: min(600px, calc(100dvh - 24px)); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.bl-dialog:not(.no-media) .bl-d-body { overflow: auto; }
.bl-dialog.no-media[open] { grid-template-columns: 1fr; } .bl-dialog.no-media .bl-d-media { display: none; }
.bl-dialog.no-media .bl-d-body { padding: 34px 40px 30px; }
.bl-d-media figure { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.bl-d-media img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.bl-d-media figcaption { padding: 8px 14px; font-size: 13px; color: var(--muted); }
.bl-d-count { position: absolute; left: 14px; top: 10px; margin: 0; padding: 2px 10px; border-radius: 999px; background: rgba(9, 11, 30, .7); font-size: 13px; color: #fff; }
.bl-d-count:empty { display: none; }
.bl-dialog .bl-d-prev, .bl-dialog .bl-d-next { top: calc(50% - 40px); width: 44px; height: 44px; display: none; }
.bl-dialog.has-many .bl-d-prev, .bl-dialog.has-many .bl-d-next { display: grid; }
.bl-d-prev { left: 10px; } .bl-d-next { right: 10px; }
.bl-dialog .bl-d-close { top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; }
.bl-d-body { padding: 26px 26px 22px; }
.bl-d-meta { margin: 0 44px 8px 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.bl-d-meta .bl-tag { margin: 0 4px 0 0; }
.bl-d-body h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); font-weight: 900; line-height: 1.1; color: #fff; overflow-wrap: normal; hyphens: auto; }
.bl-d-text p { margin: 0 0 12px; }
.bl-d-links { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); } .bl-d-links:empty { display: none; }
@media (max-width: 760px) {
  .bl-dialog[open] { grid-template-columns: 1fr; }
  /* Handy: Bild oben in fester Höhe (gleich für Hoch- und Querformat), darunter der Text, die ganze Box scrollt */
  .bl-dialog[open]:not(.no-media) { height: calc(100dvh - 24px); grid-template-rows: auto; align-content: start; overflow: auto; }
  .bl-dialog:not(.no-media) .bl-d-body { overflow: visible; }
  .bl-d-media { height: 42dvh; min-height: 0; }
  .bl-d-body, .bl-dialog.no-media .bl-d-body { padding: 18px; }
}