/* Der Einwand · Variante 1b
   Gepinnte Kamerafahrt über den Schreibtisch. Der Abschnitt liegt immer auf dem dunklen Bild,
   deshalb gelten hier in Hell und Dunkel dieselben Farben. */
#einwand { position: relative; padding: 0 !important; margin: 0; background: #0E0C0A; color: #F3EEE4;
  --eb-fg: #F3EEE4; --eb-mute: rgba(243, 238, 228, 0.8); --eb-gold: #BFAE86; --eb-goldt: #CDBF99; --eb-line: rgba(243, 238, 228, 0.22);
  --eb-ease: cubic-bezier(.16, 1, .3, 1); font-family: var(--font-display); }
#einwand .eb-trk { position: relative; height: 660vh; }
#einwand .eb-stg { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0E0C0A; }
@supports (height: 100svh) { #einwand .eb-stg { height: 100svh; } }

#einwand .eb-img { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1376 / 768; transform: translate(-50%, -50%);
  transform-origin: 50% 50%; will-change: transform; transition: transform 1500ms var(--eb-ease); }
#einwand .eb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
#einwand .eb-dim { position: absolute; inset: 0; z-index: 1; background: #0C0A08; opacity: 0; pointer-events: none; transition: opacity 900ms var(--eb-ease); }
#einwand .eb-trk[data-a="2"] .eb-dim { opacity: 0.22; }
#einwand .eb-trk[data-a="3"] .eb-dim { opacity: 0.38; }
#einwand .eb-trk.is-crop[data-a="2"] .eb-dim, #einwand .eb-trk.is-hsweg[data-a="2"] .eb-dim { opacity: 0.5; }
#einwand .eb-trk.is-crop[data-a="3"] .eb-dim, #einwand .eb-trk.is-hsweg[data-a="3"] .eb-dim { opacity: 0.66; }
#einwand .eb-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,10,8,0.95) 0%, rgba(12,10,8,0.8) 30%, rgba(12,10,8,0.2) 58%, rgba(12,10,8,0) 72%), linear-gradient(180deg, rgba(12,10,8,0.4), transparent 24%); }
#einwand .is-crop .eb-scrim { background: linear-gradient(0deg, rgba(12,10,8,0.96) 0%, rgba(12,10,8,0.84) 34%, rgba(12,10,8,0.3) 60%, rgba(12,10,8,0) 74%), linear-gradient(180deg, rgba(12,10,8,0.45), transparent 20%); }

/* ── Bildschirm-Plaketten ─────────────────────────────── */
#einwand .eb-hs { position: absolute; z-index: 2; width: 0; height: 0; opacity: 0; transition: opacity 800ms var(--eb-ease); }
#einwand .eb-hs.is-lit { opacity: 0.86; }
#einwand .eb-hs.is-cur { opacity: 1; }
#einwand .is-crop[data-a="2"] .eb-hs, #einwand .is-crop[data-a="3"] .eb-hs, #einwand .is-hsweg .eb-hs { opacity: 0 !important; }
#einwand .eb-lab { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.94); white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px 13px; border-radius: 14px;
  color: #F3EEE4; background: rgba(12,10,8,0.8); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(243,238,228,0.18); border-top-color: rgba(243,238,228,0.36);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 18px 40px -14px rgba(0,0,0,0.7);
  transition: transform 800ms var(--eb-ease), border-color 600ms, box-shadow 600ms; }
#einwand .eb-hs.is-cur .eb-lab { transform: translate(-50%, -50%) scale(1); border-color: rgba(191,174,134,0.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 0 0 4px rgba(191,174,134,0.14), 0 22px 48px -14px rgba(0,0,0,0.75); }
/* Board-Plakette wächst nur nach rechts, damit sie bei keiner Breite das Gesicht berührt */
#einwand .eb-hs[data-anker="links"] .eb-lab { transform: translate(0, -50%) scale(0.94); transform-origin: left center; }
#einwand .eb-hs[data-anker="links"].is-cur .eb-lab { transform: translate(0, -50%) scale(1); }
#einwand .eb-lab b { font-weight: 400; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: #D9CCA8; }
#einwand .eb-lab span { font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.04em; line-height: 1; }

/* ── Text ─────────────────────────────────────────────── */
#einwand .eb-pos { position: absolute; z-index: 3; left: clamp(24px, 6vw, 96px); right: clamp(24px, 6vw, 96px); bottom: clamp(30px, 7vh, 72px); max-width: 860px; }
#einwand .eb-acts { display: grid; }
#einwand .eb-act { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity 450ms var(--eb-ease), visibility 0s linear 450ms; }
#einwand .eb-act.is-on { opacity: 1; visibility: visible; transition: opacity 700ms var(--eb-ease) 120ms, visibility 0s; }
#einwand .eb-act .eb-s { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--eb-ease), transform 900ms var(--eb-ease); }
#einwand .eb-act.is-on .eb-s { opacity: 1; transform: none; }
#einwand .eb-act.is-on .eb-s:nth-child(2) { transition-delay: 90ms; }
#einwand .eb-act.is-on .eb-s:nth-child(3) { transition-delay: 180ms; }
#einwand .eb-act .eb-wipe { clip-path: inset(-14% 100% -14% 0); transition: clip-path 1200ms var(--eb-ease); }
#einwand .eb-act.is-on .eb-wipe { clip-path: inset(-14% -8% -14% 0); transition-delay: 200ms; }

#einwand .eb-kick { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eb-goldt); }
#einwand .eb-kick::before { content: ""; width: 28px; height: 1px; background: var(--eb-gold); }
#einwand .eb-frage { margin: 16px 0 18px; max-width: 40ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.45; color: var(--eb-mute); text-wrap: balance; }
#einwand .eb-pull { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5.4vw, 86px); line-height: 0.98; letter-spacing: -0.02em; color: var(--eb-fg); }
#einwand .eb-pull em { font-weight: 400; font-style: italic; color: var(--eb-goldt); }
#einwand .eb-line2 { margin: 16px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.01em; color: var(--eb-fg); }
#einwand .eb-line2 em { font-style: italic; color: var(--eb-goldt); }
#einwand .eb-prog { display: flex; gap: 8px; margin-top: 18px; }
#einwand .eb-prog i { width: 22px; height: 2px; border-radius: 2px; background: rgba(243,238,228,0.22); transition: background 500ms var(--eb-ease), width 700ms var(--eb-ease); }
#einwand .eb-prog i.is-lit { background: var(--eb-gold); }
#einwand .eb-prog i.is-cur { width: 40px; }

#einwand .eb-tl { position: relative; margin-top: 22px; }
#einwand .eb-tl-line { position: absolute; left: 5px; right: 0; top: 5px; height: 1px; background: var(--eb-line); }
#einwand .eb-tl-fill { position: absolute; left: 5px; top: 5px; width: 0; height: 1px; background: var(--eb-gold); }
#einwand .eb-tl-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
#einwand .eb-st { position: relative; padding-top: 28px; opacity: 0.26; transition: opacity 700ms var(--eb-ease); }
#einwand .eb-st.is-on { opacity: 1; }
#einwand .eb-st::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: #14110D; box-shadow: inset 0 0 0 1px var(--eb-gold); transition: background 500ms; }
#einwand .eb-st.is-on::before { background: var(--eb-gold); }
#einwand .eb-when { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eb-goldt); }
#einwand .eb-what { margin: 8px 0; font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 25px); line-height: 1.24; color: var(--eb-fg); }
#einwand .eb-what em { font-style: italic; color: var(--eb-goldt); }
#einwand .eb-bd { margin: 0; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.7; color: var(--eb-mute); text-wrap: pretty; }
#einwand .eb-bd strong { font-weight: 400; font-style: italic; color: var(--eb-fg); }

#einwand .eb-rule { height: 1px; background: var(--eb-gold); margin-bottom: clamp(16px, 2.6vh, 26px); transform-origin: left center; }
#einwand .eb-act .eb-rule.eb-s { transform: scaleX(0); }
#einwand .eb-act.is-on .eb-rule.eb-s { transform: scaleX(1); transition: transform 1300ms var(--eb-ease), opacity 400ms; }
#einwand .eb-story { margin: 0; max-width: 62ch; font-family: var(--font-display); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.82; color: var(--eb-fg); text-wrap: pretty; }
#einwand .eb-story::first-letter { float: left; font-weight: 700; font-size: 3.3em; line-height: 0.82; padding: 0.06em 0.14em 0 0; color: var(--eb-goldt); }
::highlight(eb-dim) { color: rgba(243, 238, 228, 0.24); }
#einwand .eb-foot { margin-top: clamp(16px, 2.6vh, 26px); display: flex; align-items: baseline; gap: 14px 32px; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--eb-ease), transform 900ms var(--eb-ease); }
#einwand .eb-foot.is-shown { opacity: 1; transform: none; }
#einwand .eb-lnk { display: inline-flex; gap: 10px; flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eb-goldt); text-decoration: none; border-bottom: 1px solid var(--eb-gold); padding-bottom: 4px; transition: gap 400ms var(--eb-ease), color 400ms; }
#einwand .eb-lnk:hover { gap: 16px; color: #F3EEE4; }
#einwand .eb-fine { margin: 0; max-width: 56ch; font-size: 12.5px; line-height: 1.72; color: var(--eb-mute); }

#einwand .eb-cue { position: absolute; right: clamp(16px, 3vw, 40px); bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--eb-goldt); transition: opacity 600ms var(--eb-ease); pointer-events: none; }
#einwand .eb-cue i { position: relative; display: block; width: 1px; height: 36px; overflow: hidden; background: var(--eb-line); }
#einwand .eb-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--eb-gold); animation: ebCue 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
#einwand .eb-cue.is-off { opacity: 0; }
@keyframes ebCue { 0% { top: -40%; } 100% { top: 100%; } }

/* ── Tablet ───────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1180px) {
  #einwand .eb-pos { left: clamp(28px, 5vw, 56px); right: clamp(28px, 5vw, 56px); bottom: clamp(40px, 6vh, 72px); max-width: 720px; }
  #einwand .eb-pull { font-size: clamp(44px, 7.4vw, 76px); }
  #einwand .eb-line2 { font-size: clamp(30px, 5vw, 48px); }
  #einwand .eb-story { font-size: 16px; line-height: 1.78; }
  #einwand .eb-lab span { font-size: 15px; }
}
/* ── Smartphone ───────────────────────────────────────── */
@media (max-width: 760px) {
  #einwand .eb-pos { left: 20px; right: 20px; bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px)); }
  #einwand .eb-kick { font-size: 10px; }
  #einwand .eb-frage { font-size: 16px; margin: 12px 0 14px; }
  #einwand .eb-pull { font-size: clamp(30px, 9.6vw, 46px); }
  #einwand .eb-line2 { font-size: clamp(28px, 8.4vw, 38px); }
  #einwand .eb-prog { margin-top: 14px; }
  #einwand .eb-tl-line { left: 5px; right: auto; top: 5px; bottom: 0; width: 1px; height: auto; }
  #einwand .eb-tl-fill { left: 5px; top: 5px; width: 1px; height: 0; }
  #einwand .eb-tl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #einwand .eb-st { padding: 0 0 0 26px; }
  #einwand .eb-what { margin: 4px 0; }
  #einwand .eb-story { font-size: 14px; line-height: 1.72; }
  #einwand .eb-fine { font-size: 12px; }
  #einwand .eb-lab { padding: 10px 14px 11px; }
  #einwand .eb-lab span { font-size: 13px; }
  #einwand .eb-cue { right: 16px; }
}
/* ── Smartphone quer und niedrige Fenster ─────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  #einwand .eb-pos { bottom: 18px; max-width: 70%; }
  #einwand .eb-pull { font-size: clamp(26px, 8vh, 40px); }
  #einwand .eb-frage { font-size: 14px; margin: 8px 0 10px; }
  #einwand .eb-line2 { font-size: 26px; }
  #einwand .eb-tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  #einwand .eb-tl-line { left: 5px; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
  #einwand .eb-st { padding: 22px 0 0; }
  #einwand .eb-bd { font-size: 12px; line-height: 1.5; }
  #einwand .eb-what { font-size: 15px; }
  #einwand .eb-story { font-size: 12.5px; line-height: 1.55; columns: 2; column-gap: 28px; max-width: none; }
  #einwand .eb-fine { font-size: 11px; line-height: 1.5; }
  #einwand .eb-rule { margin-bottom: 10px; }
  #einwand .eb-cue { display: none; }
}
@media (max-height: 640px) and (min-width: 761px) {
  #einwand .eb-story { font-size: 14px; line-height: 1.7; }
  #einwand .eb-pull { font-size: clamp(30px, 8vh, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  #einwand .eb-act, #einwand .eb-act .eb-s, #einwand .eb-act .eb-wipe, #einwand .eb-st, #einwand .eb-img, #einwand .eb-foot { transition: none !important; }
  #einwand .eb-cue i::after { animation: none; }
}

/* Längere Pille: darf auf zwei Zeilen umbrechen, damit sie die Nachbarn nicht berührt */
#einwand .eb-lab.eb-lab-2z { white-space: normal; }
#einwand .eb-lab.eb-lab-2z span { display: block; white-space: normal; max-width: 14ch; text-align: center; line-height: 1.25; text-wrap: balance; }

#einwand .eb-hs.eb-hs-weg { opacity: 0 !important; pointer-events: none; transition: opacity 180ms ease !important; }