/* Container */
.mlw-horizontal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 50px auto;
    font-family: Arial, sans-serif;
    
    /* Fallback Werte */
    --mlw-accent: #0056b3; 
    --mlw-hover: #0056b3;
    --mlw-tooltip: #333333; /* Fallback für Tooltip */
    --mlw-circle-size: 110px;
    --mlw-icon-size: 55px;
}

/* Karte */
.mlw-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    text-align: center;
    position: relative;
}

/* Wrapper für Interaktion */
.mlw-icon-wrapper {
    position: relative;
    width: var(--mlw-circle-size); 
    height: var(--mlw-circle-size); 
    margin-bottom: 20px;
    cursor: pointer;
    z-index: 10;
}

/* Der ÄUSSERE Kreis (Rahmen) */
.mlw-icon-inner {
    width: 100%;
    height: 100%;
    border: 2px solid var(--mlw-accent); 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box; 
    overflow: hidden; 
}

/* HOVER: Kreis mit der eingestellten HOVER-FARBE füllen */
.mlw-icon-wrapper:hover .mlw-icon-inner {
    background-color: var(--mlw-hover);
    border-color: var(--mlw-hover); 
}

/* Das BILD (Icon) */
.mlw-main-icon {
    width: var(--mlw-icon-size);
    height: var(--mlw-icon-size);
    object-fit: cover; 
    transition: filter 0.3s ease;
    display: block;
    border-radius: 50%; 
}

/* HOVER: Icon weiß machen */
.mlw-icon-wrapper:hover .mlw-main-icon {
    filter: brightness(0) invert(1);
}

/* Titel */
.mlw-card-title {
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

/* --- TOOLTIP LOGIK --- */
.mlw-tooltip-container {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    overflow: visible; 
    visibility: hidden;
    z-index: 9999;
}

.mlw-tooltip {
    display: block;
    width: 240px;
    /* Hier nutzen wir jetzt die variable Farbe */
    background-color: var(--mlw-tooltip);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
}

/* Der kleine Pfeil unten am Tooltip */
.mlw-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    /* Die erste Farbe hier färbt den Pfeil (zeigt nach unten) */
    border-color: var(--mlw-tooltip) transparent transparent transparent;
}

.mlw-icon-wrapper:hover .mlw-tooltip-container {
    visibility: visible;
}

.mlw-icon-wrapper:hover .mlw-tooltip {
    opacity: 1;
    bottom: 25px; 
}