/* ============================================================
   IMMOCODEX — Empfehlungsprogramm V2
   Farbebene (Warm/Cool Silver, Kupfer-Statementflächen) + Bildslots.
   Lädt NACH immocodex-empfehlung.css, gilt nur für die V2-Seite.
   ============================================================ */

/* ── Neue Bandflächen ────────────────────────────────────── */
.bg-cool { background: var(--cool-silver); }
.bg-cool + .band, .band + .bg-cool { border-top: none; }

/* ── Full-bleed Bildstreifen ─────────────────────────────── */
.strip { background: var(--leinen); padding: clamp(56px,7vw,104px) 0; }
.strip .sgrid { display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: clamp(24px,4vw,56px); }
.strip .scopy { max-width: 24ch; }
.strip .scopy .ey { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.strip .scopy .rule { width: 46px; height: 2px; background: var(--accent); margin: 18px 0 20px; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s; }
.strip.in .scopy .rule { transform: scaleX(1); }
.strip .scopy .tx { font-size: clamp(26px,3.1vw,44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.14; color: var(--espresso); }
.strip .scopy .ey, .strip .scopy .tx { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.strip.in .scopy .ey, .strip.in .scopy .tx { opacity: 1; transform: none; }
.strip .scopy .tx { transition-delay: .1s; }
.strip .cell { position: relative; overflow: hidden; aspect-ratio: 5/4; border-radius: 6px; margin-left: clamp(-64px,-4vw,0px); box-shadow: 0 2px 18px rgba(42,31,20,.10); }
.strip .cell image-slot { position: absolute; inset: -4%; animation: stripPan 14s ease-in-out infinite alternate; }
@keyframes stripPan { from { transform: scale(1.03); } to { transform: scale(1.11) translate3d(1%,-1%,0); } }
@media (max-width: 860px) {
  .strip .sgrid { grid-template-columns: 1fr; gap: 30px; }
  .strip .scopy { max-width: none; }
  .strip .cell { margin-left: 0; aspect-ratio: 4/3; }
}
@media (prefers-reduced-motion: reduce) { .strip .cell image-slot { animation: none; } .strip .scopy .ey, .strip .scopy .tx { opacity: 1; transform: none; } .strip .scopy .rule { transform: scaleX(1); } }

/* ── Hero: wärmere Karte ─────────────────────────────────── */
.rw-card { background: linear-gradient(180deg, var(--color-copper-tint, #F9F0E8) 0%, var(--white) 46%); }
.rw-card .opt.alt .v { color: var(--accent); }

/* ── Belohnung: Kupfer-Statementkarte ───────────────────── */
.band.bg-tint { background: var(--color-copper-tint, #F9F0E8); }
.rw2.feat { background: var(--accent); border-color: var(--accent); border-left-color: var(--accent-dark); color: var(--creme); }
.rw2.feat h3, .rw2.feat .claim, .rw2.feat li, .rw2.feat li b { color: var(--creme); }
.rw2.feat .claim { color: color-mix(in srgb, var(--creme) 88%, var(--accent)); }
.rw2.feat .tag { color: var(--creme); border-color: color-mix(in srgb, var(--creme) 55%, transparent); }
.rw2.feat li svg { color: var(--creme); }
.rw2.feat .txt { color: color-mix(in srgb, var(--creme) 86%, var(--accent)); border-top-color: color-mix(in srgb, var(--creme) 30%, transparent); }
.rw2.feat .txt b { color: var(--white); }
.rw2 { background: var(--white); }

/* ── Statusstufen: Metallnuancen statt Zahlen ───────────── */
.tier .cnt { display: none; }
.mtl { display: flex; flex-direction: column; gap: 12px; }
.mtl .bar { width: 62px; height: 5px; border-radius: 4px; }
.mtl .nm { font-size: clamp(24px,2.4vw,30px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1; margin-top: 0; }
.tier .nm { margin-top: 0; }
.mtl.bronze .bar { background: var(--accent-dark); }
.mtl.bronze .nm { color: var(--accent-dark); }
.mtl.silber .bar { background: linear-gradient(90deg, var(--cool-silver), var(--warm-silver)); }
.mtl.silber .nm { color: color-mix(in srgb, var(--cool-silver) 58%, var(--espresso)); }
.mtl.gold .bar { background: var(--accent); }
.mtl.gold .nm { color: var(--accent); }
.mtl.platin .bar { background: var(--creme); }
.mtl.platin .nm { color: var(--white); }
.tier .thr { margin-top: 14px; }

/* ── Statusstufen: Farbverlauf über die Stufen ──────────── */
.tier:nth-of-type(1) { background: var(--white); }
.tier:nth-of-type(2) { background: color-mix(in srgb, var(--leinen) 62%, var(--white)); }
.tier:nth-of-type(3) { background: color-mix(in srgb, var(--warm-silver) 46%, var(--white)); border-color: color-mix(in srgb, var(--espresso) 12%, transparent); }
.tier.top { background: var(--accent); border-color: var(--accent); border-left-color: var(--accent-dark); }
.tier.top h3, .tier.top li, .tier.top li b, .tier.top .nm, .tier.top .think { color: var(--creme); }
.tier.top .thr { color: color-mix(in srgb, var(--creme) 82%, var(--accent)); }
.tier.top li svg { color: var(--creme); }
.tier.top .lbl, .tier.top .think span { color: color-mix(in srgb, var(--creme) 78%, var(--accent)); }
.tier.top .think { border-left-color: var(--creme); }
.tier.top .cnt { background: var(--white); border-color: var(--white); color: var(--accent-dark); }
.tier.top .bonus { background: color-mix(in srgb, var(--creme) 16%, transparent); border-color: color-mix(in srgb, var(--creme) 48%, transparent); color: var(--creme); }
.tier:nth-of-type(4) .cnt { background: var(--white); border-color: var(--white); color: var(--accent-dark); }
.tier.top .mtl .nm { color: var(--white); }

/* Hero-Leiter mit Metallnuancen */
.rw-card .steps4 span:nth-child(1)::before { background: var(--accent-dark); opacity: 1; }
.rw-card .steps4 span:nth-child(2)::before { background: linear-gradient(90deg, var(--cool-silver), var(--warm-silver)); opacity: 1; }
.rw-card .steps4 span:nth-child(3)::before { background: var(--accent); opacity: 1; }
.rw-card .steps4 span:nth-child(4)::before { background: color-mix(in srgb, var(--warm-silver) 40%, var(--espresso)); opacity: 1; }
.rw-card .steps4 span { letter-spacing: .1em; }
.rw-card .steps4 span em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--sand); margin-top: 2px; }

/* ── Vorteile auf Cool Silver + Bildspalte ──────────────── */
.bg-cool .section-head p, .bg-cool .advitem .r p, .bg-cool .advitem .l .kick { color: color-mix(in srgb, var(--espresso) 74%, var(--cool-silver)); }
.bg-cool .advitem { border-top-color: color-mix(in srgb, var(--espresso) 16%, transparent); grid-template-columns: 268px 1fr 300px; gap: 42px; align-items: start; }
.bg-cool .advitem:last-child { border-bottom-color: color-mix(in srgb, var(--espresso) 16%, transparent); }
.advitem .pic { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-md); }
.advitem .pic image-slot { position: absolute; inset: 0; }
.bg-cool .advitem .r .win p { color: var(--espresso); }
@media (max-width: 1080px) { .bg-cool .advitem { grid-template-columns: 1fr 1fr; } .bg-cool .advitem .pic { grid-column: 1 / -1; aspect-ratio: 16 / 7; } }
@media (max-width: 860px) { .bg-cool .advitem { grid-template-columns: 1fr; } }

/* ── Beispielrechnung 3 als Kupferkarte ─────────────────── */
.sc.top { background: var(--accent); border-color: var(--accent); border-left-color: var(--accent-dark); }
.sc.top h3, .sc.top .desc b, .sc.top .r.base .k, .sc.top .r.base .v, .sc.top .total { color: var(--creme); }
.sc.top .ey { color: color-mix(in srgb, var(--creme) 80%, var(--accent)); }
.sc.top .desc, .sc.top .after, .sc.top .r .k, .sc.top .total small { color: color-mix(in srgb, var(--creme) 84%, var(--accent)); }
.sc.top .r .v { color: var(--creme); }
.sc.top .rows, .sc.top .r { border-color: color-mix(in srgb, var(--creme) 28%, transparent); }

/* ── Video-Band ─────────────────────────────────────────── */
.band.vidband { background: color-mix(in srgb, var(--warm-silver) 68%, var(--creme)); }
.vidband .section-head p { color: color-mix(in srgb, var(--espresso) 74%, var(--warm-silver)); }
.vid .frame { border: none; background: var(--leinen); }
.vid .frame image-slot { position: absolute; inset: 0; }
.vid .frame .veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 30px; background: rgba(149,96,37,.48); pointer-events: none; }
.vid .frame .veil .t { color: #fff; }
.vid .frame .veil .s { color: var(--color-copper-tint, #F9F0E8); }
.vid .cap { color: var(--mid); }

/* ── Team kompakt ───────────────────────────────────────── */
.teamlite { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; align-items: stretch; }
.tl { background: var(--white); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.tl .pf { position: relative; aspect-ratio: 4 / 5; width: 100%; flex: 0 0 auto; background: var(--color-copper-tint, #F9F0E8); }
.tl .pf image-slot { position: absolute; inset: 0; }
.tl .pf::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -60px 60px -60px rgba(42,31,20,.10); }
.tl .bd { padding: 22px 24px 24px; border-top: 3px solid var(--accent); display: flex; flex-direction: column; flex: 1 1 auto; }
.tl .contact { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.tl .spec { margin-top: 8px; margin-bottom: 16px; font-size: 14px; color: var(--mid); line-height: 1.5; }
.tl .role { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); line-height: 1.5; }
.tl h4 { margin-top: 7px; font-size: 18.5px; font-weight: 800; letter-spacing: -0.018em; }
.tl .spec { font-size: 14px; color: var(--mid); line-height: 1.5; }
.tl .contact a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--espresso); text-decoration: none; }
.tl .contact a:hover { color: var(--accent-dark); }
.tl .contact a svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 880px) { .teamlite { grid-template-columns: 1fr; } .tl { display: grid; grid-template-columns: 160px 1fr; } .tl .pf { aspect-ratio: 4 / 5; } .tl .bd { border-top: none; border-left: 3px solid var(--accent); } }

/* ── Abschluss: Kupfer-Statementkarte ───────────────────── */
.close-card { background: var(--accent); border-radius: 12px; padding: clamp(48px,5.4vw,76px) clamp(32px,4vw,64px); box-shadow: var(--shadow-md); }
.close-card .close-head h2, .close-card .close-head p { color: var(--creme); }
.close-card .close-head p { opacity: .9; }
.close-card .close-head p.punch { opacity: 1; color: var(--white); }
.close-card .eyebrow { color: var(--color-copper-tint, #F9F0E8); }
.close-card .eyebrow .ln { background: color-mix(in srgb, var(--creme) 52%, transparent); }
.close-card .eyebrow .no { color: var(--creme); }
.close-card .btn--primary { background: var(--white); color: var(--accent-dark); }
.close-card .btn--primary:hover { background: var(--creme); color: var(--accent-dark); }
.close-card .hero-link { color: var(--creme); }
.close-card .hero-link:hover { color: var(--white); }
.close-card .close-contact { color: var(--creme); opacity: .86; border-top-color: color-mix(in srgb, var(--creme) 32%, transparent); }