/* =========================================================
   Icons (Font Awesome + eigene SVGs)
   Ziel: gleiche Optik/Größe in Kacheln und Buttons
   ========================================================= */

/* Basisgröße (passt gut zu vielen Templates) */
:root {
  --icon-size: 36px;
  --icon-size-lg: 50px;
  --icon-size-xl: 64px;
}

/* --- Eigene Icons als <img> --- */
.awx-icon {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  display: inline-block;
  vertical-align: middle;
}

/* Größer in Feature/Service-Kacheln (optional) */
.service-icon .awx-icon,
.feature-icon .awx-icon,
.icon-box .awx-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* --- Font Awesome Icons angleichen --- */
.service-icon i,
.feature-icon i,
.icon-box i {
  font-size: var(--icon-size-lg);
  line-height: 1;
  vertical-align: middle;
}

/* Falls du FA auch außerhalb groß willst */
.fa-icon-lg {
  font-size: var(--icon-size-lg);
  line-height: 1;
}

/* --- Inline-SVG (falls du später auf currentColor umstellst) --- */
.awx-svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.service-icon .awx-svg,
.feature-icon .awx-svg,
.icon-box .awx-svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}