/* ================================================================
   GRD Pro — Flächen
   Abstrakte Vektorflächen im CI: Gravur-Rosette, Höhenlinien,
   Strahlenplatte. Alle Grafiken sind lokal, vektoriell und rein
   dekorativ (aria-hidden über pointer-events / role="presentation").
   ================================================================ */

/* --- 1 · Hero: Höhenlinien + angeschnittene Rosette ----------- */

.edt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.edt-hero::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  transform: translateY(calc(var(--par, 0px) * -0.6));
  background: url("../img/contours-gold.svg") center right / cover no-repeat;
  opacity: 0.55;
  z-index: -2;
  pointer-events: none;
}

.edt-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18vw;
  width: min(78vw, 900px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: url("../img/guilloche-gold.svg") center / contain no-repeat;
  opacity: 0.85;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 860px) {
  .edt-hero::after {
    right: -42vw;
    width: 118vw;
    opacity: 0.5;
  }
}

.edt-hero__inner {
  position: relative;
  z-index: 1;
}

/* --- 1b · Heller Hero: dieselbe Gravur, deutlich leiser ------- */

.edt-hero--paper::before {
  background-image: url("../img/contours-royal.svg");
  opacity: 0.30;
}

.edt-hero--paper::after {
  background-image: url("../img/guilloche-light.svg");
  opacity: 0.45;
}

@media (max-width: 860px) {
  .edt-hero--paper::after { opacity: 0.28; }
}

/* --- 2 · Lead-Block auf der Startseite ------------------------ */

.edt-lead {
  isolation: isolate;
}

.edt-lead::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12vw;
  width: min(52vw, 640px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: url("../img/guilloche-gold.svg") center / contain no-repeat;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 860px) {
  .edt-lead::after { right: -40vw; width: 105vw; opacity: 0.4; }
}

/* --- 3 · Abschnittsflächen ------------------------------------ */

.edt-section--royal::before,
.edt-section--cream::before,
.edt-section--warm::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
}

.edt-section--royal::before {
  background: url("../img/contours-gold.svg") bottom center / 100% auto no-repeat;
  opacity: 0.42;
}

.edt-section--cream::before {
  background: url("../img/contours-royal.svg") bottom center / 100% auto no-repeat;
  opacity: 0.30;
}

.edt-section--warm::before {
  background: url("../img/contours-royal.svg") bottom left / 120% auto no-repeat;
  opacity: 0.22;
  transform: scaleY(-1);
}

/* --- 4 · Preisrahmen mit Gravur-Wasserzeichen ----------------- */

.edt-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.edt-frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120%, 760px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: url("../img/guilloche-light.svg") center / contain no-repeat;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

.edt-frame > * { position: relative; z-index: 1; }

/* --- 5 · Abschlussband mit Strahlenplatte --------------------- */

.edt-closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.edt-closing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(150vw, 1150px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: url("../img/plate-gold.svg") center / contain no-repeat;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.edt-closing > * { position: relative; z-index: 1; }

/* --- 6 · Produktkacheln: gravierte Ecken ---------------------- */

.edt-product {
  position: relative;
}

.edt-product::before,
.edt-product::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--edt-gold);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.45s ease, width 0.45s ease, height 0.45s ease;
  pointer-events: none;
}

.edt-product::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}

.edt-product::after {
  right: 10px;
  bottom: 10px;
  border-width: 0 1px 1px 0;
}

.edt-product:hover::before,
.edt-product:hover::after {
  opacity: 1;
  width: 34px;
  height: 34px;
}

/* --- 7 · Figur mit Bildunterschrift --------------------------- */

.edt-figure {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  position: relative;
  z-index: 1;
}

.edt-figure__frame {
  border-top: 1px solid var(--edt-hairline-strong);
  border-bottom: 1px solid var(--edt-hairline-soft);
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  background:
    linear-gradient(180deg, rgba(250, 247, 240, 0.65), rgba(255, 255, 255, 0));
}

.edt-figure img,
.edt-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.edt-figure__caption {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-top: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--edt-ink-muted);
}

.edt-figure__caption b {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--edt-gold);
  white-space: nowrap;
}

/* --- 8 · Kapitelziffern über den Flächen halten --------------- */

.edt-ghost { z-index: 0; }

/* --- 9 · Druckausgabe: Flächen weglassen ---------------------- */

@media print {
  .edt-hero::before,
  .edt-hero::after,
  .edt-lead::after,
  .edt-section--royal::before,
  .edt-section--cream::before,
  .edt-section--warm::before,
  .edt-frame::before,
  .edt-closing::before,
  body.editorial::after { display: none !important; }
}