/* hochzwei tech 2026 Rebrand: Managed Detect and Response detail page.
 * Built on styles/core.css tokens (+ shared components from styles/index.css
 * and styles/security.css). No raw hex, so light/dark flips automatically.
 * No em-dashes or en-dashes. */

/* --- Two-offer block (the page's core decision) --------------------------- */
.mdr-offers { align-items: stretch; }
.mdr-offer { gap: var(--space-5); }
.mdr-offer__lead { font-size: var(--fs-body); color: var(--c-text); }

.mdr-check { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.mdr-check li { position: relative; padding-left: 1.7em; font-size: var(--fs-body); line-height: 1.4; }
.mdr-check li::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  /* Weight 400 statt 700: sonst hinge SpaceMono-Bold (17 KiB) nur fuer dieses
     eine "+" im kritischen Pfad (gleiche Entscheidung wie beim handover__marker
     in index.css). */
  font-family: var(--font-mono); font-weight: 400;
  color: var(--c-brand);
}
.ms-card:hover .mdr-check li::before { color: var(--c-accent); }

.mdr-offer__note {
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--c-text-muted);
}
.ms-card:hover .mdr-offer__note { color: var(--c-brand-ink); opacity: 0.9; border-top-color: rgba(255, 255, 255, 0.3); }

/* BEWUSST KEINE Featured-Card: Basis und Vollbetrieb sind ein echtes
 * Entweder-oder, keine Empfehlung. Eine dauerhaft gefuellte Karte liest sich
 * als Hausmeinung und laesst zusammen mit dem Hover-Fill der Nachbarkarte die
 * ganze Gruppe blau wirken. Hervorhebung deshalb nur beim Hover (.ms-card).
 * Der Lead braucht dafuer den Hover-Flip, sonst bleibt dunkler Text auf Blau. */
.ms-card:hover .mdr-offer__lead { color: var(--c-brand-ink); opacity: 0.9; }

/* --- Mandat: Standardmassnahmen gegen freigabepflichtige Massnahmen -------
 * Zwei gleichwertige Panels, bewusst KEINE .ms-card: hier waehlt niemand aus,
 * die beiden Spalten sind ein Kontrast-Paar. Deshalb auch keine Featured-Card
 * und kein Hover-Fill. Unterschieden wird ueber Label und Listen-Marker. */
.mdr-mandat__col {
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);   /* explizit, nicht geerbt: das Panel soll auch auf einem Band lesbar bleiben */
  padding: var(--space-6);
}
.mdr-mandat__col .mono-label { color: var(--c-brand); }
.mdr-mandat__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }

.mdr-acts { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; margin: 0; padding: 0; list-style: none; }
.mdr-acts li { position: relative; padding-left: 1.7em; font-size: var(--fs-body); line-height: 1.4; }

/* Sofort-Mandat: gefuellter Marker, wir handeln ohne Rueckfrage. */
.mdr-acts--now li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 0.62em; height: 0.62em;
  border-radius: 2px;
  background: var(--c-brand);
}
/* Freigabepflichtig: leeres Kaestchen, es fehlt Ihre Unterschrift. */
.mdr-acts--gate li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 0.62em; height: 0.62em;
  border-radius: 2px;
  border: 2px solid var(--c-brand);
}
.mdr-mandat__note {
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--c-text-muted);
}

/* --- Ansprechpartner: eine .person-Karte, auf Lesebreite begrenzt --------- */
.mdr-owner { max-width: 860px; }

/* --- Comparison table head (reuses .compare from core.css) ---------------- */
.compare__head--basis { color: var(--c-text-muted); opacity: 0.75; }
.mdr-compare .compare__us::before { background: var(--c-brand); }
.mdr-compare__foot { margin-top: var(--space-6); }

/* Gruppen-Zwischenzeile: 15 Zeilen am Stueck sind eine Wand. Drei benannte
 * Bloecke geben dem Auge Ankerpunkte, ohne Inhalt zu streichen. Als Block-Kind
 * von .compare (nicht als .compare__row), damit es die volle Breite nimmt. */
.compare__group {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--c-brand);
  margin: 0;
  padding: var(--space-7) 0 var(--space-3);
  border-bottom: 1px solid var(--c-border);
}
.compare__group:first-of-type { padding-top: var(--space-5); }

/* --- SLA datasheet on the page background --------------------------------- */
.mdr-sla { margin-bottom: var(--space-7); }

/* --- Onboarding cards ------------------------------------------------------ */
.mdr-step__when { color: var(--c-brand); }
.ms-card:hover .mdr-step__when { color: var(--c-brand-ink); }

@media (max-width: 1024px) {
  .mdr-offers { grid-template-columns: 1fr; }
}