/* MaxxiPower Coming-Soon v2 — Pair-Matrix mit SVG Icons · keine Emojis */

/* Body-Layout */
.cs-body { display: flex; flex-direction: column; min-height: 100vh; }
.cs-body > footer { margin-top: auto; }

/* Header brand-sub */
.brand-sub { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); color: var(--mp-gray-500); margin-left: var(--space-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.site-header nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); transition: all 0.15s; }
.site-header nav a:hover { background: var(--mp-gray-100); }

/* Pill */
.pill { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--mp-lime-muted); border: 1px solid rgba(200,245,38,0.4); color: var(--mp-gray-300); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-lime); flex-shrink: 0; }

/* Text-Link */
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--mp-black); padding: var(--space-2) 0; border-bottom: 1px solid transparent; transition: all 0.15s; }
.text-link:hover { color: var(--mp-lime-pressed); border-bottom-color: var(--mp-lime-pressed); }
.text-link--light { color: var(--mp-gray-300); }
.text-link--light:hover { color: var(--mp-lime); border-bottom-color: var(--mp-lime); }

/* Phase Tags */
.phase--live { background: var(--mp-green); color: var(--mp-white); }
.phase--q2   { background: var(--mp-lime); color: var(--mp-black); }
.phase--q3   { background: var(--mp-orange); color: var(--mp-white); }
.phase--q4   { background: var(--mp-gray-600); color: var(--mp-white); }

/* ═══ HERO (wie v1) ═══ */
.cs-hero { min-height: calc(100vh - 68px); display: flex; align-items: center; position: relative; overflow: hidden; background: var(--mp-black); color: var(--mp-white); padding: var(--space-16) 0; }
.cs-hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 900px 700px at 75% 25%, rgba(200,245,38,0.18), transparent 60%), radial-gradient(ellipse 600px 400px at 15% 80%, rgba(245,124,0,0.12), transparent 60%); pointer-events: none; }
.cs-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.cs-hero__h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1.05; letter-spacing: var(--tracking-tighter); color: var(--mp-white); margin: 0; max-width: 22ch; }
.cs-hero__h1 em { font-style: normal; color: var(--mp-lime); }
.cs-hero__lead { font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); color: var(--mp-gray-300); line-height: var(--leading-relaxed); max-width: 56ch; margin: 0; }
.cs-hero__bridge { font-size: var(--text-base); color: var(--mp-gray-500); line-height: var(--leading-relaxed); max-width: 56ch; margin: 0; border-left: 2px solid var(--mp-orange); padding-left: var(--space-4); }
.cs-hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-2); padding: var(--space-6) 0; border-top: 1px solid var(--mp-gray-800); border-bottom: 1px solid var(--mp-gray-800); width: 100%; }
.cs-hero__meta-item { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-hero__meta-lbl { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mp-gray-500); }
.cs-hero__meta-val { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--mp-white); letter-spacing: var(--tracking-tight); word-break: break-word; }
.cs-hero__cta { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-2); }

/* ═══ CROSS-LINK-STRIP ═══ */
.cross-strip { background: var(--mp-gray-50); border-top: 1px solid var(--mp-gray-100); border-bottom: 1px solid var(--mp-gray-100); padding: var(--space-4) 0; }
.cross-strip__inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
.cross-strip__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mp-gray-600); }
.cross-strip__link { color: var(--mp-gray-700); transition: color 0.15s; }
.cross-strip__link strong { color: var(--mp-black); font-weight: 600; }
.cross-strip__link:hover { color: var(--mp-lime-pressed); }
.cross-strip__sep { color: var(--mp-gray-300); }

/* ═══ NETWORK SECTION ═══ */
.cs-network { padding: var(--space-24) 0; background: var(--mp-white); }
.section__head { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.section__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--mp-gray-700); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-3); }
.section__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); letter-spacing: var(--tracking-tight); color: var(--mp-black); margin: 0; }
.section__head h2 em { font-style: normal; color: var(--mp-lime); }
.section__sub { font-size: var(--text-base); color: var(--mp-gray-600); margin-top: var(--space-3); line-height: var(--leading-relaxed); }

/* Section-Label (Trenner zwischen den 3 Bloecken) */
.cs-section-label { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-12) 0 var(--space-6); }
.cs-section-label__line { flex: 1; height: 1px; background: var(--mp-gray-200); }
.cs-section-label__text { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mp-gray-600); }
.cs-section-label:first-of-type { margin-top: 0; }

/* ═══ PAIR-CARDS ═══ */
.pair-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.pair { background: var(--mp-white); border: 1px solid var(--mp-gray-200); border-radius: var(--radius-md); overflow: hidden; transition: all 0.18s; }
.pair:hover { border-color: var(--mp-gray-300); box-shadow: var(--shadow-sm); }
.pair__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); background: var(--mp-gray-50); border-bottom: 1px solid var(--mp-gray-200); flex-wrap: wrap; gap: var(--space-3); }
.pair__topic { display: flex; align-items: center; gap: var(--space-4); }
.pair__icon { width: 28px; height: 28px; color: var(--mp-black); flex-shrink: 0; }
.pair__topic-text { display: flex; flex-direction: column; gap: 2px; }
.pair__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: var(--mp-black); }
.pair__sub { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mp-gray-500); }
.pair__meta { display: flex; align-items: center; gap: var(--space-3); }
.pair__type { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--mp-gray-700); padding: 4px 10px; border: 1px solid var(--mp-gray-300); border-radius: var(--radius-sm); }
.pair__phase { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wider); padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 700; }

.pair__cells { display: grid; grid-template-columns: 1fr 1fr; }
.pair-cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-right: 1px solid var(--mp-gray-100); position: relative; transition: background 0.15s; cursor: pointer; }
.pair-cell:last-child { border-right: none; }
.pair-cell::before { content: ''; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 3px; }
.pair-cell--b2c::before { background: var(--mp-lime); }
.pair-cell--b2b::before { background: var(--mp-orange); }
.pair-cell:hover { background: var(--mp-gray-50); }
.pair-cell__tag { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-wider); padding: 3px 8px; border-radius: var(--radius-sm); width: fit-content; }
.pair-cell--b2c .pair-cell__tag { background: var(--mp-lime); color: var(--mp-black); }
.pair-cell--b2b .pair-cell__tag { background: var(--mp-orange); color: var(--mp-white); }
.pair-cell__domain { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--mp-black); word-break: break-all; margin-top: var(--space-1); }
.pair-cell__role { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); letter-spacing: var(--tracking-tight); color: var(--mp-black); line-height: var(--leading-snug); }
.pair-cell__audience { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wide); color: var(--mp-gray-500); margin-top: var(--space-1); }
.pair-cell__value { font-size: var(--text-sm); color: var(--mp-gray-700); line-height: var(--leading-relaxed); margin: var(--space-2) 0 0; }

/* ═══ STANDALONE-CARDS ═══ */
.solo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.solo-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--mp-white); border: 1px solid var(--mp-gray-200); border-radius: var(--radius-md); transition: all 0.18s; cursor: pointer; }
.solo-card:hover { border-color: var(--mp-black); transform: translateY(-2px); box-shadow: var(--shadow); }
.solo-card__head { display: flex; align-items: center; justify-content: space-between; }
.solo-card__icon { width: 24px; height: 24px; color: var(--mp-gray-600); }
.solo-card__phase { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wider); padding: 3px 8px; border-radius: var(--radius-sm); }
.solo-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.solo-card__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--mp-black); }
.solo-card__domain { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--mp-gray-700); word-break: break-all; }
.solo-card__role { font-size: var(--text-sm); color: var(--mp-gray-700); font-weight: 600; }
.solo-card__value { font-size: var(--text-sm); color: var(--mp-gray-600); line-height: var(--leading-relaxed); margin: 0; }

/* ═══ BRAND-PROTECTION-PILLS ═══ */
.protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.protect-pill { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--mp-gray-50); border: 1px solid var(--mp-gray-200); border-radius: var(--radius); transition: all 0.18s; cursor: pointer; }
.protect-pill:hover { background: var(--mp-white); border-color: var(--mp-black); }
.protect-pill__icon { width: 20px; height: 20px; color: var(--mp-gray-500); flex-shrink: 0; }
.protect-pill__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.protect-pill__domain { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--mp-black); word-break: break-all; }
.protect-pill__target { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-wide); color: var(--mp-gray-500); }
.protect-pill__arrow { width: 16px; height: 16px; color: var(--mp-gray-400); flex-shrink: 0; }
.protect-pill:hover .protect-pill__arrow { color: var(--mp-black); }

/* ═══ FOOTER ═══ */
.site-footer__intro { font-size: var(--text-sm); color: var(--mp-gray-500); max-width: 36ch; margin: var(--space-3) 0 var(--space-5); line-height: var(--leading-relaxed); }
.cross-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--mp-lime-muted); border: 1px solid rgba(200,245,38,0.3); color: var(--mp-lime); font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); letter-spacing: var(--tracking-wide); transition: all 0.15s; }
.cross-pill:hover { background: rgba(200,245,38,0.2); }
.site-footer ul li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; }
.footer-sub { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--mp-gray-600); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ═══ COOKIE-BANNER ═══ */
.cookie-banner { position: fixed; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 1000; background: var(--mp-black); color: var(--mp-gray-300); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-6); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.cookie-banner p { flex: 1; font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }
.cookie-banner a { color: var(--mp-lime); }

/* Demo-Helper: aktuelle Domain markieren */
.pair[data-current="b2c"] .pair-cell--b2c,
.pair[data-current="b2b"] .pair-cell--b2b,
.solo-card[data-current="true"],
.protect-pill[data-current="true"] {
  background: var(--mp-lime-subtle);
  box-shadow: 0 0 0 3px var(--mp-lime-muted);
}
.pair[data-current="b2c"] .pair-cell--b2c::after,
.pair[data-current="b2b"] .pair-cell--b2b::after,
.solo-card[data-current="true"]::after,
.protect-pill[data-current="true"]::after {
  content: 'DU BIST HIER';
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  background: var(--mp-lime);
  color: var(--mp-black);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.pair, .solo-card, .protect-pill { position: relative; }

/* Responsive */
@media (max-width: 960px) {
  .pair__cells { grid-template-columns: 1fr; }
  .pair-cell { border-right: none; border-bottom: 1px solid var(--mp-gray-100); }
  .pair-cell:last-child { border-bottom: none; }
  .solo-grid, .protect-grid { grid-template-columns: 1fr 1fr; }
  .cs-hero__meta { grid-template-columns: 1fr; }
  .pair__head { flex-direction: column; align-items: flex-start; }
  .pair__meta { width: 100%; }
}
@media (max-width: 600px) {
  .solo-grid, .protect-grid { grid-template-columns: 1fr; }
  .site-header nav { display: none; }
  .brand-sub { display: none; }
}