/* ==========================================================================
   L3 — „Anonymisierte Beispiel-Chancen“
   Eigene Klassen ausschließlich mit Präfix bsp-. Farben, Abstände, Radien,
   Schatten und Schriftgrößen ausschließlich aus den Tokens von warm-modern.css.
   ========================================================================== */

/* --------------------------------------------------------------- Kopf */
.bsp-kopf { max-width: 66ch; }
.bsp-kopf__hinweis { margin-top: var(--s5); }

/* ------------------------------------------------------------- Raster
   Kein Drei-Karten-Raster: eine führende Karte über die volle Breite,
   darunter zwei kompaktere Karten. Auf schmalen Geräten einspaltig. */
.bsp-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: start;
}

.bsp-karte {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
  min-width: 0;
}
.bsp-karte--gross {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5);
}
.bsp-karte--klein {
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
}

/* Die zweite kompakte Karte sitzt eine Stufe tiefer — bewusster Versatz. */
.bsp-karte--versetzt { margin-top: var(--s6); }

/* --------------------------------------------------------------- Bild
   Einheitliches Seitenverhältnis 4:3 für alle drei Karten. */
.bsp-bild {
  position: relative;
  align-self: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sink);
  border-radius: var(--r-m);
}
.bsp-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(21, 33, 27, .06);
}
.bsp-bild > svg { width: 100%; height: 100%; object-fit: cover; }

/* Vergrößertes Berührungsziel für den Maps-Link im Bild-Fallback */
.bsp-mapslink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--s2);
}

/* --------------------------------------------------------------- Text */
.bsp-karte__text {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.bsp-karte--gross .bsp-karte__text { gap: var(--s4); justify-content: space-between; }

.bsp-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.bsp-karte__titel { margin-top: var(--s3); overflow-wrap: anywhere; }
.bsp-karte--gross .bsp-karte__titel { font-size: var(--t-h3); }
.bsp-karte--klein .bsp-karte__titel { font-size: var(--t-h4); }
.bsp-karte__unter {
  margin-top: var(--s1);
  color: var(--text-muted);
  font-size: var(--t-basis);
  overflow-wrap: anywhere;
}
.bsp-karte__meta { margin-top: auto; }
.bsp-karte__meta svg { color: var(--text-faint); }

/* Opportunity-Score: ergänzendes Merkmal, in den kleinen Karten bewusst
   nur als Textwert neben der Verfahrensphase. */
.bsp-chance {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  flex: none;
}
.bsp-chance__rubrik {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.bsp-chance__wert {
  font-size: var(--t-h4);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.bsp-chance__wert.is-hoch   { color: var(--forest); }
.bsp-chance__wert.is-mittel { color: var(--clay-text); }

.bsp-karte__aktion {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s3);
  margin-left: calc(var(--s3) * -1);
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--forest);
  font-size: var(--t-basis);
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--dur) var(--ease);
}
.bsp-karte__aktion:hover { background: var(--forest-soft); }

/* ------------------------------------------------------------- Aktion */
.bsp-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-l);
}
.bsp-aktion__text { min-width: 0; }
.bsp-aktion__titel { font-size: var(--t-gross); font-weight: 800; letter-spacing: -.012em; }
.bsp-aktion__zeile { margin-top: var(--s1); color: var(--text-muted); font-size: var(--t-basis); }

/* ================================================================ Modal */
.bsp-modal[hidden] { display: none; }
.bsp-hg { z-index: 90; }

.bsp-dialog {
  top: var(--s5);
  left: 50%;
  width: min(960px, calc(100% - var(--s6)));
  max-height: calc(100% - var(--s7));
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bsp-dialog.is-offen { opacity: 1; transform: translate(-50%, 0); }

.bsp-dialog__marke { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bsp-dialog__zeile { font-size: var(--t-basis); font-weight: 700; }

.bsp-dialog__koerper { display: flex; flex-direction: column; gap: var(--s5); }

.bsp-d-bild {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sink);
  border-radius: var(--r-m);
}
.bsp-d-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(21, 33, 27, .06);
}
.bsp-d-bild > svg { width: 100%; height: 100%; object-fit: cover; }

.bsp-d-titel { font-size: var(--t-h3); overflow-wrap: anywhere; }
.bsp-d-unter { margin-top: var(--s2); color: var(--text-muted); font-size: var(--t-lauf); }
.bsp-d-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }

.bsp-d-quellen { display: flex; flex-direction: column; gap: var(--s4); }
.bsp-d-assets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

.bsp-d-kontakte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
.bsp-d-kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.bsp-d-kontakt__rubrik {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bsp-d-kontakt__wert { font-size: var(--t-gross); font-weight: 700; overflow-wrap: anywhere; }
.bsp-d-kontakt__leer { font-size: var(--t-gross); font-weight: 700; color: var(--text-muted); }
.bsp-d-kontakt__zeile { font-size: var(--t-klein); color: var(--text-muted); overflow-wrap: anywhere; }
.bsp-d-kontakt__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: auto; }
.bsp-d-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: var(--t-basis);
  font-weight: 700;
  color: var(--forest);
  overflow-wrap: anywhere;
}
.bsp-d-link:hover { color: var(--forest-dark); text-decoration: underline; }

.bsp-dialog__fuss { flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.bsp-dialog__fussnote {
  flex: 1 1 220px;
  font-size: var(--t-klein);
  color: var(--text-muted);
}

/* ---------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  .bsp-karte--gross { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .bsp-karte--klein { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .bsp-raster { grid-template-columns: minmax(0, 1fr); }
  .bsp-karte--gross,
  .bsp-karte--klein { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .bsp-karte--versetzt { margin-top: 0; }
}

@media (max-width: 620px) {
  .bsp-karte--gross,
  .bsp-karte--klein { grid-template-columns: minmax(0, 1fr); padding: var(--s4); gap: var(--s4); }
  .bsp-karte--gross .bsp-karte__titel { font-size: var(--t-h4); }
  .bsp-aktion { padding: var(--s4); }
  .bsp-aktion .wm-btn { width: 100%; }

  .bsp-dialog {
    top: var(--s2);
    width: calc(100% - var(--s4));
    max-height: calc(100% - var(--s4));
  }
  .bsp-d-kontakte { grid-template-columns: minmax(0, 1fr); }
  .bsp-dialog__fuss .wm-btn { flex: 1 1 140px; }
}