/* =====================================================================
   /event-management-software/  –  Ergänzungen zum fp-System (Präfix em-)
   Nur Layouts, die es im Komponentensatz feature-page.css nicht gibt:
   Hero mit breiter Event-Übersicht, Event-Status-Chips, Vorlagenraster,
   Rollenmatrix mit vier Teams, Anbindungs-Kacheln, Einführungsschritte,
   Referenzkarten. Farben und Abstände kommen aus den fp-Tokens, die auf
   main.css / Design System abbilden (--fp-accent = --violet usw.).
   ===================================================================== */

/* ---- Kontrast: die Produkt-UI steht hier im ersten Viewport und wird von
   Lighthouse geprüft. --fp-faint (#8A92A2) erreicht auf Weiß nur 3,4:1,
   deshalb für diese Seite auf 4,8:1 angehoben; Dark Mode behält seinen Wert. ---- */
.em { --fp-faint: #6B7385; }

/* ---- Hero: Text oben, Event-Übersicht in voller Breite darunter ---- */
/* Kopf zentriert ueber der Event-Uebersicht (wie die Hub-Seiten) */
.em-hero-copy { max-width: 1180px; margin-inline: auto; text-align: center; }   /* breit wie die Loesungs-Heros (Martin, 07.10.2026) */
.em-hero-copy h1 { max-width: 22ch; margin-inline: auto; }
.em-hero-copy .fp-lead { max-width: 78ch; margin-inline: auto; }
.em-hero-copy .fp-actions { justify-content: center; }
.em-hero-copy { padding-top: clamp(28px, 5vw, 72px); }   /* Hero tiefer setzen (Martin 08.10.2026) */
.em-hero-stage { margin-top: clamp(36px, 5vw, 64px); }
.em-hero-stage .fp-frame { box-shadow: var(--fp-shadow); }
@media (min-width: 1040px) { .em-hero-copy h1 { max-width: 24ch; } }

/* ---- KPI-Reihe: vier Kacheln, mobil zwei ---- */
.em-kpis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .em-kpis { grid-template-columns: repeat(4, 1fr); } }
.em-kpis .fp-kpi small { color: var(--fp-faint); font-weight: 500; }

/* ---- Event-Status (Status eines Events, nicht eines Gastes) ---- */
.em-ev { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-family: var(--font-micro); font-weight: 600; white-space: nowrap; background: var(--fp-soft); color: var(--fp-muted); }
.em-ev::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .75; }
.em-ev--live  { background: var(--fp-ok-soft);     color: var(--fp-ok); }
.em-ev--prep  { background: var(--fp-accent-soft); color: var(--fp-accent); }
.em-ev--draft { background: var(--fp-warn-soft);   color: var(--fp-warn); }
.em-ev--done  { background: var(--fp-soft);        color: #5B6270; }   /* 5,5:1 auf --fp-soft */

/* ---- Vorlagenbibliothek ---- */
.em-tpl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .em-tpl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-tpl-card { position: relative; padding: 14px 14px 12px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius-sm); background: #fff; display: grid; gap: 3px; min-width: 0; }
.em-tpl-card i { width: 32px; height: 32px; border-radius: 9px; background: var(--fp-accent-soft); color: var(--fp-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.em-tpl-card b { font-size: 13.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-tpl-card span { font-size: 12px; font-family: var(--font-micro); color: var(--fp-muted); }
.em-tpl-card small { margin-top: 6px; font-size: 11px; font-family: var(--font-micro); color: var(--fp-faint); }
.em-tpl-card:first-child { border-color: var(--fp-accent); box-shadow: 0 0 0 3px var(--fp-accent-soft); }

/* ---- Rollenmatrix mit vier Teams ---- */
.em-roles { max-width: 980px; margin: 0 auto; }
.em-roles .fp-roles > div { grid-template-columns: 1.7fr repeat(4, 1fr); }
@media (max-width: 599px) {
  .em-roles .fp-roles { font-size: 12px; font-family: var(--font-micro); }
  .em-roles .fp-roles > div { grid-template-columns: 1.4fr repeat(4, 1fr); padding: 10px 12px; gap: 4px; }
  .em-roles .fp-roles-head span { font-size: 9px; font-family: var(--font-micro); letter-spacing: .04em; }
}
.em .fp-band .fp-showcase-notes { margin-top: 44px; }

/* ---- Kontaktdetail: zwei Spalten, kein QR-Bereich ---- */
.em-detail { grid-template-columns: 150px 1fr; }
@media (max-width: 599px) { .em-detail { grid-template-columns: 1fr; } .em-detail .fp-detail-side { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--fp-soft); padding-bottom: 14px; } }
.em-detail .fp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em-detail .fp-log li { grid-template-columns: 90px 1fr; }
.em-detail .fp-log li em:first-child { color: var(--fp-ink); font-weight: 600; }

/* ---- Workflows: Trigger und Aktion mit Untertitel ---- */
.em .fp-auto-row .fp-tpl > span { display: block; line-height: 1.25; min-width: 0; }
.em .fp-auto-row .fp-tpl > span small { display: block; margin-top: 2px; }
.em .fp-auto-row.is-off .fp-tpl svg { color: var(--fp-faint); }

/* ---- Anbindungen ---- */
.em-int { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .em-int { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-int-card { display: grid; gap: 2px; padding: 18px 16px 16px; border: 1px solid #D9C8F1; border-radius: var(--fp-radius-sm); background: #fff; text-decoration: none; color: inherit; min-width: 0; transition: border-color .2s, transform .2s; }
@media (hover: hover) { .em-int-card:hover { border-color: var(--fp-accent); transform: translateY(-2px); } }
.em-int-card:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 3px; }
.em-int-card img, .em-int-card i { width: 40px; height: 40px; object-fit: contain; margin-bottom: 10px; }
.em-int-card i { border-radius: 10px; background: var(--fp-accent-soft); color: var(--fp-accent); display: flex; align-items: center; justify-content: center; }
.em-int-card b { font-size: 14px; letter-spacing: -.01em; }
.em-int-card span { font-size: 12px; font-family: var(--font-micro); color: var(--fp-muted); }
.em .fp-band--violet .fp-roles-cap a { color: var(--fp-accent); }

/* ---- Einführung: drei nummerierte Schritte ---- */
.em-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 800px) { .em-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.em-steps li { position: relative; padding: 26px 26px 24px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: #fff; display: flex; flex-direction: column; gap: 10px; }
.em-steps em { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--fp-accent); }
.em-steps b { font-family: var(--font-display); font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.em-steps p { font-size: 14.5px; line-height: 1.55; color: var(--fp-muted); flex: 1; }
.em-steps .fp-link { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Referenzen: Ergebnis mit Zahl, Bild lokal ---- */
.em-cases { display: grid; gap: 18px; }
@media (min-width: 800px) { .em-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-case { display: flex; flex-direction: column; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
@media (hover: hover) { .em-case:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow); } }
.em-case:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 3px; }
.em-case-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fp-soft); }
.em-case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-case-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.em-case-brand { display: block; min-height: 22px; font-size: 12.5px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--fp-faint); }
.em-case-brand img { height: 20px; width: auto; display: block; }
.em-case-num { font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 38px); letter-spacing: -.035em; line-height: 1; color: var(--fp-accent); font-variant-numeric: tabular-nums; }
.em-case-num small { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; font-weight: 500; color: var(--fp-muted); }
.em-case h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.25; }
.em-case p { font-size: 14.5px; line-height: 1.55; color: var(--fp-muted); flex: 1; }
.em-case .fp-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 6px; }

/* ---- Dunkles Design ---- */
[data-theme="dark"] .em-tpl-card,
[data-theme="dark"] .em-int-card,
[data-theme="dark"] .em-steps li,
[data-theme="dark"] .em-case { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .em-case-media { background: rgba(255,255,255,.06); }
[data-theme="dark"] .em-case-brand img { filter: brightness(0) invert(1); opacity: .7; }
[data-theme="dark"] .em-ev--done { color: var(--fp-faint); }
[data-theme="dark"] .em { --fp-faint: #9AA2B1; }

/* ---- Bewegung nur als Zustandswechsel ---- */
@media (prefers-reduced-motion: reduce) {
  .em-case, .em-int-card { transition: none; }
  @media (hover: hover) { .em-case:hover, .em-int-card:hover { transform: none; } }
}