/* =====================================================================
   Startseite – Sektion „MCP“ als Bento wie auf den Lösungsseiten
   („Der Weg eines Platzes“): Kopf links, fünf Kacheln mit Schritt, Headline,
   Text und unten angeschnittener Oberfläche. Markup: home-mcp-section.php.
   ===================================================================== */
/* Immer dunkel, auch im hellen Modus: die Sektion bekommt die Token-Zuordnung von
   :root[data-theme="dark"] (design-system/tokens/generated/tokens.css). Nur Verweise auf
   Tokens; bei Aenderungen am Dunkel-Thema hier nachziehen. Die Alt-Variablen (--text, --violet)
   werden neu gesetzt, weil sie am :root schon aufgeloest sind. */
.mcp-section {
  color-scheme: dark;
  --ds-text-primary: var(--ds-color-night-50);
  --ds-text-secondary: var(--ds-color-night-300);
  --ds-text-muted: var(--ds-color-night-400);
  --ds-text-inverse: var(--ds-color-grey-900);
  --ds-text-brand: var(--ds-color-violet-500);
  --ds-surface-default: var(--ds-color-night-900);
  --ds-surface-page: var(--ds-color-night-950);
  --ds-surface-subtle: var(--ds-color-night-800);
  --ds-surface-brand: var(--ds-color-violet-d100);
  --ds-surface-inverse: var(--ds-color-night-50);
  --ds-border-default: var(--ds-color-night-700);
  --ds-border-subtle: var(--ds-color-night-800);
  --ds-border-card: var(--ds-color-night-700);
  --ds-border-strong: var(--ds-color-night-600);
  --ds-border-brand: var(--ds-color-violet-500);
  --ds-border-focus: var(--ds-color-violet-500);
  --ds-focus-ring: var(--ds-color-violet-500);
  --ds-action-primary: var(--ds-color-night-50);
  --ds-action-primary-hover: var(--ds-color-white);
  --ds-action-primary-text: var(--ds-color-night-950);
  --ds-action-secondary-text: var(--ds-color-night-50);
  --ds-action-secondary-border: var(--ds-color-night-700);
  --ds-action-secondary-hover-border: var(--ds-color-violet-500);
  --ds-action-secondary-hover-text: var(--ds-color-violet-500);
  --violet: var(--ds-text-brand);
  --text: var(--ds-text-primary);
  --text-muted: var(--ds-text-secondary);
  padding: var(--ds-space-24) 0;
  /* Grund wie die Plattform-Sektion (showcase.css .platform-section), Bausteine darauf als Glas */
  background:
    radial-gradient(60rem 30rem at 15% 0%, rgba(117, 49, 165, 0.35), transparent 60%),
    radial-gradient(50rem 26rem at 90% 100%, rgba(84, 94, 211, 0.18), transparent 55%),
    #260E3A;
  color: var(--ds-text-primary);
}
.mcp-section {
  --ds-surface-default: rgba(255, 255, 255, .06);
  --ds-surface-subtle: rgba(255, 255, 255, .05);
  --ds-surface-page: rgba(12, 4, 24, .45);
  --ds-border-subtle: rgba(255, 255, 255, .10);
  --ds-border-default: rgba(255, 255, 255, .14);
  --ds-border-card: rgba(255, 255, 255, .14);
  --ds-text-secondary: rgba(236, 228, 248, .76);
}
.mcp-tile { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 40px 80px -50px rgba(8, 2, 20, .7); }

/* Kopf: Headline links, Einleitung und Aktionen rechts */
.mcp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--ds-space-12); align-items: end; margin-bottom: var(--ds-space-12); }
.mcp-title { margin: 0; color: var(--ds-text-primary); font-family: var(--font-display); font-size: clamp(36px, 4.2vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.mcp-lede { margin: 0; color: var(--ds-text-secondary); font: var(--ds-type-body-lg-weight) var(--ds-type-body-lg-size) / var(--ds-type-body-lg-line-height) var(--ds-type-body-lg-family); }
.mcp-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-6); }

/* Raster: oben zwei breite Kacheln, unten drei */
.mcp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.mcp-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; grid-column: span 2; height: 480px; border: 1px solid var(--ds-border-subtle); border-radius: 28px; background: var(--ds-surface-default); }
.mcp-tile--wide { grid-column: span 3; height: 560px; }
.mcp-tile-copy { position: relative; z-index: 2; padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 44px) 0; }
.mcp-tile-n { display: block; margin-bottom: var(--ds-space-3); color: var(--ds-text-brand); font-family: var(--font-micro); font-size: var(--ds-font-size-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mcp-tile h3 { margin: 0 0 var(--ds-space-3); color: var(--ds-text-primary); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.mcp-tile-copy p { max-width: 46ch; margin: 0; color: var(--ds-text-secondary); font-size: var(--ds-font-size-base); line-height: 1.6; }

/* Nachgebaute Oberflächen: am unteren Rand angeschnitten */
/* im Fluss unter dem Text; die Kachel schneidet sie unten ab (overflow: hidden) */
.mcp-ui { position: relative; flex: none; margin: var(--ds-space-8) clamp(26px, 3vw, 44px) 0; padding: var(--ds-space-5); border: 1px solid var(--ds-border-default); border-radius: 20px 20px 0 0; background: var(--ds-surface-subtle); color: var(--ds-text-primary); font-size: var(--ds-font-size-sm); }
.mcp-ui-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-4); }
.mcp-ui-h b { font-size: var(--ds-font-size-base); }
.mcp-ui-h span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ds-text-secondary); }

/* 01 · Verbinden */
.mcp-url { display: flex; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-surface-page); }
.mcp-url em { flex: none; color: var(--ds-text-secondary); font-family: var(--font-micro); font-size: var(--ds-font-size-2xs); font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mcp-url code { flex: 1; min-width: 0; overflow: hidden; color: var(--ds-text-brand); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; text-overflow: ellipsis; }
.mcp-url span { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-inverse); color: var(--ds-text-inverse); font-size: var(--ds-font-size-xs); font-weight: 600; }
.mcp-agents { display: grid; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.mcp-agents li { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); background: var(--ds-surface-default); }
.mcp-agents li b { flex: 1; font-size: var(--ds-font-size-base); }
.mcp-agents li > svg:last-child { color: var(--ds-text-secondary); }

/* 02 · Gestalten */
.mcp-ask { margin: 0 0 var(--ds-space-4) auto; max-width: 88%; padding: var(--ds-space-3) var(--ds-space-4); border-radius: 16px 16px 4px 16px; background: var(--ds-surface-brand); color: var(--ds-text-primary); line-height: 1.5; }
.mcp-page { display: block; overflow: hidden; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); background: var(--ds-color-white); color: var(--ds-color-grey-900); }
.mcp-page-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 var(--ds-space-3); border-bottom: 1px solid var(--ds-color-grey-200); }
.mcp-page-bar i { margin-right: auto; font-size: var(--ds-font-size-2xs); font-style: normal; font-weight: 700; letter-spacing: .08em; }
.mcp-page-bar em { width: 22px; height: 4px; border-radius: 2px; background: var(--ds-color-grey-200); }
/* Seitenkopf wie die Brand-Summit-Nachbauten der Event-Webseiten: blaues Publikumsbild unter dunkelblauem Verlauf.
   Bild als <img loading="lazy"> statt CSS-Hintergrund, sonst laedt es beim Seitenaufbau mit und bremst das LCP der Startseite. */
.mcp-page-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: var(--ds-space-8) var(--ds-space-4) var(--ds-space-5); color: var(--ds-color-white); background: var(--ds-color-navy-900); }
.mcp-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-color-navy-900) 84%, transparent) 0%, color-mix(in srgb, var(--ds-color-navy-900) 52%, transparent) 60%, color-mix(in srgb, var(--ds-color-navy-900) 22%, transparent)); }
.mcp-page-img, .mcp-page-img img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.mcp-page-img img { object-fit: cover; object-position: center 30%; }
.mcp-page-hero b { font-size: var(--ds-font-size-xl); }
.mcp-page-hero small { color: color-mix(in srgb, var(--ds-color-white) 82%, transparent); }
.mcp-page-hero i { align-self: flex-start; margin-top: var(--ds-space-2); padding: 5px 12px; border-radius: var(--ds-radius-pill); background: var(--ds-color-violet-700); font-size: var(--ds-font-size-xs); font-style: normal; font-weight: 600; }
.mcp-page-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); padding: var(--ds-space-4); }
.mcp-page-form em { display: block; margin-bottom: 4px; color: var(--ds-color-grey-500); font-size: var(--ds-font-size-2xs); font-style: normal; }
.mcp-page-form u { display: block; height: 26px; border: 1px solid var(--ds-color-grey-200); border-radius: var(--ds-radius-sm); }
.mcp-tag { display: inline-flex; margin-bottom: var(--ds-space-3); align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-default); color: var(--ds-text-secondary); font-size: var(--ds-font-size-xs); }
.mcp-tag .svgicon { color: var(--ds-text-brand); }

/* 03 · Anbinden */
.mcp-ui--systems { display: grid; gap: var(--ds-space-2); }
.mcp-sys { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); background: var(--ds-surface-default); }
.mcp-sys span { flex: 1; min-width: 0; }
.mcp-sys b { display: block; font-size: var(--ds-font-size-md); }
.mcp-sys small { color: var(--ds-text-secondary); }
.mcp-sys i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-brand-marketing-success); box-shadow: 0 0 0 4px var(--ds-brand-marketing-success-soft); }

/* 04 · Versenden */
.mcp-ui--send { display: grid; gap: var(--ds-space-3); }
.mcp-mail { display: flex; flex-direction: column; gap: 6px; padding: var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-color-white); color: var(--ds-color-grey-900); }
.mcp-mail small { color: var(--ds-color-grey-500); }
.mcp-mail u { height: 5px; border-radius: 3px; background: var(--ds-color-grey-200); }
.mcp-mail u.is-short { width: 60%; }
.mcp-mail i { align-self: flex-start; margin-top: 4px; padding: 4px 12px; border-radius: var(--ds-radius-pill); background: var(--ds-color-violet-700); color: var(--ds-color-white); font-size: var(--ds-font-size-xs); font-style: normal; font-weight: 600; }
.mcp-ticket { display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-3); border-left: 3px solid var(--ds-border-brand); border-radius: var(--ds-radius-md); background: var(--ds-color-white); color: var(--ds-color-grey-900); }
.mcp-ticket img { flex: none; width: 64px; height: 64px; }
.mcp-ticket b { display: block; font-size: var(--ds-font-size-md); }
.mcp-ticket small { color: var(--ds-color-grey-500); }

/* 05 · Kontrollieren */
.mcp-switch { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); background: var(--ds-surface-default); }
.mcp-switch b { display: block; font-size: var(--ds-font-size-md); }
.mcp-switch small { color: var(--ds-text-secondary); }
.mcp-switch i { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--ds-radius-pill); background: var(--ds-color-violet-500); }
.mcp-switch i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-color-white); }
.mcp-log { display: grid; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.mcp-log li { display: flex; gap: var(--ds-space-3); padding-bottom: var(--ds-space-2); border-bottom: 1px solid var(--ds-border-subtle); }
.mcp-log em { flex: none; color: var(--ds-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }

/* Kleingedrucktes zu KI unter der Karte */
.mcp-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-8); margin-top: var(--ds-space-16); padding-top: var(--ds-space-8); border-top: 1px solid var(--ds-border-subtle); }
.mcp-notes b { display: block; margin-bottom: var(--ds-space-2); color: var(--ds-text-primary); font-size: var(--ds-font-size-sm); }
.mcp-notes p { margin: 0; color: var(--ds-text-secondary); font-size: var(--ds-font-size-sm); line-height: 1.55; }
.mcp-notes-more { margin: var(--ds-space-6) 0 0; font-size: var(--ds-font-size-sm); }
.mcp-notes-more a { display: inline-block; padding-block: 4px; color: var(--ds-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.mcp-notes-more a:hover { color: var(--ds-text-primary); }

/* Bis 980 px: Kopf untereinander, Kacheln zweispaltig; bis 760 px einspaltig */
@media (max-width: 980px) {
  .mcp-head { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-6); }
  .mcp-tile, .mcp-tile--wide { grid-column: span 3; height: 480px; }
  .mcp-tile:last-child { grid-column: span 6; }
  .mcp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mcp-section { padding: var(--ds-space-16) 0; }
  .mcp-bento { grid-template-columns: minmax(0, 1fr); }
  .mcp-tile, .mcp-tile--wide, .mcp-tile:last-child { grid-column: auto; height: auto; }
  /* Oberfläche im Fluss statt angeschnitten, damit nichts verdeckt wird */
  .mcp-ui { margin: var(--ds-space-6) var(--ds-space-5) 0; }
  .mcp-actions .ds-btn { flex: 1 1 100%; justify-content: center; }
  .mcp-notes { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); margin-top: var(--ds-space-12); }
}

/* Barrierefreiheit (Lighthouse 06.10.2026): Kacheln mit deckendem Grund in der Farbe, die das
   halbtransparente Weiss auf #260E3A ergibt; so berechnen Pruefwerkzeuge den Kontrast gegen den
   dunklen Grund statt gegen die helle Seite dahinter. Optisch unveraendert. */
.mcp-section .mcp-tile { background-color: #331D46; }
/* Link zum Trust Center: Trefferflaeche mindestens 24 px hoch (WCAG 2.5.8) */
.mcp-notes-more a { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 0; }
/* Vier gleich breite Kacheln (/ki-eventmanagement/): bis 980 px zwei je Reihe, die letzte nicht
   ueber die volle Breite wie im Fuenfer-Raster der Startseite */
@media (max-width: 980px) and (min-width: 761px) {
  .mcp-bento--four .mcp-tile:last-child { grid-column: span 3; }
}