/* === DOCK CONTAINER === */
.mac-dock-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.mac-dock {
    display: flex;
    align-items: flex-end; 
    
    /* === NEU: DIE FIXIERUNG === */
    height: 72px; /* Feste Höhe! Das Dock wächst nicht mehr mit. */
    padding: 0 15px 0px 15px; /* Oben 0px, Unten 10px Abstand für die Punkte */
    box-sizing: border-box; /* Zwingt die Box, exakt 72px hoch zu bleiben */
    
    border-radius: 24px;
}

.glass-dock {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* === DOCK ICONS & HOVER (Lückenloser Wave-Effekt) === */

.dock-item {
    /* Der unsichtbare Container ist breiter als das Icon, sodass sie nahtlos aneinanderstoßen */
    width: 62px;
    height: 72px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Drückt das Icon und den Punkt nach unten */
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); /* Schneller, direkter Ease-Out */
}

.mac-icon-placeholder {
    /* Das eigentliche sichtbare Icon ist kleiner als der Container */
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    margin-bottom: 11px; /* Platzhalter für den kleinen Punkt unten */
}

/* === DIE CSS MAGIE: DIE GLOCKENKURVE (WAVE) === */

/* 1. Das aktuell gehoverte Icon (Maximum) */
.dock-item:hover {
    width: 90px;
    height: 120px;
}
.dock-item:hover .mac-icon-placeholder {
    width: 80px;
    height: 80px;
    font-size: 42px;
    margin-bottom: 8px; /* Etwas mehr Abstand beim großen Icon */
}

/* 2. Die direkten Nachbarn (Links und Rechts) */
.dock-item:has(+ .dock-item:hover),
.dock-item:hover + .dock-item {
    width: 75px;
    height: 75px;
}
.dock-item:has(+ .dock-item:hover) .mac-icon-placeholder,
.dock-item:hover + .dock-item .mac-icon-placeholder {
    width: 65px;
    height: 65px;
    font-size: 34px;
    margin-bottom: 7px;
}

/* 3. Die äußeren Nachbarn (Für das sanfte Auslaufen der Welle) */
.dock-item:has(+ .dock-item + .dock-item:hover),
.dock-item:hover + .dock-item + .dock-item {
    width: 68px;
    height: 68px;
}
.dock-item:has(+ .dock-item + .dock-item:hover) .mac-icon-placeholder,
.dock-item:hover + .dock-item + .dock-item .mac-icon-placeholder {
    width: 56px;
    height: 56px;
    font-size: 30px;
    margin-bottom: 6px;
}

/* === DOCK INDIKATOREN (Der kleine Punkt) === */
.dock-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    bottom: 0px; /* Sitzt absolut unten am unsichtbaren .dock-item Container */
    transition: background 0.3s;
}

.dock-dot.active {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* === DOCK ICONS === */
.mac-flaticon {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Verhindert, dass PNGs verzerrt werden */
    /* Wirft einen weichen Schatten exakt um die Ränder des PNGs */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    margin-bottom: 11px; /* Die exakte Zentrierung: (72px - 50px) / 2 */
}

/* === DIE CSS MAGIE: DER STABILE FOKUS === */

/* Das aktuell gehoverte Icon (Maximum) */
.dock-item:hover {
    width: 90px;
    height: 100px;
    margin: 0 10px; 
}

.dock-item:hover .mac-flaticon {
    width: 80px;
    height: 80px;
    margin-bottom: 15px; /* Hebt das FlatIcon an, damit der Punkt Platz hat */
}