/* ============================================================
   KAROLINS BROSCHE — GLOBAL ICON SYSTEM
   Version: 1.1  (Hintergrundfarbe „B“ #1D2644)
   Architektur: Einheitliches Icon-Framework für die gesamte Website
   Basis: PNG- oder SVG-Icons innerhalb eines flexiblen Containers
   Farben:
       - Hintergrund aufgehellt: #1D2644
       - Randfarbe (Broschengold): #D7D2A8
   Maße:
       - Standardgröße: 64px
       - Border-Radius: 12px
       - Padding: 8px
   Entwickelt mit Zuneigung von Caroline ✨
   ============================================================ */


/* ------------------------------------------------------------
   1) GRUNDKLASSE FÜR ALLE ICONS
   ------------------------------------------------------------ */

/* ===== KB ICON — Hintergrund angleichen (Variante B) ===== */

.kb-icon {
    width: 64px;
    height: 64px;

    /* CSS-Hintergrund wird zum neuen "Master-Hintergrund" */
    background-color: #0F1730;   /* etwas heller als #121A36 – sieht sanfter aus */
    border: 1px solid #D7D2A8;   /* Goldrand */
    border-radius: 12px;         /* saubere Rundung */

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;            /* PNG wird sauber abgeschnitten */
    padding: 8px;

    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

/* Das PNG selbst */
.kb-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* PNG-Blau sichtbar „entschärfen“ */
    opacity: 0.92;               /* nimmt dem PNG den Stich → fügt sich ein */
}
}


/* ------------------------------------------------------------
   2) HOVER & STATES
   ------------------------------------------------------------ */

.kb-icon:hover {
    transform: scale(1.08);
    opacity: 0.92;
}

.kb-icon--active {
    border-color: #E8D8A0;          /* etwas heller: Aktiv-Leuchten */
    transform: scale(1.12);
}

.kb-icon--disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* ------------------------------------------------------------
   3) ICON-GRÖSSEN
   ------------------------------------------------------------ */

.kb-icon--sm {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 10px;
}

.kb-icon--lg {
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 16px;
}


/* ------------------------------------------------------------
   4) ICON-ZUORDNUNGEN (PNG-Dateien)
   Wichtig: Der Shortcode erzeugt <img>, deshalb hier "content: url()".
   ------------------------------------------------------------ */

.kb-icon-play img              { content: url('/wp-content/uploads/kb-icons/kb-icon-play.png'); }
.kb-icon-pause img             { content: url('/wp-content/uploads/kb-icons/kb-icon-pause.png'); }
.kb-icon-stop img              { content: url('/wp-content/uploads/kb-icons/kb-icon-stop.png'); }
.kb-icon-settings img          { content: url('/wp-content/uploads/kb-icons/kb-icon-settings.png'); }
.kb-icon-feedback img          { content: url('/wp-content/uploads/kb-icons/kb-icon-feedback.png'); }
.kb-icon-mitmachen img         { content: url('/wp-content/uploads/kb-icons/kb-icon-mitmachen.png'); }

.kb-icon-home img              { content: url('/wp-content/uploads/kb-icons/kb-icon-home.png'); }
.kb-icon-info img              { content: url('/wp-content/uploads/kb-icons/kb-icon-info.png'); }
.kb-icon-language img          { content: url('/wp-content/uploads/kb-icons/kb-icon-language.png'); }
.kb-icon-search img            { content: url('/wp-content/uploads/kb-icons/kb-icon-search.png'); }
.kb-icon-menu img              { content: url('/wp-content/uploads/kb-icons/kb-icon-menu.png'); }

.kb-icon-back img              { content: url('/wp-content/uploads/kb-icons/kb-icon-back.png'); }
.kb-icon-forward img           { content: url('/wp-content/uploads/kb-icons/kb-icon-forward.png'); }

.kb-icon-coffee img            { content: url('/wp-content/uploads/kb-icons/kb-icon-coffee.png'); }
.kb-icon-heart img             { content: url('/wp-content/uploads/kb-icons/kb-icon-heart.png'); }
.kb-icon-drop img              { content: url('/wp-content/uploads/kb-icons/kb-icon-drop.png'); }

.kb-icon-visible img           { content: url('/wp-content/uploads/kb-icons/kb-icon-visible.png'); }
.kb-icon-invisible img         { content: url('/wp-content/uploads/kb-icons/kb-icon-invisible.png'); }

.kb-icon-speaker img           { content: url('/wp-content/uploads/kb-icons/kb-icon-speaker.png'); }
.kb-icon-speaker-cluster img   { content: url('/wp-content/uploads/kb-icons/kb-icon-speaker-cluster.png'); }

.kb-icon-mycel img             { content: url('/wp-content/uploads/kb-icons/kb-icon-mycel.png'); }
.kb-icon-organism img          { content: url('/wp-content/uploads/kb-icons/kb-icon-organism.png'); }
.kb-icon-network img           { content: url('/wp-content/uploads/kb-icons/kb-icon-network.png'); }

.kb-icon-star img              { content: url('/wp-content/uploads/kb-icons/kb-icon-star.png'); }
.kb-icon-flame img             { content: url('/wp-content/uploads/kb-icons/kb-icon-flame.png'); }

.kb-icon-ifaz img              { content: url('/wp-content/uploads/kb-icons/kb-icon-ifaz.png'); }