/* ============================================================
   fux_sitepackage_hsgm — Badges im RTE (2026-10-12, User: die Badge-
   Varianten der Prototypen als Stil-Auswahl im Editor)

   Inline-Stile (span) und Badge-Listen (ul, jeder Eintrag ein Badge) aus
   dem Stil-Menue des RTE-Standard-Presets;
   Aussehen nach den Originalen (alt-hero-badge, alt-operation-badge,
   page-overline, product-count-badge, hq-badge), aber ohne Positionierung
   und mit der Schriftgroesse des umgebenden Texts, damit sie im
   Fliesstext stehen.
   Geladen im Frontend (Layouts/Page/Relaunch.html) und als contentsCss im
   Editor. Klassen muessen in RTE.default.proc.allowedClasses stehen
   (TsConfig/Page/RTE/Legacy.tsconfig), sonst entfernt TYPO3 sie beim
   Speichern.
   Menuenamen im RTE nach Funktion (Default.yaml): status = Primary,
   pill = Primary Light, operation = Secondary, count = Light,
   count-dark = Dark, overline = Text.
   Kontraste: Pille #0066cc auf ~#f0f6fc 5,2:1; Betriebsart #6e6e73 auf
   #f5f5f7 4,7:1; Dachzeile #6e6e73 auf Weiss 5,1:1; Zaehler #1d1d1f auf
   #f5f5f7 15,4:1; Dark Weiss auf #6e6e73 5,1:1; Status
   Weiss auf #0066cc 5,6:1.
   ============================================================ */

.rte-badge,
.rte-badge-list > li {
    display: inline-block;
    /* Schriftgroesse aus dem umgebenden Text, Abstand oben/unten 0.5em,
       Innenabstaende/Radien in em (User 2026-10-12): Werte = Prototyp-rem
       geteilt durch die fruehere Badge-Schriftgroesse, Proportionen bleiben */
    margin-block: 0.5em;
    font-size: inherit;
    line-height: 1.4;
    border-radius: 2em;
}

.rte-badge--pill,
.rte-badge-list--pill > li {
    padding: 0.4em 1.2em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0066cc;
    background: rgba(0, 102, 204, 0.06);
}

.rte-badge--operation,
.rte-badge-list--operation > li {
    padding: 0.5em 1.1em;
    font-weight: 500;
    color: #6e6e73;
    background: #f5f5f7;
    border-radius: 0.6em;
}

.rte-badge--overline,
.rte-badge-list--overline > li {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6e6e73;
    border-radius: 0;
}

.rte-badge--count,
.rte-badge-list--count > li {
    padding: 0.25em 0.85em;
    font-weight: 500;
    color: #1d1d1f;
    background: #f5f5f7;
}

/* Dark (rte-badge--count-dark, User 2026-10-12): Form wie Light (count),
   weisse Schrift auf --gray-secondary #6e6e73 (5,1:1; auf #d2d2d7 waeren es
   nur 1,5:1) */
.rte-badge--count-dark,
.rte-badge-list--count-dark > li {
    padding: 0.25em 0.85em;
    font-weight: 500;
    color: #fff;
    background: #6e6e73;
}

/* Links im Dark-Badge (User 2026-10-13): weiss und unterstrichen, auch bei
   Hover/Fokus (Weiss auf #6e6e73 5,1:1; Unterstreichung unterscheidet den
   Link vom Badge-Text, WCAG 1.4.1). Faelle: Link im Badge-Listeneintrag,
   Link im Inline-Badge, Link um ein Inline-Badge. */
.rte-badge--count-dark a,
.rte-badge-list--count-dark > li a,
a:has(> .rte-badge--count-dark),
.rte-badge--count-dark a:hover,
.rte-badge-list--count-dark > li a:hover,
a:has(> .rte-badge--count-dark):hover,
.rte-badge--count-dark a:focus-visible,
.rte-badge-list--count-dark > li a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.2em;
}

/* Fokus zweifarbig: der Standard-Fokus (#0066cc) haette auf #6e6e73 zu
   wenig Kontrast; weisser Ring innen (auf dem Badge sichtbar) plus dunkler
   Ring aussen (auf weissem Seitengrund sichtbar) */
.rte-badge--count-dark a:focus-visible,
.rte-badge-list--count-dark > li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0;
    box-shadow: 0 0 0 4px #1d1d1f;
    border-radius: 0.2em;
}

.rte-badge--status,
.rte-badge-list--status > li {
    padding: 0.35em 1.15em;
    font-weight: 600;
    color: #fff;
    background: #0066cc;
}

/* Badge-Liste (User 2026-10-12): ohne Aufzaehlungszeichen und Einrueckung,
   Eintraege nebeneinander; Abstand zwischen den Badges 0.5em, oben/unten
   ueber margin-block der Badges. Gilt fuer den Block-Stil "Badge-Liste"
   (ul.rte-badge-list) UND fuer normale Listen, deren Eintraege den
   Inline-Stil "Badge" tragen (span.rte-badge im li, auch in Links und im
   Editor, der den Inhalt eines li zusaetzlich verpackt) */
.rte-badge-list,
ul:has(> li .rte-badge),
ol:has(> li .rte-badge) {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (forced-colors: active) {
    .rte-badge--pill,
    .rte-badge--operation,
    .rte-badge--count,
    .rte-badge--count-dark,
    .rte-badge--status,
    .rte-badge-list--pill > li,
    .rte-badge-list--operation > li,
    .rte-badge-list--count > li,
    .rte-badge-list--count-dark > li,
    .rte-badge-list--status > li {
        border: 1px solid CanvasText;
    }
}