/* =====================================================================
   MISSION CONTROL by IbetMax – Öffentliche Wissensseite
   ---------------------------------------------------------------------
   Erklärt Besuchern das Mission-Control-Konzept anhand von reinen
   DEMO-Projekten. Designfamilie wie /max/max-bote/ und
   /max/embedding-engine/: warme dunkle Flächen, Teal/Cyan als
   Leitfarbe, Messing/Amber als zweiter Akzent, Courier als Monofont.

   Namespace: .mcx-*  (mission control public / "extern")
   Bewusst NICHT .mc-* – damit dieses Stylesheet keinerlei Berührung mit
   dem internen, nichtöffentlichen Mission Control haben kann.
   ===================================================================== */

.mcx-page{
  --mcx-bg:      #06090c;
  --mcx-panel:   #0d1319;
  --mcx-panel-2: #090d12;
  --mcx-fg:      rgba(255,255,255,.92);
  --mcx-muted:   rgba(255,255,255,.66);
  --mcx-faint:   rgba(255,255,255,.45);

  --mcx-teal:    #12c5bc;
  --mcx-teal-l:  #5fe6dd;
  --mcx-cyan:    #38e1ff;
  --mcx-brass:   #d9a441;
  --mcx-brass-t: #e8b87a;
  --mcx-amber:   #f5b32b;

  --mcx-border:  rgba(18,197,188,.16);
  --mcx-mono: 'Courier Prime','Courier New',Courier,monospace;
  --mcx-sans: 'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

.mcx-page *, .mcx-page *::before, .mcx-page *::after{ box-sizing:border-box; margin:0; padding:0; }
html:has(.mcx-page){ overflow-x:hidden; }
body.mcx-page{
  min-height:100vh;
  background:
    radial-gradient(1100px 680px at 50% -10%, rgba(12,22,32,.55), transparent 65%),
    radial-gradient(900px 500px at 85% 20%, rgba(18,197,188,.05), transparent 60%),
    var(--mcx-bg);
  color:var(--mcx-fg);
  font-family:var(--mcx-sans);
  overflow-x:hidden;
}

/* ── Atmosphäre: Oktopus-Motiv hinter dem Inhalt ──────────────
   Gleiche Technik wie im ursprünglichen Mission Control: eine fixierte
   Ebene, die immer genau den sichtbaren Bereich füllt – unabhängig
   davon, wie lang die Seite ist. Darüber ein kräftiges dunkles Overlay,
   damit Text an jeder Bildstelle lesbar bleibt.                      */
body.mcx-page::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(6,9,12,.90) 0%,
      rgba(6,9,12,.76) 45%,
      rgba(6,9,12,.66) 100%),
    linear-gradient(to bottom,
      rgba(6,9,12,.72) 0%,
      rgba(6,9,12,.50) 30%,
      rgba(6,9,12,.60) 70%,
      rgba(6,9,12,.88) 100%),
    url("img/mission-control-backdrop.webp") center center / cover no-repeat;
}
/* Inhalt liegt über der Backdrop-Ebene */
.mcx-topbar, .mcx-footer{ position:relative; z-index:1; }

.mcx-visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Kopfzeile ────────────────────────────────────────────────────── */
.mcx-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:18px 22px; max-width:1180px; margin:0 auto;
}
.mcx-back{
  display:inline-flex; align-items:center;
  min-height:44px; padding:4px 10px 4px 0;
  font-family:var(--mcx-mono); font-size:12px; letter-spacing:.04em;
  color:var(--mcx-faint); text-decoration:none; white-space:nowrap;
  transition:color .2s;
}
.mcx-back:hover{ color:var(--mcx-teal); }
.mcx-back:focus-visible{ outline:2px solid var(--mcx-cyan); outline-offset:3px; border-radius:6px; }
.mcx-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mcx-mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--mcx-teal-l);
  background:rgba(18,197,188,.07); border:1px solid rgba(18,197,188,.24);
  border-radius:100px; padding:7px 15px;
}
.mcx-badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--mcx-teal);
  box-shadow:0 0 8px var(--mcx-teal); animation:mcxPulse 2.4s ease-in-out infinite;
}
@keyframes mcxPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.mcx-mode{
  font-family:var(--mcx-mono); font-size:10px; letter-spacing:.2em;
  color:var(--mcx-brass-t);
  border:1px solid rgba(217,164,65,.32); background:rgba(217,164,65,.06);
  border-radius:100px; padding:7px 14px; white-space:nowrap;
}
@media (max-width:640px){ .mcx-mode{ display:none; } }

.mcx-main{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:8px 22px 40px; }

/* ── Gemeinsame Bausteine ────────────────────────────────────────── */
.mcx-eyebrow{
  font-family:var(--mcx-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--mcx-faint);
}
.mcx-panel{
  position:relative;
  background:linear-gradient(165deg, var(--mcx-panel) 0%, var(--mcx-panel-2) 100%);
  border:1px solid var(--mcx-border); border-radius:18px;
  padding:28px 28px 30px; margin-top:26px;
  box-shadow:0 10px 34px rgba(0,0,0,.35), 0 0 22px rgba(18,197,188,.05);
}
.mcx-panel-title{
  font-size:clamp(19px, 2.4vw, 25px); font-weight:800; letter-spacing:.01em;
  color:var(--mcx-fg);
}
.mcx-panel-title::after{
  content:''; display:block; width:56px; height:2px; margin-top:10px;
  background:linear-gradient(to right, var(--mcx-teal), transparent);
}
.mcx-panel > p{ color:var(--mcx-muted); line-height:1.6; max-width:830px; }
.mcx-panel-title + p{ margin-top:14px; }
.mcx-panel > p + p{ margin-top:12px; }
.mcx-panel strong{ color:var(--mcx-fg); }

.mcx-ai-tag{
  display:inline-block; margin-top:7px;
  font-family:var(--mcx-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--mcx-faint);
}

/* Bild mit Platzhalter, falls die Datei (noch) nicht vorliegt ────── */
.mcx-imgwrap{ position:relative; display:block; }
.mcx-imgwrap img{ display:block; }
.mcx-imgph{
  display:none; place-items:center; text-align:center;
  padding:26px 20px; min-height:180px;
  border:1px dashed rgba(18,197,188,.35); border-radius:16px;
  background:
    repeating-linear-gradient(135deg, rgba(18,197,188,.045) 0 10px, transparent 10px 20px),
    rgba(255,255,255,.02);
  font-family:var(--mcx-mono); font-size:11.5px; line-height:1.7;
  letter-spacing:.06em; color:var(--mcx-faint);
}
.mcx-imgwrap.is-missing .mcx-imgph{ display:grid; }
.mcx-imgwrap.is-missing img{ display:none; }
.mcx-imgph code{ color:var(--mcx-teal-l); font-size:11px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.mcx-hero{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(230px, 32vw, 380px);
  gap:38px; align-items:center; padding:26px 4px 12px;
}
.mcx-hero h1{
  margin-top:12px;
  font-size:clamp(30px, 5vw, 52px); font-weight:800; letter-spacing:.04em;
  background:linear-gradient(100deg, var(--mcx-fg) 30%, var(--mcx-teal) 70%, var(--mcx-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mcx-hero-lead{
  margin-top:14px; color:var(--mcx-muted); line-height:1.65;
  font-size:16px; max-width:640px;
}
.mcx-hero-claim{
  margin-top:14px; font-family:var(--mcx-mono); font-size:14px;
  color:var(--mcx-brass-t); letter-spacing:.03em;
}
.mcx-hero-brand{
  margin-top:16px; font-family:var(--mcx-mono); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mcx-faint);
}
.mcx-hero-brand a{ color:var(--mcx-teal); text-decoration:none; }
.mcx-hero-brand a:hover{ text-decoration:underline; }
.mcx-hero-fig{ text-align:center; }
.mcx-hero-fig .mcx-imgwrap img{
  width:100%; height:auto; aspect-ratio:1/1;
  border-radius:16px; border:1px solid rgba(18,197,188,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 28px rgba(18,197,188,.10);
  margin:0 auto; object-fit:cover;
}
@media (max-width:860px){
  .mcx-hero{ grid-template-columns:1fr; gap:24px; }
  .mcx-hero-fig .mcx-imgwrap img{ max-width:320px; margin:0 auto; }
}

/* ── Showcase: die Oberfläche über die volle Panelbreite ──────── */
.mcx-showcase{ margin-top:22px; }
.mcx-showcase .mcx-imgwrap img{
  width:100%; height:auto; aspect-ratio:3/2;
  border-radius:16px; border:1px solid rgba(18,197,188,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 28px rgba(18,197,188,.10);
  object-fit:contain; background:#06090c;
}
.mcx-showcase figcaption{ text-align:center; display:block; width:100%; }

/* ── Statuszeile „Konzept“ ───────────────────────────────────────── */
.mcx-status{
  margin-top:22px; padding:16px 20px;
  border:1px solid rgba(56,225,255,.26); border-radius:14px;
  background:rgba(56,225,255,.05);
  font-size:13.5px; line-height:1.65; color:var(--mcx-muted);
}
.mcx-status strong{ color:var(--mcx-cyan); }

/* ── Abgrenzung „Keine To-do-App“ ────────────────────────────────── */
.mcx-compare{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; margin-top:22px;
}
.mcx-compare-col{
  border-radius:14px; padding:18px 20px 20px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02);
}
.mcx-compare-col--mc{
  border-color:rgba(18,197,188,.32); background:rgba(18,197,188,.05);
}
.mcx-compare-col h3{
  font-family:var(--mcx-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mcx-faint);
}
.mcx-compare-col--mc h3{ color:var(--mcx-teal-l); }
.mcx-compare-col ul{ list-style:none; margin-top:14px; }
.mcx-compare-col li{
  position:relative; padding-left:22px; margin-top:10px;
  font-size:13.5px; line-height:1.6; color:var(--mcx-muted);
}
.mcx-compare-col li::before{
  content:'–'; position:absolute; left:4px; top:0; color:var(--mcx-faint);
}
.mcx-compare-col--mc li::before{ content:'▸'; color:var(--mcx-teal); font-size:11px; top:2px; }
@media (max-width:700px){ .mcx-compare{ grid-template-columns:1fr; } }

/* ── Kernaussage einer Sektion ─────────────────────── */
.mcx-lede{
  margin-top:16px; padding-left:16px;
  border-left:2px solid rgba(18,197,188,.5);
  font-size:15.5px; line-height:1.65; color:var(--mcx-fg);
  max-width:780px;
}

/* ── Visuelle Tour: Cockpit / Projekte / Workflow ──────── */
.mcx-tour{ display:grid; gap:16px; margin-top:24px; }
.mcx-tour-item{
  border:1px solid rgba(18,197,188,.18); border-radius:16px;
  background:rgba(255,255,255,.02); padding:20px 22px 22px;
}
.mcx-tour-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.mcx-tour-kicker{
  font-family:var(--mcx-mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mcx-teal);
}
.mcx-tour-item h3{
  font-size:16.5px; font-weight:800; color:var(--mcx-fg); letter-spacing:.01em;
}
.mcx-tour-item > p{
  margin-top:10px; font-size:13.5px; line-height:1.65;
  color:var(--mcx-muted); max-width:760px;
}
/* Screenshot-Platz: 16:10, bis die echten Aufnahmen vorliegen Platzhalter */
.mcx-shot{ margin-top:16px; }
/* Hoehe vorab reservieren, damit beim Lazy-Load nichts springt */
.mcx-shot .mcx-imgwrap{ display:block; min-height:190px; }
.mcx-shot .mcx-imgwrap img{
  width:100%; height:auto;
  border-radius:12px; border:1px solid rgba(18,197,188,.24);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  background:#080c11;
}
.mcx-shot .mcx-imgph{ min-height:190px; }
.mcx-shot--inline{ margin-top:26px; }
.mcx-shot figcaption{
  margin-top:9px; font-family:var(--mcx-mono); font-size:10.5px;
  letter-spacing:.06em; color:var(--mcx-faint);
}

/* ── Projektworkflow: sechs Phasen als Gates ─────────── */
.mcx-phases{
  position:relative; list-style:none; margin-top:26px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 22px;
}
.mcx-phase{
  position:relative;
  border:1px solid rgba(217,164,65,.26); border-radius:14px;
  background:linear-gradient(165deg, rgba(217,164,65,.055) 0%, rgba(255,255,255,.02) 100%);
  padding:18px 18px 20px;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.mcx-phase:hover{
  border-color:rgba(217,164,65,.55);
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 18px rgba(217,164,65,.12);
  transform:translateY(-2px);
}
/* Prozesspfeil zwischen den Karten einer Reihe (nur Desktop) */
.mcx-phase:not(:nth-child(3n))::after{
  content:'→'; position:absolute; top:36px; right:-22px;
  transform:translateX(50%);
  color:var(--mcx-brass); font-size:15px;
  text-shadow:0 0 8px rgba(217,164,65,.5);
}
.mcx-phase-num{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  font-family:var(--mcx-mono); font-size:13px; font-weight:700;
  color:#1a1206; background:linear-gradient(140deg, var(--mcx-brass-t), var(--mcx-brass));
  box-shadow:0 0 14px rgba(217,164,65,.35);
}
.mcx-phase h3{
  margin-top:13px; font-size:15.5px; font-weight:800; color:var(--mcx-fg);
  letter-spacing:.01em;
}
.mcx-phase-lead{
  margin-top:8px; font-size:13px; line-height:1.55; color:var(--mcx-brass-t);
}
.mcx-phase-text{ margin-top:9px; font-size:12.5px; line-height:1.6; color:var(--mcx-muted); }
.mcx-phase-ai{
  display:inline-block; margin-top:12px;
  font-family:var(--mcx-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mcx-teal);
  border:1px solid rgba(18,197,188,.38); background:rgba(18,197,188,.07);
  border-radius:100px; padding:4px 11px;
}
@media (max-width:980px){
  .mcx-phases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mcx-phase:not(:nth-child(3n))::after{ display:none; }
  .mcx-phase:not(:nth-child(2n))::after{
    content:'→'; display:block; position:absolute; top:36px; right:-22px;
    transform:translateX(50%); color:var(--mcx-brass); font-size:15px;
  }
}
/* Mobil: saubere vertikale Timeline mit durchgehender Schiene */
@media (max-width:700px){
  .mcx-phases{
    grid-template-columns:1fr; gap:14px; padding-left:36px;
  }
  .mcx-phases::before{
    content:''; position:absolute; left:18px; top:14px; bottom:14px; width:2px;
    background:linear-gradient(to bottom, rgba(217,164,65,.15), rgba(217,164,65,.6), rgba(217,164,65,.15));
  }
  .mcx-phase::after{ display:none !important; }
  .mcx-phase-num{
    position:absolute; left:-36px; top:16px;
    width:34px; height:34px; font-size:12px;
  }
}

/* ── Was passiert im Hintergrund? (Skill-Prinzip) ─────── */
.mcx-behind{
  margin-top:26px; padding:22px 24px 24px;
  border:1px solid rgba(18,197,188,.28); border-radius:14px;
  background:rgba(18,197,188,.045);
}
.mcx-behind h3{
  font-size:16px; font-weight:800; color:var(--mcx-fg); letter-spacing:.01em;
}
.mcx-behind h3::before{
  content:'⚙'; margin-right:9px; color:var(--mcx-teal); font-size:15px;
}
.mcx-behind p{
  margin-top:12px; font-size:13.5px; line-height:1.65; color:var(--mcx-muted);
  max-width:800px;
}
.mcx-behind-claim{
  margin-top:16px; font-family:var(--mcx-mono); font-size:13.5px; line-height:1.6;
  color:var(--mcx-teal-l); letter-spacing:.02em;
}

/* ── Fuhrpark-Case ───────────────────────────────────────────────── */
.mcx-case-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-top:2px;
}
.mcx-case-head + p{ margin-top:14px; }
.mcx-case-id{
  font-family:var(--mcx-mono); font-size:13px; letter-spacing:.16em;
  color:var(--mcx-brass-t); border:1px solid rgba(217,164,65,.3);
  background:rgba(217,164,65,.06); border-radius:100px; padding:5px 13px;
}
.mcx-demo-flag{
  font-family:var(--mcx-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mcx-amber);
  border:1px solid rgba(245,179,43,.35); background:rgba(245,179,43,.07);
  border-radius:100px; padding:5px 12px;
}

/* Inventar-Chips */
.mcx-inventory{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mcx-inv{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--mcx-muted);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  border-radius:100px; padding:8px 16px; white-space:nowrap;
}
.mcx-inv span{ font-size:15px; }

/* Fuhrpark: kompakte Zuordnung zu den sechs Phasen ─────── */
.mcx-casephases{
  list-style:none; margin-top:22px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 20px;
}
.mcx-casephase{
  border-left:2px solid rgba(217,164,65,.45); padding:2px 0 4px 15px;
}
.mcx-casephase .ph{
  font-family:var(--mcx-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mcx-brass-t);
}
.mcx-casephase h3{
  margin-top:7px; font-size:14px; font-weight:800; color:var(--mcx-fg);
}
.mcx-casephase p{ margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--mcx-muted); }
.mcx-casephase ul{ list-style:none; margin-top:8px; }
.mcx-casephase li{
  position:relative; padding-left:14px; margin-top:5px;
  font-size:12px; line-height:1.5; color:var(--mcx-muted);
}
.mcx-casephase li::before{
  content:'·'; position:absolute; left:4px; top:-1px;
  color:var(--mcx-brass); font-weight:700;
}
@media (max-width:900px){ .mcx-casephases{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .mcx-casephases{ grid-template-columns:1fr; } }

/* Datenschutz-Hinweis (AnonyMax) */
.mcx-privacy{
  margin-top:20px; padding:18px 22px;
  border:1px solid rgba(245,179,43,.28); border-radius:14px;
  background:rgba(245,179,43,.05);
  font-size:13.5px; line-height:1.65; color:var(--mcx-muted);
}
.mcx-privacy strong{ color:var(--mcx-amber); }

/* Was Mission Control danach kann */
.mcx-abilities{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; margin-top:22px;
}
.mcx-ability{
  border:1px solid rgba(18,197,188,.18); border-radius:13px;
  background:rgba(18,197,188,.04); padding:15px 15px 16px;
}
.mcx-ability .ico{ font-size:19px; }
.mcx-ability h4{ margin-top:9px; font-size:13.5px; font-weight:800; color:var(--mcx-fg); }
.mcx-ability p{ margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--mcx-muted); }
@media (max-width:900px){ .mcx-abilities{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .mcx-abilities{ grid-template-columns:1fr; } }

/* Beispiel-Dialog (Winterreifen) */
.mcx-dialog{
  margin-top:22px; border:1px solid rgba(18,197,188,.22); border-radius:14px;
  background:rgba(255,255,255,.02); padding:18px 20px 20px;
}
.mcx-dialog-title{
  font-family:var(--mcx-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mcx-faint);
}
.mcx-line{ display:flex; gap:12px; margin-top:14px; align-items:flex-start; }
.mcx-line .who{
  flex:0 0 auto; min-width:78px;
  font-family:var(--mcx-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding-top:3px;
}
.mcx-line--human .who{ color:var(--mcx-brass-t); }
.mcx-line--ai .who{ color:var(--mcx-teal); }
.mcx-line .said{
  font-size:13.5px; line-height:1.6; color:var(--mcx-muted);
  border-left:2px solid rgba(255,255,255,.10); padding-left:14px;
}
.mcx-line--ai .said{ border-left-color:rgba(18,197,188,.45); }
@media (max-width:560px){
  .mcx-line{ flex-direction:column; gap:5px; }
  .mcx-line .said{ padding-left:11px; }
}

/* ── Prinzip: Mensch + KI + Kontext ──────────────────────────────── */
.mcx-formula{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:12px; margin-top:24px;
}
.mcx-formula-part{
  flex:1 1 200px; max-width:300px; text-align:center;
  border:1px solid rgba(18,197,188,.24); border-radius:14px;
  background:rgba(255,255,255,.025); padding:20px 16px;
}
.mcx-formula-part .ico{ font-size:26px; display:block; }
.mcx-formula-part h3{
  margin-top:10px; font-size:14.5px; font-weight:800; color:var(--mcx-fg);
  letter-spacing:.02em;
}
.mcx-formula-part p{ margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--mcx-muted); }
.mcx-formula-op{
  display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--mcx-mono); font-size:24px; font-weight:700;
  color:var(--mcx-brass); text-shadow:0 0 12px rgba(217,164,65,.4);
}
@media (max-width:760px){
  .mcx-formula{ flex-direction:column; align-items:stretch; }
  .mcx-formula-part{ max-width:none; }
  .mcx-formula-op{ padding:2px 0; }
}
.mcx-formula-note{
  margin-top:20px; font-size:13px; line-height:1.65; color:var(--mcx-muted);
  border-left:2px solid rgba(18,197,188,.45); padding-left:14px; max-width:820px;
}

/* ── Demo-Projekte ───────────────────────────────────────────────── */
.mcx-projects{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr));
  gap:14px; margin-top:22px;
}
.mcx-project{
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background:rgba(255,255,255,.025); padding:17px 17px 18px;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.mcx-project:hover{
  border-color:rgba(18,197,188,.42);
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 18px rgba(18,197,188,.10);
  transform:translateY(-2px);
}
.mcx-project--hero{
  border-color:rgba(217,164,65,.42); background:rgba(217,164,65,.05);
}
.mcx-project-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.mcx-project-id{
  font-family:var(--mcx-mono); font-size:11px; letter-spacing:.18em;
  color:var(--mcx-teal);
}
.mcx-project--hero .mcx-project-id{ color:var(--mcx-brass-t); }
.mcx-project-ico{ font-size:19px; opacity:.9; }
.mcx-project h3{
  margin-top:10px; font-size:15px; font-weight:800; color:var(--mcx-fg);
  letter-spacing:.01em;
}
.mcx-project p{ margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--mcx-muted); }
.mcx-project-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.mcx-tag{
  font-family:var(--mcx-mono); font-size:10px; letter-spacing:.06em;
  color:var(--mcx-faint);
  border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:4px 9px;
}
.mcx-project--hero .mcx-tag{ border-color:rgba(217,164,65,.26); color:var(--mcx-brass-t); }
.mcx-projects-note{
  margin-top:18px; font-size:12.5px; line-height:1.6; color:var(--mcx-faint);
  border-left:2px solid rgba(245,179,43,.45); padding-left:12px; max-width:820px;
}

/* ── Video: eingebetteter Player ────────────────────── */
.mcx-videoplayer{ margin-top:22px; }
.mcx-videoplayer video{
  display:block; width:100%; max-width:430px; height:auto; margin:0 auto;
  aspect-ratio:4/5;
  border-radius:16px; border:1px solid rgba(18,197,188,.28);
  background:#05080b;
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 28px rgba(18,197,188,.10);
}
.mcx-videoplayer video:focus-visible{ outline:2px solid var(--mcx-cyan); outline-offset:4px; }
.mcx-videoplayer figcaption{
  max-width:560px; margin:14px auto 0;
  font-size:13px; line-height:1.6; color:var(--mcx-muted); text-align:center;
}
.mcx-video-meta{
  display:block; margin-bottom:6px;
  font-family:var(--mcx-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mcx-faint);
}
.mcx-video-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:20px;
}

.mcx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 20px;
  font-family:var(--mcx-mono); font-size:13px; font-weight:700; letter-spacing:.05em;
  color:var(--mcx-bg); text-decoration:none; white-space:nowrap;
  background:linear-gradient(140deg, var(--mcx-teal), var(--mcx-cyan));
  border:0; border-radius:100px;
  box-shadow:0 4px 16px rgba(18,197,188,.25);
  transition:box-shadow .25s, transform .25s;
}
.mcx-btn:hover{ box-shadow:0 6px 22px rgba(18,197,188,.4); transform:translateY(-1px); }
.mcx-btn:focus-visible{ outline:2px solid var(--mcx-cyan); outline-offset:3px; }
.mcx-btn--ghost{
  background:transparent; color:var(--mcx-teal-l);
  border:1px solid rgba(18,197,188,.42); box-shadow:none;
}
.mcx-btn--ghost:hover{ background:rgba(18,197,188,.08); box-shadow:none; }

/* ── Chips ───────────────────────────────────────────────────────── */
.mcx-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.mcx-chip{
  font-family:var(--mcx-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--mcx-teal);
  border:1px solid rgba(18,197,188,.35); background:rgba(18,197,188,.06);
  border-radius:100px; padding:7px 15px; white-space:nowrap;
}

/* ── Transparenz-Hinweis ─────────────────────────────────────────── */
.mcx-transparency{
  margin-top:26px; padding:18px 22px;
  border:1px solid rgba(245,179,43,.28); border-radius:14px;
  background:rgba(245,179,43,.05);
  font-size:13.5px; line-height:1.65; color:var(--mcx-muted);
}
.mcx-transparency strong{ color:var(--mcx-amber); }

/* ── Footer ──────────────────────────────────────────────────────── */
.mcx-footer{
  max-width:1180px; margin:20px auto 0; padding:22px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.mcx-footer-brand{
  font-family:var(--mcx-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mcx-brass-t);
}
.mcx-footer a{
  font-family:var(--mcx-mono); font-size:13px; color:var(--mcx-teal);
  text-decoration:none;
}
.mcx-footer a:hover{ text-decoration:underline; }
.mcx-footer p{ margin-top:8px; font-size:12px; color:var(--mcx-faint); line-height:1.6; }
.mcx-footer-links{ margin-top:10px; font-size:12.5px; color:var(--mcx-faint); }
.mcx-footer-links a{ font-size:12.5px; color:var(--mcx-muted); font-family:var(--mcx-sans); }

@media (prefers-reduced-motion: reduce){
  .mcx-badge .dot{ animation:none; }
  .mcx-phase:hover, .mcx-project:hover, .mcx-btn:hover{ transform:none; }
}