/* ============================================================
   IMMOCODEX — Hero A · Farbtöne & Schrift-Varianten
   body[data-tone] · body[data-type]
   ============================================================ */

/* Ton-Definitionen: --hbg Fläche, --hink Schriftfarbe, --hacc Zweitfarbe */
body { --hbg: var(--accent-dark); --hink: var(--creme); --hink2: #FFFFFF; --hacc: var(--color-copper-tint, #F9F0E8); --hbtn-bg: #FFFFFF; --hbtn-ink: var(--accent-dark); --hdark: 1; }
body[data-tone="kupfer"] { --hbg: var(--accent); --hink: var(--creme); --hink2: #FFFFFF; --hacc: var(--color-copper-tint, #F9F0E8); --hbtn-bg: #FFFFFF; --hbtn-ink: var(--accent-dark); --hdark: 1; }
body[data-tone="kupferdunkel"] { --hbg: var(--accent-dark); --hink: var(--creme); --hink2: #FFFFFF; --hacc: var(--color-copper-tint, #F9F0E8); --hbtn-bg: #FFFFFF; --hbtn-ink: var(--accent-dark); --hdark: 1; }
body[data-tone="sandstein"] { --hbg: var(--sandstein); --hink: color-mix(in srgb, var(--accent-dark) 72%, var(--espresso)); --hink2: var(--espresso); --hacc: color-mix(in srgb, var(--accent-dark) 86%, var(--espresso)); --hbtn-bg: var(--accent-dark); --hbtn-ink: #FFFFFF; --hdark: 0; }
body[data-tone="warmsilber"] { --hbg: var(--warm-silver); --hink: color-mix(in srgb, var(--accent-dark) 74%, var(--espresso)); --hink2: var(--espresso); --hacc: color-mix(in srgb, var(--accent-dark) 86%, var(--espresso)); --hbtn-bg: var(--accent-dark); --hbtn-ink: #FFFFFF; --hdark: 0; }
body[data-tone="coolsilber"] { --hbg: var(--cool-silver); --hink: color-mix(in srgb, var(--accent-dark) 74%, var(--espresso)); --hink2: var(--espresso); --hacc: color-mix(in srgb, var(--accent-dark) 86%, var(--espresso)); --hbtn-bg: var(--accent-dark); --hbtn-ink: #FFFFFF; --hdark: 0; }
body[data-tone="creme"] { --hbg: var(--creme); --hink: var(--accent-dark); --hink2: color-mix(in srgb, var(--accent-dark) 52%, var(--espresso)); --hacc: var(--accent); --hbtn-bg: var(--accent); --hbtn-ink: #FFFFFF; --hdark: 0; }
body[data-tone="tint"] { --hbg: var(--color-copper-tint, #F9F0E8); --hink: var(--accent-dark); --hink2: color-mix(in srgb, var(--accent-dark) 52%, var(--espresso)); --hacc: var(--accent); --hbtn-bg: var(--accent); --hbtn-ink: #FFFFFF; --hdark: 0; }

/* Hero A auf Ton-Token umgestellt */
.hero-buehne { background: var(--hbg); color: var(--hink); }
.hero-buehne .bgrid { background-image: linear-gradient(to right, color-mix(in srgb, var(--hink) 14%, transparent) 1px, transparent 1px); }
.hero-buehne .eyebrow { color: var(--hink); }
.hero-buehne .eyebrow .ln { background: color-mix(in srgb, var(--hink) 45%, transparent); }
.hero-buehne .eyebrow .no { color: var(--hink2); }
.hero-buehne h1 { color: var(--hink); }
.hero-buehne h1 em { color: var(--hink2); }
.hero-buehne .sub { color: color-mix(in srgb, var(--hink) 88%, var(--hbg)); }
.hero-buehne .sub b { color: var(--hink2); }
.hero-buehne .plates, .hero-buehne .actions { border-top-color: color-mix(in srgb, var(--hink) 30%, transparent); }
.hero-buehne .plate + .plate { border-left-color: color-mix(in srgb, var(--hink) 30%, transparent); }
.hero-buehne .plate .k { color: color-mix(in srgb, var(--hink) 72%, var(--hbg)); }
.hero-buehne .plate .v { color: var(--hink2); }
.hero-buehne .plate .d { color: color-mix(in srgb, var(--hink) 86%, var(--hbg)); }
.hero-buehne .btn--primary { background: var(--hbtn-bg); color: var(--hbtn-ink); }
.hero-buehne .btn--primary:hover { background: color-mix(in srgb, var(--hbtn-bg) 88%, var(--espresso)); color: var(--hbtn-ink); }

/* Header übernimmt den Hero-Ton */
body[data-hero="buehne"][data-navmatch="on"] .hero-buehne { padding-top: clamp(46px,6svh,84px); }

/* Schrift-Varianten der Headline */
body[data-type="mono"] .hero-buehne h1 em { color: var(--hink); }
body[data-type="zwei"] .hero-buehne h1 em { color: var(--hink2); }
body[data-type="akzent"] .hero-buehne h1 em { color: var(--hacc); }
body[data-type="akzent"] .hero-buehne h1 { font-weight: 800; }
body[data-type="kontur"] .hero-buehne h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--hink2); }
body[data-type="kontur"] .hero-buehne .plate .v { color: transparent; -webkit-text-stroke: 1.5px var(--hink2); }
body[data-type="serif"] .hero-buehne h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -0.03em; }
body[data-type="serif"] .hero-buehne h1 em { font-style: italic; color: var(--hacc); }

/* ══════ Ton-Tokens für Hero B / C / D ═════════════════════ */

/* B · Vollbild-Foto */
.hero-foto { background: var(--hbg); }
.hero-foto .scrim { background: linear-gradient(100deg, color-mix(in srgb, var(--hbg) 92%, transparent) 0%, color-mix(in srgb, var(--hbg) 82%, transparent) 30%, color-mix(in srgb, var(--hbg) 52%, transparent) 52%, color-mix(in srgb, var(--hbg) 16%, transparent) 74%, transparent 92%); }
.hero-foto h1 { color: var(--hink); }
.hero-foto h1 span.ul { box-shadow: inset 0 -0.1em 0 var(--hacc); }
.hero-foto .eyebrow { color: var(--hacc); }
.hero-foto .eyebrow .ln { background: color-mix(in srgb, var(--hink) 50%, transparent); }
.hero-foto .sub { color: color-mix(in srgb, var(--hink) 90%, var(--hbg)); }
.hero-foto .sub b { color: var(--hink2); }
.hero-foto .actions .btn--primary { background: var(--hbtn-bg); color: var(--hbtn-ink); }
.hero-foto .hero-link { color: var(--hink); }
.hero-foto .hero-link:hover { color: var(--hink2); }
.hero-foto .bar { border-top-color: var(--accent); }
@media (max-width: 860px) {
  .hero-foto .scrim { background: linear-gradient(to bottom, color-mix(in srgb, var(--hbg) 18%, transparent) 0%, color-mix(in srgb, var(--hbg) 58%, transparent) 38%, color-mix(in srgb, var(--hbg) 90%, transparent) 66%, var(--hbg) 100%); }
}

/* C · Ticket */
.hero-ticket { background: var(--hbg); }
.hero-ticket h1 { color: var(--hink); }
.hero-ticket h1 .ul { box-shadow: inset 0 -0.1em 0 var(--hacc); }
.hero-ticket .vlabel { color: color-mix(in srgb, var(--hink) 66%, var(--hbg)); border-left: 1px solid color-mix(in srgb, var(--hink) 24%, transparent); }
.hero-ticket .sub { color: color-mix(in srgb, var(--hink) 78%, var(--hbg)); }
.hero-ticket .sub b { color: var(--hink); }
.hero-ticket .micro { color: color-mix(in srgb, var(--hink) 62%, var(--hbg)); }
.hero-ticket .actions .btn--primary { background: var(--hbtn-bg); color: var(--hbtn-ink); }
.hero-ticket .hero-link { color: color-mix(in srgb, var(--hink) 82%, var(--hbg)); }
.hero-ticket .ticket .perf::before, .hero-ticket .ticket .perf::after { background: var(--hbg); }

/* D · Split (bisher) */
.emp-hero { background: var(--hbg); }
.emp-hero .dots { background-image: radial-gradient(color-mix(in srgb, var(--hink) 34%, transparent) 1.4px, transparent 1.4px); }
.emp-hero-copy h1 { color: var(--hink); }
.emp-hero-copy h1 .ul { box-shadow: inset 0 -0.09em 0 var(--hacc); }
.emp-hero-copy .sub { color: color-mix(in srgb, var(--hink) 78%, var(--hbg)); }
.emp-hero-copy .sub b { color: var(--hink); }
.emp-hero-copy .micro { color: color-mix(in srgb, var(--hink) 62%, var(--hbg)); }
.emp-hero-copy .actions .btn--primary { background: var(--hbtn-bg); color: var(--hbtn-ink); }
.emp-hero-copy .hero-link { color: color-mix(in srgb, var(--hink) 82%, var(--hbg)); }

/* Header übernimmt den Ton in allen Hero-Varianten */
body[data-navmatch="on"] .nav { background: var(--hbg); border-bottom-color: color-mix(in srgb, var(--hink) 22%, transparent); }
body[data-navmatch="on"] .nav .nav-link { color: color-mix(in srgb, var(--hink) 88%, var(--hbg)); }
body[data-navmatch="on"] .nav .nav-link:hover { color: var(--hink2); }
body[data-navmatch="on"] .nav .btn--primary { background: var(--hbtn-bg); color: var(--hbtn-ink); }
body[data-navmatch="on"][data-tonedark="1"] .nav .logo { filter: brightness(0) invert(1); }

/* Schrift-Varianten auch in B / C / D */
body[data-type="mono"] .hero-foto .sub b, body[data-type="mono"] .emp-hero-copy h1 .ul, body[data-type="mono"] .hero-ticket h1 .ul, body[data-type="mono"] .hero-foto h1 span.ul { box-shadow: none; color: inherit; }
body[data-type="akzent"] .hero-foto h1 span.ul, body[data-type="akzent"] .hero-ticket h1 .ul, body[data-type="akzent"] .emp-hero-copy h1 .ul { box-shadow: none; color: var(--hacc); }
body[data-type="kontur"] .hero-foto h1 span.ul, body[data-type="kontur"] .hero-ticket h1 .ul, body[data-type="kontur"] .emp-hero-copy h1 .ul { box-shadow: none; color: transparent; -webkit-text-stroke: 1.5px var(--hink); }
body[data-type="serif"] .hero-foto h1, body[data-type="serif"] .hero-ticket h1, body[data-type="serif"] .emp-hero-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -0.03em; }
body[data-type="serif"] .hero-foto h1 span.ul, body[data-type="serif"] .hero-ticket h1 .ul, body[data-type="serif"] .emp-hero-copy h1 .ul { box-shadow: none; font-style: italic; color: var(--hacc); }

/* ── Schritte kompakt: 3 + 2 Raster ───────────────── */
.steps { margin-top: 46px; display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--line-soft); }
.step { display: block; grid-column: span 2; padding: 28px 30px 30px 0; border-top: none; border-bottom: 1px solid var(--line-soft); }
.step:last-of-type { border-bottom: 1px solid var(--line-soft); }
.step:nth-of-type(4), .step:nth-of-type(5) { grid-column: span 3; }
.step + .step { border-left: 1px solid var(--line-soft); padding-left: 30px; }
.step:nth-of-type(4) { border-left: none; padding-left: 0; }
.step .no { padding-top: 0; }
.step h4 { margin-top: 12px; font-size: clamp(17px,1.4vw,20px); }
.step p { font-size: 15px; max-width: 46ch; }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step, .step:nth-of-type(4), .step:nth-of-type(5) { grid-column: span 1; }
  .step:nth-child(odd) { border-left: none; padding-left: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 26px; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step:nth-child(even) { border-left: none; padding: 22px 0 24px; }
}

/* Weiße Headline-Variante (alle Heros) */
body[data-type="weiss"] .hero-buehne h1, body[data-type="weiss"] .hero-foto h1, body[data-type="weiss"] .hero-ticket h1, body[data-type="weiss"] .emp-hero-copy h1 { color: #B87333; }
body[data-type="weiss"] .hero-buehne h1 em, body[data-type="weiss"] .hero-foto h1 span.ul, body[data-type="weiss"] .hero-ticket h1 .ul, body[data-type="weiss"] .emp-hero-copy h1 .ul { box-shadow: none; color: color-mix(in srgb, #B87333 55%, var(--hbg)); }

/* Umschalter: zweite Reihe für Ton + Schrift */
.heropick { flex-wrap: wrap; max-width: min(92vw, 460px); }
.heropick .sep { width: 1px; height: 22px; background: var(--line-soft); margin: 0 2px; }
.heropick .tone { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(42,31,20,.18); padding: 0; cursor: pointer; }
.heropick .tone.on { box-shadow: 0 0 0 2px var(--accent); }
.heropick .type { width: auto; padding: 0 10px; height: 26px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Logo im Header: Kupfer auf hellen Tönen, Weiß auf dunklen */
.nav .logo-copper { display: none; }
/* Weißes Logo auf allen kräftigen Tönen, Kupfer nur auf Creme/Tint */
body[data-navmatch="on"][data-tone="kupfer"] .nav .logo-dark,
body[data-navmatch="on"][data-tone="kupferdunkel"] .nav .logo-dark,
body[data-navmatch="on"][data-tonedark="0"] .nav .logo-dark { display: none; }
body[data-navmatch="on"][data-tonedark="0"] .nav .logo-copper { display: block; }

/* Lesbarkeit auf hellen Flächen: Fließtext dunkel, nicht Richtung Grund gemischt */
body[data-tonedark="0"] .hero-buehne .sub, body[data-tonedark="0"] .hero-foto .sub,
body[data-tonedark="0"] .hero-ticket .sub, body[data-tonedark="0"] .emp-hero-copy .sub { color: color-mix(in srgb, var(--espresso) 88%, var(--accent-dark)); }
body[data-tonedark="0"] .hero-ticket .micro, body[data-tonedark="0"] .emp-hero-copy .micro,
body[data-tonedark="0"] .hero-ticket .vlabel { color: color-mix(in srgb, var(--espresso) 74%, var(--accent-dark)); }
body[data-tonedark="0"] .hero-buehne .plate .k, body[data-tonedark="0"] .hero-buehne .plate .d,
body[data-tonedark="0"] .hero-foto .bar .k { color: color-mix(in srgb, var(--espresso) 80%, var(--accent-dark)); }
body[data-tonedark="0"] .hero-buehne .eyebrow, body[data-tonedark="0"] .hero-foto .eyebrow,
body[data-navmatch="on"][data-tonedark="0"] .nav .nav-link { color: color-mix(in srgb, var(--espresso) 78%, var(--accent-dark)); }
body[data-navmatch="on"][data-tonedark="0"] .nav .nav-link:hover { color: var(--accent-dark); }
/* Logo: dunkles Braun auf hellen Tönen, Kupfer nur auf Creme / Kupfer-Tint */
body[data-navmatch="on"][data-tonedark="0"] .nav .logo-dark { display: none; }
body[data-navmatch="on"][data-tonedark="0"] .nav .logo-copper { display: block; filter: brightness(.66) saturate(1.2); }
body[data-navmatch="on"][data-tone="creme"] .nav .logo-copper, body[data-navmatch="on"][data-tone="tint"] .nav .logo-copper { filter: none; }