.fa-icon{display:block; cursor:pointer;}

/* Größen - steuern das <i>-Element */
.fa-xs { width: 12px; height: 12px; font-size: 12px; }
.fa-sm { width: 16px; height: 16px; font-size: 16px; }
.fa-md { width: 20px; height: 20px; font-size: 20px; }
.fa-lg { width: 24px; height: 24px; font-size: 24px; }
.fa-xl { width: 32px; height: 32px; font-size: 32px; }
.fa-xxl { width: 48px; height: 48px; font-size: 48px; }

/* SVG passt sich automatisch an die <i>-Größe an */
.fa-icon svg {
    width: 100%;
    height: 100%;
}


/* Textfarben (fill: currentColor) */
.fa-primary { color: #007bff; }
.fa-secondary { color: #6c757d; }
.fa-success { color: #28a745; }
.fa-danger { color: #dc3545; }
.fa-warning { color: #ffc107; }
.fa-info { color: #17a2b8; }
.fa-light { color: #f8f9fa; }
.fa-dark { color: #343a40; }
.fa-white { color: #ffffff; }
.fa-flex-h { color: #ffffff; }
.fa-flex-d { color: #000000; }
/* Skalierung */
.fa-hover-scale:hover { transform: scale(1.1); transition: transform 0.2s; }

/* Rotation */
.fa-hover-rotate:hover { transform: rotate(15deg); transition: transform 0.3s; }

/* Farbwechsel */
.fa-hover-color:hover { color: #007bff !important; transition: color 0.2s; }

/* Schatten */
.fa-hover-shadow:hover { filter: drop-shadow(0 0 4px rgba(0,123,255,0.5)); }

/* Alles kombiniert */
.fa-hover-all:hover {
    transform: scale(1.15) rotate(5deg);
    color: #007bff !important;
    filter: drop-shadow(0 0 6px rgba(0,123,255,0.4));
    transition: all 0.3s ease;
}
/* Pulsieren */
@keyframes fa-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.fa-pulse { animation: fa-pulse 1.5s infinite; }

/* Rotation (durchgehend) */
@keyframes fa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.fa-spin { animation: fa-spin 2s linear infinite; }

/* Wackeln */
@keyframes fa-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
.fa-shake { animation: fa-shake 0.5s ease-in-out; }
.fa-shake:hover { animation: fa-shake 0.5s ease-in-out infinite; }


/* Abstände */
.fa-mr-1 { margin-right: 4px; }
.fa-mr-2 { margin-right: 8px; }
.fa-ml-1 { margin-left: 4px; }
.fa-ml-2 { margin-left: 8px; }

/* Inline mit Text */
.fa-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Block-Element */
.fa-block {
    display: block;
    text-align: center;
}

.myfa {display:inline-block; cursor:pointer; }
.fa-tiny{width:14px;}
.fa-small{width:20px;}
.fa-medium{width:35px;}
.fa-big{width:45px;}
.fa-rot svg{fill:red;}              .fa-bg-rot{stroke:red; fill:#fff;} .bg-rot{background:red;}
.fa-gruen svg{fill:green;}
.fa-blau svg{fill:blue;}
.fa-gelb svg{fill:#c33;}            .bg-gelb{background:black;}  .border-gelb{border: 4px solid gold; color:#888; padding:8px;}
.fa-orange svg{fill:orangered;}
.fa-pink svg{fill:deeppink;}
.fa-olive svg{fill:olive;}
.fa-lime svg{fill:lime;}
.fa-cyan svg{fill:cyan;}
.fa-grau-0 svg{fill:#000;}
.fa-grau-1 svg{fill:#222;}
.fa-grau-2 svg{fill:#444;}
.fa-grau-3 svg{fill:#666;}   .bg-grau{stroke:#666;}
.fa-grau-4 svg{fill:#888;}
.fa-grau-5 svg{fill:#bbb;}
.fa-grau-6 svg{fill:#ccc;}
.fa-weiss svg{fill:#fff;}

/* Farben */
.color-black {color:#000;}
.bg-black {background-color:#000;}

.color-white {color:#fff;}
.bg-white {background-color:#fff;}

.color-lightgrey {color:#eee;}
.bg-lightgrey {background-color:#eee;}

.color-darkgrey {color: #1a2025}
.bg-darkgrey {background-color: #1a2025}

.color-red {color: #ff0000;}
.bg-red {background-color: #ff0000;}

.color-gold {color: #c90;}
.bg-gold {background-color: #c90;}



















/* Basis-Stil für alle FA-Links */
.fa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* Hover-Effekte */
.fa-link:hover {
    color: #007bff;
}

.fa-link:hover .fa-icon {
    transform: scale(1.1);
}

/* Spezifische Stile */
.nav-link .fa-icon {
    width: 20px;
    height: 20px;
}

.btn .fa-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Social Media Icons */
.social-link .fa-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.social-link:hover .fa-icon {
    transform: scale(1.2) rotate(10deg);
}