/* ================================================================
   GRD Pro — Atmosphäre
   Textur, Rhythmus und zurückhaltende Bewegung über dem
   Editorial-Layer. Kein Effekt um seiner selbst willen:
   jede Regel dient der Lesbarkeit oder der Führung des Auges.
   Ohne JavaScript bleibt alles sichtbar und statisch.
   ================================================================ */

/* --- 1 · Papierkorn ------------------------------------------- */

body.editorial::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 2 · Lesefortschritt -------------------------------------- */

.rp {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--edt-gold);
  z-index: 9999;
  transition: width 0.12s linear;
}

/* --- 3 · Kopfzeile beim Scrollen ------------------------------ */

.site-header {
  transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(31, 42, 96, 0.10);
}

/* --- 4 · Einblenden beim Scrollen ----------------------------- */

.js-anim [data-rv] {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.js-anim [data-rv].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.68, 0.18, 1) var(--rv-delay, 0s),
    transform 0.85s cubic-bezier(0.22, 0.68, 0.18, 1) var(--rv-delay, 0s);
}

.js-anim [data-rv="line"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}

.js-anim [data-rv="line"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 0.68, 0.18, 1) var(--rv-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-rv],
  .js-anim [data-rv].is-in,
  .js-anim [data-rv="line"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* --- 5 · Kapitelziffern als Wasserzeichen --------------------- */

.edt-section,
.edt-lead {
  position: relative;
  overflow: hidden;
}

.edt-ghost {
  position: absolute;
  top: clamp(-1.5rem, -2vw, -0.5rem);
  right: clamp(-0.5rem, 1vw, 2rem);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(7rem, 18vw, 15rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--edt-royal);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.edt-section--royal .edt-ghost,
.edt-closing .edt-ghost {
  color: #ffffff;
  opacity: 0.07;
}

.edt-section > *,
.edt-lead > * {
  position: relative;
  z-index: 1;
}

/* --- 6 · Typografischer Rhythmus ------------------------------ */

.edt-hero__title,
.edt-editorial__label,
.edt-closing__title,
.edt-frame__title,
.edt-lead__title,
.edt-process__title {
  text-wrap: balance;
}

/* Der erste Absatz führt: Goldlinie statt Textwand */
.edt-editorial__body > p.edt-lede {
  position: relative;
  padding-left: 1.5rem;
}

.edt-editorial__body > p.edt-lede::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  background: var(--edt-gold);
}

@media (max-width: 560px) {
  .edt-editorial__body > p.edt-lede {
    padding-left: 1.1rem;
  }
}

/* Kapitelmarke bekommt eine mitlaufende Linie */
.edt-num {
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.edt-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--edt-gold);
  transition: width 0.6s cubic-bezier(0.22, 0.68, 0.18, 1);
}

.edt-section:hover .edt-num::after {
  width: 4.5rem;
}

/* --- 7 · Listen: ruhiger, luftiger ---------------------------- */

.edt-list li {
  transition: color 0.3s ease, transform 0.3s ease;
}

.edt-list li:hover {
  transform: translateX(3px);
}

/* --- 8 · Prozessschritte -------------------------------------- */

.edt-process__item {
  transition: border-color 0.4s ease;
}

.edt-process__num {
  transition: color 0.4s ease, letter-spacing 0.4s ease;
}

.edt-process__item:hover .edt-process__num {
  color: var(--edt-gold);
}

/* --- 9 · Produktkacheln --------------------------------------- */

.edt-product {
  transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.18, 1),
              background-color 0.45s ease,
              box-shadow 0.45s ease;
}

.edt-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(20, 25, 46, 0.55);
}

.edt-product__num {
  transition: color 0.4s ease;
}

.edt-product:hover .edt-product__num {
  color: var(--edt-gold);
}

/* --- 10 · Vergleichstabelle ----------------------------------- */

.edt-compare tbody tr {
  transition: background-color 0.3s ease;
}

.edt-compare tbody tr:hover th,
.edt-compare tbody tr:hover td {
  background-color: rgba(31, 42, 96, 0.035);
}

.edt-compare tbody tr:hover td.edt-compare__us {
  background-color: rgba(201, 161, 77, 0.14);
}

/* --- 11 · Kennzahlen ------------------------------------------ */

.edt-stat,
.edt-lead__fact {
  position: relative;
  padding-left: 1rem;
}

.edt-stat::before,
.edt-lead__fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.35em;
  width: 1px;
  background: rgba(201, 161, 77, 0.5);
}

/* --- 12 · FAQ ------------------------------------------------- */

.edt-faq__item summary {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.edt-faq__item summary:hover {
  padding-left: 0.35rem;
  color: var(--edt-royal);
}

.edt-faq__toggle {
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.18, 1), color 0.3s ease;
}

.edt-faq__item[open] .edt-faq__toggle {
  transform: rotate(45deg);
  color: var(--edt-gold);
}

/* --- 13 · Pull-Quotes atmen ----------------------------------- */

.edt-pullquote {
  position: relative;
}

.edt-pullquote::before {
  content: "„";
  position: absolute;
  left: -0.15em;
  top: -0.55em;
  font-family: 'Cormorant Garamond', serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--edt-gold);
  opacity: 0.28;
  pointer-events: none;
}

@media (max-width: 560px) {
  .edt-pullquote::before { display: none; }
}

/* --- 14 · Buttons --------------------------------------------- */

.edt-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.18, 1),
              background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.edt-cta:hover {
  transform: translateY(-2px);
}

/* --- 15 · Abschlussband: leichte Tiefe ------------------------ */

.edt-closing,
.edt-lead {
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(201, 161, 77, 0.14) 0%, rgba(201, 161, 77, 0) 55%);
}