/*
Theme Name: RetterCLOUD
Theme URI: https://rettercloud.de
Author: RetterCLOUD Team
Description: Ein modernes Theme von Ehrenamtlern für Ehrenamtler.
Version: 1.0
Text Domain: rettercloud
*/

:root { 
    --malteser-red: #DC3545; /*[cite: 1]*/
    --accent-purple: #8c00ff; /*[cite: 1]*/
    --bg-gray: #f4f7f9; /*[cite: 1]*/
    --dark-gray: #212529; /*[cite: 1]*/
}

body { font-family: system-ui, sans-serif; background-color: var(--bg-gray); color: #333; scroll-behavior: smooth; }

.hero-section { background: linear-gradient(135deg, var(--dark-gray), #444); color: white; padding: 6rem 1rem; border-radius: 0 0 30px 30px; text-align: center; }
.hub-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border-radius: 20px; padding: 2rem 1rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.04); border: 2px solid transparent; transition: all 0.2s; height: 100%; text-align: center; }
.hub-tile:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--malteser-red); }
.tile-icon { font-size: 3rem; margin-bottom: 1rem; }
.tile-icon-zmv { color: #0d6efd; } .tile-icon-einsatz { color: #dc3545; } .tile-icon-profil { color: #198754; } .tile-icon-dokumente { color: #d6c100; } .tile-icon-billing { color: var(--accent-purple); } .tile-icon-statistik { color: #ef7f00; }
.tile-title { font-weight: 800; font-size: 1.1rem; } .tile-subtitle { font-size: 0.85rem; color: #6c757d; margin-top: 5px; }

.section-padding { padding: 5rem 0; } 
.bg-white-section { background-color: #fff; border-radius: 30px; margin: 2rem 0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); padding: 4rem 2rem;}
.section-title { font-weight: 800; color: var(--dark-gray); margin-bottom: 3rem; position: relative; display: inline-block; }
.section-title::after { content: ""; width: 50px; height: 4px; background-color: var(--malteser-red); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }

.btn-primary-custom { background-color: var(--malteser-red); border: none; padding: 10px 25px; font-weight: bold; color: white;}
.btn-primary-custom:hover { background-color: #b5050f; color: white;}

.custom-footer { background: var(--dark-gray); color: #ccc; padding: 3rem 0; border-top: 5px solid var(--malteser-red); }
.custom-footer a { color: #fff; text-decoration: none; cursor: pointer; } 
.custom-footer a:hover { color: var(--malteser-red); }

.app-mockup { background: #333; border-radius: 20px; border: 8px solid #222; aspect-ratio: 9/19; width: 220px; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.app-mockup::before { content: ""; position: absolute; top: 0; width: 40%; height: 15px; background: #222; border-radius: 0 0 10px 10px; }
/* --- Navbar Styling & Active States --- */

/* Grundstyling für alle Links: Groß, Fett und mit abgerundeten Ecken */
.navbar-nav .nav-link {
    font-weight: 700 !important; /* Fette Schrift */
    font-size: 1.15rem !important; /* Deutlich größere Schrift */
    padding: 8px 18px !important;
    border-radius: 8px;
    margin: 0 4px;
    transition: all 0.2s ease-in-out;
    color: rgba(255, 255, 255, 0.75);
}

/* Aktive Links und Hover (Heller Hintergrund, dunkle Schrift) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .current-menu-item > a {
    background-color: #f4f7f9 !important; /*[cite: 1] Helle Hinterlegung */
    color: #212529 !important; /*[cite: 1] Dunkle Schrift */
}

/* Spezieller Kontakt-Button (Wir steuern das <a> IN dem <li> an) */
.navbar-nav .nav-kontakt > a {
    background-color: #DC3545 !important; /* Bootstrap text-danger Farbe */
    color: #fff !important;
    margin-left: 15px; /* Etwas Abstand zum Rest */
}

/* Hover für den Kontakt-Button */
.navbar-nav .nav-kontakt > a:hover {
    background-color: #b02a37 !important;
    color: #fff !important;
}

/* --- Footer Menüs & Rechtliches --- */
.footer-legal-menu,
.custom-footer .widget_nav_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Links untereinander anordnen */
    gap: 10px; /* Abstand zwischen den Links */
}

/* Auf großen Bildschirmen in Spalte 3 rechtsbündig machen */
@media (min-width: 768px) {
    .text-md-end .footer-legal-menu,
    .text-md-end .widget_nav_menu ul {
        align-items: flex-end;
    }
}

/* Link-Design */
.footer-legal-menu li a,
.custom-footer .widget_nav_menu ul li a {
    color: rgba(255, 255, 255, 0.6); /* Dezentes Grau */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease-in-out;
}

/* Hover-Effekt in Rot */
.footer-legal-menu li a:hover,
.custom-footer .widget_nav_menu ul li a:hover {
    color: var(--malteser-red); /**/
}