/* =======================================================================
   icons.css — Kuratiertes, leichtgewichtiges Icon-Set für Font Awesome 7
   Nutzung:
     <i class="fas fa-home" aria-hidden="true"></i> (ggf. mit  &nbsp;&ensp; dahinter: En-Space und kein Umbruch)
     <i class="fab fa-spotify" aria-hidden="true"></i>
   Voraussetzungen:
     - @font-face in fonts.css:
         'Font Awesome 7' (400 = Regular, 900 = Solid)
         'Font Awesome 7 Brands' (400)
   ======================================================================= */

/* ===== Basis ============================== */
.fa, .fas, .fab {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-feature-settings: normal;
  font-synthesis: none;
  line-height: 1;
  text-rendering: auto;
  width: 1.2em;
  position: relative;
  top: 0em;
  vertical-align: baseline;
}
.fa::before, .fas::before, .fab::before {
  content: var(--fa);
}

/* Familien & Gewichte pro Stil */
.fas, .fa-solid   { font-family: 'Font Awesome 7'; font-weight: 900; }
.fab, .fa-brands  { font-family: 'Font Awesome 7 Brands'; font-weight: 400; }

/* Optionale Utilities */
.fa-fw { width: 1.25em; }
.fa-width-auto { width: auto; }

/* Ausrichtung im Menü */
.nav-links .fas, .nav-links .fab {
  width: 1.6em;
  text-align: center;
}

/* Ausrichtung in Buttons */
.btn .fas, .btn .fab, .icon-btn .fas, .icon-btn .fab {
  text-align: center;
}


/* =======================================================================
   BRANDS
   Kategorie: Social Media & Plattformen
   Hinweis für NEUE/UNSICHERE Codes:
   - Öffne deine lokale all.css (FA 7.0.0), suche .fa-<name> und kopiere
     den Unicode (z. B. --fa:"\f09a";) hierher.
   ======================================================================= */

/* Social Media & Plattformen (bewährte Codes) */
.fab.fa-apple         { --fa: "\f179"; }
.fab.fa-amazon        { --fa: "\f270"; }
.fab.fa-facebook      { --fa: "\f09a"; }
.fab.fa-facebook-f    { --fa: "\f39e"; }
.fab.fa-facebook-square { --fa: "\f082"; }
.fab.fa-instagram     { --fa: "\f16d"; }
.fab.fa-instagram-square { --fa: "\e055"; }
.fab.fa-spotify       { --fa: "\f1bc"; }
.fab.fa-soundcloud    { --fa: "\f1be"; }
.fab.fa-youtube       { --fa: "\f167"; }
.fab.fa-youtube-square{ --fa: "\f431"; }
.fab.fa-whatsapp      { --fa: "\f232"; }
.fab.fa-whatsapp-square { --fa: "\f40c"; }
.fab.fa-itunes        { --fa: "\f3b4"; }
.fab.fa-itunes-note   { --fa: "\f3b5"; }
.fab.fa-telegram      { --fa: "\f2c6"; }
.fab.fa-tiktok        { --fa: "\e07b"; }


/* =======================================================================
   SOLID
   ======================================================================= */

/* Navigation & Layout (Pfeile, Carets, Chevrons, Kreise/Quadrate) */
.fas.fa-angle-down          { --fa: "\f107"; }
.fas.fa-angle-left          { --fa: "\f104"; }
.fas.fa-angle-right         { --fa: "\f105"; }
.fas.fa-angle-up            { --fa: "\f106"; }

.fas.fa-angles-down         { --fa: "\f103"; }
.fas.fa-angles-left         { --fa: "\f100"; }
.fas.fa-angles-right        { --fa: "\f101"; }
.fas.fa-angles-up           { --fa: "\f102"; }

.fas.fa-arrow-alt-circle-down { --fa: "\f358"; }
.fas.fa-arrow-alt-circle-left { --fa: "\f359"; }
.fas.fa-arrow-alt-circle-right{ --fa: "\f35a"; }
.fas.fa-arrow-alt-circle-up   { --fa: "\f35b"; }

.fas.fa-caret-down          { --fa: "\f0d7"; }
.fas.fa-caret-left          { --fa: "\f0d9"; }
.fas.fa-caret-right         { --fa: "\f0da"; }
.fas.fa-caret-up            { --fa: "\f0d8"; }

.fas.fa-caret-square-down   { --fa: "\f150"; }
.fas.fa-caret-square-left   { --fa: "\f191"; }
.fas.fa-caret-square-right  { --fa: "\f152"; }
.fas.fa-caret-square-up     { --fa: "\f151"; }

.fas.fa-chevron-down        { --fa: "\f078"; }
.fas.fa-chevron-left        { --fa: "\f053"; }
.fas.fa-chevron-right       { --fa: "\f054"; }
.fas.fa-chevron-up          { --fa: "\f077"; }

.fas.fa-circle              { --fa: "\f111"; }
.fas.fa-circle-minus        { --fa: "\f056"; }
.fas.fa-circle-plus         { --fa: "\f055"; }
.fas.fa-circle-question     { --fa: "\f059"; }
.fas.fa-circle-xmark        { --fa: "\f057"; }

.fas.fa-circle-chevron-down { --fa: "\f13a"; }
.fas.fa-circle-chevron-left { --fa: "\f137"; }
.fas.fa-circle-chevron-right{ --fa: "\f138"; }
.fas.fa-circle-chevron-up   { --fa: "\f139"; }

.fas.fa-square              { --fa: "\f0c8"; }
.fas.fa-square-check        { --fa: "\f14a"; }
.fas.fa-square-minus        { --fa: "\f146"; }
.fas.fa-square-plus         { --fa: "\f0fe"; }

/* Medien */
.fas.fa-camera              { --fa: "\f030"; }
.fas.fa-camera-retro        { --fa: "\f083"; }
.fas.fa-film                { --fa: "\f008"; }
.fas.fa-image               { --fa: "\f03e"; }
.fas.fa-images              { --fa: "\f302"; }
.fas.fa-music               { --fa: "\f001"; }
.fas.fa-guitar              { --fa: "\f7a6"; }
.fas.fa-drum                { --fa: "\f569"; }
.fas.fa-photo-film          { --fa: "\f87c"; }
.fas.fa-chart-bar           { --fa: "\f080"; }
.fas.fa-coins               { --fa: "\f51e"; }

/* Kommunikation */
.fas.fa-address-card        { --fa: "\f2bb"; }
.fas.fa-envelope            { --fa: "\f0e0";}
.fas.fa-envelope-open       { --fa: "\f2b6"; }
.fas.fa-envelope-circle-check { --fa: "\e4e8"; }
.fas.fa-message             { --fa: "\f27a"; }
.fas.fa-paper-plane         { --fa: "\f1d8"; }
.fas.fa-microphone          { --fa: "\f130"; }
.fas.fa-microphone-alt      { --fa: "\f3c9"; }
.fas.fa-phone               { --fa: "\f095"; }
.fas.fa-phone-alt           { --fa: "\f879"; }
.fas.fa-phone-square        { --fa: "\f098"; }
.fas.fa-phone-square-alt    { --fa: "\f87b"; }

/* Dateien & Ordner */
.fas.fa-file                { --fa: "\f15b"; }
.fas.fa-file-archive       { --fa: "\f1c6"; }
.fas.fa-file-audio         { --fa: "\f1c7"; }
.fas.fa-file-image         { --fa: "\f1c5"; }
.fas.fa-file-pdf           { --fa: "\f1c1"; }
.fas.fa-file-video         { --fa: "\f1c8"; }
.fas.fa-file-download      { --fa: "\f56d"; }
.fas.fa-file-upload        { --fa: "\f574"; }
.fas.fa-file-contract      { --fa: "\f56c"; }
.fas.fa-file-circle-xmark  { --fa: "\e5a1"; }
.fas.fa-folder             { --fa: "\f07b"; }

/* Player */
.fas.fa-circle-play         { --fa: "\f144"; }
.fas.fa-circle-pause        { --fa: "\f28b"; }
.fas.fa-circle-stop         { --fa: "\f28d"; }
.fas.fa-chevron-left        { --fa: "\f053"; }
.fas.fa-chevron-right       { --fa: "\f054"; }
.fas.fa-angles-left         { --fa: "\f100"; }
.fas.fa-angles-right        { --fa: "\f101"; }

/* System */
.fas.fa-home                { --fa: "\f015"; top: 0.05em;}
.fas.fa-home-lg             { --fa: "\e3af"; }
.fas.fa-lock                { --fa: "\f023"; }
.fas.fa-lock-open           { --fa: "\f3c1"; }
.fas.fa-gear                { --fa: "\f013"; }
.fas.fa-sliders             { --fa: "\f1de"; }
.fas.fa-list                { --fa: "\f03a"; }
.fas.fa-list-check          { --fa: "\f0ae"; }
.fas.fa-info                { --fa: "\f129"; }
.fas.fa-info-circle         { --fa: "\f05a"; }
.fas.fa-check               { --fa: "\f00c"; }
.fas.fa-check-circle        { --fa: "\f058"; }
.fas.fa-cloud               { --fa: "\f0c2"; }
.fas.fa-cloud-download      { --fa: "\f0ed"; }
.fas.fa-cloud-upload        { --fa: "\f0ee"; }
.fas.fa-download            { --fa: "\f019"; }
.fas.fa-edit                { --fa: "\f044"; }
.fas.fa-alarm-clock         { --fa: "\f34e"; }



/* ===== Runde Icon-Buttons ===== */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  color:var(--white);
  background: var(--gray-text);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease;
  isolation: isolate;
  cursor: pointer;
}

.icon-btn:hover,
.icon-btn:focus-visible{
  color:var(--gray-text);
  background:var(--gray-light);
  text-decoration: none;
}

/* Aktiver Druck-Effekt */
.icon-btn:active {
  transform: translateY(1px);
}

.icon-btn i{
  font-size:1.1rem;
  line-height:1;
}

.icon-btn .fa, .icon-btn .fas, .icon-btn .fab {
  top: 0px;
  left: 0.015em;
}

/* YouTube: Hintergrund beim Hover rot */
.icon-btn.youtube {
  transition: background 0.3s ease, color 0.3s ease;
}
.icon-btn.youtube:hover,
.icon-btn.youtube:focus-visible {
  background: #FF0000; /* YouTube-Rot */
  color: var(--white);
}

/* Instagram: Verlauf als Overlay ein-/ausblenden */
.icon-btn.insta::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
              radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
              radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
              radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
              radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
              radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
              radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
              linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1; /* unter dem Icon, über dem Basis-Hintergrund */
}
/* Hover/Fokus: Verlauf weich einblenden, Text/Icon weiß lassen */
.icon-btn.insta:hover::before,
.icon-btn.insta:focus-visible::before{ opacity: 1; }
/* überschreibt generische Hover-Farbe nur für Insta */
.icon-btn.insta:hover,
.icon-btn.insta:focus-visible{ background: var(--gray-medium); color: var(--white); }