/* ============================================================
   HomeCenter Design-Tokens & Theme (HCUI)
   ------------------------------------------------------------
   Systemweiter Hell-/Dunkel-Modus über data-bs-theme am <html>.
   Design "Dark Prime": Header, Hauptmenü, Glocken-Panel und
   Tab-Bar bleiben in beiden Modi dunkel (Chrome-Tokens), nur
   der Inhaltsbereich wechselt (Flächen-Tokens).

   Regel für alle Templates: KEINE hartcodierten Farben mehr –
   immer var(--hc-…) verwenden.
   ============================================================ */

:root,
[data-bs-theme="light"] {
    /* Inhaltsflächen */
    --hc-bg: #f4f5f7;                 /* Seitenhintergrund */
    --hc-card: #ffffff;               /* Karten */
    --hc-card-2: #f6f7f9;             /* abgesetzte Flächen in Karten (Listen, Code, Zitate) */
    --hc-ink: #212529;                /* Text */
    --hc-muted: #6c757d;              /* Sekundärtext */
    --hc-line: #e6e8eb;               /* Trennlinien / Rahmen */
    --hc-hover: rgba(0, 0, 0, .05);   /* Hover-Fläche auf hellem Grund */
    --hc-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    --hc-shadow-lg: 0 10px 34px rgba(0, 0, 0, .14);

    /* Akzent: HomeCenter-Rot */
    --hc-accent: #dc3545;
    --hc-accent-hover: #bb2d3b;
    --hc-accent-ink: #c22232;         /* Rot als Textfarbe (Links, aktive Einträge) */
    --hc-accent-soft: rgba(220, 53, 69, .10);

    /* Zustandsfarben (0.92.1016). Bis hierher gab es keine: Wer "offen"
       gruen und "geschlossen" gelb zeigen wollte, griff zu btn-success und
       btn-warning - Bootstrap-Toene, die mit der Palette nichts zu tun
       haben und im Dunkelmodus nicht mitwandern. --hc-*-ink ist die
       Schriftfassung, das andere der Rahmen; die getoente Flaeche mischt
       sich der Aufrufer per color-mix, wie .he-pill-warn es vormacht.
       Kontrast nachgerechnet: Schrift 5,0-6,1:1 auf hellem Grund,
       8,4-9,5:1 auf dunklem; Rahmen ab 3,3:1. */
    --hc-ok: #198754;
    --hc-ok-ink: #15704a;
    --hc-warn: #b8860b;
    --hc-warn-ink: #8a6508;

    /* Social-/Chat-/Mail-Welt: Lila */
    --hc-social: #6f42c1;
    --hc-social-hover: #5a32a3;
    --hc-social-ink: #6f42c1;
    --hc-social-soft: rgba(111, 66, 193, .10);

    /* Küchen-Welt (Rezepte/Speiseplan/Einkaufsplan/Einkaufszettel): Grün */
    --hc-kitchen: #2e7d4f;
    --hc-kitchen-hover: #256641;
    --hc-kitchen-ink: #276b44;
    --hc-kitchen-soft: rgba(46, 125, 79, .10);

    /* Mahlzeiten im Speiseplan: drei unterscheidbare Tageszeiten. Bewusst
       eigene Farben statt Abstufungen von --hc-kitchen – im gestapelten
       Kalorienbalken eines Tages muss ablesbar bleiben, welcher Anteil aus
       welcher Mahlzeit kommt, und drei Grüntöne wären dort nicht trennbar.
       Mittag ist absichtlich das Küchen-Grün, damit die Welt erkennbar bleibt. */
    --hc-meal-breakfast: #c8871d;
    --hc-meal-lunch: #2e7d4f;
    --hc-meal-dinner: #4f5bbf;

    /* KI-Welt: Magenta (Farbe eingefuehrt in 0.91.1014, Ton gewaehlt vom
       Nutzer in 0.91.1015). Bewusst KEINE App-Farbe und keine
       Abstufung des Akzents: Ein Knopf, der eine KI-Anfrage ausloest, kostet
       Geld - er soll sich von jedem gewoehnlichen Knopf unterscheiden, egal
       in welcher App er steht. Deshalb ist dieser Ton nirgends sonst im
       Einsatz, und umgekehrt traegt ihn nichts, was keine Anfrage ausloest.
       --hc-ki traegt weisse Schrift und ist dafuer in BEIDEN Themes
       dunkel genug; --hc-ki-ink ist der Ton fuer Text auf der Seite.

       Eine Ausnahme, die der Nutzer ausdruecklich verlangt hat (0.92.1027):
       das Abzeichen "AI" in Profil, Benutzerverwaltung und Admin-Panel. Es
       loest keine Anfrage aus - es zeigt, wer die Knoepfe ueberhaupt sehen
       darf. Dort stand vorher Tuerkis (#20c997) in der Liste und im Balken
       und ein getoentes Magenta im Profil: drei Orte, zwei Farben. */
    --hc-ki: #a21caf;
    --hc-ki-hover: #86198f;
    --hc-ki-ink: #9d1cab;
    --hc-ki-soft: rgba(162, 28, 175, .10);
    --hc-ki-glow: rgba(162, 28, 175, .35);

    /* Rollen (0.92.1027): die Farbe einer Abo-Rolle in Profil, Benutzer-
       verwaltung und Admin-Panel. Sie stand dort je Ort einzeln als Hex
       oder rgba im Markup - und wich ab: Das Admin-Panel kannte fuer "AI"
       ein anderes Tuerkis als das Profil sein Magenta. Eine Rolle hat jetzt
       EINE Farbe, an einer Stelle.
       Social und KI haben ihre Farbe schon (--hc-social, --hc-ki) und stehen
       deshalb hier nicht. Alle Rollenflaechen tragen weisse Schrift und sind
       in beiden Themes gleich - darum nur hier, nicht im dunklen Block. */
    --hc-rolle-news: #d63384;
    --hc-rolle-kb: #0dcaf0;
    --hc-rolle-creator: #0d6efd;
    --hc-rolle-tutor: #198754;
    --hc-rolle-dev: #fd7e14;

    /* Health-Welt (Kalorien/Gesundheitschecks/Impfbuch): Petrol */
    --hc-health: #0f766e;
    --hc-health-hover: #115e59;
    --hc-health-ink: #0f766e;
    --hc-health-soft: rgba(15, 118, 110, .10);
    /* Traegt eine ganze Flaeche mit weisser Schrift darauf (Health-Kopf).
       --hc-health selbst ist dafuer im Dunkelmodus zu hell - dasselbe
       Problem, fuer das OweMe --om-petrol eingefuehrt hat. */
    --hc-health-deep: #0f3b36;
    /* Der helle Ton, der AUF --hc-health-deep liest. Bewusst in beiden
       Themes derselbe Wert: --hc-health-ink ist im Hellmodus dunkles
       Petrol und damit auf der dunklen Flaeche unsichtbar. */
    --hc-health-bright: #5eead4;

    /* Läden im Einkaufsplan: sechs unterscheidbare Farben, per Hash auf den
       Ladennamen verteilt (siehe epStoreColor in einkaufsplan_detail.html) –
       damit man auf einen Blick sieht, welcher Termin zu welchem Laden
       gehört. --hc-market-1 ist bewusst das Küchen-Grün, als Fallback ohne
       Ladennamen. */
    --hc-market-1: #2e7d4f;
    --hc-market-2: #2f6fb0;
    --hc-market-3: #c8871d;
    --hc-market-4: #b3466a;
    --hc-market-5: #7458c4;
    --hc-market-6: #8a7a1f;

    /* Kategorien und Personen in der Einkaufsliste: neun unterscheidbare
       Toene, per Hash auf den Kategorie- bzw. Anzeigenamen verteilt (wie
       --hc-market-* im Einkaufsplan). Bewusst eine gemeinsame Palette:
       Kategorien erscheinen als Kante und Kachel, Personen als kleiner
       Kreis in der Zweitzeile - die beiden treten nie als dieselbe Form
       auf, und zwei getrennte Skalen waeren schwerer zusammenzuhalten. */
    --hc-cat-1: #d97227;
    --hc-cat-2: #3e86cc;
    --hc-cat-3: #be8b1e;
    --hc-cat-4: #bc5271;
    --hc-cat-5: #2f949d;
    --hc-cat-6: #6079d4;
    --hc-cat-7: #8261c2;
    --hc-cat-8: #cc5f95;
    --hc-cat-9: #7e8034;

    /* Fachfarben des Stundenplaners. Bewusst eine eigene, laengere Skala:
       die Kategorienfarben werden aus dem Namen errechnet, diese hier waehlt
       der Nutzer aus - und ein Schuljahr kommt schnell auf mehr als neun
       Faecher. Jeder Ton ist fuer beide Themen einzeln gesetzt; ein
       gespeicherter Hexwert koennte beim Themenwechsel nicht mitschalten. */
    --hc-fach-1: #d97227;
    --hc-fach-2: #3e86cc;
    --hc-fach-3: #be8b1e;
    --hc-fach-4: #bc5271;
    --hc-fach-5: #2f949d;
    --hc-fach-6: #6079d4;
    --hc-fach-7: #8261c2;
    --hc-fach-8: #cc5f95;
    --hc-fach-9: #7e8034;
    --hc-fach-10: #2f8f5b;
    --hc-fach-11: #b1553a;
    --hc-fach-12: #5c6b7a;

    /* Xplorer: die drei Status der Weltkarte. Sie stammen aus der alten
       Browser-App und sind dort die Sprache der Oberflaeche - deshalb
       bleiben sie, nur je Thema einzeln gesetzt. */
    --hc-xp-besucht: #2b8f63;
    --hc-xp-gelebt: #c8871d;
    --hc-xp-wunsch: #5b7de8;
}

[data-bs-theme="dark"] {
    --hc-bg: #131418;
    --hc-card: #1d2025;
    --hc-card-2: #24272d;
    --hc-ink: #e9eaec;
    --hc-muted: #9aa0a6;
    --hc-line: #2b2e33;
    --hc-hover: rgba(255, 255, 255, .08);
    --hc-shadow: 0 4px 20px rgba(0, 0, 0, .35);
    --hc-shadow-lg: 0 10px 34px rgba(0, 0, 0, .5);

    --hc-accent: #dc3545;
    --hc-accent-hover: #e35d6a;
    --hc-accent-ink: #f1737f;
    --hc-accent-soft: rgba(227, 93, 106, .16);

    --hc-ok: #2ea36b;
    --hc-ok-ink: #6fd69a;
    --hc-warn: #d9a520;
    --hc-warn-ink: #f1bd62;

    --hc-social: #6f42c1;
    --hc-social-hover: #8250df;
    --hc-social-ink: #a98eda;
    --hc-social-soft: rgba(139, 105, 205, .18);

    --hc-kitchen: #57b57c;
    --hc-kitchen-hover: #6fc491;
    --hc-kitchen-ink: #8ed3aa;
    --hc-kitchen-soft: rgba(87, 181, 124, .16);

    --hc-meal-breakfast: #e0a33a;
    --hc-meal-lunch: #57b57c;
    --hc-meal-dinner: #8b95e8;

    /* Flaeche und Hover bleiben dieselben wie im Hellmodus: Ein helleres
       Bernstein sieht auf dunklem Grund zwar lebendiger aus, traegt aber
       keine weisse Schrift mehr. Nur Text- und Flaechentoene werden heller. */
    --hc-ki: #a21caf;
    --hc-ki-hover: #86198f;
    --hc-ki-ink: #e8a0f0;
    --hc-ki-soft: rgba(192, 38, 211, .18);
    --hc-ki-glow: rgba(192, 38, 211, .40);

    --hc-health: #2dd4bf;
    --hc-health-hover: #5eead4;
    --hc-health-ink: #5eead4;
    --hc-health-soft: rgba(45, 212, 191, .16);
    --hc-health-deep: #16302c;
    --hc-health-bright: #5eead4;

    --hc-market-1: #57b57c;
    --hc-market-2: #5b9bd9;
    --hc-market-3: #e0a33a;
    --hc-market-4: #dd7fa0;
    --hc-market-5: #a58ee0;
    --hc-market-6: #c2ae5a;

    --hc-cat-1: #e89a5c;
    --hc-cat-2: #6fa9e0;
    --hc-cat-3: #dcac4a;
    --hc-cat-4: #db829a;
    --hc-cat-5: #58b6be;
    --hc-cat-6: #8b9fe4;
    --hc-cat-7: #a78bda;
    --hc-cat-8: #e086b4;
    --hc-cat-9: #a9ab5c;

    /* Fachfarben, aufgehellt: dieselbe Reihenfolge wie oben, damit Fach 3
       in beiden Themen dasselbe Fach bleibt. */
    --hc-fach-1: #e89a5c;
    --hc-fach-2: #6fa9e0;
    --hc-fach-3: #dcac4a;
    --hc-fach-4: #db829a;
    --hc-fach-5: #58b6be;
    --hc-fach-6: #8b9fe4;
    --hc-fach-7: #a78bda;
    --hc-fach-8: #e086b4;
    --hc-fach-9: #a9ab5c;
    --hc-fach-10: #5fb887;
    --hc-fach-11: #d5836a;
    --hc-fach-12: #93a2b1;

    /* Xplorer-Status, aufgehellt. */
    --hc-xp-besucht: #45c189;
    --hc-xp-gelebt: #e0a33a;
    --hc-xp-wunsch: #8aa4f2;
}

/* Chrome (Header/Menü/Glocke/Tab-Bar): themenunabhängig dunkel */
:root {
    --hc-chrome: #16181c;             /* Header, Tab-Bar */
    --hc-chrome-2: #1c1f24;           /* Menü, Panels */
    --hc-chrome-3: #26292f;           /* Flächen im Chrome (Icons, Chips) */
    --hc-chrome-ink: #f1f2f4;
    --hc-chrome-mut: #8d939a;
    --hc-chrome-line: #2b2e33;
    --hc-chrome-hover: rgba(255, 255, 255, .10);
    --hc-chrome-active: rgba(255, 255, 255, .14);
}

/* Bootstrap-Semantik auf die HC-Tokens mappen, damit bg-body-secondary,
   Formularfelder, Modals usw. automatisch zur Token-Palette passen. */
[data-bs-theme="light"], :root {
    --bs-body-color: var(--hc-ink);
    --bs-secondary-bg: var(--hc-card-2);
    --bs-tertiary-bg: var(--hc-bg);
    --bs-border-color: var(--hc-line);
    /* Textlinks: HomeCenter-Rot statt Bootstrap-Blau */
    --bs-link-color: var(--hc-accent-ink);
    --bs-link-hover-color: var(--hc-accent-hover);
    --bs-link-color-rgb: 194, 34, 50;
    --bs-link-hover-color-rgb: 187, 45, 59;
}
[data-bs-theme="dark"] {
    --bs-body-color: var(--hc-ink);
    --bs-body-bg: var(--hc-card);
    --bs-secondary-bg: var(--hc-card-2);
    --bs-tertiary-bg: var(--hc-bg);
    --bs-border-color: var(--hc-line);
    --bs-link-color: var(--hc-accent-ink);
    --bs-link-hover-color: var(--hc-accent-hover);
    --bs-link-color-rgb: 241, 115, 127;
    --bs-link-hover-color-rgb: 227, 93, 106;
}

/* Verstreute bg-white/bg-light-Utilities dunkeltauglich machen,
   ohne jedes Template anzufassen. */
[data-bs-theme="dark"] .bg-white { background-color: var(--hc-card) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--hc-card-2) !important; }

/* ============================================================
   Basis
   ============================================================ */
body {
    background: var(--hc-bg);
    color: var(--hc-ink);
}
main {
    background: var(--hc-bg);
    min-height: 100vh;
    /* flow-root gegen einen durchgereichten Außenabstand: <main> hat weder
       Innenabstand noch Rahmen, deshalb ist der obere Außenabstand seines
       Kindes (.container-fluid.mt-5 = 48px) bisher nach außen durchgeschlagen
       und hat <main> selbst 48px nach unten geschoben. Zusammen mit
       min-height:100vh war das Dokument dadurch auf JEDER Seite 48px höher
       als das Fenster - ein Scrollbalken ohne Inhalt dahinter. flow-root
       schließt den Abstand ein; die Optik bleibt unverändert (der Inhalt
       beginnt weiterhin 48px unter der Oberkante). */
    display: flow-root;
}

/* ============================================================
   Header (Design B: immer dunkel, rote Signaturlinie)
   ============================================================ */
.hc-header {
    background: var(--hc-chrome);
    border-top: 3px solid var(--hc-accent);
    border-bottom: 1px solid var(--hc-chrome-line);
}
/* Hoehe der festen Kopfleiste als Token (0.92.1013): 3px Signaturlinie +
   56px Inhalt (.hc-header-inner) + 1px Unterkante. Wer etwas unter ihr
   festhalten will - eine Werkzeugleiste, eine Filterzeile - braucht den
   Wert, und abgeschrieben wuerde er beim naechsten Umbau der Kopfleiste
   nicht mitwandern. Im Browser nachgemessen: 60px. */
:root { --hc-kopf-h: 60px; }
.hc-header-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: .55rem 1rem;
    min-height: 56px;
}
.hc-header-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hc-chrome-ink);
    font-size: 1.3rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease;
}
.hc-header-btn:hover,
.hc-header-btn:focus-visible {
    background: var(--hc-chrome-hover);
    color: #fff;
}
/* Laufende Stempeluhr (0.90.1026) - nur sichtbar, solange eine läuft. */
.hc-header-uhr {
    display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
    height: 32px; padding: 0 .65rem; border-radius: 999px;
    background: var(--hc-chrome-2); color: var(--hc-chrome-ink);
    font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
    border: 1px solid var(--hc-chrome-line);
}
.hc-header-uhr i { color: var(--hc-accent); font-size: .95rem; }
.hc-header-uhr.is-pause i { color: var(--hc-chrome-mut); }
.hc-header-uhr:hover, .hc-header-uhr:focus-visible { background: var(--hc-chrome-hover); color: #fff; }
.hc-header-logo {
    display: flex;
    align-items: center;
    margin-left: .25rem;
    margin-right: auto;
}
/* Eigene Logos (0.90) haben ein anderes Seitenverhaeltnis als das
   mitgelieferte: Hoehe bleibt, die Breite wird begrenzt statt verzerrt. */
.hc-header-logo img, .hc-brand-img { width: auto; max-width: 180px; object-fit: contain; }
/* Suche in der Kopfleiste (0.90). Gleiche Chrome-Farben wie die Glocke;
   die Ergebnisliste ist ein Panel wie das der Benachrichtigungen. */
.hc-hsearch { position: relative; flex: 0 1 280px; min-width: 0; }
.hc-hsearch-toggle, .hc-hsearch-close { display: none; }
.hc-hsearch-box { position: relative; display: flex; align-items: center; }
.hc-hsearch-icon {
    position: absolute; left: .75rem; color: var(--hc-chrome-mut);
    font-size: .9rem; pointer-events: none;
}
.hc-hsearch #search-input {
    width: 100%; height: 36px; padding: 0 .9rem 0 2.1rem;
    font-size: .9rem; color: var(--hc-chrome-ink);
    background: var(--hc-chrome-2); border: 1px solid var(--hc-chrome-line);
    border-radius: 18px; box-shadow: none; outline: none;
}
.hc-hsearch #search-input::placeholder { color: var(--hc-chrome-mut); }
.hc-hsearch #search-input:focus { border-color: var(--hc-chrome-mut); background: var(--hc-chrome-3); }
.hc-hsearch #search-input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.hc-hs-results {
    display: none; position: absolute; top: calc(100% + 12px); right: 0;
    width: 380px; max-width: calc(100vw - 24px); max-height: min(70vh, 460px); overflow-y: auto;
    background: var(--hc-chrome-2); color: var(--hc-chrome-ink);
    border: 1px solid var(--hc-chrome-line); border-radius: 14px;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); padding: .35rem; z-index: 1070;
}
.hc-hs-results h3 {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--hc-chrome-mut); margin: .6rem .6rem .3rem;
}
.hc-hs-hit {
    display: flex; gap: .65rem; align-items: flex-start; padding: .5rem .6rem;
    border-radius: 9px; color: var(--hc-chrome-ink); text-decoration: none;
}
.hc-hs-hit:hover, .hc-hs-hit:focus-visible { background: var(--hc-chrome-hover); color: #fff; outline: none; }
.hc-hs-hit > i { margin-top: .15rem; color: var(--hc-chrome-mut); }
.hc-hs-hit > span { display: flex; flex-direction: column; min-width: 0; }
.hc-hs-hit strong { font-weight: 600; font-size: .88rem; }
.hc-hs-hit small { color: var(--hc-chrome-mut); font-size: .76rem; line-height: 1.35; }
.hc-hs-results p { margin: .6rem; color: var(--hc-chrome-mut); font-size: .85rem; }

@media (max-width: 767.98px) {
    /* Handy: nur die Lupe; offen liegt das Feld ueber der ganzen Leiste. */
    .hc-hsearch { flex: 0 0 auto; position: static; }
    .hc-hsearch-toggle { display: flex; }
    .hc-hsearch-box { display: none; }
    .hc-hsearch.is-open .hc-hsearch-box {
        display: flex; position: absolute; inset: 0; z-index: 1080; gap: .4rem;
        padding: 0 .75rem; background: var(--hc-chrome);
    }
    .hc-hsearch.is-open .hc-hsearch-icon { left: 1.5rem; }
    .hc-hsearch.is-open .hc-hsearch-close { display: flex; }
    .hc-hs-results { top: 100%; left: .5rem; right: .5rem; width: auto; max-width: none; }
}

.hc-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hc-chrome-3);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    display: block;
}
.hc-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hc-avatar-wrap { position: relative; flex-shrink: 0; }
.hc-avatar-wrap .notif-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--hc-chrome);
    transform: translate(25%, -25%);
}

/* Profil-Dropdown am Avatar: Konto-Aktionen im Chrome-Stil
   (dunkel wie Glocken-Panel und Hauptmenü) */
.hc-profile-menu {
    --bs-dropdown-bg: var(--hc-chrome-2);
    --bs-dropdown-color: var(--hc-chrome-ink);
    --bs-dropdown-link-color: var(--hc-chrome-ink);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: var(--hc-chrome-hover);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--hc-chrome-active);
    --bs-dropdown-border-color: var(--hc-chrome-line);
    --bs-dropdown-divider-bg: var(--hc-chrome-line);
    min-width: 235px;
    border-radius: 14px;
    padding: .45rem;
    margin-top: .65rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45) !important;
}
.hc-profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 8px;
    padding: .5rem .65rem;
    font-size: .92rem;
}
.hc-profile-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.hc-pm-head { padding: .3rem .65rem .4rem; }
.hc-pm-role {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--hc-chrome-3);
    color: var(--hc-chrome-mut);
    font-size: .7rem;
    font-weight: 600;
}
/* Abmelden: rote Signalfarbe (Chrome ist immer dunkel → helles Rot) */
.hc-pm-logout { color: #f1737f; }
.hc-pm-logout:hover, .hc-pm-logout:focus { color: #ff9aa4; }

/* ============================================================
   Hauptmenü (Offcanvas): immer dunkel
   ============================================================ */
.hc-menu.offcanvas {
    background: var(--hc-chrome-2);
    color: var(--hc-chrome-ink);
    width: 340px;
    max-width: 85%;
}
.hc-menu .offcanvas-header { border-bottom: 1px solid var(--hc-chrome-line); }
.hc-menu-section-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--hc-chrome-mut);
    padding: 12px 10px 4px;
}
.hc-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--hc-chrome-ink);
    text-decoration: none;
    font-size: .95rem;
    transition: background-color .2s ease;
}
.hc-menu-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; flex-shrink: 0; }
.hc-menu-link:hover { background: var(--hc-chrome-hover); color: #fff; }
.hc-menu-link.active {
    background: var(--hc-chrome-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--hc-accent);
}

/* Icon-Button in der Menü-Kopfzeile (z.B. "Über HomeCenter") */
.hc-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--hc-chrome-mut);
    text-decoration: none;
    font-size: 1rem;
}
.hc-icon-btn:hover { background: var(--hc-chrome-hover); color: #fff; }

.hc-menu-foot { border-top: 1px solid var(--hc-chrome-line); }

/* Theme-Schalter (Hell / System / Dunkel) im Menü-Fußbereich */
.hc-theme-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
}
.hc-theme-seg button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hc-chrome-mut);
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 2px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.hc-theme-seg button:hover { color: var(--hc-chrome-ink); }
.hc-theme-seg button.active {
    background: var(--hc-chrome-3);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ============================================================
   Mobile Bottom-Tab-Bar: immer dunkel
   ============================================================ */

/* Hoehe des Menuebands als Token (0.92.1026). Der Seitenabstand unten
   stand als blosse Zahl (pb-5, 48px) in base.html; das Band ist 60px
   hoch. Dass es trotzdem meist reichte, lag an den Raendern, die die
   Seiten selbst mitbringen - eine Koinzidenz, die bei der ersten Seite
   ohne eigenen Rand bricht.

   Das Mass ist abgeleitet, nicht abgeschrieben, und es scheitert mit
   der Schrift mit: Das Etikett ist .7rem hoch und erbt die Zeilenhoehe
   1.5, das Band wird bei grosser Systemschrift also hoeher (im Browser
   gemessen: 60px bei 16px Grundschrift, 68px bei 24px). Eine feste Zahl
   waere beim ersten Telefon mit grosser Schrift wieder zu klein.

     43px  = 1 (Oberkante) + 6 + 8 (Polster) + 26 (Symbol) + 2 (Abstand)
     1.05rem = .7rem (Schrift) x 1.5 (Zeilenhoehe)

   Ohne env(safe-area-inset-bottom): Das Band addiert es selbst zu seinem
   unteren Polster, und wer das Token benutzt, addiert es genauso - so
   steht es an beiden Stellen aus demselben Ausdruck. Ein Test hat die
   Zerlegung gegen die Regeln unten gelegt. */
:root { --hc-tab-h: calc(43px + 1.05rem); }

.hc-tab-bar {
    background: var(--hc-chrome);
    border-top: 1px solid var(--hc-chrome-line);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.hc-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--hc-chrome-mut);
    text-decoration: none;
    font-size: .7rem;
    min-width: 0;
}
.hc-tab:hover, .hc-tab:focus { color: #fff; }
.hc-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 26px;
    border-radius: 13px;
}
.hc-tab-icon i { font-size: 1.15rem; line-height: 1; }
.hc-tab.active { color: #fff; }
.hc-tab.active .hc-tab-icon { background: var(--hc-chrome-3); }
.hc-tab-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hc-chrome-3);
}

/* Der Inhaltsbereich jeder Seite (0.92.1026). Am breiten Bildschirm gibt
   es das Menueband nicht (.d-md-none) und der Abstand bleibt, wie er war:
   3rem. Darunter reicht er bis ueber das Band - dessen Hoehe, der
   Sicherheitsabstand des Geraets und eine Zeile Luft, damit das Seitenende
   nicht am Band klebt.

   Die Grenze ist die von Bootstrap: .d-md-none verschwindet ab 768px, also
   gilt das Band bis 767.98px. Eine eigene Zahl dafuer waere eine zweite
   Grenze, die dem Band nicht mehr folgt, wenn jemand seine verschiebt.

   Eigene Klasse statt .pb-5: Die Bootstrap-Hilfsklasse traegt !important
   und liesse sich von keiner Regel mehr uebersteuern. */
.hc-inhalt { padding-bottom: 3rem; }
@media (max-width: 767.98px) {
    .hc-inhalt {
        padding-bottom: calc(var(--hc-tab-h) + env(safe-area-inset-bottom, 0px) + 1rem);
    }
}

/* Abzeichen einer Abo-Rolle (0.92.1027). Zusammen mit Bootstraps .badge:
       <span class="badge hc-rolle hc-rolle--ki">AI</span>
   .badge liefert Polster, Rundung und die weisse Schrift; hier steht nur,
   welche Farbe die Rolle hat. Die Farbe selbst kommt aus den Token in :root
   (--hc-rolle-*, --hc-social, --hc-ki) - an einer Stelle, nicht je Seite. */
.hc-rolle { background: var(--rolle, var(--hc-muted)); }
.hc-rolle--news    { --rolle: var(--hc-rolle-news); }
.hc-rolle--kb      { --rolle: var(--hc-rolle-kb); }
.hc-rolle--social  { --rolle: var(--hc-social); }
.hc-rolle--creator { --rolle: var(--hc-rolle-creator); }
.hc-rolle--tutor   { --rolle: var(--hc-rolle-tutor); }
.hc-rolle--dev     { --rolle: var(--hc-rolle-dev); }
.hc-rolle--ki      { --rolle: var(--hc-ki); }

/* Auf dem dunklen Profilkopf liegen die Abzeichen halbtransparent auf dem
   Verlauf - so waren sie vorher alle. Gesetzt wird das einmal am Behaelter,
   nicht an jedem Abzeichen.

   Ausgenommen ist KI: Sie steht voll. Das Abzeichen war dort bisher als
   einziges "andersherum" (getoente Flaeche, farbige Schrift) und ging neben
   den kraeftigen unter; halbtransparent wuerde es dem Social-Abzeichen
   daneben zu aehnlich - beide Violett auf demselben Dunkelblau. Die KI-Farbe
   ist genau dafuer da, sich von allem anderen zu unterscheiden. */
.hc-rollen--auf-dunkel .hc-rolle {
    background: color-mix(in srgb, var(--rolle) 65%, transparent);
}
.hc-rollen--auf-dunkel .hc-rolle--ki { background: var(--hc-ki); }

/* ============================================================
   Gemeinsame Inhalts-Komponenten
   ============================================================ */
.card {
    background: var(--hc-card);
    color: var(--hc-ink);
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    box-shadow: var(--hc-shadow);
}

/* Einheitlicher Seitentitel */
.hc-page-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hc-ink);
    margin-bottom: 1rem;
}

/* Dev-Modus-Hinweis */
.hc-dev-banner {
    background: var(--hc-card);
    color: var(--hc-ink);
    border: 1px solid var(--hc-line);
    border-left: 4px solid #fd7e14;
    border-radius: 10px;
    padding: .5rem 1rem;
}

/* Notification-Dot (pulsierend) */
.notif-dot {
    background: var(--hc-accent);
    border-radius: 50%;
    animation: notif-pulse 2s ease-in-out infinite;
}
@keyframes notif-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* Icon-Hover (Header-Icons) */
.icon-hover {
    display: inline-block;
    transition: transform .25s cubic-bezier(.25, 1, .5, 1), color .25s ease;
}
.icon-hover:hover { transform: scale(1.2); }

/* "Über HomeCenter"-Box */
.hc-about {
    background: var(--hc-card);
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    overflow: hidden;
    color: var(--hc-ink);
    box-shadow: var(--hc-shadow-lg);
}
.hc-about-head {
    background: var(--hc-chrome);
    border-top: 3px solid var(--hc-accent);
    padding: 26px 24px 22px;
    text-align: center;
}
.hc-about-ver { margin-top: 10px; font-size: .8rem; color: var(--hc-chrome-mut); }
/* Hotfix-Stand als Plakette hinter der Versionsnummer. Die vierte Stelle
   wechselt zwischen zwei Releases mehrfach; als Plakette bleibt "Version 0.81"
   die Ueberschrift und der Hotfix-Stand die Nebenangabe. */
.hc-about-hotfix {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--hc-chrome-3);
    color: var(--hc-chrome-mut);
    font-size: .7rem;
    font-weight: 600;
    vertical-align: 1px;
}
.hc-about-rows { padding: 14px 24px 4px; }
.hc-about-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--hc-line);
    font-size: .85rem;
}
.hc-about-row:last-child { border-bottom: none; }
.hc-about-row .k { color: var(--hc-muted); }
.hc-about-foot { padding: 18px 24px 22px; text-align: center; }
.hc-about-copy { color: var(--hc-muted); font-size: .75rem; margin-top: 8px; }

/* Theme-abhängige Sichtbarkeit (z.B. helles/dunkles Logo) */
.hc-dark-only { display: none !important; }
[data-bs-theme="dark"] .hc-dark-only { display: inline-block !important; }
[data-bs-theme="dark"] .hc-light-only { display: none !important; }

/* Kontrast-Button: heute überall btn-dark – im Dunkel-Modus wäre er
   unsichtbar, daher dort automatisch als heller Button rendern. */
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: #f1f2f4;
    --bs-btn-border-color: #f1f2f4;
    --bs-btn-color: #16181c;
    --bs-btn-hover-bg: #d9dbde;
    --bs-btn-hover-border-color: #d9dbde;
    --bs-btn-hover-color: #16181c;
    --bs-btn-active-bg: #c9cbce;
    --bs-btn-active-border-color: #c9cbce;
    --bs-btn-active-color: #16181c;
    --bs-btn-disabled-bg: #3a3d42;
    --bs-btn-disabled-border-color: #3a3d42;
    --bs-btn-disabled-color: #8d939a;
}
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #e9eaec;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-bg: #f1f2f4;
    --bs-btn-hover-border-color: #f1f2f4;
    --bs-btn-hover-color: #16181c;
    --bs-btn-active-bg: #f1f2f4;
    --bs-btn-active-border-color: #f1f2f4;
    --bs-btn-active-color: #16181c;
}

@media (prefers-reduced-motion: reduce) {
    .notif-dot, .icon-hover { animation: none; transition: none; }
}

/* App-Icons mit optionaler Dark-Mode-Variante: beide <img> werden gerendert
   (Klassen nur vergeben, wenn ein Dark-Icon existiert), sichtbar ist je nach
   Theme genau eines – gleiches Muster wie .logo-light/.logo-dark. */
.hc-appicon-dark { display: none; }
[data-bs-theme="dark"] .hc-appicon-dark { display: inline-block; }
[data-bs-theme="dark"] .hc-appicon-light { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   Ausgabe des Rich-Text-Editors
   ----------------------------------------------------------------------
   Steht hier und nicht in hc_rte.css: Die Editor-Oberflaeche braucht nur,
   wer ein Formular oeffnet - dieser fertige Text erscheint dagegen auf
   Detailseiten in News, Knowledge Base, Kursen und Rezepten. Ueber das
   Theme ist er ueberall da, ohne dass jede Seite ein eigenes Stylesheet
   nachladen muss.
   ══════════════════════════════════════════════════════════════════════ */
/* ── Ausgabe ──────────────────────────────────────────────────────────
   Derselbe Satz Regeln fuer den fertigen Text auf den Detailseiten,
   damit gespeicherter Inhalt dort so aussieht wie im Editor. */
.hc-rte-content > *:last-child { margin-bottom: 0; }
.hc-rte-content p { margin: 0 0 .6rem; }
.hc-rte-content h2 { font-size: 1.5rem; font-weight: 700; margin: .6rem 0 .4rem; }
.hc-rte-content h3 { font-size: 1.25rem; font-weight: 700; margin: .6rem 0 .4rem; }
.hc-rte-content blockquote {
  border-left: 3px solid var(--hc-social);
  padding-left: 1rem; color: var(--hc-muted); font-style: italic; margin: .6rem 0;
}
.hc-rte-content ul, .hc-rte-content ol { margin: 0 0 .6rem; padding-left: 1.4rem; }
.hc-rte-content a { color: var(--hc-social-ink); }
.hc-rte-content img { max-width: 100%; height: auto; }

/* ── Brotkrumen ───────────────────────────────────────────────────────
   "Apps / App / aktuelle Seite" ueber jeder App - verallgemeinert aus
   dem Finanzplaner (dort .fp-crumbs, an --fp-* gebunden). Gemeinsame
   Klasse statt App-eigener Kopien, damit eine Korrektur ueberall
   ankommt. Wo eine App bereits einen Pfeil-Button "zurueck" hat, bleibt
   der als 44px-Trefferflaeche stehen - die Brotkrumen kommen als duenne
   Zeile zusaetzlich darueber, sie ersetzen ihn nicht (Konzept AD-Nav). */
/* ── Runder Symbolknopf (0.92.1011) ──────────────────────────────────
   Die Form gibt es im Projekt schon dreimal, jeweils in einer App-Datei:
   .he-icon-btn (Health, 38px), .kl-icon-btn (Kalender), .tr-icon
   (Training, eckig). Sie unterscheiden sich in Groesse und Hover-Farbe,
   nicht im Gedanken. Diese Fassung steht im gemeinsamen Teil und nimmt
   ihre Akzentfarbe aus --hc-aktion-akzent; eine App setzt die Eigenschaft
   und hat ihren Knopf.

   Neu verwendet wird sie ab dem Newsroom. Die drei bestehenden bleiben
   vorerst, wo sie sind - sie auf diese Fassung zu ziehen aendert das
   Aussehen von Health, Kalender und Training und gehoert in eine eigene
   Lieferung, nicht in eine ueber Newsroom-Knoepfe. */
.hc-aktion {
    --hc-aktion-akzent: var(--hc-accent);
    --hc-aktion-akzent-ink: var(--hc-accent-ink);
    --hc-aktion-akzent-soft: var(--hc-accent-soft);
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hc-card); border: 1px solid var(--hc-line);
    color: var(--hc-muted); font-size: .85rem; line-height: 1; padding: 0;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
a.hc-aktion { text-decoration: none; }
.hc-aktion:hover, .hc-aktion:focus-visible {
    border-color: var(--hc-aktion-akzent);
    color: var(--hc-aktion-akzent-ink);
    background: var(--hc-aktion-akzent-soft);
}
.hc-aktion:disabled, .hc-aktion[disabled], .hc-aktion[aria-disabled="true"] {
    opacity: .45; cursor: default;
}
.hc-aktion:disabled:hover, .hc-aktion[disabled]:hover,
.hc-aktion[aria-disabled="true"]:hover {
    border-color: var(--hc-line); color: var(--hc-muted); background: var(--hc-card);
}
/* Loeschen traegt immer das Warnrot, auch wenn die App eine andere
   Akzentfarbe gesetzt hat - die Bedeutung haengt nicht an der App. */
.hc-aktion--gefahr:hover, .hc-aktion--gefahr:focus-visible {
    border-color: var(--hc-accent); color: var(--hc-accent-ink);
    background: var(--hc-accent-soft);
}

.hc-crumbs {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--hc-muted);
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.hc-crumbs a { color: var(--hc-muted); text-decoration: none; }
.hc-crumbs a:hover { color: var(--hc-ink); text-decoration: underline; }
.hc-crumbs__sep { opacity: .5; }

/* ── Seitenwechsler (0.92.1012) ───────────────────────────────────────
   Bis hierher nahm jede Blaetterleiste im Projekt die Bootstrap-Vorgabe
   unveraendert. Die aktive Seite stand damit auf #0d6efd - einem Blau,
   das in der HomeCenter-Palette nirgends vorkommt. Die Ziffern daneben
   waren rot, weil --bs-link-color projektweit auf --hc-accent-ink steht;
   ausgerechnet die aktive Seite fiel also als einzige aus der Reihe.

   Diese Fassung hat keine Kaestchen: Die Ziffern stehen als Text, und
   die aktive traegt einen Strich in der Akzentfarbe. Er haengt an
   aria-current="page" statt an einer eigenen Klasse - so kann eine Seite
   nicht aussehen wie die aktuelle, ohne auch als solche angesagt zu
   werden.

   Die Pfeile sind .hc-aktion (0.92.1011), nicht eigene Knoepfe.

   Verwendet im News-Archiv und im Newsroom. Benutzerliste und
   Kommentaruebersicht tragen weiterhin die Bootstrap-Leiste - sie
   umzustellen aendert Seiten, um die es in dieser Lieferung nicht
   geht. */
.hc-blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .9rem;
}
.hc-blaettern__z {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .45rem;
    border: 0;
    background: transparent;
    color: var(--hc-accent-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    /* Der Strich liegt auch unsichtbar schon da: Sonst wuechse die Zeile
       um zwei Pixel, sobald eine Ziffer aktiv wird. */
    border-bottom: 2px solid transparent;
    transition: border-color .12s ease, color .12s ease;
}
.hc-blaettern__z:hover { border-bottom-color: var(--hc-line); }
.hc-blaettern__z:focus-visible {
    outline: 2px solid var(--hc-accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.hc-blaettern__z[aria-current="page"] {
    color: var(--hc-ink);
    font-weight: 700;
    border-bottom-color: var(--hc-accent);
    cursor: default;
}
/* Die Auslassung ist kein Ziel, nur eine Luecke. */
.hc-blaettern__aus {
    min-width: 24px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-muted);
}
/* "Artikel 1-15 von 56": sagt, was die Ziffern nicht sagen. */
.hc-blaettern__info {
    color: var(--hc-muted);
    font-size: .82rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-right: .5rem;
}
@media (prefers-reduced-motion: reduce) {
    .hc-blaettern__z { transition: none; }
}

/* ── Bereichswechsler im Social-Bereich (0.92.1017) ───────────────────
   Feed, Freundesliste, Chat und Profil verlinken einander - bis hierher
   jede Seite in einer eigenen Bauform. Auf der Profilseite standen sogar
   drei davon gleichzeitig: "Feed" als btn-outline-secondary (grauer
   Hover), "Chat" als btn-outline-purple (Flaeche faellt lila) und
   "Freunde" als nacktes <a class="btn btn-sm"> mit zwei Inline-Farben.
   Der letzte trug gar keine Knopfklasse und hatte damit keine
   Hover-Regel, die haette greifen koennen - das war der gemeldete
   Fehler. Entstehen konnte er nur, weil es die Sonderform gab.

   Eine Bauform fuer alle vier Seiten. Der aktuelle Bereich traegt
   aria-current="page": daraus kommt die Faerbung, und vorgelesen wird
   sie damit auch - statt aus einer zweiten, stummen Klasse.

   Abgegrenzt von den Aktionen: "Profil bearbeiten", "Chat schreiben",
   "Freund hinzufuegen" fuellen sich beim Hover ganz mit Lila. Der
   Bereichswechsler tut das nicht - er faerbt nur weich an. Wer die
   Seite wechselt, tut noch nichts. */
.hc-social-nav {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem;
    border-radius: .5rem; padding: .35rem .75rem;
    font-size: .82rem; font-weight: 600; line-height: 1.45;
    text-decoration: none; white-space: nowrap;
    background: transparent;
    border: 1px solid var(--hc-line);
    color: var(--hc-ink);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.hc-social-nav:hover, .hc-social-nav:focus-visible {
    background: var(--hc-social-soft);
    border-color: var(--hc-social);
    color: var(--hc-social-ink);
}
.hc-social-nav[aria-current="page"] {
    background: var(--hc-social-soft);
    border-color: var(--hc-social);
    color: var(--hc-social-ink);
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .hc-social-nav { transition: none; }
}

/* Der eigene Avatar als Weg ins eigene Profil (0.92.1017). Im Feed fuehrt
   jeder Beitragskopf auf ein Profil - nur das eigene war von dort aus
   nicht erreichbar. Ohne Bild steht der Anfangsbuchstabe da, damit der
   Platz nicht leer bleibt. */
.hc-social-ich {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; text-decoration: none;
    background: var(--hc-social-soft); color: var(--hc-social-ink);
    font-size: .8rem; font-weight: 700; line-height: 1;
    border: 2px solid transparent;
    transition: border-color .12s ease;
}
.hc-social-ich:hover, .hc-social-ich:focus-visible {
    border-color: var(--hc-social); color: var(--hc-social-ink);
}
.hc-social-ich img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    .hc-social-ich { transition: none; }
}

/* ── Eigene Icons im Bootstrap-Muster ─────────────────────────────────
   Bootstrap Icons hat unter seinen 2050 Zeichen weder eine Hantel noch
   eine Ampel (bi-traffic-light gibt es nicht - die Klasse stand bis
   0.90.1033 im Dashboard und zeichnete schlicht nichts). Statt
   ersatzweise unpassende Symbole zu nehmen, stehen hier zwei eigene
   Glyphen - benutzt wie jede andere: <i class="bi bi-hantel"></i>.

   Umgesetzt als Maske, nicht als Hintergrundbild: So nehmen die Icons
   currentColor an und folgen damit Hell/Dunkel und der Textfarbe ihres
   Platzes, genau wie die Zeichen aus der Icon-Font. */
.bi-hantel::before, .bi-ampel::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
}
.bi-hantel::before {
  -webkit-mask: var(--hc-icon-hantel) center / contain no-repeat;
  mask: var(--hc-icon-hantel) center / contain no-repeat;
}
.bi-ampel::before {
  -webkit-mask: var(--hc-icon-ampel) center / contain no-repeat;
  mask: var(--hc-icon-ampel) center / contain no-repeat;
}
:root {
  --hc-icon-hantel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='black'%3E%3Crect x='.8' y='5.9' width='1.9' height='4.2' rx='.75'/%3E%3Crect x='3.3' y='3.9' width='2.3' height='8.2' rx='.9'/%3E%3Crect x='5.5' y='7.1' width='5' height='1.8' rx='.6'/%3E%3Crect x='10.4' y='3.9' width='2.3' height='8.2' rx='.9'/%3E%3Crect x='13.3' y='5.9' width='1.9' height='4.2' rx='.75'/%3E%3C/g%3E%3C/svg%3E");
  /* Gehaeuse gefuellt, die drei Lichter ausgespart (evenodd) - so bleibt
     die Ampel auch bei 16 Pixeln als Ampel erkennbar. */
  --hc-icon-ampel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6 0.5h4a2.4 2.4 0 0 1 2.4 2.4v10.2A2.4 2.4 0 0 1 10 15.5H6a2.4 2.4 0 0 1-2.4-2.4V2.9A2.4 2.4 0 0 1 6 0.5Zm2 2.1a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Zm0 4.05a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Zm0 4.05a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7Z'/%3E%3C/svg%3E");
}