/* ============================================================
   home5.css — Overrides nur für index5.html
   Lädt NACH home4.css und ändert ausschließlich das Megamenü:
   - Feature-Spalte (Handschrift) entfällt  -> volle Breite
   - prominentere Spaltentitel
   - die Unterpunkt-Gruppen werden als sichtbare Einheit gerahmt
   ============================================================ */

/* Feature-Spalte entfällt -> die vier Spalten nutzen die volle Breite */
.mega-grid {
    grid-template-columns: 1fr;
}

.mega-cols {
    gap: 40px;
}

/* Spaltentitel prominenter (vorher klein, uppercase, unscheinbar) */
.mega-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--green-dark);
}

/* Unterpunkt-Gruppe als zusammengehörige Einheit (gerahmter Block) */
.mega-group {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px 6px;
    margin-bottom: 16px;
}

.mega-group .mega-sublabel {
    margin: 0 0 4px;
    color: var(--green-dark);
    font-size: 0.92rem;
    line-height: 1.35;
}

/* Hover-Fläche der Links bleibt im Kasten (Negativ-Margin neutralisieren) */
.mega-group .mega-link {
    margin-left: 0;
    margin-right: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Der Trenn-Abstand wird im Kasten-Layout von der Gruppe getragen */
.mega-link--free {
    margin-top: 0;
}

/* Megamenü zeigt standardmäßig nur Titel; der Teaser klappt erst beim
   Überfahren des jeweiligen Punkts sanft aus. Hält die Liste kompakt. */
.mega-link span {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

.mega-link:hover span {
    max-height: 6rem;
    opacity: 1;
    margin-top: 2px;
}