/* ================================================================
   GRD Pro — Handwerk
   Die dritte Ebene: sichtbarer Satzspiegel, Kapitelregister,
   Initialen, Lichtführung, gravierte Details.
   Alles greift nur, wenn es die Lesbarkeit trägt.
   ================================================================ */

/* --- 1 · Sichtbarer Satzspiegel ------------------------------- */

.colgrid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .colgrid {
    display: block;
    max-width: 1180px;
    margin: 0 auto;
    background-image: repeating-linear-gradient(
      to right,
      rgba(31, 42, 96, 0.055) 0,
      rgba(31, 42, 96, 0.055) 1px,
      transparent 1px,
      transparent calc(100% / 6)
    );
    background-position: 0 0;
  }
}

/* --- 2 · Kapitelregister links -------------------------------- */

.chapters {
  position: fixed;
  left: clamp(0.75rem, 2.2vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  pointer-events: auto;
}

@media (min-width: 1280px) {
  .chapters { display: flex; }
}

.chapters__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 42, 96, 0.35);
  transition: color 0.35s ease;
}

.chapters__rule {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.22, 0.68, 0.18, 1), background-color 0.35s ease;
}

.chapters__item:hover { color: var(--edt-royal); }
.chapters__item:hover .chapters__rule { width: 26px; }

.chapters__item.is-active {
  color: var(--edt-gold);
}

.chapters__item.is-active .chapters__rule {
  width: 32px;
  background: var(--edt-gold);
}

.chapters.is-dark .chapters__item { color: rgba(255, 255, 255, 0.4); }
.chapters.is-dark .chapters__item:hover { color: #ffffff; }
.chapters.is-dark .chapters__item.is-active { color: var(--edt-gold); }

/* --- 3 · Hero: Wortsatz und langsame Rotation ----------------- */

.w {
  display: inline-block;
  will-change: transform, opacity;
}

.js-anim .edt-hero__title .w {
  opacity: 0;
  transform: translateY(0.85em) rotate(1.5deg);
}

.js-anim .edt-hero__title.is-set .w {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.18, 0.72, 0.16, 1) var(--wd, 0s),
    transform 1s cubic-bezier(0.18, 0.72, 0.16, 1) var(--wd, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .edt-hero__title .w { opacity: 1 !important; transform: none !important; }
}

.edt-hero::after {
  animation: grd-turn 220s linear infinite;
  transform-origin: center;
}

@keyframes grd-turn {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .edt-hero::after { animation: none; }
}

/* --- 4 · Lichtführung auf dunklen Bändern --------------------- */

.edt-hero:not(.edt-hero--paper),
.edt-lead,
.edt-closing,
.edt-section--royal {
  --mx: 50%;
  --my: 40%;
}

.edt-hero > .glow,
.edt-lead > .glow,
.edt-closing > .glow,
.edt-section--royal > .glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    38rem 26rem at var(--mx) var(--my),
    rgba(201, 161, 77, 0.16) 0%,
    rgba(201, 161, 77, 0.05) 38%,
    rgba(201, 161, 77, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}

.has-glow > .glow { opacity: 1; }

/* --- 5 · Initiale statt Textwand ------------------------------ */

.edt-editorial__body > p.edt-lede { padding-left: 0; }
.edt-editorial__body > p.edt-lede::before { display: none; }

.edt-editorial__body > p.edt-lede::first-letter,
.edt-editorial__body > p:first-of-type::first-letter {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.6em;
  line-height: 0.78;
  font-weight: 500;
  color: var(--edt-gold);
  padding: 0.06em 0.16em 0 0;
}

.edt-editorial--royal .edt-editorial__body > p:first-of-type::first-letter {
  color: var(--edt-gold);
}

/* --- 6 · Trennzeichen zwischen den Kapiteln ------------------- */

.edt-section + .edt-section::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, 0) rotate(45deg);
  background: transparent;
  border: 1px solid var(--edt-gold);
  opacity: 0.75;
  z-index: 2;
}

.edt-section--royal + .edt-section::after,
.edt-section + .edt-section--royal::after {
  opacity: 0.85;
}

/* --- 7 · Buttons mit Goldstreif ------------------------------- */

.edt-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.edt-cta:hover::after {
  transform: translateX(120%);
  transition: transform 0.9s cubic-bezier(0.22, 0.68, 0.18, 1);
}

.edt-cta--gold:hover::after {
  background: linear-gradient(
    100deg,
    rgba(20, 25, 46, 0) 35%,
    rgba(20, 25, 46, 0.16) 50%,
    rgba(20, 25, 46, 0) 65%
  );
}

/* --- 8 · Preisplakette ---------------------------------------- */

.edt-frame__price {
  position: relative;
  display: inline-block;
  padding: 0.15em 0.55em 0.1em;
}

.edt-frame__price::before,
.edt-frame__price::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--edt-gold);
  opacity: 0.85;
}

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

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

/* --- 9 · Tabellenkopf bleibt beim Scrollen stehen ------------- */

.edt-compare thead th {
  position: sticky;
  top: 76px;            /* Höhe der klebenden Kopfzeile */
  z-index: 3;
}

@media (max-width: 860px) {
  .edt-compare thead th { top: 64px; }
}

/* --- 10 · Kennzahlen in Ziffernsatz --------------------------- */

.edt-stat__num,
.edt-lead__num,
.edt-frame__price {
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}

/* --- 11 · Kolophon im Fuß ------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--edt-hairline);
}

.footer::before {
  content: "";
  position: absolute;
  right: -8vw;
  top: 50%;
  width: min(46vw, 520px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: url("../img/guilloche-light.svg") center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}

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

/* --- 12 · Marginalie ------------------------------------------ */

.edt-note {
  position: relative;
  margin: 2rem 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 1px solid var(--edt-gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--edt-royal);
}

.edt-section--royal .edt-note,
.edt-closing .edt-note { color: rgba(255, 255, 255, 0.86); }

/* --- 13 · Auszeichnung im Fließtext --------------------------- */

.edt-editorial__body strong {
  position: relative;
  background-image: linear-gradient(transparent 62%, rgba(201, 161, 77, 0.22) 62%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 0.7s cubic-bezier(0.22, 0.68, 0.18, 1);
}

.edt-editorial__body [data-rv].is-in strong,
.edt-editorial__body.is-in strong {
  background-size: 100% 100%;
}

/* --- 14 · Druck ----------------------------------------------- */

@media print {
  .colgrid, .chapters, .glow, .footer::before { display: none !important; }
}

/* ================================================================
   Kleine Bildschirme — Dekoration zurücknehmen
   Auf dem Handy zählt der Satz, nicht die Fläche.
   ================================================================ */

@media (max-width: 900px) {
  /* Kapitelziffern raus: sie liegen zwar hinter dem Text,
     wirken in schmalen Spalten aber wie doppelter Satz */
  .edt-ghost { display: none !important; }
}

@media (max-width: 640px) {
  /* Initiale weg — in schmalen Spalten bleibt für den
     umfließenden Text zu wenig Raum */
  .edt-editorial__body > p.edt-lede::first-letter,
  .edt-editorial__body > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
    padding: 0;
  }

  .edt-pullquote::before { display: none; }
  .edt-section + .edt-section::after { top: 18px; }
}

/* Lange deutsche Komposita sauber umbrechen */
.edt p,
.edt li,
.edt dd,
.edt-dim__body,
.edt-process__body,
.edt-info__value,
.edt-compare td,
.edt-compare th {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.edt-hero__title,
.edt-editorial__label,
.edt-closing__title,
.edt-frame__title,
.edt-lead__title {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* ================================================================
   Korrekturen
   ================================================================ */

/* Kapitelkopf klebt nur dort, wo daneben Platz ist.
   Auf dem Handy stünde er sonst über dem mitlaufenden Text. */
@media (max-width: 860px) {
  .edt-editorial__side {
    position: static;
    top: auto;
  }
}

/* Auswahlfelder im Kontaktformular: Titel und Beschreibung
   sind zwei Zeilen, keine fortlaufende Zeile.
   (Das Markup nutzt __desc, gestylt war bisher nur __body.) */
.edt-choice__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-areas: "mark title" ".    desc";
  column-gap: 0.9rem;
  row-gap: 0.35rem;
  align-items: start;
}

.edt-choice__mark { grid-area: mark; margin-top: 0.35rem; }
.edt-choice__title { grid-area: title; margin: 0; }
.edt-choice__desc { grid-area: desc; }

.edt-choice__desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--edt-ink-muted);
  margin: 0;
}

.edt-choice__mark {
  flex: none;
}

/* Listenmarke auf die erste Zeile ausrichten */
.edt-list li::before {
  top: 1.35rem;
}

@media (max-width: 640px) {
  .edt-list li::before { top: 1.2rem; }
}

/* ================================================================
   Vergleichstabelle — Satz und Umbruch
   ================================================================ */

.edt-compare {
  table-layout: fixed;
}

/* Keine Silbentrennung in der Tabelle: „Auswahlmetho-dik“ und
   „Inter-views“ entstehen sonst mitten in kurzen Zellen. */
.edt-compare th,
.edt-compare td,
.edt-compare caption {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

.edt-compare tbody th {
  width: 30%;
  padding-right: 1.75rem;
}

.edt-compare tbody td {
  width: 35%;
}

.edt-compare thead th,
.edt-compare tbody th,
.edt-compare tbody td {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.edt-compare__caption {
  text-align: left;
}

@media (min-width: 1100px) {
  .edt-compare { font-size: 0.9375rem; }
  .edt-compare thead th,
  .edt-compare tbody th,
  .edt-compare tbody td {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Die Tabelle darf die Textspalte überragen — sie braucht Breite */
@media (min-width: 1240px) {
  .edt-compare__wrap {
    width: calc(100% + 8vw);
    margin-left: -4vw;
  }
}

/* ================================================================
   Kontrast: zweiter Button und Lead-Block
   ================================================================ */

/* Der Ghost-Button steht auf dunklem Grund über der Gravur —
   er braucht kräftigere Kontur und volle Textfarbe. */
.edt-hero .edt-cta--ghost,
.edt-lead .edt-cta--ghost,
.edt-closing .edt-cta--ghost,
.edt-section--royal .edt-cta--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.edt-hero .edt-cta--ghost:hover,
.edt-lead .edt-cta--ghost:hover,
.edt-closing .edt-cta--ghost:hover,
.edt-section--royal .edt-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--edt-gold);
  color: #ffffff;
}

/* Der Lead-Block liegt über der Gravur: Überschrift und Zeilen
   bekommen eine ruhige Fläche darunter, damit nichts absäuft. */
.edt-lead__inner {
  position: relative;
  z-index: 1;
}

.edt-lead__title,
.edt-lead__sub,
.edt-lead__lede {
  text-shadow: 0 1px 18px rgba(10, 16, 40, 0.45);
}

.edt-lead::after {
  opacity: 0.5;
}

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

/* ================================================================
   Kontaktformular — Fehlerführung
   ================================================================ */

.edt-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.edt-form__error {
  border-left: 3px solid #A3342B;
  background: rgba(163, 52, 43, 0.06);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--edt-ink);
}

.edt-form__error a { color: var(--edt-royal); }

.edt-form__hint {
  margin: 0.5rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #A3342B;
}

.is-invalid .edt-form__control {
  border-color: #A3342B;
  background: rgba(163, 52, 43, 0.04);
}

.edt-choice.is-invalid {
  border-color: #A3342B;
}

.edt-choice.is-invalid .edt-form__hint {
  padding: 0 1.25rem 1rem;
}

.edt-form__check.is-invalid .edt-form__check-mark {
  border-color: #A3342B;
}

/* Tastaturbedienung sichtbar machen */
.edt-choice__item input:focus-visible ~ .edt-choice__mark,
.edt-form__check input:focus-visible ~ .edt-form__check-mark {
  outline: 2px solid var(--edt-gold);
  outline-offset: 3px;
}

/* ================================================================
   Einwilligungsbanner
   ================================================================ */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: var(--edt-royal);
  border-top: 2px solid var(--edt-gold);
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.22, 0.68, 0.18, 1);
}

.consent.is-open { transform: none; }

.consent__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}

@media (max-width: 760px) {
  .consent__inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

.consent__text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 70ch;
}

.consent__text p { margin: 0; }

.consent__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 0 0.35rem !important;
}

.consent__text a { color: var(--edt-gold); text-decoration: underline; }

.consent__actions {
  display: flex;
  gap: 0.75rem;
  flex: none;
}

@media (max-width: 480px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; }
}

.consent__btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.consent__btn--gold {
  background: var(--edt-gold);
  color: var(--edt-royal);
}

.consent__btn--gold:hover { background: #D9B570; }

.consent__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.35);
}

.consent__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}