/* Modul „kasten“ (module/kasten). Nur Tokens: --bm-* (Website), --bb-*
   (Bausteine, Ton-Regel). Werte aus seiten/module/hinweis.css (Welle PA-2a).
   Breakpoints: 768 (Felder zweispaltig). */

/* ── Platz: heute .bm-hinweis-platz = ein Viertel der Sektionsluft ─────── */
.bb-m-kasten {
  --bb-sektion-abstand: calc(var(--bm-sektion) * 0.25);
  --bb-sektion-abstand-halb: calc(var(--bm-sektion) * 0.125);
  --bb-sektion-abstand-gross: calc(var(--bm-sektion) * 0.5);
  /* Breite der Randspalte der Vorlagen (aufbau.css: 17rem). */
  --bb-kasten-rand-breite: 17rem;
  /* Signalfläche: auf Hell die ruhige Signalfläche, auf Dunkel die Karte. */
  --bb-kasten-signal: var(--bm-signal-zart);
}
.bb-m-kasten:is([data-ton='dunkel'], [data-ton='bild']) { --bb-kasten-signal: var(--bb-karte); }

/* ── Hülle ─────────────────────────────────────────────────────────────── */
.bb-m-kasten__kasten {
  max-width: var(--bm-textbreite);
  margin: 0;
  color: var(--bb-text);
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-text);
}
.bb-m-kasten__kasten > * { margin: 0; }
.bb-m-kasten__kasten > * + * { margin-top: 0.625rem; }
.bb-m-kasten__etikett {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-fett);
  letter-spacing: var(--bm-sp-ziffer);
  line-height: var(--bm-zh-kompakt);
  text-transform: uppercase;
  color: var(--bb-text-ruhig);
}
.bb-m-kasten__text { color: var(--bb-text); }
.bb-m-kasten__begriff { font-size: var(--bm-t-kartentitel); font-weight: var(--bm-g-titel); line-height: var(--bm-zh-titel); }
.bb-m-kasten__begriff dfn { font-style: normal; }

/* ── kurz-erklaert: ruhige Fläche, kleiner Signalpunkt am Etikett ──────── */
.bb-m-kasten--kurz-erklaert .bb-m-kasten__kasten {
  padding: 1.5rem 1.75rem;
  border-radius: var(--bb-karte-radius);
  background: var(--bb-karte);
}
.bb-m-kasten--kurz-erklaert .bb-m-kasten__etikett::before {
  content: '';
  align-self: center;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: -0.25rem;
  border-radius: 50%;
  background: var(--bb-akzent);
}

/* ── steckbrief: Datenblatt – kräftige Linie oben, Felder in Zeilen ────── */
.bb-m-kasten--steckbrief .bb-m-kasten__kasten {
  max-width: none;
  padding-top: 1rem;
  border-top: 2px solid var(--bb-text);
}
.bb-m-kasten__gegenstand {
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-text);
}
.bb-m-kasten__felder { margin-top: 1rem; }
.bb-m-kasten__feld {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--bb-linie-zart);
}
.bb-m-kasten__feld dt { font-size: var(--bm-t-klein); font-weight: var(--bm-g-fett); line-height: var(--bm-zh-mittel); }
.bb-m-kasten__feld dd { margin: 0; color: var(--bb-text); }
@media (min-width: 768px) {
  .bb-m-kasten__feld { grid-template-columns: 10rem minmax(0, 1fr); }
}

/* ── praxis-tipp: Randlinie in Tinte, eingerückt ───────────────────────── */
.bb-m-kasten--praxis-tipp .bb-m-kasten__kasten { padding-left: 1.5rem; border-left: 2px solid var(--bb-text); }

/* ── wichtig: gerahmt, Etikett in Tinte ────────────────────────────────── */
.bb-m-kasten--wichtig .bb-m-kasten__kasten {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bb-linie);
  border-radius: var(--bm-radius-feld);
}
.bb-m-kasten--wichtig .bb-m-kasten__etikett { color: var(--bb-text); }

/* ── wussten-sie: ruhige Signalfläche, Quelle klein darunter ───────────── */
.bb-m-kasten--wussten-sie .bb-m-kasten__kasten {
  padding: 1.5rem 1.75rem;
  border-radius: var(--bb-karte-radius);
  background: var(--bb-kasten-signal);
}
.bb-m-kasten--wussten-sie .bb-m-kasten__etikett { color: var(--bb-text); }

/* ── Quelle ────────────────────────────────────────────────────────────── */
.bb-m-kasten__quelle {
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bb-text-ruhig);
}
.bb-m-kasten__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.bb-m-kasten__quelle a:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

/* ── ort="rand": Randspalte – schmal, kleiner, eigene Form ohne Zutat ──── */
.bb-m-kasten--rand > .bb-sektion__innen { max-width: calc(var(--bb-kasten-rand-breite) + 2 * var(--bb-rand)); margin-inline: 0; }
.bb-m-kasten--rand .bb-m-kasten__kasten { font-size: var(--bm-t-klein); line-height: var(--bm-zh-mittel); }
.bb-m-kasten--rand.bb-m-kasten--kurz-erklaert .bb-m-kasten__kasten,
.bb-m-kasten--rand.bb-m-kasten--wussten-sie .bb-m-kasten__kasten { padding: 1.125rem 1.25rem; }
.bb-m-kasten--rand .bb-m-kasten__begriff { font-size: var(--bm-t-fest); }

@media print {
  .bb-m-kasten--kurz-erklaert .bb-m-kasten__kasten,
  .bb-m-kasten--wussten-sie .bb-m-kasten__kasten { background: none; border: 1px solid var(--bb-linie); }
}