/* =====================================================================
   Editorial-Sektion nach dem Style-Prompt („Behind Form“-Layout),
   umgesetzt für MKU. Maße, Animationen und Breakpoints wie vorgegeben.
   Einzige Abweichung: Höhe = Bildschirm minus Kopfzeile, damit die
   Sektion trotz Navigation genau einen Bildschirm füllt.
   ===================================================================== */
.ed {
  --mouse-x: 0;
  --mouse-y: 0;
  --r-main: clamp(24px, 3.15vw, 46px);
  --r-small: clamp(25px, 3.2vw, 46px);
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: calc(100svh - var(--header-h) - var(--topbar-h, 0px)); min-height: 480px;
  background: #f7f7f5; color: #050505;
}

/* ---------- Haupttitel ---------- */
.ed__title {
  position: absolute; top: 5.2%; left: 3.65%; z-index: 5; margin: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-stretch: 100%;
  font-size: clamp(76px, 10.4vw, 166px); line-height: .78; letter-spacing: -0.075em; text-transform: uppercase;
}
.ed__mask { display: block; overflow: hidden; padding-right: .09em; padding-bottom: .1em; }
.ed__mask > span { display: block; transform: translateY(115%); animation: ed-up 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ed__mask + .ed__mask { margin-top: -.1em; }
.ed__mask + .ed__mask > span { animation-delay: .1s; }

/* ---------- Linker Textblock ---------- */
.ed__left { position: absolute; left: 3.7%; top: 54%; z-index: 4; width: min(260px, 20.5vw); }
.ed__left p, .ed__p {
  margin: 0; font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 16.5px); font-weight: 400; line-height: 1.5; letter-spacing: -0.015em;
}
.ed__label { margin-bottom: clamp(28px, 8.5vh, 68px) !important; }
.ed__desc strong { font-weight: 600; }
.ed__left p { opacity: 0; transform: translateY(18px); animation: ed-fade .8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ed__label { animation-delay: .72s !important; }
.ed__desc { animation-delay: .83s !important; }

/* ---------- Hauptbild ---------- */
.ed__main {
  position: absolute; top: 30.1%; left: 26.45%; width: 43.25%; height: 51.4%; min-height: 205px; z-index: 2; margin: 0;
  overflow: hidden; background: #e5e3de; border-radius: var(--r-main);
  clip-path: inset(0 100% 0 0 round var(--r-main));
  animation: ed-reveal-l 1.25s .28s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.ed__main img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 58%;
  transform: translate3d(calc(var(--mouse-x) * -8px), calc(var(--mouse-y) * -6px), 0) scale(1.055);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform;
}
.ed__main:hover img { transform: translate3d(calc(var(--mouse-x) * -8px), calc(var(--mouse-y) * -6px), 0) scale(1.095); }

.ed__shine {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, rgba(255, 255, 255, .13), transparent 38%, rgba(0, 0, 0, .04));
}

/* ---------- Rechte Spalte ---------- */
.ed__right { position: absolute; top: 30.8%; left: 72.35%; width: 25%; max-width: 390px; z-index: 3; }
.ed__small {
  position: relative; width: 100%; height: clamp(104px, 23.4vh, 205px); margin: 0; overflow: hidden;
  background: #ddd9d0; border-radius: var(--r-small);
  clip-path: inset(0 0 0 100% round var(--r-small));
  animation: ed-reveal-r 1.15s .44s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.ed__small img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 57%;
  transform: translate3d(calc(var(--mouse-x) * 7px), calc(var(--mouse-y) * 5px), 0) scale(1.075);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform;
}
.ed__small:hover img { transform: translate3d(calc(var(--mouse-x) * 7px), calc(var(--mouse-y) * 5px), 0) scale(1.13); }

.ed__rtext { padding-top: clamp(18px, 4.2vh, 35px); }
.ed__hmask { overflow: hidden; padding-bottom: .08em; }
.ed__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(25px, 2.7vw, 45px);
  line-height: .98; letter-spacing: -0.058em; color: #050505;
  transform: translateY(115%); animation: ed-up .9s .81s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ed__p { max-width: 400px; margin-top: clamp(21px, 5.3vh, 43px) !important; opacity: 0; transform: translateY(14px); animation: ed-fade .8s .96s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ed__cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: clamp(14px, 2.6vh, 22px);
  font-size: clamp(14px, 1vw, 16px); font-weight: 700; letter-spacing: -0.01em;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  opacity: 0; transform: translateY(14px); animation: ed-fade .8s 1.06s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ed__cta svg { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.ed__cta:hover svg { transform: translateX(3px); }

/* ---------- Index unten rechts ---------- */
.ed__index {
  position: absolute; right: 2.3%; bottom: 3%; display: flex; align-items: center; gap: 9px;
  color: rgba(0, 0, 0, .5); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateY(18px); animation: ed-fade .7s 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ed__index::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* ---------- Animationen ---------- */
@keyframes ed-up { to { transform: translateY(0); } }
@keyframes ed-fade { to { opacity: 1; transform: translateY(0); } }
@keyframes ed-reveal-l { to { clip-path: inset(0 0 0 0 round var(--r-main)); } }
@keyframes ed-reveal-r { to { clip-path: inset(0 0 0 0 round var(--r-small)); } }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .ed { height: auto; min-height: calc(100svh - var(--header-h) - var(--topbar-h, 0px)); padding: 28px 24px 52px; overflow: visible; }
  .ed__title { position: relative; top: auto; left: auto; font-size: clamp(72px, 15vw, 124px); line-height: .78; }
  .ed__main { position: relative; top: auto; left: auto; width: 68%; height: 390px; min-height: 0; margin-top: 22px; margin-left: auto; }
  .ed__left { position: relative; left: auto; top: auto; width: 31%; margin-top: -250px; padding-right: 20px; }
  .ed__label { margin-bottom: 52px !important; }
  .ed__right { position: relative; top: auto; left: auto; width: 56%; max-width: none; margin-top: 160px; margin-left: auto; }
  .ed__small { height: 210px; }
  .ed__index { display: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 620px) {
  .ed { padding: 22px 16px 44px; }
  .ed__title { font-size: clamp(62px, 21vw, 96px); letter-spacing: -0.07em; }
  .ed__main { --r-main: 27px; width: 100%; height: min(70vw, 330px); margin-top: 24px; }
  .ed__left { width: 100%; margin-top: 29px; padding-right: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; }
  .ed__label { margin-bottom: 0 !important; }
  .ed__right { width: 100%; margin-top: 58px; }
  .ed__small { --r-small: 27px; height: min(51vw, 245px); }
  .ed__rtext { padding-top: 25px; }
  .ed__h2 { font-size: clamp(34px, 10vw, 53px); }
  .ed__p { max-width: 88%; margin-top: 25px !important; }
  .ed__left p, .ed__p { font-size: 15px; line-height: 1.55; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .ed *, .ed *::before { animation-duration: 1ms !important; animation-delay: 0s !important; }
  .ed__main img, .ed__small img { transition: none !important; }
}