/* Vorschau-Erweiterungen der Warteliste (nur per URL-Parameter aktiv). Logik: ki-masterclass-extras.js */

/* ---------- Garantie ---------- */
.xg { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; letter-spacing: -0.28px; color: var(--text-56); text-align: left; }
.xg strong { color: var(--black); font-weight: 500; }
.xg > svg { width: 1.375rem; height: 1.375rem; color: var(--green); flex: none; }
.xg-1 { justify-content: center; max-width: 30rem; }
.xg.on-dark { color: var(--white-48); } .xg.on-dark strong { color: var(--white); } .xg.on-dark > svg { color: var(--teal-light); }
.xg-2 { position: relative; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.125rem 1.25rem; border: 1px dashed #193f3b29; background: var(--white); width: 100%; max-width: 30rem; }
.xg-2 .corner-ticks { position: absolute; inset: -0.063rem; pointer-events: none; } .xg-2 .corner-ticks img { position: absolute; width: 0.563rem; }
.xg-2 .corner-ticks .tl { top: 0; left: 0; } .xg-2 .corner-ticks .bl { bottom: 0; left: 0; } .xg-2 .corner-ticks .tr { top: 0; right: 0; transform: scaleX(-1); } .xg-2 .corner-ticks .br { bottom: 0; right: 0; transform: scaleX(-1); }
.xg-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; } .xg-head svg { width: 1.25rem; height: 1.25rem; color: var(--green); }
.xg-list { display: flex; flex-direction: column; gap: 0.5rem; } .xg-list .pv-check { font-size: 0.875rem; }
.xg-3 { gap: 1rem; padding: 0.875rem 1.125rem; border-radius: 0.75rem; background: var(--gray-section); max-width: 30rem; line-height: 1.4; }
.xg-seal { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 100%; background: var(--green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.xg-seal svg { display: none; } .xg-seal b { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 1.375rem; } .xg-seal small { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Mentor ---------- */
.xa { background: var(--gray-section); padding: 5rem 0; }
.xa-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: center; }
.xa-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 30px 60px -30px rgba(12,22,21,.35); }
.xa-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.xa-copy .h2 { text-align: left; }
.xa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; margin-top: 0.5rem; }
.xa-stats > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0 0; border-top: 1px solid #0c161529; }
.xa-stats b { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--green); }
.xa-stats span { font-size: 0.8125rem; color: var(--text-56); letter-spacing: -0.26px; }
.xa-2 { background: var(--white); }
.xa-portrait img { width: 7.5rem; height: 7.5rem; border-radius: 100%; object-fit: cover; box-shadow: 0 20px 40px -20px rgba(12,22,21,.4); }
.xa-sign { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; } .xa-sign strong { font-weight: 500; } .xa-sign span { font-size: 0.875rem; color: var(--text-56); }
.xa-3 { background: var(--white); padding: 3rem 0 5rem; }
.xa-band { position: relative; display: grid; grid-template-columns: 12rem 1fr; gap: 2rem 2.5rem; align-items: start; padding: 2rem; border: 1px dashed #193f3b29; background: var(--white); max-width: 52rem; margin: 0 auto; }
.xa-band .corner-ticks { position: absolute; inset: -0.063rem; pointer-events: none; } .xa-band .corner-ticks img { position: absolute; width: 0.563rem; }
.xa-band .corner-ticks .tl { top: 0; left: 0; } .xa-band .corner-ticks .bl { bottom: 0; left: 0; } .xa-band .corner-ticks .tr { top: 0; right: 0; transform: scaleX(-1); } .xa-band .corner-ticks .br { bottom: 0; right: 0; transform: scaleX(-1); }
.xa-band > img { width: 12rem; height: 15rem; border-radius: 0.75rem; object-fit: cover; object-position: 50% 20%; }
.xa-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }
.xa-list .pv-check { font-size: 0.9375rem; align-items: flex-start; } .xa-list .pv-check svg { margin-top: 0.15rem; }
.xa-band-copy { display: flex; flex-direction: column; gap: 0.625rem; }
.xa-band .xa-stats { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Ergebnis-Beweise ---------- */
.xc { background: var(--white); padding: 2rem 0 5rem; }
.xc-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.5rem; overflow: hidden; } .xc-img img { width: 100%; height: 100%; object-fit: cover; }
.xc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
.xc-b, .xc-a { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem; border-radius: 0.5rem; font-size: 0.875rem; }
.xc-b { background: var(--gray-section); } .xc-a { background: var(--green-4); }
.xc-b span, .xc-a span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--text-56); }
.xc-a span { color: var(--green); } .xc-b strong { font-weight: 500; text-decoration: line-through; text-decoration-color: #b3403f66; color: var(--text-56); } .xc-a strong { font-weight: 500; }
.xc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.xc-tile { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem 1.75rem; border-radius: 0.75rem; border: 1px solid var(--border-gray); background: var(--white); text-align: center; align-items: center; }
.xc-tile b { font-size: 3.5rem; line-height: 1; font-weight: 400; } .xc-tile b .italic-span { font-size: 1em; } .xc-tile span { font-size: 1rem; color: var(--text-56); max-width: 16rem; }
.xc-rows { display: flex; flex-direction: column; width: 100%; max-width: 56rem; margin: 0 auto; border-top: 1px solid var(--border-gray); }
.xc-row { display: grid; grid-template-columns: 1.2fr 1fr auto 1fr; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--border-gray); }
.xc-row-t { font-weight: 500; letter-spacing: -0.3px; }
.xc-row-b, .xc-row-a { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.9375rem; } .xc-row-b { color: var(--text-56); text-decoration: line-through; text-decoration-color: #b3403f66; } .xc-row-a { color: var(--black); font-weight: 500; }
.xc-row-b span, .xc-row-a span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; font-weight: 500; color: var(--text-56); } .xc-row-a span { color: var(--green); }
.xc-arrow { width: 1.25rem; height: 1.25rem; color: var(--green); } .xc-arrow svg { width: 100%; height: 100%; }

/* ---------- Zielgruppen ---------- */
.xz { background: var(--white); padding: 2rem 0 5rem; }
.xz-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; width: 100%; }
.xz-card { border: 1px solid var(--border-gray); border-radius: 0.75rem; overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.xz-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.xz-body { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem 1.25rem; } .xz-body strong { font-weight: 500; letter-spacing: -0.3px; } .xz-body span { font-size: 0.875rem; color: var(--text-56); line-height: 1.4; }
.xz-tabs { width: 100%; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.xz-tablist { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.xz-tablist button { padding: 0.625rem 1rem; border-radius: 2rem; border: 1px solid var(--border-gray); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.3px; transition: all 0.3s; }
.xz-tablist button.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.xz-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; width: 100%; max-width: 60rem; padding: 2rem; border-radius: 0.75rem; background: var(--gray-section); }
.xz-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.xz-panel > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .xz-panel .new-btn { width: auto; max-width: none; }
.xz-list { width: 100%; max-width: 44rem; display: flex; flex-direction: column; }
.xz-item { display: grid; grid-template-columns: 3.5rem 1fr 1.25rem; gap: 1.25rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--border-gray); }
.xz-item:first-child { border-top: 0; } .xz-item img { width: 3.5rem; height: 3.5rem; border-radius: 100%; object-fit: cover; }
.xz-item div { display: flex; flex-direction: column; gap: 0.125rem; } .xz-item strong { font-weight: 500; letter-spacing: -0.3px; } .xz-item span { font-size: 0.9375rem; color: var(--text-56); }
.xz-item > svg { width: 1.25rem; height: 1.25rem; }

/* ---------- FAQ ---------- */
.xf { background: var(--white); padding: 2rem 0 6rem; }
.xf-acc, .xf-min { width: 100%; max-width: 44rem; display: flex; flex-direction: column; }
.xf-item { border-top: 1px solid var(--border-gray); } .xf-acc .xf-item:last-child, .xf-min .xf-item:last-child { border-bottom: 1px solid var(--border-gray); }
.xf-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-align: left; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.45px; }
.xf-q svg { width: 1.25rem; height: 1.25rem; color: var(--text-56); flex: none; transition: transform 0.3s; }
.xf-item.is-open .xf-q svg { transform: rotate(180deg); }
.xf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out-quart); } .xf-a > p { overflow: hidden; margin: 0; padding-bottom: 0; transition: padding-bottom 0.5s var(--ease-out-quart); }
.xf-item.is-open .xf-a { grid-template-rows: 1fr; } .xf-item.is-open .xf-a > p { padding-bottom: 1.25rem; }
.xf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; width: 100%; max-width: 60rem; }
.xf-cell { display: flex; flex-direction: column; gap: 0.5rem; } .xf-cell strong { font-weight: 500; font-size: 1.125rem; letter-spacing: -0.45px; } .xf-cell .card-copy { font-size: 1rem; }
.xf-min .xf-q { justify-content: flex-start; gap: 0.875rem; font-weight: 400; }
.xf-plus { position: relative; width: 1.25rem; height: 1.25rem; flex: none; } .xf-plus::before, .xf-plus::after { content: ''; position: absolute; background: var(--green); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s; }
.xf-plus::before { width: 100%; height: 1.5px; } .xf-plus::after { width: 1.5px; height: 100%; } .xf-item.is-open .xf-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.xf-min .xf-a > p { padding-left: 2.125rem; }

/* ---------- Mikro-Commitment im Popup ---------- */
.xm { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; }
.xm-q { font-size: 1rem; font-weight: 500; letter-spacing: -0.32px; }
.xm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
.xm-chip { padding: 0.875rem 1.25rem; border-radius: 0.5rem; border: 1px solid #0c161529; background: var(--gray-section); font-size: 1rem; font-weight: 500; letter-spacing: -0.32px; color: var(--black); box-shadow: 0 1px 2px rgba(16,53,49,.04); transition: all 0.3s; }
.xm-chip:hover { border-color: var(--green); background: var(--white); transform: translateY(-1px); } .xm-chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.xm-hidden { display: none !important; }
.xm-1.is-done .xm-q, .xm-1.is-done .xm-chip:not(.is-on) { display: none; }
.xm-1.is-done { flex-direction: row; justify-content: center; }
.xm-1.is-done .xm-chip.is-on { padding: 0.5rem 0.875rem; font-size: 0.875rem; border-radius: 2rem; }
.xm-2 .xm-q { font-size: 0.8125rem; color: var(--text-56); font-weight: 400; }
.xm-steps { display: flex; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--text-56); }
.xm-steps span { padding: 0.25rem 0.625rem; border-radius: 2rem; border: 1px solid var(--border-gray); } .xm-steps span.is-on { background: var(--green-4); color: var(--green); border-color: #193f3b29; }

@media (max-width: 991px) {
  .xa-grid { grid-template-columns: 1fr; gap: 2rem; } .xa-media img { aspect-ratio: 4 / 3; }
  .xa-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
  .xa-band { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; } .xa-band > img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .xc-tiles { grid-template-columns: 1fr; } .xc-row { grid-template-columns: 1fr; gap: 0.5rem; } .xc-arrow { display: none; }
  .xz-grid { grid-template-columns: 1fr 1fr; } .xz-panel { grid-template-columns: 1fr; padding: 1.25rem; }
  .xf-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) { .xa { padding: 3.5rem 0; } .xa-stats { grid-template-columns: 1fr; } .xz-grid { grid-template-columns: 1fr; } .xg-2, .xg-3 { max-width: 100%; } .xz-item { grid-template-columns: 3rem 1fr; } .xz-item > svg { display: none; } }

/* ---------- Mentor nach /marketer-Vorbild (?ad=4..7) ---------- */
.xb { background: var(--white); padding: 3rem 0 5rem; }
.xb-card { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(135deg, #1d4640 0%, #143734 60%, #0f2f2c 100%); color: var(--white); min-height: 34rem; }
.xb-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; padding: 3rem 0 3rem 3rem; position: relative; z-index: 1; }
.xb-copy .dk-kicker { color: var(--white-48); }
.xb-name { font-size: 2.75rem; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: var(--white); }
.xb-name .italic-span { font-size: 1em; }
.xb-role { font-size: 1rem; color: #ffffffa3; letter-spacing: -0.32px; }
.xb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
.xb-chip { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.8125rem; letter-spacing: -0.26px; color: var(--white); background-color: #ffffff05; background-image: linear-gradient(160deg, #fff0, #ffffff0a); box-shadow: -1px -1px 0 #fff3, inset -1px -1px #fff3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.xb-copy .card-copy { color: #ffffffa3; font-size: 1rem; max-width: 30rem; }
.xb-stats { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 30rem; padding: 1.125rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--white-16); background: var(--white-4); margin-top: 0.5rem; }
.xb-pt { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; letter-spacing: -0.3px; color: var(--white); line-height: 1.4; }
.xb-pt svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.1rem; }
.xb-logos { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--white-10); margin-top: 0.25rem; }
.xb-logos img { height: 1.5rem; width: auto; opacity: 0.85; filter: brightness(0) invert(1); }
.xb-media { position: relative; min-height: 22rem; }
.xb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.xb-card:not(.is-light) .xb-media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #143734 0%, rgba(20,55,52,0) 35%); pointer-events: none; }
/* 5 hell */
.xb-card.is-light { background: #eef2f1; color: var(--black); }
.xb-card.is-light .xb-name, .xb-card.is-light .xb-pt { color: var(--black); }
.xb-card.is-light .xb-role, .xb-card.is-light .card-copy { color: #0c1615a3; }
.xb-card.is-light .dk-kicker { color: var(--text-56); }
.xb-card.is-light .xb-chip { color: var(--green); background: var(--white); box-shadow: 0 0 0 1px #193f3b1f; }
.xb-card.is-light .xb-stats { background: var(--white); border-color: #193f3b1f; }
.xb-card.is-light .xb-logos { border-top-color: var(--border-gray); } .xb-card.is-light .xb-logos img { filter: none; opacity: 0.8; }
.xb-card.is-light .xb-media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #eef2f1 0%, rgba(238,242,241,0) 30%); pointer-events: none; }
/* 6 Portraet links, Punkte im Raster */
.xb-card.is-flip { grid-template-columns: 0.9fr 1.3fr; }
.xb-card.is-flip .xb-copy { padding: 3rem 3rem 3rem 0; }
.xb-card.is-flip .xb-media::before { background: linear-gradient(270deg, #143734 0%, rgba(20,55,52,0) 35%); }
.xb-stats.is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; max-width: none; }
.xb-stats.is-grid .xb-logos { grid-column: 1 / -1; }
/* 7 vollflaechige Buehne */
.xb-7 { padding: 0; background: #173b39 url('/ki-masterclass-assets/bg-fsm.webp') center top / cover no-repeat; color: var(--white); }
.xb-stage { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: end; min-height: 36rem; }
.xb-stage .xb-copy { padding: 5rem 0 5rem; }
.xb-stage .xb-media { min-height: 30rem; align-self: end; }
.xb-stage .xb-media img { object-position: 50% 10%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
@media (max-width: 991px) {
  .xb-card, .xb-card.is-flip, .xb-stage { grid-template-columns: 1fr; min-height: 0; }
  .xb-copy, .xb-card.is-flip .xb-copy, .xb-stage .xb-copy { padding: 2rem 1.5rem 2rem; order: 2; }
  .xb-media, .xb-stage .xb-media { min-height: 0; aspect-ratio: 4 / 3; order: 1; }
  .xb-card .xb-media::before, .xb-card.is-flip .xb-media::before, .xb-card.is-light .xb-media::before { background: linear-gradient(0deg, #143734 0%, rgba(20,55,52,0) 40%); }
  .xb-card.is-light .xb-media::before { background: linear-gradient(0deg, #eef2f1 0%, rgba(238,242,241,0) 40%); }
  .xb-stage .xb-media img { -webkit-mask-image: none; mask-image: none; }
  .xb-name { font-size: 2.25rem; } .xb-stats.is-grid { grid-template-columns: 1fr; }
}

/* ---------- Mentor, schlank (?ad=8..11) ---------- */
.xmn { background: var(--white); padding: 2.5rem 0 4rem; }
.xmn-card { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; align-items: center; max-width: 50rem; margin: 0 auto; padding: 1.75rem; border-radius: 0.75rem; border: 1px solid var(--border-gray); background: var(--white); }
.xmn-img { width: 11rem; height: 14rem; border-radius: 0.5rem; object-fit: cover; object-position: 50% 15%; }
.xmn-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.xmn-name { font-size: 1.75rem; line-height: 1; letter-spacing: -0.4px; } .xmn-name .italic-span { font-size: 1em; }
.xmn-role { font-size: 0.9375rem; color: var(--text-56); letter-spacing: -0.3px; }
.xmn-copy .card-copy { font-size: 0.9375rem; margin-top: 0.25rem; }
.xmn-pts { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.375rem; }
.xmn-pts .xb-pt { font-size: 0.9375rem; color: var(--black); } .xmn-pts .xb-pt svg { width: 1.125rem; height: 1.125rem; }
.xmn-pts.is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; }
/* 8 dunkel, kompakt */
.xmn.is-dark .xmn-card { background: linear-gradient(135deg, #1d4640, #143734); border-color: transparent; color: var(--white); }
.xmn.is-dark .dk-kicker { color: var(--white-48); } .xmn.is-dark .xmn-role { color: #ffffffa3; } .xmn.is-dark .card-copy { color: #ffffffa3; } .xmn.is-dark .xmn-pts .xb-pt { color: var(--white); }
/* 9 hell, weisse Karte mit Hairline (Standard von .xmn-card) */
/* 10 ohne Karte, Rundbild, Tags */
.xmn-inline { display: grid; grid-template-columns: 7rem 1fr; gap: 1.75rem; align-items: start; max-width: 46rem; margin: 0 auto; }
.xmn-inline .xmn-img { width: 7rem; height: 7rem; border-radius: 100%; object-position: 50% 12%; }
.xmn-inline .xmn-name { font-size: 1.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; }
.xmn-inline .xmn-role { font-family: 'Inter Tight', sans-serif; font-style: normal; font-size: 0.9375rem; }
.xmn-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.375rem; }
.xmn-tags span { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.25rem; background: var(--green-4); color: var(--green); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.26px; }
/* 11 Blue Mist, Punkte im Raster */
.xmn-11 .xmn-card { background: #eef2f1; border-color: #193f3b14; max-width: 56rem; grid-template-columns: 12rem 1fr; }
.xmn-11 .xmn-img { width: 12rem; height: 15rem; }
@media (max-width: 767px) {
  .xmn-card, .xmn-11 .xmn-card, .xmn-inline { grid-template-columns: 1fr; gap: 1.25rem; }
  .xmn-card { padding: 1.25rem; } .xmn-img, .xmn-11 .xmn-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 50% 20%; }
  .xmn-inline .xmn-img { width: 6rem; height: 6rem; aspect-ratio: auto; } .xmn-pts.is-grid { grid-template-columns: 1fr; }
}

/* ---------- Mentor, Blueprint-Abwandlungen (?ad=12..16) ---------- */
.xa-list.is-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; }
.xv-13 .xa-band { grid-template-columns: 14rem 1fr; max-width: 56rem; }
.xv-13 .xa-band > img { width: 14rem; height: 17rem; }
.xv-14 .xa-band { grid-template-columns: 1fr; gap: 1rem; max-width: 52rem; }
.xv-head { display: flex; align-items: center; gap: 1.25rem; }
.xv-head img { width: 5.5rem; height: 5.5rem; border-radius: 100%; object-fit: cover; object-position: 50% 12%; flex: none; }
.xv-head > div { display: flex; flex-direction: column; gap: 0.375rem; }
.xv-full { width: 100%; } .xv-14 .card-copy { font-size: 1rem; max-width: 44rem; }
.xv-15 .xa-band { grid-template-columns: 1fr 12rem; background: #eef2f1; border-color: #193f3b29; }
.xv-15 .xa-band > img { order: 2; }
.xv-16 .xa-band { grid-template-columns: 13rem 1fr; align-items: center; }
.xv-polaroid { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem 0.625rem 0.875rem; background: var(--white); box-shadow: 0 16px 36px -20px rgba(12,22,21,.35), 0 0 0 1px var(--border-gray); transform: rotate(-3deg); width: 12rem; }
.xv-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 0.125rem; }
.xv-polaroid span { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1rem; color: var(--green); text-align: center; }
.xv-quote { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.25rem; color: var(--green); line-height: 1.3; }
@media (max-width: 767px) {
  .xv-13 .xa-band, .xv-15 .xa-band, .xv-16 .xa-band { grid-template-columns: 1fr; }
  .xv-13 .xa-band > img, .xv-15 .xa-band > img { width: 100%; height: auto; aspect-ratio: 4 / 3; order: 0; }
  .xa-list.is-grid { grid-template-columns: 1fr; } .xv-polaroid { width: 11rem; margin: 0 auto; }
}

/* ---------- Mikro-Commitment v2: Kacheln, Fortschritt, Skip (?mc=4..6) ---------- */
.xm-v2 { gap: 0.875rem; }
.xm-prog { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 100%; }
.xm-prog > span:first-child { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--text-56); }
.xm-prog b { color: var(--green); }
.xm-bar { display: block; width: 8rem; height: 0.25rem; border-radius: 1rem; background: var(--green-10); overflow: hidden; }
.xm-bar i { display: block; height: 100%; width: 80%; border-radius: inherit; background: linear-gradient(90deg, #0a6b61, #47c6b9); transition: width 0.6s var(--ease-out-quart); }
.xm-v2.is-step2 .xm-bar i { width: 100%; }
/* Schritt 1: Balken fuellt sich beim Oeffnen des Popups von fast leer auf 80% (fast geschafft) */
@keyframes xmBarFill { from { width: 12%; } to { width: 80%; } }
.wl-popup.is-open .xm-v2:not(.is-step2) .xm-bar i { animation: xmBarFill 0.7s var(--ease-out-quart) both; }
@media (prefers-reduced-motion: reduce) { .wl-popup.is-open .xm-v2:not(.is-step2) .xm-bar i { animation: none; } }
.xm-q-lg { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.45px; text-align: center; }
.xm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; width: 100%; }
.xm-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.xm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 0.75rem; min-height: 4.75rem; border-radius: 0.5rem; border: 1px solid #0c161529; background: var(--white); color: var(--black); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; text-align: center; transition: border-color 0.3s, transform 0.4s, box-shadow 0.4s, background 0.3s; opacity: 0; transform: translateY(6px); animation: xmIn 0.45s var(--ease-out-quart) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes xmIn { to { opacity: 1; transform: none; } }
.xm-grid.is-3 .xm-tile { min-height: 4.25rem; font-size: 0.875rem; padding: 0.75rem 0.5rem; }
.xm-tile-ic { width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--green-4); color: var(--green); display: flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; }
.xm-tile-ic svg { width: 1.125rem; height: 1.125rem; }
.xm-tile-ck { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.125rem; height: 1.125rem; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; }
.xm-tile-ck svg { width: 100%; height: 100%; }
.xm-tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(16,53,49,.35); }
.xm-tile.is-on { background: var(--green); color: #fff; border-color: var(--green); animation: xmPulse 0.45s ease-out; }
.xm-tile.is-on .xm-tile-ic { background: #ffffff1f; color: #fff; }
.xm-tile.is-on .xm-tile-ck { opacity: 1; transform: scale(1); }
.xm-tile.is-on .xm-tile-ck svg rect { fill: #ffffff; } .xm-tile.is-on .xm-tile-ck svg path { stroke: var(--green); }
@keyframes xmPulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.xm-after { display: none; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--green); letter-spacing: -0.3px; }
.xm-skip { font-size: 0.8125rem; color: var(--text-56); letter-spacing: -0.26px; text-decoration: underline; text-decoration-color: #0c161529; text-underline-offset: 3px; transition: color 0.3s; }
.xm-skip:hover { color: var(--black); }
/* Nach der Wahl: Raster einklappen, Bestaetigung zeigen, gewaehlte Rolle als Pille */
.xm-v2.is-done .xm-grid, .xm-v2.is-done .xm-skip, .xm-v2.is-done .xm-q-lg { display: none; }
.xm-v2.is-done .xm-after { display: flex; }
.xm-v2.is-done.is-skipped .xm-after-txt { display: none; }
.xm-v2.is-done .xm-tile.is-on { display: inline-flex !important; flex-direction: row; min-height: 0; padding: 0.4rem 0.75rem 0.4rem 0.4rem; gap: 0.5rem; border-radius: 2rem; font-size: 0.8125rem; animation: none; opacity: 1; transform: none; }
.xm-v2.is-done .xm-grid { display: flex !important; justify-content: center; }
.xm-v2.is-done .xm-tile:not(.is-on) { display: none !important; }
.xm-v2.is-done .xm-tile.is-on .xm-tile-ic { width: 1.5rem; height: 1.5rem; border-radius: 100%; } .xm-v2.is-done .xm-tile.is-on .xm-tile-ic svg { width: 0.875rem; height: 0.875rem; }
.xm-v2.is-done .xm-tile.is-on .xm-tile-ck { display: none; }
@media (prefers-reduced-motion: reduce) { .xm-tile { animation: none; opacity: 1; transform: none; } .xm-tile.is-on { animation: none; } }
@media (max-width: 400px) { .xm-grid.is-3 { grid-template-columns: 1fr 1fr; } }

/* ---------- Mikro-Commitment kompakt (?mc=7..9) ---------- */
.xm-v2.is-compact { gap: 0.625rem; }
.xm-v2.is-compact .xm-prog { gap: 0.25rem; } .xm-v2.is-compact .xm-prog > span:first-child { font-size: 0.6875rem; } .xm-v2.is-compact .xm-bar { width: 6rem; height: 0.1875rem; }
.xm-v2.is-compact .xm-q-lg { font-size: 1rem; }
.xm-v2.is-compact .xm-grid { gap: 0.5rem; }
/* 7 + 8: Icon links, Label rechts, flache Kacheln */
.xm-grid.is-row .xm-tile { flex-direction: row; justify-content: flex-start; gap: 0.5rem; min-height: 0; padding: 0.5rem 0.625rem; font-size: 0.875rem; letter-spacing: 0; text-align: left; }
.xm-grid.is-row .xm-tile-ic { width: 1.625rem; height: 1.625rem; border-radius: 0.375rem; flex: none; } .xm-grid.is-row .xm-tile-ic svg { width: 0.9375rem; height: 0.9375rem; }
.xm-grid.is-row .xm-tile-ck { display: none; }
.xm-grid.is-3.is-row .xm-tile { font-size: 0.8125rem; padding: 0.5rem; }
/* 9: Pillen mit Icon, fliessend */
.xm-grid.is-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.xm-grid.is-pills .xm-tile { flex-direction: row; gap: 0.4rem; min-height: 0; padding: 0.4rem 0.75rem 0.4rem 0.4rem; border-radius: 2rem; font-size: 0.875rem; }
.xm-grid.is-pills .xm-tile-ic { width: 1.5rem; height: 1.5rem; border-radius: 100%; } .xm-grid.is-pills .xm-tile-ic svg { width: 0.875rem; height: 0.875rem; }
.xm-grid.is-pills .xm-tile-ck { display: none; }
.xm-v2.is-compact .xm-skip { font-size: 0.75rem; }
@media (max-width: 400px) { .xm-grid.is-3.is-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Optische Abtrennung des "Was beschreibt dich am besten?"-Blocks (?sep=1..4) ----------
   Grenzt den Mikro-Commitment-Schritt gegen Headline/Copy oben und das E-Mail-Feld unten ab.
   sep-1 zarte Grün-Karte · sep-2 Haarlinien-Band · sep-3 weisse Karte mit Türkis-Akzent · sep-4 eingelassenes Feld */
.xm-sep { box-sizing: border-box; }

/* 1 · Zarte Grün-Tint-Karte (subtil gruppiert) */
.xm-sep-1 { padding: 1.125rem 1.125rem 1rem; border: 1px solid var(--green-10); border-radius: 0.75rem; background: var(--green-4); }

/* 2 · Haarlinien-Band: nur oben/unten eine Linie, sonst transparent (am leichtesten) */
.xm-sep-2 { padding: 1.25rem 0 0.375rem; border-top: 1px solid var(--border-gray); border-bottom: 1px solid var(--border-gray); border-radius: 0; }

/* 3 · Weisse Karte mit Türkis-Akzentlinie oben + weicher Schatten (markiger Look) */
.xm-sep-3 { position: relative; padding: 1.25rem 1.125rem 1rem; border: 1px solid var(--border-gray); border-radius: 0.75rem; background: var(--white); box-shadow: 0 16px 34px -24px rgba(16,53,49,.45); }
.xm-sep-3::before { content: ''; position: absolute; left: 1.125rem; right: 1.125rem; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #61e1d5, #0b655e); }

/* 4 · Eingelassenes graues Feld (klarster Container) */
.xm-sep-4 { padding: 1.125rem 1.125rem 1rem; border-radius: 0.75rem; background: var(--gray-section); border: 1px solid var(--border-gray); box-shadow: inset 0 1px 3px rgba(16,53,49,.05); }

/* Mobil: im Feld Padding/Schrift/Icon der Kacheln knapper, damit lange Labels (z. B. E-Commerce) einzeilig bleiben */
@media (max-width: 430px) {
  .xm-sep-1, .xm-sep-3, .xm-sep-4 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .xm-sep .xm-grid.is-row { gap: 0.4rem; }
  .xm-sep .xm-grid.is-row .xm-tile { padding-left: 0.4rem; padding-right: 0.4rem; gap: 0.4rem; font-size: 0.8125rem; }
  .xm-sep .xm-grid.is-row .xm-tile-ic { width: 1.5rem; height: 1.5rem; }
}

/* ---------- Mentor 17-19: Zitat + Mini-Brief mit Scroll-Reveal (?ad=17..19, Text ?brief=1..4) ---------- */
.xbr-container { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.xbr-quote { max-width: 46rem; text-align: center; }
.xbr-card { position: relative; width: 100%; max-width: 44rem; border: 1px dashed #193f3b29; background: var(--white); padding: 2.75rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.xbr-p { font-size: 1.1875rem; line-height: 1.6; letter-spacing: -0.38px; color: var(--black); }
.xbr-p .w { opacity: 0.16; transition: opacity 0.35s ease; }
.xbr-p .w.on { opacity: 1; }
.xbr-p .w.b { font-weight: 500; background-image: linear-gradient(90deg, #61e1d5, #0b655e); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: opacity 0.35s ease, background-size 0.45s ease; padding-bottom: 2px; }
.xbr-p .w.b.on { background-size: 100% 2px; }
.xbr-close { font-size: 1.1875rem; letter-spacing: -0.38px; color: var(--black); }
.xbr-sign { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 0.25rem; }
.xbr-sign img { height: 4.5rem; width: auto; align-self: flex-start; filter: brightness(0); opacity: 0.85; }
.xbr-sign-name strong { display: block; font-weight: 500; }
.xbr-sign-name span { font-size: 0.875rem; color: var(--text-56); letter-spacing: -0.28px; }
.xbr-about { display: flex; flex-direction: column; gap: 0.875rem; padding-top: 1.25rem; margin-top: 0.5rem; border-top: 1px solid #0c161514; }
.xbr-about .xb-pt + .xb-pt { border-top: 1px solid #0c161514; padding-top: 0.875rem; }
.xbr-18 .xbr-about .xb-pt + .xb-pt { border-top-color: var(--white-10); }
.xbr .xbr-about .xb-pt { color: var(--black); }
/* 18: dunkelgruen, Brief frei stehend */
.xbr-18 { background: #173b39 url('/ki-masterclass-assets/bg-fsm.webp') center top / cover no-repeat; }
.xbr-18 .xbr-quote { color: var(--white); }
.xbr-em .italic-span { color: #82d3cf; }
.xbr-letter { width: 100%; max-width: 42rem; display: flex; flex-direction: column; gap: 1.25rem; }
.xbr-18 .xbr-p, .xbr-18 .xbr-close { color: var(--white); }
.xbr-18 .xbr-p .w { opacity: 0.22; }
.xbr-18 .xbr-p .w.on { opacity: 1; }
.xbr-18 .xbr-sign img { filter: none; opacity: 1; }
.xbr-18 .xbr-sign-name strong { color: var(--white); }
.xbr-18 .xbr-sign-name span { color: var(--white-48); }
.xbr-18 .xbr-about { border-top-color: var(--white-10); }
.xbr-18 .xbr-about .xb-pt { color: var(--white); }
/* 19: Brief links, Profilkarte rechts */
.xbr-19 { background: var(--white); }
.xbr-19 .xbr-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: start; width: 100%; max-width: 62rem; }
.xbr-19 .xbr-card { max-width: none; }
.xbr-profile { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 0.75rem; border: 1px dashed #193f3b29; background: var(--gray-section); padding: 1.5rem; }
.xbr-profile img, .xbr-profile video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; border-radius: 0.5rem; margin-bottom: 0.5rem; }
.xbr-profile .xbr-about { border-top: 0; padding-top: 0.25rem; margin-top: 0; }
@media (max-width: 767px) {
  .xbr-card { padding: 1.75rem 1.25rem; }
  .xbr-p, .xbr-close { font-size: 1.0625rem; }
  .xbr-19 .xbr-grid { grid-template-columns: 1fr; }
  .xbr-profile { position: static; }
}

/* ---------- Abschluss-Sektion Varianten (?fin=1..4) ---------- */
.fin-cta { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.fin-cta .wl-hint { font-size: 0.875rem; color: #ffffffa3; text-align: left; }
/* 1 Zentriert, Steps als drei Karten darunter */
.fin-1 .final-grid { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.fin-1 .final-copy { align-items: center; text-align: center; }
.fin-1 .final-copy .h2, .fin-1 .final-copy .card-copy { max-width: 36rem !important; }
.fin-1 .fin-cta { align-items: center; }
.fin-1 .fin-cta .wl-hint { text-align: center; }
.fin-1 .final-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 2.5rem; max-width: 46rem; text-align: left; }
.fin-1 .final-list .horiz-divider { display: none; }
.fin-1 .final-steps { flex-direction: row; width: 100%; max-width: 64rem; padding: 0; border: 0; background: none; gap: 1.25rem; order: 0; }
.fin-1 .fstep, .fin-1 .fstep + .fstep { flex: 1; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.5rem; border: 1px solid var(--white-10); border-radius: 0.75rem; background: var(--white-4); }
/* 2 Steps als Timeline oben, Copy zentriert darunter */
.fin-2 .final-grid { display: flex; flex-direction: column; align-items: center; gap: 3.5rem; }
.fin-2 .final-steps { flex-direction: row; width: 100%; max-width: 64rem; border: 0; background: none; padding: 0; gap: 2.5rem; order: 0; }
.fin-2 .fstep, .fin-2 .fstep + .fstep { flex: 1; flex-direction: column; gap: 0.75rem; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--white-10); }
.fin-2 .fstep .step-num { width: auto; font-size: 2.25rem; padding-top: 0; }
.fin-2 .final-copy { align-items: center; text-align: center; }
.fin-2 .final-copy .h2, .fin-2 .final-copy .card-copy { max-width: 36rem !important; }
.fin-2 .fin-cta { align-items: center; }
.fin-2 .fin-cta .wl-hint { text-align: center; }
.fin-2 .final-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 2.5rem; max-width: 46rem; text-align: left; }
.fin-2 .final-list .horiz-divider { display: none; }
/* 3 Zwei eigenstaendige Boxen: Copy weiss, Steps im Gruen-Glas */
.fin-3 .final-grid { gap: 2rem; }
.fin-3 .final-copy { background: var(--white); border-radius: 0.75rem; padding: 3rem; }
.fin-3 .final-steps { border-radius: 0.75rem; padding: 0.25rem 2rem; }
.fin-3 .final-copy .h2 { color: var(--black); }
.fin-3 .final-copy .h2 .italic-span { background-image: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.08em 0.05em 0.02em; }
.fin-3 .final-copy .card-copy.on-dark-copy { color: var(--text-56); }
.fin-3 .final-copy .glass-chip { color: var(--green); border-color: #19353129; background: #1935310a; }
.fin-3 .final-list .ck-row { color: var(--black); }
.fin-3 .final-list .fsm-ck .bg { fill: #193F3B; fill-opacity: .06; }
.fin-3 .final-list .fsm-ck .ick { stroke: #0a6b61; }
.fin-3 .final-list .ck-row.is-on .fsm-ck .bg { fill: #0a6b61; fill-opacity: 1; }
.fin-3 .final-list .ck-row.is-on .fsm-ck .ick { stroke: #fff; }
.fin-3 .final-list .horiz-divider { background: var(--border-gray); }
.fin-3 .fin-cta .wl-hint { color: var(--text-56); }
.fin-3 .fin-right { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.fin-img img { width: 100%; height: auto; display: block; }
.fin-img-desktop { background: var(--white); border-radius: 0.75rem; overflow: hidden; padding: 1.25rem; }
.fin-img-mobile { display: none; }
@media (max-width: 991px) {
  .fin-img-desktop { display: none; }
  .fin-3 .fin-img-mobile { display: block; margin-top: 0.5rem; }
}
/* 4 Minimal: zentriert, Steps als kompakte Zeile */
.fin-4 .final-grid { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.fin-4 .final-copy { align-items: center; text-align: center; gap: 1.5rem; }
.fin-4 .final-copy .h2, .fin-4 .final-copy .card-copy { max-width: 36rem !important; }
.fin-4 .fin-cta { align-items: center; }
.fin-4 .fin-cta .wl-hint { text-align: center; }
.fin-4 .final-list { display: none; }
.fin-4 .final-steps { flex-direction: row; align-items: center; border: 0; background: none; padding: 0; gap: 1rem; order: 0; }
.fin-4 .fstep, .fin-4 .fstep + .fstep { padding: 0; border: 0; align-items: center; gap: 0.625rem; }
.fin-4 .fstep + .fstep::before { content: ''; width: 2rem; height: 1px; background: var(--white-10); margin-right: 1rem; flex: none; }
.fin-4 .fstep .card-copy { display: none; }
.fin-4 .fstep .step-num { width: auto; font-size: 0.8125rem; padding: 0.3rem 0.6rem; border: 1px solid var(--white-10); border-radius: 2rem; line-height: 1; }
.fin-4 .fstep .title-lg { font-size: 1rem; letter-spacing: -0.3px; }
.fin-4 .fstep-body { flex-direction: row; align-items: center; }
@media (max-width: 767px) {
  .fin-1 .final-steps, .fin-2 .final-steps { flex-direction: column; gap: 1rem; }
  .fin-1 .final-list, .fin-2 .final-list { grid-template-columns: 1fr; }
  .fin-3 .final-copy { padding: 1.75rem 1.25rem; }
  .fin-4 .final-steps { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .fin-4 .fstep + .fstep::before { display: none; }
  .fin-cta, .fin-cta .new-btn { width: 100%; }
}

/* ---------- Regelmaessige Updates Varianten (?upd=1..5) ---------- */
.parts-extra.has-upd { grid-template-columns: minmax(0, 47rem); }
.bp-card.upd { display: grid; grid-template-columns: auto 1fr 11rem; align-items: center; gap: 1.375rem; position: relative; overflow: hidden; border-radius: 0.75rem; }
.upd .corner-ticks { display: none; }
.upd > * { position: relative; z-index: 1; }
.upd .upd-img img { width: 100%; height: auto; display: block; }
/* 1 Dunkelgruen mit wanderndem Tuerkis-Glow */
.bp-card.upd-1 { background: #173b39; border-color: #ffffff1f; }
.upd-1::before { content: ''; position: absolute; inset: -40%; z-index: 0; pointer-events: none; filter: blur(50px); background: radial-gradient(circle, rgba(97,225,213,.5) 0%, rgba(97,225,213,0) 60%); animation: glowOrbit 14s linear infinite; }
.upd-1 .part-title { color: #fff; }
.upd-1 .card-copy { color: #ffffffa3; }
.upd-1 .pe-icon { background: #ffffff14; color: #82d3cf; }
/* 2 Weiss mit Tuerkis-Gradient-Border und Aussenglow */
.bp-card.upd-2 { border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #61e1d5, #0b655e) border-box; box-shadow: 0 0 44px -12px rgba(97,225,213,.55); }
.bp-card.upd-2 .pe-icon { display: none; }
.bp-card.upd-2 { grid-template-columns: 1fr 11rem; }
.bp-card.upd-2 .part-title { font-size: 1.3125rem; }
.parts-extra.has-upd:has(.upd-2) { grid-template-columns: minmax(0, 42rem); }
/* 3 Heller Tuerkis-Verlauf, Titel im Markenverlauf */
.bp-card.upd-3 { background: linear-gradient(120deg, #eafaf8, #ffffff 55%, #eef9f7); border-color: #47c6b93d; }
.upd-3 .part-title { background-image: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
/* 4 Weiss mit Glow-Ecke und Gradient-Hairline oben */
.upd-4::before { content: ''; position: absolute; top: -6rem; right: -5rem; width: 18rem; height: 18rem; z-index: 0; border-radius: 100%; background: radial-gradient(circle, rgba(97,225,213,.5), rgba(97,225,213,0) 70%); filter: blur(28px); pointer-events: none; }
.upd-4::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #61e1d5, #0b655e); }
/* 5 Dunkelgruen mit Glow-Rahmen (wie Glow-CTA) */
.bp-card.upd-5 { background: linear-gradient(135deg, #0f3531, #173b39); border: 1px solid #82d3cf3d; box-shadow: 0 0 60px -18px rgba(97,225,213,.65), inset 0 0 30px -18px rgba(97,225,213,.5); }
.upd-5 .part-title { color: #fff; }
.upd-5 .card-copy { color: #ffffffa3; }
.upd-5 .pe-icon { background: #61e1d5; color: #0f3531; }
.upd-5 .pe-anim::after { border-color: #82d3cf; }
@media (max-width: 640px) { .bp-card.upd { grid-template-columns: auto 1fr; } .bp-card.upd-2 { grid-template-columns: 1fr; } .upd .upd-img { grid-column: 1 / -1; } }
@media (min-width: 768px) { .bp-card.upd-2 { padding: 2.25rem 1.5rem 1.5rem 2.25rem; } }

/* ---------- Launch-Boni (?bon=1 Gold / ?bon=2 Orange) ---------- */
.xbn { background: var(--white); padding: 1rem 0 5rem; }
.xbn-card { position: relative; }
.xbn-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.35rem 0.75rem; border-radius: 2rem; line-height: 1; color: #fff; }
.xbn-ph { aspect-ratio: 726 / 562; width: 100%; border-radius: 0.5rem; background: #f2f4f3; display: flex; align-items: center; justify-content: center; }
.xbn-img img { width: 100%; height: auto; display: block; border-radius: 0.5rem; }
.xbn-card .xbn-ph, .xbn-card .xbn-img { margin-bottom: 0.75rem; }
/* Blur-Teaser: Grafik und Texte unkenntlich, Bonus-Label bleibt scharf */
.xbn-card.is-blur .xbn-img { overflow: hidden; border-radius: 0.5rem; }
.xbn-card.is-blur .xbn-img img { filter: blur(10px); transform: scale(1.08); }
.xbn-card.is-blur .part-title { filter: blur(6px); }
.xbn-card.is-blur .card-copy { filter: blur(5px); }
.xbn-card.is-blur .part-title, .xbn-card.is-blur .card-copy { user-select: none; pointer-events: none; }
.xbn-ph .ph-lbl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-56); }
.xbn-ph .ph-lbl svg { width: 1.125rem; height: 1.125rem; }
/* 1 Gold */
.xbn-1 .xbn-card { border-color: #d3ab5866; background: linear-gradient(165deg, #fffdf4, var(--white) 55%); box-shadow: 0 16px 36px -24px #b8892e73; }
.xbn-1 .xbn-tag { background: linear-gradient(135deg, #e7c56b, #b8892e); }
.xbn-1 .xbn-ph { background: #faf5e8; }
.xbn-1 .xbn-ph .ph-lbl { color: #b8892e; }
/* 2 Orange (Focus-Rot) */
.xbn-2 .xbn-card { border-color: #d9551c4d; background: linear-gradient(165deg, #fff7f2, var(--white) 55%); box-shadow: 0 16px 36px -24px #d9551c73; }
.xbn-2 .xbn-tag { background: #d9551c; }
.xbn-2 .xbn-ph { background: #fdf1ea; }
.xbn-2 .xbn-ph .ph-lbl { color: #d9551c; }

/* ---------- Launch-Boni Gold-Varianten (?bon=3..5) + Feinschliff ---------- */
.xbn { padding: 4rem 0 5rem; }
.xbn-1 .green-gradient-text, .xbn-3 .green-gradient-text, .xbn-4 .green-gradient-text, .xbn-5 .green-gradient-text { background-image: linear-gradient(135deg, #8a6420, #b8892e 28%, #e7c56b 55%, #a97e2a 80%, #8a6420); }
/* 3 Serif-Label wie die Bereichs-Nummern, Karte weiss mit Gold-Border */
.xbn-3 .xbn-card { border-color: #d3ab5866; background: var(--white); }
.xbn-3 .xbn-tag, .xbn-5 .xbn-tag { background: linear-gradient(135deg, #8a6420, #b8892e 30%, #e7c56b 60%, #a97e2a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0 0.12em 0.06em 0.02em; border-radius: 0; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 2.25rem; line-height: 1; letter-spacing: -0.5px; margin-bottom: 0.125rem; }
.xbn-3 .xbn-ph, .xbn-4 .xbn-ph, .xbn-5 .xbn-ph { background: #faf5e8; }
.xbn-3 .xbn-ph .ph-lbl, .xbn-4 .xbn-ph .ph-lbl, .xbn-5 .xbn-ph .ph-lbl { color: #b8892e; }
/* 4 Gold-Gradient-Border mit Aussenglow */
.xbn-4 .xbn-card { border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #e7c56b, #8a6420) border-box; box-shadow: 0 0 40px -14px #b8892e8c; }
.xbn-4 .xbn-card .corner-ticks { display: none; }
.xbn-4 .xbn-tag { background: linear-gradient(135deg, #e7c56b, #b8892e); }
/* 5 Gold-Glow-Ecke + Gradient-Hairline oben, Serif-Label */
.xbn-5 .xbn-card { border-color: #d3ab5866; background: linear-gradient(165deg, #fffdf4, var(--white) 55%); overflow: hidden; }
.xbn-5 .xbn-card::before { content: ''; position: absolute; top: -5rem; right: -4rem; width: 14rem; height: 14rem; border-radius: 100%; background: radial-gradient(circle, #e7c56b73, #e7c56b00 70%); filter: blur(22px); pointer-events: none; }
.xbn-5 .xbn-card::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #e7c56b, #8a6420); }
.xbn-5 .xbn-card > * { position: relative; }

/* ---------- Reveal-Badge auf geblurrten Boni (?rvl=1..3, Standard 1) ---------- */
.xbn-img { position: relative; }
.xbn-rvl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.75rem; font-weight: 600; letter-spacing: -0.1px; line-height: 1; padding: 0.55rem 0.9rem; border-radius: 2rem; z-index: 1; }
.xbn-rvl svg { width: 0.95rem; height: 0.95rem; flex: none; }
/* 1 Gold-Pill zentriert */
.rvl-1 .xbn-rvl { background: linear-gradient(135deg, #b8892e, #8a6420); color: #fffdf4; box-shadow: 0 12px 26px -12px #8a6420b3; }
/* 2 Glass-Chip mit Gold-Border */
.rvl-2 .xbn-rvl { background: #ffffffd9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid #d3ab5899; color: #8a6420; box-shadow: 0 10px 24px -14px #8a642073; }
/* 3 Gold-Band am unteren Bildrand */
.rvl-3 .xbn-rvl { left: 0; right: 0; top: auto; bottom: 0; transform: none; justify-content: center; border-radius: 0 0 0.5rem 0.5rem; background: linear-gradient(90deg, #8a6420, #b8892e 50%, #8a6420); color: #fffdf4; padding: 0.6rem 0.5rem; }
@media (max-width: 400px) { .xbn-rvl { font-size: 0.6875rem; padding: 0.5rem 0.7rem; } }

/* ---------- Sticky-CTA Mobile-Scarcity (?st=1..6, nur <=640px) ---------- */
.st-topline, .st-note, .st-chip, .st-marquee { display: none; }
@media (max-width: 640px) {
  /* 1+4 Sub-Zeile im Button (Markup via JS), 4 zusätzlich stärkerer Glow */
  .st-4 .new-btn.compact { box-shadow: 0 0 36px -6px #d9551ccc, 0 18px 40px -18px rgba(12,22,21,.35); padding-top: 1.25rem; padding-bottom: 1.25rem; }
  /* 2 Dunkelgrüne Scarcity-Leiste über dem Button */
  .st-2 .sticky-inner { flex-direction: column; gap: 0; }
  .st-2 .st-topline { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; background: #173b39; color: #82d3cf; font-size: 0.75rem; font-weight: 500; letter-spacing: -0.15px; padding: 0.5rem 0.75rem; border-radius: 0.6rem 0.6rem 0 0; }
  .st-2 .st-topline svg { width: 0.875rem; height: 0.875rem; flex: none; }
  .st-2 .new-btn.compact { border-top-left-radius: 0; border-top-right-radius: 0; }
  /* 3 Weisse Karte mit Scarcity-Text über dem Button */
  .st-3 .sticky-inner { flex-direction: column; gap: 0.625rem; background: var(--white); border: 1px solid var(--border-gray); border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 1px 2px rgba(16,53,49,.04), 0 18px 40px -18px rgba(16,53,49,.28); }
  .st-3 .st-note { display: block; font-size: 0.8125rem; letter-spacing: -0.26px; color: #0c1615a3; text-align: center; }
  .st-3 .st-note strong { font-weight: 600; color: var(--black); }
  /* 5 Gold-Chip überlappend auf der Button-Oberkante */
  .st-5 .sticky-inner { position: relative; padding-top: 0.75rem; }
  .st-5 .st-chip { display: inline-block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -40%); background: linear-gradient(135deg, #e7c56b, #b8892e); color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.1px; line-height: 1; padding: 0.35rem 0.7rem; border-radius: 2rem; white-space: nowrap; z-index: 1; box-shadow: 0 6px 16px -8px #8a6420b3; }
  /* 6 Mini-Laufband über dem Button */
  .st-6 .sticky-inner { flex-direction: column; gap: 0; }
  .st-6 .st-marquee { display: flex; overflow: hidden; width: 100%; background: #173b39; color: #fffdf4d9; border-radius: 0.6rem 0.6rem 0 0; padding: 0.45rem 0; }
  .st-6 .st-track { display: flex; width: max-content; animation: stRun 16s linear infinite; }
  .st-6 .st-run { display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; padding-right: 1.1rem; }
  .st-6 .st-run i { width: 4px; height: 4px; border-radius: 100%; background: #82d3cf; display: block; }
  .st-6 .new-btn.compact { border-top-left-radius: 0; border-top-right-radius: 0; }
  @keyframes stRun { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .st-6 .st-track { animation: none; } }
}

/* ---------- Abschluss: Produkt-Mockup über der Headline (statt Bild-Box rechts) ---------- */
.fin-hero-img { width: 100%; margin: -0.5rem 0 0.75rem; }
.fin-hero-img img { width: 100%; height: auto; display: block; }

/* ---------- Abschluss: Badge weg, Steps-Box sticky (Desktop) ---------- */
.fin-3 .final-copy > .glass-chip { display: none; }
@media (min-width: 992px) {
  .fin-3 .final-grid { align-items: start; }
  .fin-3 .final-steps { position: sticky; top: 2rem; }
}

/* Klickbare Popup-Flächen */
.wl-click { cursor: pointer; }

/* ---------- Kompakte Zielgruppen-Varianten (?zg=4..6) ---------- */
.xz-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; width: 100%; max-width: 64rem; }
.xz-mini-card { border: 1px solid var(--border-gray); border-radius: 0.75rem; background: var(--white); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.xz-mini-card svg { width: 1.25rem; height: 1.25rem; margin-bottom: 0.25rem; }
.xz-mini-card strong { font-weight: 600; letter-spacing: -0.3px; }
.xz-mini-card span { font-size: 0.875rem; color: var(--text-56); line-height: 1.45; }
.xz-one { position: relative; width: 100%; max-width: 48rem; border: 1px dashed #193f3b29; background: var(--white); padding: 1.75rem 2rem; }
.xz-one-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem 2rem; }
.xz-one-row { display: flex; gap: 0.625rem; align-items: flex-start; text-align: left; }
.xz-one-row svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }
.xz-one-row strong { display: block; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.3px; }
.xz-one-row span { font-size: 0.875rem; color: var(--text-56); line-height: 1.45; display: block; }
.xz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; max-width: 60rem; align-items: start; }
.xz-col { border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.xz-col.is-yes { background: #eef7f5; border: 1px solid #47c6b93d; }
.xz-col.is-no { background: var(--gray-section); border: 1px solid var(--border-gray); }
.xz-col-head { font-weight: 600; letter-spacing: -0.4px; font-size: 1.0625rem; }
.xz-x { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 100%; background: #0c161514; color: var(--text-56); font-size: 0.6875rem; line-height: 1; display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; }
@media (max-width: 767px) { .xz-one-grid { grid-template-columns: 1fr; } .xz-split { grid-template-columns: 1fr; } }

/* ---------- Inline-CTAs + Brief-CTA (?conv=1) ---------- */
.xcta { background: var(--white); padding: 0 0 5rem; }
.xcta-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.xcta-txt { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.6px; text-align: center; text-wrap: balance; }
.xcta .wl-hint { font-size: 0.875rem; color: var(--text-56); }
.xbr-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--green); font-weight: 600; font-size: 1rem; letter-spacing: -0.3px; border-bottom: 1.5px solid #0a6b6152; padding-bottom: 2px; margin-top: 0.25rem; transition: border-color 0.3s; }
.xbr-cta:hover { border-color: #0a6b61; }
.xbr-cta svg { width: 1rem; height: 1rem; }

/* ---------- Zielgruppen-Varianten 7-12 ---------- */
.xz-ico-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; width: 100%; max-width: 62rem; }
.xz-ico-card { border: 1px solid var(--border-gray); border-radius: 0.75rem; background: var(--white); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.xz-ico { width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--green-4); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.xz-ico svg { width: 1.5rem; height: 1.5rem; }
.xz-ico-card strong { font-weight: 600; letter-spacing: -0.3px; }
.xz-ico-card span { font-size: 0.875rem; color: var(--text-56); line-height: 1.45; }
.xz-num-list { display: flex; flex-direction: column; width: 100%; max-width: 44rem; }
.xz-num-row { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.125rem 0; }
.xz-num-row + .xz-num-row { border-top: 1px solid var(--border-gray); }
.xz-num-row .xz-num { flex: none; width: 3.25rem; font-size: 2rem; line-height: 1; background-image: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.08em 0.08em 0; }
.xz-num .italic-span { font-size: 1em; }
.xz-num-row div strong { display: block; font-weight: 600; letter-spacing: -0.3px; }
.xz-num-row div span { font-size: 0.9375rem; color: var(--text-56); line-height: 1.45; }
.xz-pillbox { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; max-width: 46rem; }
.xz-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.xz-pill { padding: 0.7rem 1.2rem; border-radius: 2rem; border: 1px solid var(--border-gray); font-size: 1rem; font-weight: 500; letter-spacing: -0.3px; transition: all 0.3s; }
.xz-pill.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.xz-pill-copy { text-align: center; max-width: 34rem; min-height: 3em; font-size: 1.0625rem; }
.xz-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; width: 100%; max-width: 72rem; }
.xz-photo-card { border: 1px solid var(--border-gray); border-radius: 0.75rem; overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.xz-photo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.xz-photo-body { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem 1.375rem; }
.xz-photo-body strong { font-weight: 600; letter-spacing: -0.3px; }
.xz-photo-body span { font-size: 0.875rem; color: var(--text-56); line-height: 1.45; }
.xz-dark { width: 100%; max-width: 44rem; background: #173b39; border: 1px solid #ffffff1f; border-radius: 0.75rem; padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.xz-dark .xz-one-row strong { color: #fff; }
.xz-dark .xz-one-row span { color: #ffffffa3; }
.xz-dark .xz-one-row svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }
.xz-split-12 .xz-col.is-card { position: relative; background: var(--white); border: 1px dashed #193f3b29; border-radius: 0; }

/* ---------- Icon-Karten-Überarbeitungen (?zg=13..15) ---------- */
/* 13 Corner-Ticks-Karten mit rundem Icon */
.xz-13 .xz-ico-card { position: relative; border: 1px dashed #193f3b29; border-radius: 0; }
.xz-13 .xz-ico { border-radius: 100%; }
/* 14 Icon im Türkis-Verlauf-Chip + Gradient-Hairline oben */
.xz-14 .xz-ico-card { position: relative; overflow: hidden; }
.xz-14 .xz-ico-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #61e1d5, #0b655e); }
.xz-14 .xz-ico { background: linear-gradient(135deg, #61e1d5, #0b655e); color: #fff; border-radius: 100%; box-shadow: 0 10px 22px -12px #0b655e99; }
/* 15 dunkelgrüne Icon-Karten */
.xz-15 .xz-ico-card { background: #173b39; border-color: #ffffff1f; }
.xz-15 .xz-ico { background: #ffffff14; color: #82d3cf; }
.xz-15 .xz-ico-card strong { color: #fff; }
.xz-15 .xz-ico-card span { color: #ffffffa3; }

/* ---------- Zertifikat + LinkedIn (?zert=1..3) ---------- */
.xcert { background: var(--white); padding: 4rem 0 5rem; }
.xcert-inline { display: flex; align-items: flex-start; gap: 0.625rem; margin-top: 0.25rem; padding-top: 0.875rem; border-top: 1px solid #0c161512; font-size: 0.875rem; color: var(--text-56); line-height: 1.45; text-align: left; }
.xcert-inline svg { flex: none; width: 1.125rem; height: 1.125rem; color: #0a66c2; margin-top: 0.1rem; }
.xcert-card { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center; width: 100%; max-width: 58rem; background: var(--white); border: 1px dashed #193f3b29; padding: 2.5rem; }
.xcert-copy { display: flex; flex-direction: column; gap: 0.875rem; text-align: left; }
.xcert-checks { gap: 0.625rem; margin-top: 0.25rem; text-align: left; }
.xcert-li { background: var(--white); border: 1px solid var(--border-gray); border-radius: 0.75rem; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: 0 22px 44px -26px rgba(12,22,21,.3); max-width: 22rem; justify-self: center; }
.xcert-li-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.3px; }
.xcert-li-head svg { width: 1.25rem; height: 1.25rem; color: #0a66c2; }
.xcert-li-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.xcert-li-logo { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.375rem; background: #0f3531; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.xcert-li-logo img { width: 68%; height: auto; display: block; }
.xcert-li-row div strong { display: block; font-weight: 600; letter-spacing: -0.3px; }
.xcert-li-row div span { display: block; font-size: 0.8125rem; color: var(--text-56); }
.xcert-li-id { margin-top: 0.125rem; }
.xcert-li-btn { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; border: 1.5px solid #0a66c2; color: #0a66c2; font-weight: 600; font-size: 0.8125rem; padding: 0.35rem 0.875rem; border-radius: 2rem; }
.xcert-li-btn.is-solid { background: #0a66c2; color: #fff; border-color: #0a66c2; margin-top: 0.5rem; }
.xcert-li-btn svg { width: 1rem; height: 1rem; }
.xcert-dark { background: #173b39; border: 1px solid #ffffff1f; border-radius: 0.75rem; }
.xcert-dark .title-xl { color: #fff; }
.xcert-dark .card-copy { color: #ffffffa3; }
.xcert-dark .xcert-checks .ck-row { color: #ffffffd9; }
.xcert-img { width: 100%; height: auto; border-radius: 0.5rem; }
@media (max-width: 767px) { .xcert-card { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; } }
.xcert-dark .xcert-checks .pv-check { color: #ffffffd9; }
.xcert-checks .pv-check { font-size: 0.9375rem; }

/* ---------- Zielgruppen-Gate beim Seitenaufruf (?gate=1..3) ---------- */
html.gate-lock, html.gate-lock body { overflow: hidden; }
/* Solange das Gate offen ist, Headline + Subline zurückhalten; nach der Wahl laufen sie per normalem .rv-Reveal ein */
html.gate-pending .hero h1.rv, html.gate-pending .hero .hero-sub.rv { opacity: 0; transform: translateY(100px); }
.gt { position: fixed; z-index: 3100; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; }
.gt.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.gt .badge-stroke { align-self: center; }
/* 1: Kacheln im Popup (Muster wie .wl-popup: Blur-Overlay, scale 0.94 -> 1) */
.gt-1 { inset: 0; background: #00000080; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.gt-card { background: var(--white); border-radius: 0.75rem; width: 100%; max-width: 30rem; max-height: calc(100dvh - 2rem); overflow: auto; padding: 2.5rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; transform: scale(0.94); transition: transform 0.35s ease; }
.gt-1.is-open .gt-card { transform: scale(1); }
.gt-title { letter-spacing: -0.96px; text-wrap: balance; }
.gt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; width: 100%; }
.gt-tile { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; border: 1px solid #0c161529; background: var(--white); color: var(--black); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; text-align: left; transition: border-color 0.3s, transform 0.4s, box-shadow 0.4s, background 0.3s; opacity: 0; transform: translateY(6px); }
.gt-1.is-open .gt-tile { animation: xmIn 0.45s var(--ease-out-quart) forwards; animation-delay: calc(120ms + var(--i) * 45ms); }
.gt-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
.gt-tile .xm-tile-ic { flex: none; }
.gt-tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(16,53,49,.35); }
.gt-tile.is-on { background: var(--green); color: #fff; border-color: var(--green); animation: xmPulse 0.45s ease-out; opacity: 1; transform: none; }
.gt-tile.is-on .xm-tile-ic { background: #ffffff1f; color: #fff; }
/* 2: Bottom-Sheet ohne Overlay, Seite bleibt bedienbar */
.gt-2 { left: 50%; bottom: 1rem; width: calc(100% - 2rem); max-width: 44rem; transform: translate(-50%, 1.5rem); transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart), visibility 0.5s; }
.gt-2.is-open { transform: translate(-50%, 0); }
.gt-sheet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem 1.375rem; background: var(--white); border: 1px solid var(--border-gray); border-radius: 0.75rem; box-shadow: 0 24px 60px -24px rgba(16,53,49,.45), 0 2px 6px rgba(16,53,49,.06); text-align: center; }
.gt-sheet::before { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #61e1d5, #0b655e); }
.gt-sheet-q { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1.5rem; }
.gt-sheet-q strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.45px; text-wrap: balance; }
.gt-sheet-q span { font-size: 0.875rem; letter-spacing: -0.28px; color: var(--text-56); }
.gt-pills .xm-tile { opacity: 0; transform: translateY(6px); animation: none; }
.gt-2.is-open .gt-pills .xm-tile { animation: xmIn 0.45s var(--ease-out-quart) forwards; animation-delay: calc(200ms + var(--i) * 45ms); }
.gt-2.is-open .gt-pills .xm-tile.is-on { animation: xmPulse 0.45s ease-out; opacity: 1; transform: none; }
/* 3: Vollbild-Intro editorial (Hairlines, große kursive Zahlen) */
.gt-3 { inset: 0; background: var(--white); overflow: auto; transition: opacity 0.6s var(--ease-out-quart), visibility 0.6s; }
.gt-full { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 3rem 1.25rem; }
.gt-full-inner { width: 100%; max-width: 40rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.gt-full-head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.gt-full-head .card-copy { max-width: 28rem; text-wrap: balance; }
.gt-logo { height: 0.75rem; width: auto; filter: invert(1); margin-bottom: 0.75rem; }
.gt-h { text-wrap: balance; }
.gt-list { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-gray); }
.gt-row { display: grid; grid-template-columns: 3.5rem 1fr 1.25rem; align-items: center; gap: 1rem; padding: 0.875rem 0.5rem; border-top: 1px solid var(--border-gray); text-align: left; color: var(--black); transition: background 0.45s, padding 0.45s; opacity: 0; transform: translateY(10px); }
.gt-3.is-open .gt-row { animation: xmIn 0.6s var(--ease-out-quart) forwards; animation-delay: calc(200ms + var(--i) * 60ms); }
.gt-num { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 2rem; line-height: 1; color: var(--green); }
.gt-row-txt { display: flex; flex-direction: column; gap: 0.125rem; }
.gt-row-txt strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.45px; }
.gt-row-txt span { font-size: 0.9375rem; letter-spacing: -0.3px; color: var(--text-56); }
.gt-arrow { width: 1.25rem; height: 1.25rem; color: var(--text-56); transition: transform 0.45s, color 0.45s; }
.gt-arrow svg { width: 100%; height: 100%; display: block; }
.gt-row:hover, .gt-row.is-on { background: var(--green-4); padding-left: 1rem; }
.gt-row:hover .gt-arrow, .gt-row.is-on .gt-arrow { transform: translateX(4px); color: var(--green); }
@media (max-width: 640px) {
  .gt-card { padding: 2.25rem 1.25rem 1.5rem; }
  .gt-tile { font-size: 0.875rem; padding: 0.5rem 0.5rem; gap: 0.5rem; }
  .gt-2 { bottom: 0; width: 100%; } .gt-sheet { border-radius: 0.75rem 0.75rem 0 0; padding: 1.375rem 1rem 1.25rem; }
  .gt-sheet-q { padding: 0 1.75rem; }
  .gt-row { grid-template-columns: 2.5rem 1fr 1rem; gap: 0.75rem; padding: 0.75rem 0.25rem; }
  .gt-num { font-size: 1.625rem; }
  .gt-row-txt strong { font-size: 1rem; } .gt-row-txt span { font-size: 0.875rem; }
  .gt-full { padding: 2rem 1rem; align-items: flex-start; } .gt-full-inner { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .gt-tile, .gt-row, .gt-pills .xm-tile { animation: none !important; opacity: 1; transform: none; } }

/* ---------- Schritt 2 im E-Mail-Popup: Interessen (?step2=1..3) ---------- */
.wl-popup-card.is-s2 > .pv, .wl-popup-card.is-s2 > .wl-popup-close { display: none !important; }
.wl-popup-card.is-s2 { padding-top: 2rem; max-width: 34rem; }
.s2 .s2-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.s2 { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; animation: xmIn 0.45s var(--ease-out-quart) both; opacity: 0; transform: translateY(6px); }
.s2-ok { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.28px; color: var(--green); }
.s2-ok svg { width: 1.125rem; height: 1.125rem; flex: none; }
.s2-title { letter-spacing: -0.96px; text-wrap: balance; }
.s2-sub { margin: -0.5rem 0 0; font-size: 0.875rem; letter-spacing: -0.28px; color: var(--text-56); }
.s2 .gt-tile, .s2 .s2-pill { animation: xmIn 0.45s var(--ease-out-quart) forwards; animation-delay: calc(120ms + var(--i) * 45ms); }
.s2 .gt-tile.is-on { animation: xmPulse 0.45s ease-out; opacity: 1; transform: none; }
.s2 .gt-tile:last-child { grid-column: auto; justify-content: flex-start; }
.s2-tile { position: relative; padding-right: 2rem; }
.s2-tile > span:not(.xm-tile-ic):not(.s2-ck) { text-wrap: balance; }
.s2-ck { position: absolute; top: 50%; right: 0.625rem; width: 1rem; height: 1rem; margin-top: -0.5rem; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; }
.s2-ck svg { width: 100%; height: 100%; display: block; }
.s2-tile.is-on .s2-ck { opacity: 1; transform: scale(1); }
.s2-tile.is-on .s2-ck svg rect { fill: #fff; } .s2-tile.is-on .s2-ck svg path { stroke: var(--green); }
.s2-pills .s2-pill { opacity: 0; transform: translateY(6px); }
.s2-pills .s2-pill.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.s2-pills .s2-pill.is-on .xm-tile-ic { background: #ffffff1f; color: #fff; }
.s2 .xm-bar i { width: 100%; }
.s2-go { width: 100%; max-width: none; justify-content: space-between; padding: 1.25rem 1.5rem; font-size: 1.125rem; letter-spacing: -0.36px; opacity: 0.55; transition: all 0.5s; }
.s2.has-pick .s2-go { opacity: 1; }
.s2-go .new-btn-icon { width: 1.5rem; height: 1.5rem; }
@media (max-width: 640px) {
  .wl-popup-card.is-s2 { padding-left: 1rem; padding-right: 1rem; }
  .s2 .gt-tile { font-size: 0.8125rem; letter-spacing: -0.2px; padding: 0.5rem; gap: 0.4rem; padding-right: 0.5rem; min-height: 3.25rem; }
  .s2 .gt-tile > span:not(.xm-tile-ic):not(.s2-ck) { min-width: 0; }
  .s2 .gt-tile .xm-tile-ic { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; } .s2 .gt-tile .xm-tile-ic svg { width: 0.9375rem; height: 0.9375rem; }
  .s2-ck { top: 0.3rem; right: 0.3rem; margin-top: 0; width: 0.875rem; height: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .s2, .s2 .gt-tile, .s2 .s2-pill { animation: none !important; opacity: 1; transform: none; } }
/* Variante 2: Hinweis, wenn ohne Auswahl auf „Abschließen" geklickt wird */
.s2-nudge .s2-tiles { animation: s2Nudge 0.4s ease-in-out; }
@keyframes s2Nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .s2-nudge .s2-tiles { animation: none; } }

/* ---------- Launch-Video (Wistia, ?lvid=1..7) ---------- */
wistia-player[media-id='73etixiu5p']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/73etixiu5p/swatch'); display: block; filter: blur(5px); padding-top: 64.79%; }
.xlv { position: relative; padding: 5.5rem 0 6rem; background: var(--white); overflow: clip; }
.xlv-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.xlv .h2, .xlv .card-copy, .xlv-stage { text-wrap: balance; }
.xlv-w { width: 100%; max-width: 64rem; }
.xlv-frame { width: 100%; border-radius: 1rem; overflow: hidden; background: #000; border: 1px solid var(--border-gray); box-shadow: 0 40px 80px -48px rgba(16,53,49,.55), 0 2px 6px rgba(16,53,49,.06); }
.xlv-frame wistia-player { display: block; }
.xlv-cta { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.xlv-kicker { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #82d3cf; }
.xlv-em { background-image: linear-gradient(135deg, #82d3cf, #61e1d5 30%, #c9f2ee 55%, #82d3cf 80%, #61e1d5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0 0.12em 0.06em 0; }
/* 2: Split hell */
.xlv-2 { background: var(--gray-section); }
.xlv-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: center; }
.xlv-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.xlv-text .badge-stroke { align-self: flex-start; }
.xlv-text .pv-checks { max-width: none; }
.xlv-text .xlv-cta { align-items: flex-start; margin-top: 0.5rem; }
/* 3: Marken-Grün */
.xlv-3 { background: var(--green); color: var(--white); padding: 6.5rem 0 7rem; }
.xlv-3::before { content: ''; position: absolute; left: 50%; top: 42%; width: 70rem; height: 40rem; transform: translate(-50%, -50%); pointer-events: none; filter: blur(80px); background: radial-gradient(ellipse at center, rgba(71,198,185,.35), rgba(71,198,185,0) 65%); }
.xlv-3 .h2 { color: var(--white); } .xlv-3 .card-copy { color: #ffffffb8; }
.xlv-3 .xlv-frame { border-color: #ffffff26; }
/* 4-7: pures Schwarz, damit die schwarzen Flächen im Video mit der Sektion verschmelzen.
   Schimmer/Verläufe müssen vor der Videooberkante (~13 rem) ausgelaufen sein, sonst schneidet sie das Video hart ab. */
.xlv-black, .xlv-7 { background: #000; color: var(--white); padding: 6.5rem 0 6rem; }
.xlv-black .h2, .xlv-7 .h2 { color: var(--white); }
.xlv-black .card-copy, .xlv-7 .card-copy { color: #ffffffa8; }
.xlv-seam .xlv-frame, .xlv-seam.xlv-frame { border: 0; border-radius: 0; box-shadow: none; background: #000; }
.xlv-seam { max-width: 72rem; margin-top: -8%; margin-bottom: -2%; } /* schwarze Videoränder (je ~11 % der Breite) übernehmen den Abstand; unten wenig, damit nichts über der Wistia-Steuerleiste liegt */
.xlv-black .xlv-inner > .centered, .xlv-7 .xlv-inner > .centered, .xlv-black .xlv-text { position: relative; z-index: 2; }
.xlv-black .xlv-cta, .xlv-7 .xlv-cta { position: relative; z-index: 2; }
.xlv-4::before { content: ''; position: absolute; left: 50%; top: 0; width: 64rem; height: 22rem; transform: translate(-50%, -48%); pointer-events: none; filter: blur(70px); background: radial-gradient(ellipse at center, rgba(71,198,185,.32), rgba(71,198,185,0) 70%); }
/* 5: Bühne */
.xlv-cone { position: absolute; left: 50%; top: -6rem; width: 80rem; height: 44rem; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 42% 62% at 50% 0%, rgba(201,242,238,.22), rgba(130,211,207,.08) 45%, rgba(130,211,207,0) 72%); }
.xlv-stage { display: flex; flex-direction: column; align-items: center; gap: 0.1em; margin: 0; font-size: 3.5rem; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: var(--white); }
.xlv-stage > span { font-size: 0.62em; letter-spacing: -0.03em; color: #ffffffd9; }
.xlv-stage .xlv-em { font-size: 1.28em; letter-spacing: -0.02em; line-height: 1.05; }
/* 6: Persönlich */
.xlv-split-6 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; }
.xlv-who { display: flex; align-items: center; gap: 0.75rem; }
.xlv-who img { width: 3rem; height: 3rem; border-radius: 100%; object-fit: cover; border: 1px solid #ffffff33; }
.xlv-who > span { display: flex; flex-direction: column; gap: 0.0625rem; font-size: 0.875rem; color: #ffffffa8; letter-spacing: -0.28px; }
.xlv-who strong { color: var(--white); font-weight: 500; font-size: 1rem; }
.xlv-quote { font-size: 2.25rem; line-height: 1.08; letter-spacing: -1.2px; }
.xlv-sign { width: 8.5rem; height: auto; opacity: 0.85; margin: -0.25rem 0 -0.5rem; }
/* 7: Grün läuft in Schwarz aus */
.xlv-7 { background: linear-gradient(180deg, #173b39 0, #123330 4rem, #07100f 9rem, #000 12rem, #000 100%); } /* vor Videobeginn komplett schwarz, sonst zeichnet sich die Videokante ab */
.xlv-7::before { content: ''; position: absolute; left: 50%; top: 0; width: 70rem; height: 22rem; transform: translate(-50%, -48%); pointer-events: none; filter: blur(80px); background: radial-gradient(ellipse at center, rgba(71,198,185,.3), rgba(71,198,185,0) 70%); }
@media (max-width: 991px) { .xlv-split, .xlv-split-6 { grid-template-columns: 1fr; gap: 2rem; } .xlv-2 .xlv-media { order: -1; } .xlv-stage { font-size: 2.75rem; } }
@media (max-width: 640px) {
  .xlv { padding: 3.5rem 0 4rem; } .xlv-3, .xlv-black, .xlv-7 { padding: 4.5rem 0 4.5rem; }
  .xlv-inner { gap: 2rem; }
  .xlv-frame { border-radius: 0.75rem; }
  .xlv-seam { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); max-width: none; margin-top: -8%; margin-bottom: -2%; } /* randlos (padding-global mobil = 1rem) */
  .xlv-7 { background: linear-gradient(180deg, #173b39 0, #10302d 5rem, #061312 11rem, #000 15rem, #000 100%); }
  .xlv-stage { font-size: 2.125rem; }
  .xlv-quote { font-size: 1.75rem; }
  .xlv-cta .new-btn { width: 100%; }
}