/* Welt Ernaehrung (Praefix .en-). Sage-Gruen. Standard = Vorhang offen (ohne JS und bei reduzierter Bewegung). */
.en-intro { min-height: 58svh; }
.en-cue { margin: 1.6rem 0 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--w-ac); }
.en-cue span { display: inline-block; animation: en-bob 2.2s ease-in-out infinite; }
@keyframes en-bob { 50% { transform: translateY(5px); } }

.en-theater { background: var(--w-bg); color: var(--w-fg); padding: 0 var(--gutter); }
.en-live { height: 260svh; }
.en-pin { position: relative; }
.en-live .en-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 84px 0 18px; gap: 14px; }
.en-theater:not(.en-live) .en-pin { padding: 20px 0 40px; }

.en-stage { --p: 1; position: relative; width: min(1100px, 100%); margin: 0 auto; overflow: hidden; border-radius: 6px; isolation: isolate;
  aspect-ratio: 16 / 10; background: #cfd9c2; box-shadow: 0 40px 70px -30px rgba(30,50,20,.55), 0 0 0 1px rgba(34,48,31,.18); color: #22301f; }
.en-live .en-stage { aspect-ratio: auto; width: min(1100px, 100%); height: 100%; min-height: 0; }
.en-back { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #fdf7e3 0%, #e8eddb 45%, #b9c8a9 100%); }
.en-beam { position: absolute; inset: -10% 20% 30%; background: radial-gradient(ellipse at 50% 0%, rgba(255,250,220,.75), transparent 70%); opacity: calc(var(--p) * .9); pointer-events: none; }
.en-scene { position: absolute; inset: 0; width: 100%; height: 100%; color: #2c4128; opacity: calc(.2 + var(--p) * .7); transform: scale(calc(1.06 - var(--p) * .06)); transform-origin: 50% 100%; }
.en-reveal { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: grid; align-content: center; text-align: center; padding: 0 8%; z-index: 1; opacity: clamp(0, calc((var(--p) - .55) * 3), 1); transform: translateY(calc((1 - var(--p)) * 14px)); }
.en-line1 { margin: 0; font-style: italic; font-size: clamp(1.05rem, 2.6vw, 2rem); line-height: 1.2; color: #f3ead6; }
.en-line2 { margin: .5rem 0 0; font-family: var(--sans); font-size: clamp(.62rem, 1.1vw, .8rem); letter-spacing: .22em; text-transform: uppercase; color: #c9d8bd; }

/* Vorhang: zwei Bahnen, per transform in Falten zusammengeschoben */
.en-curtain { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2; will-change: transform; }
.en-curtain i { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, #2a4322 0 16px, #3f6234 16px 34px, #274020 34px 50px);
  box-shadow: inset 0 -50px 70px rgba(0,0,0,.3); }
.en-l { left: 0; transform-origin: 0 50%; transform: translateX(calc(var(--p) * -84%)) scaleX(calc(1 - var(--p) * .55)); }
.en-r { right: 0; transform-origin: 100% 50%; transform: translateX(calc(var(--p) * 84%)) scaleX(calc(1 - var(--p) * .55)); }
.en-l i { border-right: 2px solid rgba(255,255,255,.1); }
.en-r i { border-left: 2px solid rgba(255,255,255,.1); }
.en-valance { position: absolute; left: 0; right: 0; top: 0; height: 9%; z-index: 3; background: linear-gradient(180deg, #1c2f17, #2a4322); box-shadow: 0 8px 20px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 95% 100%, 90% 80%, 85% 100%, 80% 80%, 75% 100%, 70% 80%, 65% 100%, 60% 80%, 55% 100%, 50% 80%, 45% 100%, 40% 80%, 35% 100%, 30% 80%, 25% 100%, 20% 80%, 15% 100%, 10% 80%, 5% 100%, 0 78%); }
.en-tag { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; background: #f3ead6; color: #22301f; padding: 12px 22px; font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; border: 1px solid rgba(34,48,31,.4);
  opacity: clamp(0, calc(1 - var(--p) * 5), 1); pointer-events: none; }

.en-controls { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.en-btn { font: inherit; font-family: var(--sans); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 14px 26px; color: #f3ead6; background: #2f4a27; border: 1px solid #2f4a27; border-radius: 3px; transition: background .3s, color .3s; }
.en-btn:hover { background: transparent; color: #2f4a27; }
.en-btn:focus-visible { outline: 3px solid #22301f; outline-offset: 3px; }
.en-hint { margin: 0; font-family: var(--sans); font-size: .78rem; color: #3d5237; }

.en-after { padding-top: 60px; }
.en-note { max-width: 62ch; }
.en-note h2 { font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .8rem; }
.en-note ul { padding-left: 1.1rem; margin: 1rem 0; color: #35502f; }
.en-ki { font-size: .85rem; color: #3d5237; }

@media (max-width: 800px) {
  .en-live { height: 240svh; }
  .en-live .en-pin { padding-top: 76px; }
  .en-live .en-stage { min-height: 0; }
  .en-scene { transform-origin: 50% 100%; }
    .en-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .en-cue span { animation: none; }
  .en-live { height: auto; }
}