/* ============================================================
   IMMOCODEX — Empfehlungsprogramm V2 · Nürnberg-Motive,
   Animation, Laptop/Mobile-Feinschliff
   ============================================================ */

:root { --sandstein: #C9A98C; }

/* ── Sandsteinquader: Fugenband am oberen Bandrand ─────── */
.sandstein { position: relative; }
.sandstein::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none; opacity: .14;
  background-image:
    linear-gradient(to bottom, var(--sandstein) 1px, transparent 1px),
    linear-gradient(to right, var(--sandstein) 1px, transparent 1px);
  background-size: 100% 36px, 156px 36px; }
.sandstein > .wrap { position: relative; z-index: 2; }
body[data-nbg="off"] .sandstein::before { display: none; }

/* ── Skyline-Hairline ───────────────────────────────────── */
.skyband { background: var(--creme); padding: 0 0 6px; overflow: hidden; position: relative; }
.skyband::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 12%, transparent), transparent); opacity: 0; transition: opacity 1.6s ease .5s; pointer-events: none; }
.skyband.in::before { opacity: 1; }
.skycap { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.skyband.in .skycap { opacity: 1; transform: none; }
.skyline { display: block; width: 100%; height: auto; position: relative; }
body[data-nbg="off"] .skyband { display: none; }
.skyband .wrap { padding-top: 42px; }
.skyline { position: relative; }
.skyline path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.skyline .sky-draw { stroke-dasharray: 4200; stroke-dashoffset: 4200; }
.skyband.in .skyline .sky-draw { animation: skydraw 2.6s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes skydraw { to { stroke-dashoffset: 0; } }
.skycap { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 0 0 34px; }
.skycap .t { font-size: clamp(17px,1.6vw,21px); font-weight: 800; letter-spacing: -0.015em; max-width: 34ch; }
.skycap .s { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .skyband.in .skyline .sky-draw { animation: none; stroke-dashoffset: 0; } }

/* ── Sandsteinton als Akzent in der Statusleiter ────────── */
.tier:nth-of-type(2) { background: color-mix(in srgb, var(--sandstein) 20%, var(--white)); }
.mtl.silber .bar { background: linear-gradient(90deg, var(--cool-silver), var(--warm-silver)); }

/* ── Animation: gestaffelte Reveals ─────────────────────── */
.reveal > .step, .reveal .rw2, .reveal .sc, .reveal .tl, .reveal .teamlite > *,
.rw-grid.reveal > *, .sc-grid.reveal > *, .teamlite.reveal > * { transition: opacity .6s ease, transform .6s ease; }
.rw-grid.reveal > *, .sc-grid.reveal > *, .teamlite.reveal > * { opacity: 0; transform: translateY(14px); }
body[data-fade="off"] .rw-grid.reveal > *, body[data-fade="off"] .sc-grid.reveal > *, body[data-fade="off"] .teamlite.reveal > * { opacity: 1; transform: none; }
.rw-grid.reveal.in > *, .sc-grid.reveal.in > *, .teamlite.reveal.in > * { opacity: 1; transform: none; }
.rw-grid.reveal.in > :nth-child(2), .sc-grid.reveal.in > :nth-child(2), .teamlite.reveal.in > :nth-child(2) { transition-delay: .09s; }
.sc-grid.reveal.in > :nth-child(3), .teamlite.reveal.in > :nth-child(3) { transition-delay: .18s; }
.tier { transition: box-shadow .3s ease, transform .3s ease; }
.tier:hover { box-shadow: var(--shadow-md); }
.mtl .bar { transform-origin: left center; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.tier.reveal .mtl .bar { transform: scaleX(.2); }
.tier.reveal.in .mtl .bar { transform: scaleX(1); }
.hero-buehne .rail div::before { transform-origin: left center; animation: railgrow .8s cubic-bezier(.22,.61,.36,1) both; }
.hero-buehne .rail div:nth-child(2)::before { animation-delay: .12s; }
.hero-buehne .rail div:nth-child(3)::before { animation-delay: .24s; }
.hero-buehne .rail div:nth-child(4)::before { animation-delay: .36s; }
@keyframes railgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-buehne .rail div::before { animation: none; } .tier.reveal .mtl .bar { transform: none; } }

/* ── Laptop-Feinschliff (1280–1024) ─────────────────────── */
@media (max-width: 1280px) {
  .band { padding: 96px 0; }
  .tier { grid-template-columns: 222px 1fr; gap: 34px; padding: 32px 34px; }
  .advitem { gap: 34px; }
}
@media (max-width: 1024px) {
  .band { padding: 78px 0; }
  .wrap { padding: 0 32px; }
  .rw2 { padding: 32px 30px; }
  .sc { padding: 28px 26px; }
}

/* ── Mobil (≤760) ───────────────────────────────────────── */
@media (max-width: 760px) {
  .band { padding: 58px 0; }
  .wrap { padding: 0 20px; }
  .nav-inner { gap: 14px; }
  .nav-menu { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-menu .nav-link { white-space: nowrap; }
  .nav-menu .btn { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .btn--lg { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .faq-q { min-height: 52px; }
  .tl .contact a { min-height: 44px; align-items: center; }
  .section-head h2 { font-size: clamp(25px,7vw,32px); }
  .lede p, .advitem .r p { font-size: 16px; }
  .rw2, .tier, .sc, .plus, .note { padding: 26px 22px; }
  .note { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 22px 0; }
  .skycap { padding-bottom: 24px; }
  .close-card { padding: 40px 24px; }
  .close-actions { flex-direction: column; align-items: stretch; }
  .close-actions .btn { width: 100%; }
  .close-actions .hero-link { justify-content: center; }
  .emp-hero-copy .actions .btn, .hero-buehne .actions .btn, .hero-foto .actions .btn, .hero-ticket .actions .btn { width: 100%; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 420px) {
  .rw-card { padding: 26px 22px; }
  .rw-card .steps4 { grid-template-columns: repeat(2,1fr); gap: 14px 12px; }
  .hero-ticket .ticket .num { padding: 26px 24px 22px; }
  .hero-ticket .ticket .th, .hero-ticket .ticket .tf, .hero-ticket .ticket .tfl { padding-left: 24px; padding-right: 24px; }
}