/* =====================================================================
   Container-Tiles — Status-Kacheln (index.php, show.php, form.php)
   Drei Zustände: inaktiv (Standard), erreicht (grün), geplant (hellgrau)
   ===================================================================== */
.container-tile {
    border-radius: var(--radius);
    padding: 0.85rem;
    text-align: center;
    border: 2px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-muted);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.container-tile.reached {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}
.container-tile.planned {
    background: var(--tile-planned-bg);
    border: 2px dashed var(--tile-planned-border);
    color: var(--tile-planned-text);
}

/* Status-Auswahl-Tiles im Edit-Formular (klickbare Buttons) */
.status-tile {
    border-radius: var(--radius);
    padding: 0.85rem 0.5rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    border: 2px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-muted);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.16s ease, box-shadow 0.16s ease;
}
.status-tile.reached {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}
.status-tile.reached.current {
    font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
    .container-tile:hover,
    .status-tile:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .container-tile:not(.reached):not(.planned):hover {
        border-color: var(--color-primary);
    }

    .status-tile:not(.reached):hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--color-primary-rgb, 59,130,246), 0.28);
    }
}

/* =====================================================
   _container-tile.css
   Zweck:          Core-CSS-Modul (Components)
   Verwendet von:  Core-Basis auf allen Seiten (main.php/auth.php)
   Abhaengigkeiten: Reihenfolge base -> layout -> components
   Verantwortlich: Core-Styles
   ===================================================== */