/* =========================================================================
   icons.css — Icon-System (SVG statt Emoji)
   -------------------------------------------------------------------------
   Wird von icons.js mit dem Sprite beliefert. .ic erbt Schriftgröße und
   Textfarbe, damit die Icons überall automatisch zur Umgebung passen.
   Farbvarianten: .ic-gold .ic-rose .ic-mint .ic-blue .ic-dim
   ========================================================================= */
.ic {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.155em;
  margin-right: 0.26em;
}
.ic:last-child,
.ic:only-child { margin-right: 0; }

.ic-gold { color: var(--gold, #ecc483); }
.ic-rose { color: var(--die, #e58aa2); }
.ic-mint { color: var(--das, #6cc3a6); }
.ic-blue { color: var(--der, #6ba8e0); }
.ic-dim  { color: var(--ink-faint, #c1b5b8); }

/* Icon-Boxen: Icon füllt seinen Container (Klingel, Geschenk, Warten) */
.ic-box .ic { width: 100%; height: 100%; margin: 0; }

/* In runden Icon-Knöpfen und Listen-Icons ohne Abstand */
.icon-btn .ic,
.settings-ico .ic,
.help-icon .ic { margin-right: 0; }

.settings-ico,
.help-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Kleine Icon-Box für Überschriften (z. B. „Admin-Bereich“) */
.logo-ic { display: inline-flex; width: 1.05em; height: 1.05em; margin-right: 0.35em; vertical-align: -0.16em; }
.logo-ic .ic { width: 100%; height: 100%; margin: 0; }