/**
 * memorial.css
 * -------------
 * BEM-Namensschema:
 *  - Block:   .memorial-*
 *  - Element: .memorial-*-__element
 *  - Mod:     .memorial-*- -is-open, -is-hidden, etc. (als Utility/State)
 *
 * Ziel:
 *  - Einsteigerfreundlich, leicht zu erweitern
 *  - Sauberer Namensraum (kollidiert nicht mit Theme/Plugins)
 */

/* ---------- Globales Verhalten / Utilities ---------- */

/* Angenehmes Scrollen zu Ankern (#id) */
html { scroll-behavior: smooth; }

/* Verhindert, dass Sticky-Header Inhalte überdeckt (Offset ~ Höhe der Local-Nav) */
[id] { scroll-margin-top: 80px; }

/* ---------- Layout-Container ---------- */

.memorial {
  /* Parent-Hook für Styles, die nur in dieser Vorlage gelten sollen */
}

.memorial__container {
  /* zentrische Breite für Inhalt */
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Lokale Kopfzeile / Navigation ---------- */

.memorial-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.memorial-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  max-width: 980px;
  margin: 0 auto;
}

.memorial-header__brand {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hamburger-Button (nur mobil sichtbar) */
.memorial-header__toggle {
  display: none;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
.memorial-header__toggle-icon {
  display: block; width: 22px; height: 2px; background: #111; position: relative;
}
.memorial-header__toggle-icon::before,
.memorial-header__toggle-icon::after {
  content:""; position:absolute; left:0; right:0; height:2px; background:#111;
}
.memorial-header__toggle-icon::before { top: -6px; }
.memorial-header__toggle-icon::after  { top:  6px; }

/* Linkliste (Desktop) */
.memorial-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.memorial-nav__link {
  text-decoration: none;
  color: #111;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
}
.memorial-nav__link:hover,
.memorial-nav__link:focus {
  background: rgba(0,0,0,.06);
}

/* Mobile Navigation */
@media (max-width: 720px) {
  .memorial-header__toggle { display: block; }
  .memorial-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-top: 8px; }
  .memorial-nav.-is-open { display: flex; }
}

/* ---------- Hero (Sektion 1: Start) ---------- */

.memorial-hero {
  position: relative;
  color: #fff;
  background-image: var(--memorial-hero);
  background-size: cover;
  background-position: center;
}
.memorial-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
}
.memorial-hero__inner {
  position: relative;
  text-align: center;
  padding: 80px 20px;
}
.memorial-hero__avatar {
  margin: 0 auto 16px;
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.memorial-hero__avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.memorial-hero__name {
  font-size: 40px;
  line-height: 1.2;
  margin: 8px 0 10px;
  font-weight: 600;
}
.memorial-hero__meta {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: .95;
}
.memorial-hero__meta-item {
  display: inline-flex; gap: 8px; align-items: center; font-size: 16px;
}
.memorial-hero__lead {
  margin-top: 16px; font-size: 18px; opacity: .95;
}

/* ---------- Sektionen (allgemein) ---------- */

.memorial-section { padding: 40px 0; }
.memorial-section__title { font-size: 24px; margin-bottom: 14px; }

/* ---------- Sektion 2: Bildergalerie ---------- */

.memorial-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.memorial-gallery__item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.memorial-gallery__img {
  width: 100%; height: 220px; object-fit: cover; display: block;
}
.memorial-gallery__caption {
  padding: 8px 10px; font-size: 14px; color: #555;
}

/* ---------- Sektion 3: Memoiren (Akkordeon) ---------- */

.memorial-accordion {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.memorial-accordion__item + .memorial-accordion__item {
  border-top: 1px solid rgba(0,0,0,.08);
}
.memorial-accordion__button {
  width: 100%; text-align: left; padding: 14px 16px;
  font-size: 16px; font-weight: 600; background: #fff; border: 0;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.memorial-accordion__button:focus {
  outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px;
}
.memorial-accordion__icon { transition: transform .2s ease; }
.memorial-accordion__button[aria-expanded="true"] .memorial-accordion__icon { transform: rotate(90deg); }
.memorial-accordion__panel {
  display: none; padding: 0 16px 16px; font-size: 17px; line-height: 1.7; color: #222;
}
.memorial-accordion__panel.-is-open { display: block; }

/* ---------- Sektion 4: Dokumente ---------- */

.memorial-docs {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
}
.memorial-docs__link {
  text-decoration: none; border-bottom: 1px dotted #999; padding-bottom: 2px;
}

/* ---------- Sektion 5: Videos ---------- */

.memorial-video {
  width: 100%; max-width: 980px; border: none; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.memorial-video.-file { background: #000; }

/* ---------- Sektion 6: Kontakt ---------- */

.memorial-contact {
  font-size: 14px; color: #444; opacity: .9;
}
.memorial-contact details {
  background: #fafafa; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 12px 14px;
}
.memorial-contact summary { cursor: pointer; font-weight: 600; }