/* Basis-Kachel (Quadratisch durch aspect-ratio) */
.custom-tile {
    position: relative;
    width: 100%;
    height: 135px;
    aspect-ratio: 1 / 1;
    /* Macht das Tile immer perfekt quadratisch */
    overflow: hidden;
    color: white;
    cursor: pointer;
}

/* Der innere Container, der die Vorder- und Rückseite hält */
.tile-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

/* Gemeinsame Eigenschaften für Vorder- und Rückseite */
.slide-front,
.slide-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Branding Bar unten links am Rand */
.branding-bar {
    position: absolute;
    bottom: 8px;
    left: 10px;
    color: var(--text-color);
    font-size: 0.85rem;
}

.globe-container .branding-bar {
    bottom: 0px;
    left: 15px;
    z-index: 999;
}

/* Icons mittig platzieren */
.custom-tile .icon {
    max-width: 64px;
}

/* Hintergrundfarben als Fallback, falls Bootstrap-Klassen nicht greifen */
.bg-mauve {
    background-color: #643EBF;
}

.bg-orange {
    background-color: #FA6800;
}

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

/* ========================================================
   DIE HOVER-EFFEKTE (Das "Sliden" der Kachel)
   ======================================================== */

/* --- NACH RECHTS SLIDEN (effect-slide-right) --- */
.effect-slide-right .slide-back {
    left: -100%;
    /* Versteckt die Rückseite links außerhalb */
}

.effect-slide-right:hover .tile-card {
    transform: translateX(100%);
    /* Schiebt alles nach rechts */
}

/* --- NACH UNTEN SLIDEN (effect-slide-down) --- */
.effect-slide-down .slide-back {
    top: -100%;
    /* Versteckt die Rückseite oben außerhalb */
}

.effect-slide-down:hover .tile-card {
    transform: translateY(100%);
    /* Schiebt alles nach unten */
}

/* --- NACH LINKS SLIDEN (Falls du es später brauchst) --- */
.effect-slide-left .slide-back {
    left: 100%;
}

.effect-slide-left:hover .tile-card {
    transform: translateX(-100%);
}

/* --- NACH OBEN SLIDEN (Falls du es später brauchst) --- */
.effect-slide-up .slide-back {
    top: 100%;
}

.effect-slide-up:hover .tile-card {
    transform: translateY(-100%);
}

@media (min-width: 768px) {


    /* Verhindert, dass das letzte Element einen unnötigen Abstand nach unten hat */
    .col-md-12:last-child .custom-tile {
        margin-bottom: 0;
    }
}