/* ============================================================
   IMMOCODEX — Empfehlungsprogramm V2 · Hero-Varianten
   Geschaltet über body[data-hero]: buehne | foto | ticket | aktuell
   ============================================================ */

.heroalt { display: none; }
body[data-hero="buehne"] #hero-buehne,
body[data-hero="ticket"] #hero-ticket { display: block; }
body[data-hero="foto"] #hero-foto { display: flex; }
body[data-hero="aktuell"] #hero { display: flex; }
body:not([data-hero="aktuell"]) #hero { display: none; }

/* ══════════ A · KUPFER-BÜHNE ══════════════════════════════ */
.hero-buehne { background: var(--accent-dark); color: var(--creme); padding: clamp(64px,9svh,110px) 0 0; overflow: hidden; }
.hero-buehne .bgrid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(245,239,230,.12) 1px, transparent 1px); background-size: 12.5% 100%; pointer-events: none; }
.hero-buehne .wrap { position: relative; z-index: 2; }
.hero-buehne .eyebrow { color: var(--creme); }
.hero-buehne .eyebrow .ln { background: rgba(245,239,230,.45); }
.hero-buehne .eyebrow .no { color: var(--white); }
.hero-buehne h1 { margin-top: 26px; font-size: clamp(40px,6.4vw,96px); font-weight: 900; line-height: .96; letter-spacing: -0.042em; max-width: 17ch; text-wrap: balance; }
.hero-buehne h1 em { font-style: normal; color: var(--white); }
.hero-buehne .sub { margin-top: 28px; font-size: clamp(16px,1.25vw,19.5px); line-height: 1.6; color: rgba(245,239,230,.88); max-width: 52ch; }
.hero-buehne .sub b { color: var(--white); font-weight: 700; }
.hero-buehne .plates { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(34px,5svh,54px); border-top: 1px solid rgba(245,239,230,.32); }
.hero-buehne .plate { padding: 32px 0 34px; }
.hero-buehne .plate + .plate { padding-left: 40px; border-left: 1px solid rgba(245,239,230,.32); }
.hero-buehne .plate .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,239,230,.72); }
.hero-buehne .plate .v { margin-top: 12px; font-size: clamp(36px,4.4vw,62px); font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.hero-buehne .plate .d { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(245,239,230,.86); max-width: 30ch; }
.hero-buehne .actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 30px 0 clamp(34px,6svh,64px); border-top: 1px solid rgba(245,239,230,.32); }
.hero-buehne .btn--primary { background: var(--white); color: var(--accent-dark); }
.hero-buehne .btn--primary:hover { background: var(--creme); color: var(--accent-dark); }
.hero-buehne .hero-link { color: var(--creme); }
.hero-buehne .hero-link:hover { color: var(--white); }
.hero-buehne .rail { display: flex; gap: 0; border-top: 1px solid rgba(245,239,230,.32); }
.hero-buehne .rail div { flex: 1; padding: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,239,230,.9); }
.hero-buehne .rail div + div { padding-left: 26px; border-left: 1px solid rgba(245,239,230,.2); }
.hero-buehne .rail div::before { content: ""; height: 4px; border-radius: 4px; background: rgba(245,239,230,.34); }
.hero-buehne .rail div:nth-child(1)::before { background: color-mix(in srgb, var(--espresso) 42%, var(--accent)); }
.hero-buehne .rail div:nth-child(2)::before { background: var(--cool-silver); }
.hero-buehne .rail div:nth-child(3)::before { background: var(--color-copper-tint, #F9F0E8); }
.hero-buehne .rail div:nth-child(4)::before { background: var(--white); }
.hero-buehne .rail div span { font-size: 10px; letter-spacing: .1em; color: rgba(245,239,230,.62); }
@media (max-width: 760px) {
  .hero-buehne .plates { grid-template-columns: 1fr; }
  .hero-buehne .plate + .plate { padding-left: 0; border-left: none; border-top: 1px solid rgba(245,239,230,.32); }
  .hero-buehne .rail { flex-wrap: wrap; }
  .hero-buehne .rail div { flex: 1 1 42%; }
  .hero-buehne .rail div + div { padding-left: 0; border-left: none; }
}

/* ══════════ B · VOLLBILD-FOTO ═════════════════════════════ */
.hero-foto { position: relative; padding: 0; background: var(--accent-dark); min-height: calc(100svh - var(--nav-h)); flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-foto image-slot { position: absolute; inset: 0; }
.hero-foto .softblur { position: absolute; inset: 0; backdrop-filter: blur(7px) saturate(.92); -webkit-backdrop-filter: blur(7px) saturate(.92); -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 38%, rgba(0,0,0,.55) 58%, transparent 76%); mask-image: linear-gradient(100deg, #000 0%, #000 38%, rgba(0,0,0,.55) 58%, transparent 76%); pointer-events: none; }
.hero-foto .scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(149,96,37,.92) 0%, rgba(149,96,37,.82) 30%, rgba(149,96,37,.52) 52%, rgba(149,96,37,.16) 74%, rgba(149,96,37,0) 92%); pointer-events: none; }
.hero-foto .fcopy { position: relative; z-index: 3; padding: clamp(70px,11svh,140px) 0 clamp(40px,6svh,64px); pointer-events: none; max-width: 58%; }
.hero-foto .fcopy a { pointer-events: auto; }
.hero-foto .eyebrow { color: var(--color-copper-tint, #F9F0E8); }
.hero-foto .eyebrow .ln { background: color-mix(in srgb, var(--hink) 50%, transparent); }
.hero-foto h1 { margin-top: 24px; font-size: clamp(38px,5.4vw,80px); font-weight: 900; line-height: 1.0; letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; }
.hero-foto h1 span.ul { box-shadow: inset 0 -0.1em 0 var(--accent); }
.hero-foto .sub { margin-top: 24px; font-size: clamp(16px,1.2vw,19px); line-height: 1.6; max-width: 50ch; }
.hero-foto .sub b { font-weight: 700; }
.hero-foto .actions { margin-top: 32px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero-foto .bar { position: relative; z-index: 3; background: var(--creme); border-top: 3px solid var(--accent); }
.hero-foto .bar-in { display: grid; grid-template-columns: 1fr 1fr 1.25fr; }
.hero-foto .bar .cell { padding: 26px 0 28px; }
.hero-foto .bar .cell + .cell { padding-left: 34px; border-left: 1px solid var(--line-soft); }
.hero-foto .bar .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.hero-foto .bar .v { margin-top: 9px; font-size: clamp(26px,2.9vw,38px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--espresso); font-variant-numeric: tabular-nums; }
.hero-foto .bar .d { margin-top: 8px; font-size: 13.5px; color: var(--mid); line-height: 1.5; max-width: 28ch; }
.hero-foto .bar .chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hero-foto .bar .chips b { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 7px 12px; border-radius: 5px; }
.hero-foto .bar .chips b:nth-child(1) { background: var(--accent-dark); color: var(--creme); }
.hero-foto .bar .chips b:nth-child(2) { background: var(--cool-silver); color: var(--espresso); }
.hero-foto .bar .chips b:nth-child(3) { background: var(--accent); color: var(--creme); }
.hero-foto .bar .chips b:nth-child(4) { background: var(--warm-silver); color: var(--espresso); }
@media (max-width: 1100px) { .hero-foto .fcopy { max-width: 76%; } }
@media (max-width: 860px) {
  .hero-foto .softblur { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 34%, #000 52%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 34%, #000 52%); }
  .hero-foto .scrim { background: linear-gradient(to bottom, rgba(149,96,37,.18) 0%, rgba(149,96,37,.58) 38%, rgba(149,96,37,.90) 66%, var(--accent-dark) 100%); }
  .hero-foto .fcopy { max-width: none; padding-top: 38vh; }
  .hero-foto .bar-in { grid-template-columns: 1fr; }
  .hero-foto .bar .cell + .cell { padding-left: 0; border-left: none; border-top: 1px solid var(--line-soft); }
}

/* ══════════ C · TICKET / EDITORIAL ════════════════════════ */
.hero-ticket { padding: clamp(56px,8svh,96px) 0; }
.hero-ticket .tgrid { display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(0,.82fr); gap: clamp(28px,3.4vw,58px); align-items: center; }
.hero-ticket .vlabel { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; padding-left: 14px; }
.hero-ticket h1 { font-size: clamp(34px,4.2vw,62px); font-weight: 800; line-height: 1.02; letter-spacing: -0.038em; max-width: 18ch; text-wrap: balance; }
.hero-ticket .sub { margin-top: 22px; font-size: clamp(15.5px,1.15vw,18px); line-height: 1.62; max-width: 46ch; }
.hero-ticket .sub b { font-weight: 700; }
.hero-ticket .actions { margin-top: 30px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero-ticket .micro { color: color-mix(in srgb, var(--hink) 62%, var(--hbg)); }
.hero-ticket .ticket { position: relative; background: var(--white); border-radius: 10px; box-shadow: 0 18px 44px rgba(42,31,20,.16); overflow: hidden; }
.hero-ticket .ticket .th { padding: 20px 34px; background: var(--accent); color: var(--creme); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; }
.hero-ticket .ticket .th span:last-child { color: var(--white); }
.hero-ticket .ticket .num { padding: 34px 34px 30px; }
.hero-ticket .ticket .num .v { font-size: clamp(52px,6.4vw,88px); font-weight: 900; letter-spacing: -0.055em; line-height: .9; color: var(--espresso); font-variant-numeric: tabular-nums; }
.hero-ticket .ticket .num.hi .v { color: var(--accent); }
.hero-ticket .ticket .num .k { margin-top: 12px; font-size: 14.5px; color: var(--mid); line-height: 1.5; max-width: 32ch; }
.hero-ticket .ticket .perf { position: relative; height: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 42%, transparent); }
.hero-ticket .ticket .perf::before, .hero-ticket .ticket .perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; }
.hero-ticket .ticket .perf::before { left: -13px; }
.hero-ticket .ticket .perf::after { right: -13px; }
.hero-ticket .ticket .oder { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); padding: 16px 0 0; }
.hero-ticket .ticket .tf { margin-top: 6px; padding: 20px 34px 26px; border-top: 1px solid var(--line-soft); display: flex; gap: 7px; }
.hero-ticket .ticket .tf i { flex: 1; height: 5px; border-radius: 4px; }
.hero-ticket .ticket .tf i:nth-child(1) { background: var(--accent-dark); }
.hero-ticket .ticket .tf i:nth-child(2) { background: var(--cool-silver); }
.hero-ticket .ticket .tf i:nth-child(3) { background: var(--accent); }
.hero-ticket .ticket .tf i:nth-child(4) { background: color-mix(in srgb, var(--warm-silver) 62%, var(--espresso)); }
.hero-ticket .ticket .tfl { padding: 0 34px 26px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); display: flex; justify-content: space-between; }
@media (max-width: 980px) { .hero-ticket .tgrid { grid-template-columns: 1fr; } .hero-ticket .vlabel { writing-mode: horizontal-tb; transform: none; border-left: none; padding-left: 0; letter-spacing: .2em; } }

/* Tweaks-Panel-Root darf das Layout nicht beeinflussen */
#tweaks-root { position: relative; z-index: 60; }

/* ── Sichtbarer Varianten-Umschalter (nur Review) ─────── */
.heropick { position: fixed; left: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(255,255,255,.94); border: 1px solid var(--line-soft); border-radius: 999px; box-shadow: 0 6px 20px rgba(42,31,20,.14); backdrop-filter: blur(6px); }
.heropick .lbl { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); padding: 0 4px 0 6px; }
.heropick button { width: 30px; height: 30px; border: 1px solid var(--line-soft); border-radius: 50%; background: transparent; color: var(--espresso); font: 700 12px/1 var(--font); letter-spacing: .02em; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.heropick button:hover { border-color: var(--accent); color: var(--accent-dark); }
.heropick button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media print { .heropick { display: none; } }
@media (max-width: 560px) { .heropick { left: 12px; bottom: 12px; padding: 6px 8px; } .heropick button { width: 34px; height: 34px; } }