/* =====================================================================
   MISSION TOPIC CARDS — 1.7.4
   Kartensystem im Mission-Medizin-Designsystem.

   Die Datei rechnet mit den Tokens aus mission-medizin-tokens.css.
   Ist diese nicht eingebunden, greifen die hinterlegten Markenwerte als
   Rückfallebene — das Plugin funktioniert also auch allein.

   Aufbau: Tokens → Grundgerüst → Werkzeugleiste → Inhaltsverzeichnis
           → Karten → Lesestrecke → Didaktik-Kästen → Medien → Umbrüche
   ===================================================================== */

.mtc-root {

    /* ---- Farbe: Rollen, nie Primitive ---- */
    --mtc-ink:           var(--mm-color-ink, #232F3F);
    --mtc-ink-2:         var(--mm-color-ink-secondary, #4F5E72);
    --mtc-ink-3:         var(--mm-color-ink-muted, #6B7A8E);
    --mtc-ink-inverse:   var(--mm-color-ink-inverse, #FDF9F4);
    --mtc-surface:       var(--mm-color-surface, #FFFFFF);
    --mtc-paper:         var(--mm-color-surface-paper, #FDF9F4);
    --mtc-subtle:        var(--mm-color-surface-subtle, #F9F3EB);
    --mtc-border:        var(--mm-color-border, #EFE6DC);
    --mtc-border-strong: var(--mm-color-border-strong, #6B7A8E);

    --mtc-brand:         var(--mm-color-brand, #FF4203);          /* nur Fläche, nie Text */
    --mtc-action:        var(--mm-color-brand-action, #D63500);
    --mtc-action-strong: var(--mm-color-brand-strong, #AB2800);
    --mtc-wash:          var(--mm-color-brand-wash, #FFF4F2);

    --mtc-danger:        var(--mm-color-danger, #951532);
    --mtc-danger-wash:   var(--mm-color-danger-wash, #FFE3E4);
    --mtc-focus:         var(--mm-focus-ring, 0 0 0 3px rgba(255, 66, 3, .30));

    /* ---- Schrift ---- */
    --mtc-font-display: var(--mm-font-display, "Fraunces", "Iowan Old Style", Georgia, serif);
    --mtc-font-prose:   var(--mm-font-prose, "Source Serif 4", "Iowan Old Style", Georgia, serif);
    --mtc-font-ui:      var(--mm-font-ui, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --mtc-font-mono:    var(--mm-font-mono, "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, monospace);

    /* ---- Maße ---- */
    --mtc-measure:  var(--mm-container-prose, 680px);
    --mtc-sidebar:  var(--mm-container-sidebar, 260px);
    --mtc-gap:      var(--mm-space-6, 2rem);

    /*
     * Breiteste sinnvolle Karte: Zeilenlänge plus die Innenabstände des
     * Karteninhalts (70 px links für den hängenden Einzug, 24 px rechts).
     * Ohne diese Grenze wächst die Karte mit dem Inhaltsbereich mit, während
     * der Text bei der Zeilenlänge stehen bleibt — die Karte wäre dann nur
     * noch zu zwei Dritteln gefüllt und der Text säße links in der Ecke.
     */
    --mtc-cards-max: calc(var(--mtc-measure) + 94px);
    --mtc-radius:   var(--mm-radius-lg, 14px);
    --mtc-radius-md: var(--mm-radius-md, 10px);
    --mtc-radius-sm: var(--mm-radius-sm, 6px);
    --mtc-control:  44px;

    --mtc-shadow:   var(--mm-shadow-sm, 0 1px 2px rgba(35, 47, 63, .06));
    --mtc-shadow-md: var(--mm-shadow-md, 0 1px 2px rgba(35, 47, 63, .05), 0 8px 24px rgba(35, 47, 63, .06));

    /* ---- Bewegung ---- */
    --mtc-duration: var(--mm-duration-base, 180ms);
    --mtc-ease:     var(--mm-ease-standard, cubic-bezier(.2, .7, .2, 1));

    width: 100%;
    color: var(--mtc-ink);
    font-family: var(--mtc-font-ui);
}

/*
 * Zeilenlänge. Der Styleguide nennt 680 px, das ist aber nur dann richtig,
 * wenn der Inhaltsbereich auch breit genug ist. In schmalen LMS-Spalten
 * verschenkt die Kappung Platz, deshalb ist sie einstellbar.
 */
.mtc-measure-breit { --mtc-measure: 820px; }
.mtc-measure-voll  { --mtc-measure: none; --mtc-cards-max: none; }

/*
 * LearnDash deckelt seinen Inhaltsbereich auf 960 px, unabhängig davon, wie
 * viel Platz das Theme drumherum anbietet — auf einem 1920-px-Schirm liegen
 * dadurch rund 500 px brach. Die Klasse kommt per body_class nur auf Seiten,
 * auf denen das Kartensystem läuft, und nur wenn die Einstellung aktiv ist.
 */
body.mtc-wide-content .learndash-wrapper,
body.mtc-wide-content .learndash_content_wrap,
body.mtc-wide-content .ld-tabs-content {
    max-width: none !important;
}

/*
 * Die Begrenzung ersatzlos zu streichen reicht nicht: Bei geschlossener
 * Kurs-Seitenleiste wird die Spalte fast 1900 px breit, während die Karten
 * bei der Zeilenlänge stehen bleiben — Titel und Fortschrittsbalken laufen
 * dann quer über den Schirm und die Karten stehen einsam links.
 * Deshalb bekommt die ganze Spalte die Seitenbreite des Styleguides und
 * wird mittig gesetzt. Damit sitzen Brotkrume, Titel, Fortschritt und Karten
 * in einer Flucht, und der Vollbildschalter verschiebt sie sichtbar.
 */
body.mtc-wide-content .learndash-content-body {
    max-width: var(--mm-container-page, 1280px);
    margin-inline: auto;
}

/* Nicht auf das Theme verlassen: ohne border-box wächst jedes Bedienelement
   um seine Rahmenstärke und die 44-px-Höhen stimmen nicht mehr. */
.mtc-root,
.mtc-root *,
.mtc-root *::before,
.mtc-root *::after {
    box-sizing: border-box;
}

/* Dunkelmodus nur, wenn die Seite ihn ausdrücklich schaltet.
   Sind die Tokens eingebunden, kommen die Werte ohnehin von dort. */
[data-mm-theme="dark"] .mtc-root,
.bb-dark-mode .mtc-root {
    --mtc-ink:           var(--mm-color-ink, #E9EEF5);
    --mtc-ink-2:         var(--mm-color-ink-secondary, #BCC8D8);
    --mtc-ink-3:         var(--mm-color-ink-muted, #A2B0C2);
    --mtc-ink-inverse:   var(--mm-color-ink-inverse, #232F3F);
    --mtc-surface:       var(--mm-color-surface, #1B2531);
    --mtc-paper:         var(--mm-color-surface-paper, #141D29);
    --mtc-subtle:        var(--mm-color-surface-subtle, #243040);
    --mtc-border:        var(--mm-color-border, #2C3745);
    --mtc-border-strong: var(--mm-color-border-strong, #8796A9);
    --mtc-action:        var(--mm-color-brand-action, #FF4203);
    --mtc-action-strong: var(--mm-color-brand-strong, #FF8365);
    --mtc-wash:          var(--mm-color-brand-wash, rgba(255, 66, 3, .12));
}


/* =====================================================================
   EINLEITUNG
   Steht vor der ersten Karte und trägt den Lead-Charakter.
   ===================================================================== */

.mtc-intro {
    margin: 0 0 var(--mm-space-5, 1.5rem);
    max-width: var(--mtc-measure);
    color: var(--mtc-ink-2);
}

.mtc-prose .mtc-intro {
    font-family: var(--mtc-font-prose);
    font-size: var(--mm-text-lead, 1.3125rem);
    line-height: var(--mm-leading-normal, 1.55);
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* =====================================================================
   WERKZEUGLEISTE
   Kein eigener Kasten — Suchfeld und Schalter stehen frei nebeneinander,
   damit nicht Rahmen im Rahmen entsteht.
   ===================================================================== */

.mtc-toolbar {
    display: flex;
    align-items: center;
    gap: var(--mm-space-3, .75rem);
    margin-bottom: var(--mm-space-5, 1.5rem);
    flex-wrap: wrap;
}

.mtc-search {
    display: flex;
    align-items: center;
    gap: var(--mm-space-2, .5rem);
    flex: 1 1 320px;
    min-width: 0;
    height: var(--mtc-control);
    padding: 0 var(--mm-space-3, .75rem);
    border: 1px solid var(--mtc-border-strong);   /* Formularrahmen in Navy 600, nicht in Sand */
    border-radius: var(--mtc-radius-sm);
    background: var(--mtc-surface);
    color: var(--mtc-ink-3);
    transition: border-color var(--mtc-duration) var(--mtc-ease),
                box-shadow var(--mtc-duration) var(--mtc-ease);
}

.mtc-search:focus-within {
    border-color: var(--mtc-action);
    box-shadow: var(--mtc-focus);
}

.mtc-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--mtc-ink-3);
}

.mtc-search-input {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mtc-ink);
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-body, 1rem);
    line-height: 1.2;
}

.mtc-search-input::placeholder {
    color: var(--mtc-ink-3);
    opacity: 1;
}

/* Das Kreuz von Safari/Chrome sitzt sonst am Rahmen fest. */
.mtc-search-input::-webkit-search-cancel-button {
    margin-left: var(--mm-space-2, .5rem);
}

.mtc-toolbar-actions {
    display: flex;
    gap: var(--mm-space-2, .5rem);
    flex-wrap: wrap;
}

.mtc-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mtc-control);
    padding: 0 var(--mm-space-4, 1rem);
    border: 1px solid var(--mtc-border-strong);
    border-radius: var(--mtc-radius-md);
    background: transparent;
    color: var(--mtc-ink);
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-small, .875rem);
    font-weight: var(--mm-weight-semibold, 600);
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color var(--mtc-duration) var(--mtc-ease),
                background var(--mtc-duration) var(--mtc-ease);
}

.mtc-action:hover {
    border-color: var(--mtc-ink-2);
    background: var(--mtc-subtle);
}

.mtc-action:focus-visible {
    outline: none;
    box-shadow: var(--mtc-focus);
}


/* =====================================================================
   LAYOUT
   Grundzustand ist die gestapelte Ansicht. Die Spaltenansicht schaltet
   sich erst zu, wenn im Inhaltsbereich wirklich Platz dafür ist — siehe
   Abschnitt BREITENSTUFEN. Maßgeblich ist die Breite des Karten-Wrappers,
   nicht die des Fensters: In einem LMS ist der Inhaltsbereich oft nur
   halb so breit wie der Bildschirm.
   ===================================================================== */

.mtc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mm-space-4, 1rem);
    align-items: start;
}

.mtc-toc {
    min-width: 0;
}

/* Wird nur auf nicht scrollende Vorfahren gesetzt, deren overflow
   CSS-Sticky blockiert. Die Sidebar selbst bleibt echtes position: sticky. */
.mtc-sticky-overflow-fix {
    overflow: visible !important;
}

.mtc-toc-inner {
    padding: var(--mm-space-4, 1rem);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    background: var(--mtc-subtle);
}

.mtc-toc-title {
    margin-bottom: var(--mm-space-3, .75rem);
    padding-left: var(--mm-space-2, .5rem);
    color: var(--mtc-ink-2);
    font-size: var(--mm-text-label, .75rem);
    font-weight: var(--mm-weight-bold, 700);
    letter-spacing: var(--mm-tracking-label, .07em);
    text-transform: uppercase;
}

.mtc-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtc-toc li + li {
    margin-top: 2px;
}

.mtc-toc a {
    display: grid;
    grid-template-columns: 1.5em 1fr;
    gap: var(--mm-space-2, .5rem);
    align-items: baseline;
    padding: var(--mm-space-2, .5rem);
    border-radius: var(--mtc-radius-sm);
    color: var(--mtc-ink-2);
    font-size: var(--mm-text-small, .875rem);
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--mtc-duration) var(--mtc-ease),
                background var(--mtc-duration) var(--mtc-ease);
}

.mtc-toc a > span {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.mtc-toc a:hover {
    color: var(--mtc-ink);
    background: var(--mtc-surface);
    text-decoration: none;
}

.mtc-toc a.is-active {
    color: var(--mtc-ink);
    background: var(--mtc-surface);
    font-weight: var(--mm-weight-semibold, 600);
    box-shadow: inset 2px 0 0 var(--mtc-brand);
}

.mtc-toc a:focus-visible {
    outline: none;
    box-shadow: var(--mtc-focus);
}

.mtc-toc-number {
    color: var(--mtc-ink-3);
    font-size: var(--mm-text-caption, .8125rem);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mtc-toc a.is-active .mtc-toc-number {
    color: var(--mtc-action);
}


/* =====================================================================
   KARTEN
   Weißes Papier auf warmem Grund. Der Akzent erscheint nur an der
   geöffneten Karte — sonst bliebe vom 6-Prozent-Anteil nichts übrig.
   ===================================================================== */

.mtc-cards {
    min-width: 0;
}

.mtc-card {
    margin: 0 0 var(--mm-space-3, .75rem);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius);
    background: var(--mtc-surface);
    box-shadow: var(--mtc-shadow);
    overflow: clip;
    scroll-margin-top: calc(var(--mtc-sticky-top, 96px) + 8px);
    transition: border-color var(--mtc-duration) var(--mtc-ease),
                box-shadow var(--mtc-duration) var(--mtc-ease);
}

.mtc-card[open] {
    box-shadow: var(--mtc-shadow-md);
}

.mtc-card[hidden] {
    display: none !important;
}

.mtc-card-summary {
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    gap: var(--mm-space-3, .75rem);
    padding: var(--mm-space-4, 1rem) var(--mm-space-5, 1.5rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mtc-card-summary::-webkit-details-marker {
    display: none;
}

.mtc-card-summary:hover {
    background: var(--mtc-subtle);
}

.mtc-card-summary:focus-visible {
    outline: none;
    box-shadow: var(--mtc-focus);
    border-radius: var(--mtc-radius);
}

.mtc-card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mtc-radius-md);
    background: var(--mtc-subtle);
    color: var(--mtc-ink-2);
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-small, .875rem);
    font-weight: var(--mm-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    transition: background var(--mtc-duration) var(--mtc-ease),
                color var(--mtc-duration) var(--mtc-ease);
}

.mtc-card[open] .mtc-card-index {
    background: var(--mtc-wash);
    color: var(--mtc-action-strong);
}

/*
 * Seit 1.7.5 ist der Kartentitel eine echte Überschrift (h2 bzw. h3) statt eines
 * <span>. Damit erbt er die Abstände und Größen des Themes, die hier vollständig
 * zurückgesetzt werden — die Karten sehen aus wie vorher.
 *
 * Die Selektoren sind bewusst dreistufig: BuddyBoss formatiert Überschriften über
 * Regeln wie `.entry-content h2`, und die schlägt ein einzelnes `.mtc-card-title`
 * in der Spezifität. Die Breitenvarianten weiter unten liegen deshalb ebenfalls
 * eine Stufe höher, sonst greifen sie nicht mehr.
 */
.mtc-root .mtc-card-summary > .mtc-card-title {
    margin: 0;
    padding: 0;
    border: 0;
    text-transform: none;

    /* min-width: 0 ist Pflicht: sonst weigert sich das Grid-Feld, unter die
       Breite des längsten Wortes zu gehen — bei Komposita wie
       „Flächen- und Volumenberechnungen" bricht sonst das Layout. */
    min-width: 0;
    font-family: var(--mtc-font-display);
    font-size: var(--mm-text-h4, 1.25rem);
    font-weight: var(--mm-weight-semibold, 600);
    line-height: var(--mm-leading-snug, 1.32);
    letter-spacing: var(--mm-tracking-heading, -.014em);
    color: var(--mtc-ink);
    text-wrap: balance;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

.mtc-card-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mtc-ink-3);
    transition: transform var(--mm-duration-slow, 280ms) var(--mtc-ease);
}

.mtc-card[open] .mtc-card-chevron {
    transform: rotate(180deg);
    color: var(--mtc-action);
}

.mtc-card-content {
    padding: 0 var(--mm-space-5, 1.5rem) var(--mm-space-5, 1.5rem) 70px;
    border-top: 1px solid transparent;
    color: var(--mtc-ink);
}

.mtc-card[open] .mtc-card-content {
    border-top-color: var(--mtc-border);
    padding-top: var(--mm-space-5, 1.5rem);
}

.mtc-card-content > :first-child {
    margin-top: 0;
}

.mtc-card-content > :last-child {
    margin-bottom: 0;
}


/* =====================================================================
   LESESTRECKE
   Wird über die Einstellung „Lehrtext-Typografie" zugeschaltet und ist
   der eigentliche Grund, warum ein Lehrtext nach Mission Medizin aussieht.
   ===================================================================== */

.mtc-prose .mtc-card-content {
    font-family: var(--mtc-font-prose);
    font-size: var(--mm-text-prose, 1.1875rem);
    line-height: var(--mm-leading-prose, 1.68);
    hyphens: auto;               /* zwingend, sonst reißen deutsche Komposita Löcher */
    -webkit-hyphens: auto;
}

/* Zeilenlänge begrenzen — Abbildungen und Tabellen dürfen breiter laufen. */
.mtc-prose .mtc-card-content > * {
    max-width: var(--mtc-measure);
}

.mtc-prose .mtc-card-content > figure,
.mtc-prose .mtc-card-content > table,
.mtc-prose .mtc-card-content > .wp-block-table,
.mtc-prose .mtc-card-content > .wp-block-image,
.mtc-prose .mtc-card-content > .wp-block-embed,
.mtc-prose .mtc-card-content > iframe {
    max-width: 100%;
}

.mtc-card-content > * + * {
    margin-top: 1.1em;
}

.mtc-card-content h3,
.mtc-card-content h4,
.mtc-card-content h5,
.mtc-card-content h6 {
    margin-top: 1.8em;
    margin-bottom: 0;
    color: var(--mtc-ink);
    scroll-margin-top: calc(var(--mtc-sticky-top, 96px) + 8px);
}

/* Ab H4 wechselt die Hierarchie von der Display- auf die UI-Schrift. */
.mtc-card-content h3 {
    font-family: var(--mtc-font-display);
    font-size: var(--mm-text-h4, 1.25rem);
    font-weight: var(--mm-weight-semibold, 600);
    line-height: var(--mm-leading-snug, 1.32);
    letter-spacing: -.01em;
}

.mtc-card-content h4,
.mtc-card-content h5,
.mtc-card-content h6 {
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-h5, 1.0625rem);
    font-weight: var(--mm-weight-bold, 700);
    line-height: var(--mm-leading-snug, 1.32);
}

.mtc-card-content a {
    color: var(--mtc-action);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.mtc-card-content a:hover {
    color: var(--mtc-action-strong);
    text-decoration-thickness: 2px;
}

.mtc-card-content ul,
.mtc-card-content ol {
    padding-left: 1.3em;
}

.mtc-card-content li + li {
    margin-top: .4em;
}

/* Ein bewusst kleiner Markenpunkt — Fläche fast null, Wiedererkennung hoch. */
.mtc-card-content ul > li::marker {
    color: var(--mtc-brand);
}

.mtc-card-content ol > li::marker {
    color: var(--mtc-ink-3);
    font-variant-numeric: tabular-nums;
}

.mtc-card-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--mm-space-4, 1rem);
    border-left: 2px solid var(--mtc-border);
    color: var(--mtc-ink-2);
    font-style: normal;
}

.mtc-card-content code,
.mtc-card-content kbd,
.mtc-card-content samp {
    font-family: var(--mtc-font-mono);
    font-size: .92em;
}

/* Tabellen im Hausstil: nur Horizontallinien, Kopfzeile auf Sand. */
.mtc-card-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-small, .875rem);
    font-variant-numeric: tabular-nums;
    line-height: var(--mm-leading-normal, 1.55);
}

.mtc-card-content th,
.mtc-card-content td {
    border: 0;
    border-bottom: 1px solid var(--mtc-border);
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
}

.mtc-card-content th {
    background: var(--mtc-subtle);
    color: var(--mtc-ink-2);
    font-size: var(--mm-text-label, .75rem);
    font-weight: var(--mm-weight-bold, 700);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mtc-card-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mtc-radius-md);
}

.mtc-card-content figcaption {
    margin-top: var(--mm-space-2, .5rem);
    color: var(--mtc-ink-2);
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-caption, .8125rem);
    line-height: var(--mm-leading-normal, 1.55);
}


/* =====================================================================
   SUCHE: LEERZUSTAND UND TREFFER
   ===================================================================== */

.mtc-no-results {
    padding: var(--mm-space-5, 1.5rem);
    border: 1px dashed var(--mtc-border-strong);
    border-radius: var(--mtc-radius);
    background: var(--mtc-subtle);
    color: var(--mtc-ink-2);
    font-size: var(--mm-text-small, .875rem);
    text-align: center;
}

.mtc-highlight {
    padding: 0 .12em;
    border-radius: var(--mm-radius-xs, 4px);
    background: var(--mtc-wash);
    box-shadow: inset 0 -2px 0 var(--mtc-brand);
    color: inherit;
}


/* =====================================================================
   DIDAKTIK-KÄSTEN
   Vier Muster plus zwei Sonderformen für alle Kastenarten. Unterschieden
   wird über Label und Symbol, nicht über Farbe — kein Regenbogen.
   Die Klassen werden im Editor am Gruppen-Block gesetzt, das Label setzt
   das Plugin selbst.
   ===================================================================== */

.mtc-card-content .mtc-box,
.mtc-intro .mtc-box {
    margin: var(--mm-space-5, 1.5rem) 0;
    padding: var(--mm-space-4, 1rem) var(--mm-space-4, 1rem) var(--mm-space-4, 1rem) var(--mm-space-5, 1.5rem);
    border-radius: 0 var(--mtc-radius-md) var(--mtc-radius-md) 0;
    font-size: var(--mm-text-body, 1rem);
    line-height: var(--mm-leading-normal, 1.55);
}

.mtc-box > * {
    margin-top: 0;
    margin-bottom: 0;
}

.mtc-box > * + * {
    margin-top: var(--mm-space-3, .75rem);
}

.mtc-box-title {
    display: flex;
    align-items: center;
    gap: var(--mm-space-2, .5rem);
    font-family: var(--mtc-font-ui);
    font-size: var(--mm-text-label, .75rem);
    font-weight: var(--mm-weight-bold, 700);
    letter-spacing: var(--mm-tracking-label, .07em);
    line-height: 1.2;
    text-transform: uppercase;
}

.mtc-box-title svg {
    flex: 0 0 auto;
}

/* 1 · Akzent — was hängen bleiben muss */
.mtc-box--akzent {
    border-left: 3px solid var(--mtc-brand);
    background: var(--mtc-wash);
}

.mtc-box--akzent .mtc-box-title {
    color: var(--mtc-action-strong);
}

/* 2 · Neutral — was erklärt oder vorgeführt wird */
.mtc-box--neutral {
    border-left: 3px solid var(--mtc-ink);
    background: var(--mtc-subtle);
}

.mtc-box--neutral .mtc-box-title {
    color: var(--mtc-ink);
}

/* 3 · Warnung — wo man hineinläuft */
.mtc-box--warnung {
    border-left: 3px solid var(--mtc-danger);
    background: var(--mtc-danger-wash);
}

.mtc-box--warnung .mtc-box-title {
    color: var(--mtc-danger);
}

/* 4 · Zurückgenommen — nützlich, aber nicht prüfungstragend */
.mtc-card-content .mtc-box--zart,
.mtc-intro .mtc-box--zart {
    padding-left: var(--mm-space-4, 1rem);
    border: 1px dashed var(--mtc-border-strong);
    border-radius: var(--mtc-radius-md);
    background: transparent;
}

.mtc-box--zart .mtc-box-title {
    color: var(--mtc-ink-2);
}

/* Sonderform A · Invers — die Zusammenfassung */
.mtc-card-content .mtc-box--invers,
.mtc-intro .mtc-box--invers {
    padding: var(--mm-space-5, 1.5rem);
    border: 0;
    border-radius: var(--mtc-radius);
    background: var(--mtc-ink);
    color: var(--mtc-ink-inverse);
}

.mtc-box--invers .mtc-box-title {
    color: var(--mm-vermilion-400, #FF8365);
}

.mtc-box--invers a {
    color: var(--mm-vermilion-300, #FFAD98);
}

.mtc-box--invers ul > li::marker {
    color: var(--mm-vermilion-400, #FF8365);
}

/* Sonderform B · Formel */
.mtc-card-content .mtc-box--formel,
.mtc-intro .mtc-box--formel {
    padding: var(--mm-space-4, 1rem);
    border: 1px solid var(--mtc-border);
    border-radius: var(--mtc-radius-md);
    background: var(--mtc-paper);
    font-family: var(--mtc-font-mono);
    font-size: var(--mm-text-body, 1rem);
}

.mtc-box--formel .mtc-box-title {
    color: var(--mtc-ink-2);
}


/* =====================================================================
   MEDIEN
   Gutenberg- und YouTube-Einbettungen innerhalb der Karten.
   ===================================================================== */

.mtc-intro .wp-block-embed,
.mtc-card-content .wp-block-embed {
    width: 100%;
    max-width: 100%;
    margin: var(--mm-space-5, 1.5rem) 0;
}

.mtc-intro .wp-block-embed__wrapper,
.mtc-card-content .wp-block-embed__wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--mtc-radius-md);
    background: var(--mm-navy-950, #141D29);
}

.mtc-intro .wp-block-embed__wrapper iframe,
.mtc-card-content .wp-block-embed__wrapper iframe,
.mtc-intro iframe[src*="youtube"],
.mtc-card-content iframe[src*="youtube"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0;
}

.mtc-intro > iframe[src*="youtube"],
.mtc-card-content > iframe[src*="youtube"] {
    aspect-ratio: 16 / 9;
    height: auto !important;
    border-radius: var(--mtc-radius-md);
}


/* =====================================================================
   BREITENSTUFEN
   Das Skript misst die tatsächliche Breite des Kartenbereichs und schreibt
   sie als data-mtc-width an die Wurzel: xs < 480, s < 700, m < 1100, l ab 1100.
   Erst ab 1100 px bleiben neben dem Inhaltsverzeichnis noch 680 px Text übrig.
   Damit reagiert das Layout auf den Inhaltsbereich statt auf das Fenster —
   wichtig, weil BuddyBoss und LearnDash die Spalte je nach Ansicht und
   Vollbildschalter ganz unterschiedlich breit machen.
   ===================================================================== */

/* ---- l: Inhaltsverzeichnis als Spalte daneben ---- */

[data-mtc-width="l"] .mtc-layout {
    grid-template-columns: var(--mtc-sidebar) minmax(0, 1fr);
    gap: var(--mtc-gap);
}

/*
 * Karten wachsen nur so weit, wie der Text sie füllt. Der übrige Platz bleibt
 * als Seitenrand außerhalb der Karte stehen — das liest sich als Layout und
 * nicht als halbleere Karte. Wer die volle Breite ausnutzen will, stellt die
 * Zeilenlänge auf „Volle Kartenbreite"; dann greift die Grenze unten nicht.
 */
[data-mtc-width="l"] .mtc-toolbar,
[data-mtc-width="l"] .mtc-layout {
    max-width: calc(var(--mtc-sidebar) + var(--mtc-gap) + var(--mtc-cards-max));
}

[data-mtc-width="m"] .mtc-toolbar,
[data-mtc-width="m"] .mtc-layout {
    max-width: var(--mtc-cards-max);
}

.mtc-measure-voll .mtc-toolbar,
.mtc-measure-voll .mtc-layout {
    max-width: none;
}

[data-mtc-width="l"] .mtc-toc {
    align-self: stretch;
    height: 100%;
}

/*
 * Echtes CSS-Sticky: Der Kasten bleibt im normalen Dokumentfluss, haftet am
 * oberen Rand und wird durch das Ende seiner Grid-Spalte begrenzt. Dafür muss
 * die Spalte über align-self auf volle Höhe gehen. Kein fixed, kein Transform.
 */
[data-mtc-width="l"].mtc-has-sticky-toc .mtc-toc {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    will-change: auto !important;
}

[data-mtc-width="l"].mtc-has-sticky-toc .mtc-toc-inner {
    position: -webkit-sticky;
    position: sticky;
    top: var(--mtc-sticky-top, 96px);
    z-index: var(--mm-z-sticky, 200);
    max-height: calc(100vh - var(--mtc-sticky-top, 96px) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.mtc-root[data-mtc-width="l"] .mtc-card-summary > .mtc-card-title {
    font-size: var(--mm-text-h3, 1.5625rem);
}

[data-mtc-width="l"] .mtc-card-content h3 {
    font-size: var(--mm-text-h4, 1.25rem);
}

/* ---- s und m: Inhaltsverzeichnis liegt oben, zweispaltig ---- */

[data-mtc-width="s"] .mtc-toc ol,
[data-mtc-width="m"] .mtc-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--mm-space-3, .75rem);
}

/* ---- xs und s: schmal, jede Spalte zählt ---- */

[data-mtc-width="xs"] .mtc-toolbar,
[data-mtc-width="s"] .mtc-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--mm-space-2, .5rem);
    margin-bottom: var(--mm-space-4, 1rem);
}

/* In der Spaltenansicht darf die Flexbasis nicht zur Höhe der Suchzeile werden. */
[data-mtc-width="xs"] .mtc-search,
[data-mtc-width="s"] .mtc-search {
    flex: 0 0 auto;
    width: 100%;
}

[data-mtc-width="xs"] .mtc-toolbar-actions,
[data-mtc-width="s"] .mtc-toolbar-actions {
    width: 100%;
}

[data-mtc-width="xs"] .mtc-action,
[data-mtc-width="s"] .mtc-action {
    flex: 1;
}

/* Der hängende Einzug richtet den Text an der Überschrift aus. Dafür ist
   erst ab mittlerer Breite Platz. */
[data-mtc-width="xs"] .mtc-card-content,
[data-mtc-width="s"] .mtc-card-content {
    padding-left: var(--mm-space-5, 1.5rem);
}

[data-mtc-width="xs"].mtc-prose .mtc-card-content,
[data-mtc-width="s"].mtc-prose .mtc-card-content {
    font-size: var(--mm-text-body, 1rem);
    line-height: 1.62;
}

/* ---- xs ---- */

[data-mtc-width="xs"] .mtc-card-summary {
    grid-template-columns: 30px 1fr 22px;
    gap: var(--mm-space-2, .5rem);
    padding: var(--mm-space-3, .75rem) var(--mm-space-4, 1rem);
}

[data-mtc-width="xs"] .mtc-card-index {
    width: 30px;
    height: 30px;
    font-size: var(--mm-text-caption, .8125rem);
}

[data-mtc-width="xs"] .mtc-card-content,
[data-mtc-width="xs"] .mtc-card[open] .mtc-card-content {
    padding: var(--mm-space-4, 1rem);
}

/*
 * Rückfallebene ohne JavaScript: Solange keine Breitenstufe gesetzt ist,
 * entscheidet wie bisher das Fenster. Sobald das Skript gemessen hat,
 * gewinnen die Regeln oben.
 */
@media (min-width: 1024px) {
    .mtc-root:not([data-mtc-width]) .mtc-layout {
        grid-template-columns: var(--mtc-sidebar) minmax(0, 1fr);
        gap: var(--mtc-gap);
    }

    .mtc-root:not([data-mtc-width]) .mtc-card-summary > .mtc-card-title {
        font-size: var(--mm-text-h3, 1.5625rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mtc-action,
    .mtc-search,
    .mtc-toc a,
    .mtc-card,
    .mtc-card-index,
    .mtc-card-chevron {
        transition: none;
    }
}