/* ============================================================
   ABSCHIED-SEITE (page-den-eigenen-abschied-gestalten.php)
   Scoping: .ag-page
   ============================================================ */

/* ===========================
   SECTION LAYOUT
   =========================== */
.ag-page .ag-section{
  position:            relative;
  padding-block:       clamp(24px, 3.8vw, 56px);
  background:          var(--color-bg, transparent);
  color:               var(--txt-l);
}

.ag-page .ag-section--tint{
  background:          var(--se, color-mix(in oklab, #ffffff 90%, #000 10%));
  color:               var(--txt-d);
}

.ag-page .ag-section--full{
  min-height:          calc(100svh - var(--header-height, 68px));
  display:             flex;
  align-items:         center;
}

@supports not (height: 1svh){
  .ag-page .ag-section--full{
    min-height:        calc(min(100dvh, 100vh) - var(--header-height, 68px));
  }
}

/* ===========================
   BACKGROUND LAYER
   =========================== */
.ag-page .ag-section__bg{
  position:            absolute;
  inset:               0;
  z-index:             0;
  overflow:            hidden;
  pointer-events:      none;
}

.ag-page .ag-section__bg-image{
  position:            absolute;
  inset:               0;
  width:               100%;
  height:              100%;
  object-fit:          cover;
  filter:              blur(6px);
  transform:           scale(1.05);
}

.ag-page .ag-section__scrim{
  position:            absolute;
  inset:               0;
  background:          rgba(0,0,0,.28);
  z-index:             0;
}

.ag-page .ag-section__scrim::before{
  content:             "";
  position:            absolute;
  inset:               0;
  background:          rgba(156, 136, 166, 0.45);
  z-index:             1;
}

.ag-page .ag-section__content{
  position:            relative;
  z-index:             2;
}

/* ===========================
   LAYOUT HELPERS
   =========================== */
.ag-page .ag-container{
  width:               min(100% - 2rem, 1120px);
  margin-inline:       auto;
}

.ag-page .ag-stack{
  display:             flex;
  flex-direction:      column;
  gap:                 clamp(14px, 1.6vw, 22px);
}

.ag-page .ag-grid{
  display:             grid;
  gap:                 clamp(14px, 1.6vw, 22px);
}

.ag-page .ag-grid--2{
  grid-template-columns: 1fr 1fr;
  align-items:         start;
}

/* ===========================
   MEDIA / RTE
   =========================== */
.ag-page .ag-media img{
  display:             block;
  width:               100%;
  height:              auto;
  border-radius:       0;
}

.ag-page .ag-section__narrow{
  max-width:           760px;
}

.ag-page .ag-rte > *:first-child{
  margin-top:          0;
}

.ag-page .ag-rte > *:last-child{
  margin-bottom:       0;
}

/* ===========================
   ANCHOR OFFSETS
   =========================== */
.ag-page{
  scroll-padding-top:  calc(var(--header-height, 68px) + 10px);
}

.ag-page [id]{
  scroll-margin-top:   calc(var(--header-height, 68px) + 12px);
}

/* ============================================================
   TYPOGRAFIE – GLOBAL
   ============================================================ */
.ag-page .ag-section h1{
  font-size:           clamp(1.8rem, 3.5vw, 2rem);
  line-height:         1.2;
  letter-spacing:      0.2px;
}

.ag-page .ag-section h2{
  font-size:           clamp(1.6rem, 2.8vw, 1.8rem);
  line-height:         1.25;
  letter-spacing:      0.2px;
}

.ag-page .ag-section h3{
  font-size:           clamp(1.25rem, 2.2vw, 1.4rem);
  line-height:         1.3;
  letter-spacing:      0.15px;
}

.ag-page .ag-section p,
.ag-page .ag-section li{
  font-size:           clamp(1rem, 1.4vw, 1.1rem);
  line-height:         1.7;
}

.ag-page .ag-section small{
  font-size:           clamp(0.8rem, 1.1vw, 0.9rem);
  line-height:         1.6;
}

.ag-page .ag-section a{
  color:               inherit;
  text-decoration:     underline;
  text-underline-offset: 2px;
}

/* ============================================================
   HERO & KOSTEN
   ============================================================ */
.ag-page .ag-section--hero,
.ag-page .ag-section--kosten{
  color:               var(--txt-l);
  padding-block:       clamp(56px, 7svh, 128px);
}

.ag-page .ag-section--hero h1,
.ag-page .ag-section--kosten h2{
  color:               var(--txt-l);
  text-shadow:         0 1px 10px rgba(0,0,0,.25);
}

.ag-page .ag-section--hero.ag-section--full > .ag-section__content,
.ag-page .ag-section--kosten.ag-section--full > .ag-section__content{
  margin-block:        auto;
}

@media (max-height: 680px){
  .ag-page .ag-section--hero,
  .ag-page .ag-section--kosten{
    padding-block:     clamp(36px, 6vh, 80px);
  }
}

/* ============================================================
   RTE: Abstände
   ============================================================ */
.ag-page .ag-rte p{
  margin-top:          0;
  margin-bottom:       1em;
}

.ag-page .ag-rte ul,
.ag-page .ag-rte ol{
  margin-top:          0;
  margin-bottom:       1em;
  padding-left:        1.2em;
}

.ag-page .ag-rte li + li{
  margin-top:          0.35em;
}

.ag-page .ag-rte h1,
.ag-page .ag-rte h2,
.ag-page .ag-rte h3,
.ag-page .ag-rte h4,
.ag-page .ag-rte h5,
.ag-page .ag-rte h6{
  margin-top:          1.2em;
  margin-bottom:       0.5em;
}

/* ============================================================
   RESPONSIVE BILDER
   ============================================================ */

/* Desktop ≥ 901px: Hochformat (einheitlich) */
@media (min-width: 901px){
  .ag-page .ag-grid--2 > .ag-media{
    aspect-ratio:      3 / 4;
    overflow:          hidden;
    display:           flex;
    justify-content:   center;
    align-items:       center;
  }

  .ag-page .ag-grid--2 > .ag-media img{
    width:             100%;
    height:            100%;
    object-fit:        cover;
    border-radius:     0;
  }
}

/* Mobile ≤ 900px: Bild immer über Text, Querformat etwas höher */
@media (max-width: 900px){
  .ag-page .ag-grid--2{
    display:           flex;
    flex-direction:    column;
  }

  .ag-page .ag-grid--2 > .ag-media{
    order:             -1;
    width:             100%;
    max-width:         100%;
    margin-inline:     auto;
    margin-bottom:     1.5rem;
    display:           flex;
    justify-content:   center;
    aspect-ratio:      4 / 3;   /* höheres Querformat für bessere Erkennbarkeit */
  }

  .ag-page .ag-grid--2 > .ag-media img{
    width:             100%;
    height:            100%;
    object-fit:        contain; /* vollständig sichtbar, kein Beschnitt */
    border-radius:     0;
  }
}

/* ===========================
   GRID: 1-spaltig unter 900px
   =========================== */
@media (max-width: 900px){
  .ag-page .ag-grid--2{
    grid-template-columns: 1fr; /* falls Grid-Darstellung aktiv bleibt */
  }
}