/* ══ Redesign "Design perfekt" – Stellio-Icons und Stellio-Emojis ══════════════
   Wird nur in app.html geladen (nach depth.css). Farben kommen aus den
   Bereichs-Klassen .rub-* in base.css, hier stehen keine festen Farbwerte. */
/* Solar Line Duotone (480 Design, CC BY 4.0): Linie in der Bereichs-Textfarbe, Akzent in der
   Bereichsfarbe, geschlossene Akzent-Formen mit heller Flaeche (Leandro 12.10.2026: Farbakzent, kein Blau) */
/* Leandro 12.10.2026 (Freigabe): Icons einfarbig in neutralem Ton, ohne farbige Flaechen.
   Aktiv/Hover nur dunkler. Akzent-Linien und Flaechen folgen currentColor bzw. sind aus. */
.ico { color: var(--text-muted); --ico-acc: currentColor; --ico-wash-o: 0; flex-shrink: 0; display: block; }
.nav-item:hover .ico, .bottom-nav-item:hover .ico, .bib-tab:hover .ico,
.nav-item.active .ico, .bottom-nav-item.active .ico, .bib-tab.active .ico, .ico.is-active,
.home-row:hover .ico, .tile:hover .ico { color: var(--text); }
.sticker { display: inline-block; vertical-align: -4px; flex-shrink: 0; }
/* Sidebar: Farbe je Bereich, aktiv = Toenung + Balken in Bereichsfarbe */
.sidebar .nav-item.active { background: var(--rub-tint, var(--gold-light)); color: var(--rub-text, var(--gold-text)); border-left-color: var(--rub, var(--gold)); }
@media (min-width: 761px) { .sidebar.collapsed .nav-item.active { box-shadow: inset 3px 0 0 var(--rub, var(--gold)); } }
.nav-item .nav-icon:has(.ico), .nav-item .nav-icon .ico { width: 20px; height: 20px; }
.nav-subitem .nav-icon:has(.ico), .nav-subitem .nav-icon .ico { width: 18px; height: 18px; }
/* Unterpunkte mit Icon: etwas weniger Einzug, damit "Bewerbungsunterlagen" in die Leiste passt */
.nav-group:has(.ico) { margin-left: 16px; padding-left: 10px; }
.nav-subitem:has(.ico) { gap: 8px; }
/* Desktop: Leandros Zeichnungen deutlich groesser (Nachtauftrag 11.10.2026) – Zeilenhoehe bleibt fast gleich */
@media (min-width: 761px) {
  .sidebar .nav-item:not(.nav-subitem) .nav-icon:has(.ico), .sidebar .nav-item:not(.nav-subitem) .nav-icon .ico { width: 28px; height: 28px; }
  .sidebar .nav-item:not(.nav-subitem) .nav-icon:has(.ico) { margin: -4px 0; }
  .sidebar.collapsed .nav-item:not(.nav-subitem) .nav-icon:has(.ico), .sidebar.collapsed .nav-item:not(.nav-subitem) .nav-icon .ico { width: 32px; height: 32px; }
  .sidebar.collapsed .nav-item:not(.nav-subitem) .nav-icon:has(.ico) { margin: 0; }
}
/* Untere Leiste (Handy) */
.bottom-nav-item .ico { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--rub-text, var(--gold-text)); }
/* Icon-Kachel (Home, Bewerbung, Unterlagen): 40 px Toenungsflaeche, Radius 12 */
.ico-tile { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tone-inset); }
.ico-tile .ico { width: 26px; height: 26px; }
/* Einstellungen-Abschnitte und Bibliothek-Reiter */
.settings-icon-title .ico { color: inherit; width: 22px; height: 22px; }
.bib-tab { display: inline-flex; align-items: center; gap: 6px; }
/* Stellio-Emojis an erledigten Aufgaben und Stationen */
.todo-sticker { display: inline-flex; flex-shrink: 0; }
/* .myway-zz-node ist schon absolut positioniert (components.css) - kein "relative" hier, sonst rutschen die Stationen aus dem Pfad (12.10.2026) */
.myway-zz-sticker { position: absolute; top: -6px; right: calc(50% - 30px); }
@media (min-width: 1024px) { .myway-zz-sticker { right: calc(50% - 38px); } }