/* Ich stehe vor …: Situationen mit ersten Schritten und Verweisen in den Kompass */



/* Ideenpool: Zusatz */
details.situation .wann { margin: .1rem 0 0; font-size: .85rem; color: var(--tinte-leise); }
.inhalt .breit { grid-column: 1 / -1; }
.inhalt p { margin: 0 0 .4rem; }

/* Orientierungsrahmen */
.hf-kopf { display: flex; align-items: center; gap: .7rem; }
.hf-kopf .buchstabe { --b: 2.2rem; }
.hf-text { color: var(--tinte-leise); margin: 0 0 .6rem; max-width: var(--lesebreite); }
.wortlaut { margin: 0 0 .6rem; padding: .6rem .9rem; border-left: 3px solid var(--akzent); background: var(--akzent-hell); border-radius: 0 8px 8px 0; font-size: .96rem; }
.wortlaut b { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); margin-bottom: .15rem; }

/* Medienkompetenzrahmen */
.einordnung { margin: 0 0 var(--abschnitt); }
.einordnung h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: 1.15rem; }
.einordnung h2 .ic { width: 1.25rem; height: 1.25rem; color: var(--akzent); }
.einordnung p { margin: .3rem 0; font-size: .93rem; }
.einordnung .quelle-zeile { font-size: .82rem; color: var(--tinte-leise); }
.kat .buchstabe { font-family: var(--titel-schrift); }
.kat-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kat-raster { grid-template-columns: minmax(0, 1fr); } }

/* Farben der sechs Bereiche wie im Medienkompetenzrahmen (Wert --mkr aus daten/mkr.json, wie auf fachseminarmusik.de) */
.mkr-farbe { --mkr-text: #fff; /* gestaltung: ok – Bereichsfarben des Originals */ }
.mkr-farbe.hell { --mkr-text: #2a2100; /* gestaltung: ok */ }
.kat.mkr-farbe { border-top: 5px solid var(--mkr); }
.kat.mkr-farbe .buchstabe { background: var(--mkr); color: var(--mkr-text); }
.kat.mkr-farbe .mkr-ic { width: 1.375rem; height: 1.375rem; color: var(--mkr); }
.kat.mkr-farbe:hover { border-color: var(--mkr); }
.kat.mkr-farbe[aria-pressed="true"] { border: 2px solid var(--mkr); border-top-width: 5px; background: color-mix(in srgb, var(--mkr) 14%, var(--blatt)); color: var(--tinte); }
.kat.mkr-farbe[aria-pressed="true"] small { color: var(--tinte-leise); }
.gruppe.mkr-farbe .hf-kopf .buchstabe { background: var(--mkr); color: var(--mkr-text); }
.gruppe.mkr-farbe .hf-kopf .mkr-ic { width: 1.5rem; height: 1.5rem; color: var(--mkr); }
.gruppe.mkr-farbe .hf-kopf .anzahl { background: color-mix(in srgb, var(--mkr) 15%, var(--blatt)); color: var(--tinte); }
.gruppe.mkr-farbe details.situation { border-left-color: var(--mkr); }
.gruppe.mkr-farbe details.situation > summary::after { color: var(--mkr); }
.gruppe.mkr-farbe details.situation[open] > summary { background: color-mix(in srgb, var(--mkr) 12%, var(--blatt)); }
.gruppe.mkr-farbe .wortlaut { border-left-color: var(--mkr); background: color-mix(in srgb, var(--mkr) 9%, var(--blatt)); }
.gruppe.mkr-farbe .wortlaut b { color: var(--tinte-leise); }
.gruppe.mkr-farbe .kc .nr { background: color-mix(in srgb, var(--mkr) 15%, var(--blatt)); color: var(--tinte); }