/* ===== Warm-Dramaturgie (portiert aus warm.css, 24.07.2026) ===== */
.prob, .tease { --bg:#000; --fg:#f5f5f7; --fg-soft:#86868b; --warm:#d2d2d7;
  --line:rgba(255,255,255,.09); --maxw:1180px; --ease:cubic-bezier(.28,.11,.32,1); color:var(--fg); }
/* ============ 4 · PROBLEM — mobil Vollbild + Overlay, Desktop nebeneinander ============ */
.prob { position:relative; background:var(--bg); }
@media (max-width:1024px) {
  .prob { min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
  .prob__media { position:absolute; inset:0; padding:0; }
  .prob__media img { width:100%; height:100%; object-fit:cover; object-position:62% 50%; border:none; }
  .prob__media::after { content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.66) 68%, rgba(0,0,0,.95) 100%); }
  .prob__text { position:relative; z-index:2; padding:0 clamp(22px,5.5vw,52px) clamp(56px,9vh,100px); margin:0; }
}
.prob__head { font-size:clamp(1.7rem,5.4vw,2.7rem); font-weight:300; line-height:1.14; letter-spacing:-.01em; }
.prob__body { margin-top:1em; color:rgba(245,245,247,.82); font-size:clamp(1rem,2.5vw,1.18rem); max-width:52ch; line-height:1.6; }
@media (min-width:1025px) {
  .prob { display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); align-items:center;
    max-width:var(--maxw); margin-inline:auto; gap:clamp(28px,4vw,56px); padding:clamp(80px,13vh,160px) 52px; }
  .prob__media { padding:0; }
  .prob__media img { width:100%; border:1px solid var(--line); }
  .prob__body { color:var(--fg-soft); }
}

/* ============ 6 · TEASER ============ */
.tease { position:relative; min-height:92svh; overflow:hidden; display:flex; align-items:flex-end; }
.tease__media { position:absolute; inset:0; }
.tease__media img { width:100%; height:100%; object-fit:cover; }
.tease__veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,10,9,.25) 0%, rgba(11,10,9,.1) 38%, rgba(11,10,9,.72) 72%, rgba(11,10,9,.96) 100%); }
.tease__content { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 clamp(22px,5.5vw,52px) clamp(64px,11vh,120px); }
.tease__mech { font-size:clamp(1rem,2.5vw,1.2rem); color:rgba(245,245,247,.85); max-width:44ch;
  margin-bottom:.9em; line-height:1.5; }
.tease__line { font-size:clamp(1.8rem,5.6vw,3.4rem); font-weight:300; line-height:1.14; letter-spacing:-.012em; max-width:22ch; }
.tease__line em { font-style:normal; color:var(--warm); }
.tease__hint { margin-top:2.2em; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(243,239,232,.55); }


.w-eyebrow{ font-size:clamp(.7rem,1.4vw,.8rem); letter-spacing:.24em; text-transform:uppercase;
  color:#d2d2d7; font-weight:600; margin-bottom:1em; }
.pull{ margin-top:clamp(28px,5vh,46px); font-size:clamp(.92rem,2.2vw,1.05rem); color:#d2d2d7;
  display:inline-flex; align-items:center; gap:.6em; background:none; border:none;
  font-weight:400; cursor:pointer; padding:.5em 0; font-family:inherit; }
.pull::after{ content:"↓"; font-size:1.1em; }
@keyframes pullnudge{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
.pull:hover::after{ animation:pullnudge 1.4s infinite; }