/* =====================================================================
   MissLiberty · Editorial-Gestaltung

   Die Seite wechselt zwischen dunklem Bordeaux und hellen Cremeflächen —
   das ist der Unterschied zwischen „Nachtclub" und „Magazin".

   Der Kern ist ein Trick: Ein Abschnitt mit .ml-hell setzt die
   Marken-Variablen um (Sand wird zu dunkler Tinte, Kohle zu Creme, Gold zu
   gedämpftem Messing). Dadurch funktionieren ALLE bestehenden Klassen
   (text-sand, bg-coal, border-gold/20 …) auf hellem Grund weiter, ohne dass
   eine einzige davon angefasst werden muss. Der Tailwind-Build ist
   eingefroren — dieser Weg kommt ohne neue Utility-Klassen aus.

   Nur MissLiberty: alles hier hängt an html.ml-theme.
   ===================================================================== */

html.ml-theme {
    --ml-creme:        #f6f1e9;
    --ml-creme-tief:   #ede4d7;
    --ml-karte:        #fdfbf7;
    --ml-tinte:        43 15 26;      /* fast schwarzes Bordeaux */
    --ml-tinte-weich:  107 74 86;
    --ml-tinte-leise:  138 110 120;
    --ml-messing:      154 116 46;    /* dunkler als das Gold, damit es auf Creme trägt */
    --ml-linie:        rgba(43, 15, 26, .14);
    --ml-linie-zart:   rgba(43, 15, 26, .08);
}

/* ------------------------------------------------ Heller Abschnitt --- */

.ml-theme .ml-hell {
    /* Marken-Variablen für diesen Abschnitt umdeuten */
    --c-sand:      var(--ml-tinte);
    --c-sand-100:  var(--ml-tinte-weich);
    --c-sand-200:  var(--ml-tinte-leise);
    --c-gold:      var(--ml-messing);
    --c-gold-50:   120 88 32;
    --c-gold-100:  138 104 40;
    --c-coal:      253 251 247;
    --c-ash:       247 241 232;
    --c-noir:      246 241 233;
    --c-noir-50:   250 246 240;
    --c-bg-inner:  253 251 247;

    background: var(--ml-creme);
    color: rgb(var(--ml-tinte));
}

.ml-theme .ml-hell--tief { background: var(--ml-creme-tief); }

/* Auf Creme braucht ein Kasten eine Kante statt eines Schattens. */
.ml-theme .ml-hell .bg-coal,
.ml-theme .ml-hell .bg-coal\/60,
.ml-theme .ml-hell .bg-noir-50 { background-color: var(--ml-karte) !important; }

.ml-theme .ml-hell .border-gold\/20,
.ml-theme .ml-hell .border-gold\/25,
.ml-theme .ml-hell .border-gold\/30 { border-color: var(--ml-linie) !important; }

/* Verläufe aus dem dunklen Bereich dürfen auf Creme nicht durchschlagen. */
.ml-theme .ml-hell [style*="radial-gradient"],
.ml-theme .ml-hell [style*="linear-gradient"] { background-image: none !important; }

/* ------------------------------------------------ Editorial-Bausteine */

/* Abschnittsmarke: 01 / MITGLIEDER */
.ml-theme .ml-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgb(var(--c-gold));
    margin-bottom: 18px;
}
.ml-theme .ml-marke::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .3;
    max-width: 120px;
}
.ml-theme .ml-marke__nr { font-variant-numeric: tabular-nums; opacity: .75; }

/* Große Editorial-Überschrift: erste Zeile aufrecht, zweite kursiv in Messing */
.ml-theme .ml-schlagzeile {
    font-family: var(--font-serif), Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: rgb(var(--c-sand));
    margin: 0 0 14px;
}
.ml-theme .ml-schlagzeile em {
    display: block;
    font-style: italic;
    color: rgb(var(--c-gold));
}
.ml-theme .ml-schlagzeile--klein { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }

.ml-theme .ml-vorspann {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgb(var(--c-sand-100));
    max-width: 62ch;
}

.ml-theme .ml-notiz {
    font-size: .8125rem;
    line-height: 1.6;
    color: rgb(var(--c-sand-200));
}

/* Feine Trennlinie im Editorial-Stil */
.ml-theme .ml-linie { height: 1px; background: rgb(var(--c-gold) / .28); border: 0; margin: 0; }

/* ------------------------------------------------ Hero mit Bild ------ */

.ml-theme .ml-buehne {
    position: relative;
    overflow: hidden;
    background: #1b0810;
}
.ml-theme .ml-buehne__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 50%;
}
.ml-theme .ml-buehne::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(20, 6, 12, .96) 0%, rgba(20, 6, 12, .88) 32%, rgba(20, 6, 12, .45) 62%, rgba(20, 6, 12, .25) 100%),
        linear-gradient(0deg, rgba(20, 6, 12, .6), rgba(20, 6, 12, 0) 45%);
}
.ml-theme .ml-buehne__innen { position: relative; z-index: 1; }

@media (max-width: 767px) {
    .ml-theme .ml-buehne__bild { object-position: 62% 50%; }
    .ml-theme .ml-buehne::after {
        background:
            linear-gradient(180deg, rgba(20, 6, 12, .82) 0%, rgba(20, 6, 12, .9) 45%, rgba(20, 6, 12, .97) 100%);
    }
}

/* Bild in einem Abschnitt (Vertrauen, Szene) */
.ml-theme .ml-bild {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: #1b0810;
}
.ml-theme .ml-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-theme .ml-bild--hoch { aspect-ratio: 4 / 5; }
.ml-theme .ml-bild--breit { aspect-ratio: 16 / 10; }
.ml-theme .ml-bild--voll { height: 100%; min-height: 320px; }

/* ------------------------------------------------ Mitgliederkarten --- */

.ml-theme .ml-personen { display: grid; gap: 10px; }

.ml-theme .ml-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ml-linie);
    background: var(--ml-karte);
    transition: border-color .2s ease, transform .2s ease;
}
.ml-theme .ml-person:hover { border-color: rgb(var(--c-gold) / .55); }
.ml-theme .ml-person:active { transform: scale(.995); }
.ml-theme .ml-person.ist-aktiv { border-color: rgb(var(--c-gold)); box-shadow: inset 0 0 0 1px rgb(var(--c-gold) / .35); }
.ml-theme .ml-person__zeichen {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--ml-tinte));
    color: var(--ml-creme);
    font-family: var(--font-serif), Georgia, serif;
    font-size: 19px;
    overflow: hidden;
}
.ml-theme .ml-person__zeichen img { width: 100%; height: 100%; object-fit: cover; }
.ml-theme .ml-person__text { min-width: 0; flex: 1; }
.ml-theme .ml-person__name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 1.125rem;
    color: rgb(var(--c-sand));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-theme .ml-person__meta {
    font-size: .8125rem;
    color: rgb(var(--c-sand-100));
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-theme .ml-person__pfeil { color: rgb(var(--c-gold)); flex: 0 0 auto; }

/* ------------------------------------------------ Profil-Tafel ------- */

.ml-theme .ml-tafel {
    background: rgb(var(--ml-tinte));
    color: var(--ml-creme);
    padding: clamp(20px, 4vw, 34px);
}
.ml-theme .ml-tafel__marke {
    font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: rgb(var(--ml-messing) / 1);
    margin-bottom: 10px;
}
.ml-theme .ml-tafel__kopf { display: flex; align-items: flex-start; gap: 16px; }
.ml-theme .ml-tafel__zeichen {
    width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(246, 241, 233, .28);
    font-family: var(--font-serif), Georgia, serif; font-size: 22px;
    overflow: hidden;
}
.ml-theme .ml-tafel__zeichen img { width: 100%; height: 100%; object-fit: cover; }
.ml-theme .ml-tafel__name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    line-height: 1.1;
}
.ml-theme .ml-tafel__meta { font-size: .8125rem; opacity: .72; margin-top: 4px; }
.ml-theme .ml-tafel__status { margin-left: auto; font-size: .75rem; opacity: .7; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ml-theme .ml-tafel__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7bd6a4; }
.ml-theme .ml-tafel__zitat {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
    line-height: 1.4;
    margin: 20px 0 22px;
}
.ml-theme .ml-tafel__linie { height: 1px; background: rgba(246, 241, 233, .18); margin: 20px 0; }
.ml-theme .ml-tafel__spalten { display: grid; gap: 22px; }
@media (min-width: 768px) { .ml-theme .ml-tafel__spalten { grid-template-columns: 1fr 1fr; gap: 30px; } }
.ml-theme .ml-tafel__titel {
    font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    opacity: .62; margin-bottom: 10px;
}
.ml-theme .ml-tafel__fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid rgba(246, 241, 233, .18);
    font-size: .8125rem;
}
.ml-theme .ml-tafel__hinweis { display: inline-flex; align-items: center; gap: 7px; opacity: .7; }
.ml-theme .ml-tafel__aktion { color: rgb(var(--ml-messing)); font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 7px; }

/* Merkmale (Interessen, Grenzen) */
.ml-theme .ml-marken { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-theme .ml-marken span,
.ml-theme .ml-marken li {
    display: inline-block;
    font-size: .8125rem;
    line-height: 1.3;
    padding: 5px 11px;
    border: 1px solid currentColor;
    color: rgb(var(--ml-messing));
    border-radius: 2px;
}
.ml-theme .ml-tafel .ml-marken span,
.ml-theme .ml-tafel .ml-marken li { color: rgba(246, 241, 233, .82); border-color: rgba(246, 241, 233, .3); }

.ml-theme .ml-haken { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; }
.ml-theme .ml-haken > * { display: inline-flex; align-items: center; gap: 6px; }
.ml-theme .ml-haken svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }

/* ------------------------------------------------ Nummerierte Liste -- */

.ml-theme .ml-schritte { display: grid; gap: 18px; margin-top: 22px; }
.ml-theme .ml-schritt { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.ml-theme .ml-schritt__nr {
    font-family: var(--font-serif), Georgia, serif;
    font-size: .9375rem;
    color: rgb(var(--c-gold));
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}
.ml-theme .ml-schritt__titel { font-size: 1rem; font-weight: 600; color: rgb(var(--c-sand)); }
.ml-theme .ml-schritt__text { font-size: .875rem; line-height: 1.6; color: rgb(var(--c-sand-100)); margin-top: 3px; }

/* ------------------------------------------------ Wege-Karten -------- */

.ml-theme .ml-wege { display: grid; gap: 1px; background: var(--ml-linie); border: 1px solid var(--ml-linie); }
@media (min-width: 640px) { .ml-theme .ml-wege { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ml-theme .ml-wege--4 { grid-template-columns: repeat(4, 1fr); } }
.ml-theme .ml-weg {
    display: block;
    background: var(--ml-karte);
    padding: 24px 22px 26px;
    transition: background .2s ease;
}
.ml-theme .ml-weg:hover { background: #fff; }
.ml-theme .ml-weg__nr {
    font-size: 11px; letter-spacing: .2em; font-weight: 600;
    color: rgb(var(--c-gold)); font-variant-numeric: tabular-nums;
}
.ml-theme .ml-weg__titel {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 1.375rem; color: rgb(var(--c-sand)); margin: 10px 0 6px;
}
.ml-theme .ml-weg__text { font-size: .875rem; line-height: 1.6; color: rgb(var(--c-sand-100)); }
.ml-theme .ml-weg__mehr { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .8125rem; font-weight: 600; color: rgb(var(--c-gold)); }

/* ------------------------------------------------ Age-Gate ----------- */

.ml-theme .ml-tor {
    background: rgb(var(--c-noir) / .96);
    border: 1px solid rgb(var(--c-gold) / .45);
    padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 40px);
    max-width: 460px;
    text-align: center;
}
.ml-theme .ml-tor__zeichen { width: 62px; height: auto; margin: 0 auto 18px; opacity: .95; }
.ml-theme .ml-tor__marke {
    font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
    color: rgb(var(--c-gold)); margin-bottom: 18px;
}
.ml-theme .ml-tor__titel {
    font-family: var(--font-serif), Georgia, serif;
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    color: rgb(var(--c-sand));
    margin-bottom: 12px;
}
.ml-theme .ml-tor__text { font-size: .875rem; line-height: 1.65; color: rgb(var(--c-sand-100)); }
.ml-theme .ml-tor__knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0 18px; }
.ml-theme .ml-tor__fuss { font-size: .75rem; letter-spacing: .05em; color: rgb(var(--c-sand-200)); }

/* ------------------------------------------------ Kleinkram ---------- */

/* Auf Creme wirkt die Serifenschrift schwerer — leicht zurücknehmen */
.ml-theme .ml-hell .font-serif { font-weight: 400; }

/* Zahlenreihe (Mitglieder, Orte, Themen) */
.ml-theme .ml-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ml-linie); border-block: 1px solid var(--ml-linie); }
@media (min-width: 768px) { .ml-theme .ml-zahlen { grid-template-columns: repeat(4, 1fr); } }
.ml-theme .ml-zahl { background: var(--ml-creme); padding: 22px 18px; text-align: center; }
.ml-theme .ml-zahl__wert { font-family: var(--font-serif), Georgia, serif; font-size: 2rem; line-height: 1; color: rgb(var(--c-gold)); font-variant-numeric: lining-nums tabular-nums; }
.ml-theme .ml-zahl__text { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-sand-100)); margin-top: 8px; }

/* Sichtbarer Fokus auch auf Creme */
.ml-theme .ml-hell a:focus-visible,
.ml-theme .ml-hell button:focus-visible { outline: 2px solid rgb(var(--c-gold)); outline-offset: 3px; }

/* ------------------------------------------------ Wortmarke ---------- */

/* Logo als Text: Zeichen + Name + Claim. Ersetzt die Bilddatei im Kopf,
   damit der Claim scharf bleibt und ohne Grafikprogramm änderbar ist. */
.ml-theme .ml-wortmarke__zeichen { width: 34px; height: 34px; flex: 0 0 auto; margin-right: 10px; }
.ml-theme .ml-wortmarke { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.05; }
.ml-theme .ml-wortmarke__name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 1.3rem;
    color: rgb(var(--c-sand));
    white-space: nowrap;
}
.ml-theme .ml-wortmarke__endung { color: rgb(var(--c-gold)); }
.ml-theme .ml-wortmarke__claim {
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgb(var(--c-gold));
    margin-top: 3px;
    white-space: nowrap;
}
@media (max-width: 420px) {
    .ml-theme .ml-wortmarke__zeichen { width: 28px; height: 28px; margin-right: 8px; }
    .ml-theme .ml-wortmarke__name { font-size: 1.1rem; }
    .ml-theme .ml-wortmarke__claim { font-size: 8.5px; letter-spacing: .16em; }
}

/* =====================================================================
   Nachbesserungen aus der Abnahme

   Die Prüfung aller sechs Bereiche hat denselben Schwachpunkt gefunden:
   Messing auf Creme lag bei 3,8:1 und damit unter der Lesbarkeitsschwelle.
   Das wird hier zentral gelöst statt in jeder Ansicht einzeln.
   ===================================================================== */

html.ml-theme {
    /* dunkleres Messing: 4,9:1 auf Creme statt 3,8:1 */
    --ml-messing: 124 92 28;
    /* leise Tinte: 5,3:1 statt 4,1:1 — trägt Meta-Zeilen und Hinweistexte */
    --ml-tinte-leise: 120 92 102;
}

/* Auch die feinen Linien umdeuten — bei 10 und 15 % war Messing auf Creme unsichtbar. */
.ml-theme .ml-hell .border-gold\/10,
.ml-theme .ml-hell .border-gold\/15,
.ml-theme .ml-hell .border-gold\/40,
.ml-theme .ml-hell .border-gold\/50 { border-color: var(--ml-linie) !important; }
.ml-theme .ml-hell .divide-gold\/15 > :not([hidden]) ~ :not([hidden]),
.ml-theme .ml-hell .divide-gold\/20 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ml-linie) !important; }

/* Knöpfe auf Creme: gefüllt in Tinte statt in Messing — sonst heller Text auf hellem Grund. */
.ml-theme .ml-hell .btn-gold {
    background: rgb(var(--ml-tinte));
    border-color: rgb(var(--ml-tinte));
    color: var(--ml-creme);
}
.ml-theme .ml-hell .btn-gold:hover { background: rgb(28, 9, 17); }
.ml-theme .ml-hell .btn-ghost {
    border-color: rgb(var(--ml-tinte) / .45);
    color: rgb(var(--ml-tinte));
}
.ml-theme .ml-hell .btn-ghost:hover { border-color: rgb(var(--ml-tinte)); background: rgba(43, 15, 26, .05); }

/* Gefüllte Gold-Flächen (Paginierung, Marken) auf Creme */
.ml-theme .ml-hell .bg-gold { background-color: rgb(var(--ml-tinte)) !important; color: var(--ml-creme) !important; }
.ml-theme .ml-hell .bg-gold\/10,
.ml-theme .ml-hell .bg-gold\/15,
.ml-theme .ml-hell .bg-gold\/20 { background-color: rgba(43, 15, 26, .06) !important; }

/* Bernstein-Marken (gewerblich) tragen auf Creme nicht */
.ml-theme .ml-hell .text-amber-400,
.ml-theme .ml-hell .text-amber-300 { color: #8a5a12 !important; }

/* Akzentlinks („Alle Themen", „Mehr") dürfen auf Creme nicht verblassen */
.ml-theme .ml-hell .ml-weg__mehr { color: rgb(var(--ml-messing)); }
.ml-theme .ml-hell a.text-gold:not(.btn-gold):not(.btn-ghost) { color: rgb(var(--ml-messing)); }
.ml-theme .ml-hell a.text-gold:hover { color: rgb(var(--ml-tinte)); }

/* Bild soll auf schmalen Geräten unter den Text rutschen (order fehlt im Build) */
@media (max-width: 1023px) {
    .ml-theme .ml-bild-spaeter { order: 5; }
}

/* Zahlenband auf dunklem Grund: Trennung über Abstände statt Rahmen,
   damit am Zeilenumbruch keine Linie am Bildschirmrand steht. */
.ml-theme .ml-zahlen--dunkel {
    background: transparent;
    border-block: 1px solid rgb(var(--c-gold) / .18);
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.ml-theme .ml-zahlen--dunkel .ml-zahl { background: transparent; position: relative; }
.ml-theme .ml-zahlen--dunkel .ml-zahl + .ml-zahl::before {
    content: "";
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: rgb(var(--c-gold) / .18);
}

/* Wege-Raster auch mit zwei oder drei Karten sauber */
.ml-theme .ml-wege { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ---------------------------------------------------------------------
   Schrumpfsperre lösen

   Raster- und Flex-Kinder haben von Haus aus min-width: auto. Eine einzige
   Zeile mit white-space: nowrap (etwa „Zuletzt: … · Mistress S · vor 2
   Wochen") setzt damit die Mindestbreite der ganzen Spur. Weil body
   overflow-x: clip trägt, entsteht kein Scrollbalken — die Karten werden
   rechts einfach abgeschnitten. Im Forum betraf das 143 Elemente.
   --------------------------------------------------------------------- */
.ml-theme .grid > *,
.ml-theme .ml-personen > *,
.ml-theme .ml-person,
.ml-theme .ml-wege > *,
.ml-theme .ml-zahlen > * { min-width: 0; }

/* Gewerblich-Marke auf hellem Grund

   Die Bernstein-Fassung stammt aus der dunklen Ansicht. Auf Creme lag sie
   bei 3:1. Statt sie mit einer dunklen Pille zu unterlegen, bekommt sie
   hier eine eigene helle Fassung: gedecktes Bernstein auf zartem Grund,
   6,6:1. Die Regel steht bewusst nach der allgemeinen Bernstein-Umdeutung. */
.ml-theme .ml-hell .gewerblich-marke {
    color: #6b4610 !important;
    background-color: rgba(138, 90, 18, .10) !important;
    border-color: rgba(138, 90, 18, .34) !important;
}

/* ---------------------------------------------------------------------
   Durchscheinende Textfarben auf hellem Grund

   Auf dunklem Grund liest sich Gold bei 80 % und Sand bei 50 % noch gut.
   Auf Creme kippt genau das: Messing/80 kommt auf 3,9:1, Tinte/50 auf
   2,1:1. Innerhalb von .ml-hell werden die Abstufungen deshalb auf die
   vollen Tokens gezogen — die Hierarchie bleibt über Größe und Versalien
   erhalten, nicht über Transparenz.
   --------------------------------------------------------------------- */
.ml-theme .ml-hell .text-gold\/80,
.ml-theme .ml-hell .text-gold\/70,
.ml-theme .ml-hell .text-gold\/60,
.ml-theme .ml-hell .text-gold\/50,
.ml-theme .ml-hell .text-gold\/40 { color: rgb(var(--ml-messing)); }

.ml-theme .ml-hell .text-sand-200\/80,
.ml-theme .ml-hell .text-sand-200\/70,
.ml-theme .ml-hell .text-sand-200\/60,
.ml-theme .ml-hell .text-sand-200\/50,
.ml-theme .ml-hell .text-sand-200\/40 { color: rgb(var(--ml-tinte-leise)); }

/* Zitate im Forumstext tragen eine fest verdrahtete helle Farbe. */
.ml-theme .ml-hell .forum-body blockquote {
    color: rgb(var(--ml-tinte-leise));
    border-left-color: rgba(43, 15, 26, .28);
}

/* Fehlermeldungen: Rot 400 ist für dunklen Grund gemischt. */
.ml-theme .ml-hell .text-red-400 { color: #a4231c; }

/* Fließtext im Forum auf Creme: volle Tinte statt weicher Tinte.
   Der weiche Ton ist für Randnotizen gedacht, nicht für den Beitrag,
   den jemand tatsächlich lesen will. */
.ml-theme .ml-hell .forum-body { color: rgb(var(--ml-tinte)); }

/* =====================================================================
   Nachzug aus der zweiten Abnahme

   Die Umdeutung der Farbvariablen greift überall dort nicht, wo eine
   Regel ihre Farbe fest verdrahtet oder Tailwind einen eigenen
   Klassennamen erzeugt (hover:, focus-within:, Komponentenklassen).
   Diese Fälle werden hier einzeln nachgezogen.
   ===================================================================== */

/* Karten auf Creme: der Schlagschatten ist schwarz und für dunklen Grund
   gemischt. Auf Papier trägt die Haarlinie allein. */
.ml-theme .ml-hell .card {
    box-shadow: none;
    border-color: var(--ml-linie);
}

/* Feldbeschriftung und Eingabezeile sind Komponentenklassen mit eigener
   Alpha-Angabe — .text-gold\/80 und .border-gold\/30 fassen sie nicht. */
.ml-theme .ml-hell .label { color: rgb(var(--ml-messing)); }
.ml-theme .ml-hell .input { border-color: rgba(43, 15, 26, .3); }
.ml-theme .ml-hell .input:focus { border-color: rgb(var(--ml-tinte)); }

/* Zustandsvarianten tragen eigene Klassennamen. */
.ml-theme .ml-hell .hover\:border-gold\/30:hover,
.ml-theme .ml-hell .hover\:border-gold\/35:hover,
.ml-theme .ml-hell .hover\:border-gold\/40:hover,
.ml-theme .ml-hell .hover\:border-gold\/50:hover,
.ml-theme .ml-hell .hover\:border-gold\/60:hover,
.ml-theme .ml-hell .hover\:border-gold:hover,
.ml-theme .ml-hell .focus-within\:border-gold\/40:focus-within {
    border-color: rgba(43, 15, 26, .42) !important;
}

/* Die schwächste Goldfläche fehlte in der Umdeutung. */
.ml-theme .ml-hell .bg-gold\/5,
.ml-theme .ml-hell .bg-gold\/40 { background-color: rgba(43, 15, 26, .06) !important; }

/* Rückfallzeichen der Avatare: die Fläche wird zu 6 % Tinte, dadurch
   verliert der Kreis auf Papier seine Kontur. Eine Linie stellt sie her. */
.ml-theme .ml-hell .bg-gold\/15.rounded-full,
.ml-theme .ml-hell .rounded-full.bg-gold\/15 { box-shadow: inset 0 0 0 1px rgba(43, 15, 26, .22); }

/* ---------------------------------------------------------------------
   Dritte Abnahme: Farben aus der dunklen Fassung, die auf Creme kippen
   --------------------------------------------------------------------- */

/* Smaragd für Häkchen und Gutschriften: 1,6:1 auf Papier. */
.ml-theme .ml-hell .text-emerald-400,
.ml-theme .ml-hell .text-emerald-300 { color: #16704a !important; }

/* Platzhalter in Eingabefeldern: Messing bei 40 % ist auf Creme nicht lesbar. */
.ml-theme .ml-hell .input::placeholder,
.ml-theme .ml-hell input::placeholder,
.ml-theme .ml-hell textarea::placeholder { color: rgba(43, 15, 26, .45); }


/* Tabu-Chip: heller Text auf hellem Grund, 4,0:1. */
.ml-theme .ml-hell .kink-chip-tabu { color: rgb(var(--ml-tinte)); }

/* text-noir kehrt sich in .ml-hell um und wird zu Papierweiß — auf einer
   hellen Marke stünde dann helle Schrift auf heller Fläche. */
.ml-theme .ml-hell .text-noir { color: rgb(var(--ml-tinte)) !important; }

/* =====================================================================
   Geschenke im Profil — die Zeile unter dem Kopf
   ---------------------------------------------------------------------
   Löst den früheren Kasten über dem Profil ab (community/gifts/_regal).
   Bewusst ohne Rahmen und Fläche: zwei Haarlinien setzen die Zeile ab,
   mehr braucht sie nicht. Ist nichts geschenkt worden, wird sie gar nicht
   erst gerendert.

   Die Fassung des Medaillons zeigt den Wert (GiftType::stufe):
   1 = schlicht, 2 = gefasster Rand, 3 = volles Messing mit Schimmer.
   Der helle Ring (--neu) markiert die letzten 24 Stunden.
   ===================================================================== */

.ml-gesch {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 13px 0;
    border-top: 1px solid rgb(var(--c-gold) / .12);
    border-bottom: 1px solid rgb(var(--c-gold) / .12);
}
.ml-gesch__marke {
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: rgb(var(--c-gold)); font-weight: 500; white-space: nowrap;
}
.ml-gesch__marke span { color: rgb(var(--c-sand-200)); letter-spacing: 0; }
.ml-gesch__stuecke { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-gesch__stueck { position: relative; display: block; }
.ml-gesch__satz { font-size: 13.5px; color: rgb(var(--c-sand-100)); min-width: 0; }
.ml-gesch__satz b { color: rgb(var(--c-sand)); font-weight: 500; }
.ml-gesch__satz i { color: rgb(var(--c-sand-200)); font-style: normal; }
.ml-gesch__alle { margin-left: auto; font-size: 12.5px; color: rgb(var(--c-gold)); white-space: nowrap; }
.ml-gesch__alle:hover { text-decoration: underline; }
.ml-gesch__zahl {
    position: absolute; top: -5px; right: -5px; z-index: 1;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    background: rgb(var(--c-burgund)); border: 1px solid rgb(var(--c-gold) / .45);
    color: rgb(var(--c-sand)); font-size: 10px; font-weight: 500; line-height: 16px;
    text-align: center; font-variant-numeric: tabular-nums;
}
.ml-gesch__mehr {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    border: 1px dashed rgb(var(--c-gold) / .30); color: rgb(var(--c-sand-200));
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.ml-gesch__mehr:hover { border-color: rgb(var(--c-gold) / .6); color: rgb(var(--c-gold)); }

/* Medaillon — auch im Geschenkregal und beim Aussuchen benutzt */
.ml-med {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 14px;
    color: rgb(var(--c-gold));
    background: rgb(var(--c-gold) / .07);
    border: 1px solid rgb(var(--c-gold) / .12);
}
.ml-med svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
              stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ml-med--2 { background: rgb(var(--c-gold) / .10); border-color: rgb(var(--c-gold) / .34); }
.ml-med--3 {
    background: linear-gradient(160deg, rgb(var(--c-gold-50) / .26), rgb(var(--c-gold) / .10));
    border-color: rgb(var(--c-gold-50) / .62);
    box-shadow: 0 0 0 3px rgb(var(--c-gold) / .10), 0 10px 26px -14px rgb(var(--c-gold-50) / .75);
    color: rgb(var(--c-gold-50));
}
.ml-med--rose { color: #e8a6b8; background: rgba(232,166,184,.12); border-color: rgba(232,166,184,.30); }
.ml-med--3.ml-med--rose {
    background: linear-gradient(160deg, rgba(232,166,184,.30), rgba(232,166,184,.10));
    border-color: rgba(232,166,184,.62);
    box-shadow: 0 0 0 3px rgba(232,166,184,.10), 0 10px 26px -14px rgba(232,166,184,.75);
}
/* Jüngstes Geschenk der letzten 24 Stunden */
.ml-med--neu {
    border-color: rgb(var(--c-gold-50));
    box-shadow: 0 0 0 3px rgb(var(--c-gold-50) / .22), 0 8px 22px -10px rgb(var(--c-gold-50) / .75);
}
.ml-med--gross { width: 60px; height: 60px; border-radius: 18px; }
.ml-med--gross svg { width: 32px; height: 32px; }

/* Auf Creme: Messing und Rosé kippen, deshalb die Tinte-Fassung. */
.ml-theme .ml-hell .ml-med { background: rgba(43,15,26,.05); border-color: rgba(43,15,26,.18); color: #8a6e19; }
.ml-theme .ml-hell .ml-med--2 { border-color: rgba(138,110,25,.5); }
.ml-theme .ml-hell .ml-med--3 { background: rgba(138,110,25,.14); border-color: #8a6e19; box-shadow: none; color: #6f5814; }
.ml-theme .ml-hell .ml-med--rose { color: #a8437a; background: rgba(168,67,122,.08); border-color: rgba(168,67,122,.35); }
.ml-theme .ml-hell .ml-gesch__satz { color: rgba(43,15,26,.75); }
.ml-theme .ml-hell .ml-gesch__satz b { color: rgb(var(--ml-tinte)); }