/* ============================================================================
   SH_UPGRADE_V1 — Zusatz-Komponenten (Aufwertungs-Runde):
   • Trust-Siegel-Band (.trust-band)      — Vertrauen/Sicherheit auf einen Blick
   • Miete-vs-Eigentum-Vergleich (.cost-compare) — Kosten-Argument mit Zahlen
   Nutzt die bestehenden Design-Tokens (--ion, --olive-t, --blue, --soft, --line …).
   ========================================================================== */

/* ---- Trust-Siegel-Band ---- */
.trust-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,30,38,.42),rgba(15,21,26,.42));padding:24px 0}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 36px}
.trust-item{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.03em;color:var(--soft)}
.trust-item svg{width:21px;height:21px;flex:0 0 auto;stroke:var(--ion);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-item b{color:var(--text);font-weight:400;white-space:nowrap}
@media(max-width:700px){.trust-row{gap:13px 22px}.trust-item{font-size:11.5px;gap:9px}
  .trust-item svg{width:18px;height:18px}}

/* ---- Miete vs. Eigentum ---- */
.cost-compare{padding:clamp(64px,8vw,120px) 0}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);margin-top:clamp(34px,5vw,52px)}
.cc-card{position:relative;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px);
  background:linear-gradient(160deg,#141c24,#0f1720);overflow:hidden}
.cc-card.own{border-color:rgba(169,219,245,.35);box-shadow:0 0 0 1px rgba(169,219,245,.12),0 24px 60px -30px rgba(169,219,245,.35)}
.cc-card.own::before{content:"";position:absolute;inset:-40% 40% auto -10%;height:280px;
  background:radial-gradient(closest-side,rgba(74,110,150,.4),transparent);filter:blur(46px);pointer-events:none}
.cc-card>*{position:relative;z-index:1}
.cc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.cc-card.own .cc-tag{color:var(--ion)}
.cc-sum{font-family:var(--disp);font-size:clamp(32px,4.4vw,50px);font-weight:600;color:var(--white);
  letter-spacing:-.02em;line-height:1;margin:10px 0 0}
.cc-sub{color:var(--soft);font-size:14.5px;line-height:1.5;margin-top:12px;max-width:30rem}
.cc-bar{height:12px;border-radius:8px;margin-top:22px;background:rgba(201,210,218,.1);overflow:hidden}
.cc-bar span{display:block;height:100%;border-radius:8px}
.cc-card.rent .cc-bar span{background:linear-gradient(90deg,#7a5a3e,#c0663f)}
.cc-card.own .cc-bar span{background:linear-gradient(90deg,var(--blue),var(--ion))}
.cc-verdict{text-align:center;margin:clamp(30px,4vw,44px) auto 0;max-width:44rem;
  font-family:var(--disp);font-size:clamp(19px,2.3vw,28px);font-weight:600;line-height:1.3;color:var(--white);letter-spacing:-.01em}
.cc-verdict b{color:var(--olive-t)}
@media(max-width:640px){.cc-grid{grid-template-columns:1fr}}

/* ---- Mobil-Feinschliff ---- */
/* Footer-Links umbrechen statt abschneiden (waren auf schmalen Screens zu breit) */
.foot-links{flex-wrap:wrap}
@media(max-width:600px){.foot-links{gap:12px 20px}}

/* ---- Mobile-Navigation (Hamburger) ---- */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:11px;background:rgba(22,30,38,.5);color:var(--text);cursor:pointer;padding:0}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;width:19px;height:2px;
  background:currentColor;border-radius:2px}
.nav-burger span{position:relative}
.nav-burger span::before{position:absolute;left:0;top:-6px}
.nav-burger span::after{position:absolute;left:0;top:6px}
@media(max-width:980px){.nav-burger{display:inline-flex}}
.nav-menu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center;
  padding:96px clamp(24px,7vw,40px) max(40px,env(safe-area-inset-bottom));
  background:rgba(11,16,21,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.nav-menu.open{opacity:1;visibility:visible}
.nav-menu .nm-link{font-family:var(--disp);font-size:clamp(24px,7vw,30px);font-weight:600;color:var(--white);
  letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.nav-menu .nm-link:active{color:var(--ion)}
.nav-menu .nm-cta{margin-top:28px;justify-content:center;font-size:14px}
.nav-menu__close{position:absolute;top:max(18px,env(safe-area-inset-top));right:clamp(20px,5vw,32px);
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:11px;
  background:rgba(22,30,38,.5);color:var(--text);cursor:pointer;font-size:20px;line-height:1}

/* ---- Video-Lightbox (2-Min-Erklärvideo mit Ton) ---- */
.vmodal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px;
  background:rgba(5,8,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vmodal.open{display:grid}
.vmodal__stage{display:grid;place-items:center;width:100%;height:100%}
.vmodal__video{max-width:min(460px,92vw);max-height:88vh;width:auto;height:auto;border-radius:16px;
  background:#000;box-shadow:0 40px 120px -30px rgba(0,0,0,.85)}
.vmodal__close{position:absolute;top:max(18px,env(safe-area-inset-top));right:clamp(18px,4vw,32px);
  width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;
  background:rgba(22,30,38,.6);color:var(--text);cursor:pointer;font-size:20px;line-height:1;z-index:1}
.vmodal__close:hover{color:var(--white);border-color:var(--ion)}
/* Play-Icon im Video-Button */
.film__btn .play-ic{display:inline-block;font-size:12px;transform:translateY(0)}

/* ============ SH_FOLD_V1 — aufklappbare Preisliste + Add-ons (#packages .stf) ============ */
.stf-fold{display:block}
.stf-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-right:24px;transition:background .3s}
.stf-fold>summary::-webkit-details-marker{display:none}
.stf-fold>summary:hover{background:rgba(169,219,245,.04)}
.stf-fold>summary .stf-h{padding-bottom:20px}
.stf-fold>summary .stf-h p{margin-bottom:0}
.stf-chev{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ion);transition:transform .35s var(--ease),background .3s,box-shadow .3s}
.stf-chev svg{width:18px;height:18px}
.stf-fold>summary:hover .stf-chev{background:rgba(169,219,245,.10);box-shadow:0 0 18px -6px rgba(169,219,245,.5)}
.stf-fold[open] .stf-chev{transform:rotate(180deg);background:rgba(169,219,245,.08)}
.stf-fold[open]>summary{border-bottom:1px solid var(--line)}
.stf-body{animation:stfBodyIn .5s var(--ease)}
@keyframes stfBodyIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.stf-addons{padding:26px 26px 26px;border-top:1px solid var(--line);margin-top:22px}
.stf-addons .stf-h{padding:0 0 14px}
.stf-fold .addon-cell{border:1px solid transparent;border-radius:12px;transition:transform .3s var(--ease),background .3s,border-color .3s}
.stf-fold .addon-cell:hover{transform:translateY(-4px);background:rgba(169,219,245,.05);border-color:rgba(169,219,245,.28)}
@media(max-width:620px){
  .stf-fold>summary{padding-right:16px}
  .stf-chev{width:34px;height:34px}
  .stf-addons{padding:20px 16px}
  .stf-fold .addon-grid{grid-template-columns:1fr}
  .stf-fold .addon-cell:not(:first-child)::before{display:none}
}