/* =======================================================
   LINKS - Dark Design mit RGB-Farben
======================================================= */

/* -----------------------------
   Grundzustand
----------------------------- */
a {
    color: rgb(206, 209, 221); /* hellgrau */
    text-decoration: none;
}

/* -----------------------------
   Hover / Focus / Active
----------------------------- */
a:hover,
a:focus {
    color: rgb(255, 215, 0); /* Gelb */
    outline: none;
}

a:active {
    color: rgb(255, 165, 0); /* Orange */
}

/* -----------------------------
   Spezielle Link-Klassen
----------------------------- */
a.underline {
    text-decoration: underline;
}

a.btn,
a.button {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(70, 130, 180, 0.85); /* dunkles Blau */
    color: rgb(255, 255, 255); /* Weiß */
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a.btn:hover,
a.button:hover {
    background-color: rgba(100, 160, 210, 0.9); /* Aufhellung beim Hover */
}

/* -----------------------------
   Links mit Icon
----------------------------- */
a.with-icon::after {
    content: "→";
    margin-left: 4px;
    font-size: 0.9em;
    transition: transform 0.2s ease, color 0.3s ease;
    color: rgb(206, 209, 221); /* hellgrau */
}

a.with-icon:hover::after {
    transform: translateX(2px);
    color: rgb(255, 215, 0); /* Gelb */
}