/* 1. GLOBALE EINSTELLUNGEN & VARIABLEN */
html {
    scroll-behavior: smooth;
}

:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Dynamische Farben aus dem Admin-Panel (werden im Layout überschrieben) */
    --afro-primary: #004a99;
    --afro-secondary: #002a55;
    --afro-tertiary: #001a20;
    --afro-text: #ffffff;
    --afro-gradient: linear-gradient(135deg, var(--afro-primary), var(--afro-secondary));

    /* Systemfarben */
    --afro-bg: #faf7f3;
    --afro-surface: rgba(255,255,255,.85);
    --afro-border: rgba(17, 24, 39, .08);

    /* Glass / Transparenz (wird im Layout überschrieben) */
    --afro-glass: rgba(255,255,255,.10);
    --afro-glass-border: rgba(255,255,255,.20);
    --afro-glass-hover: rgba(255,255,255,.15);

    /* Marken-Akzente (Pan-African) */
    --afro-green: #145c2c;
    --afro-red: #e53935;
    --afro-gold: #f4c842;

    --text: #111827;
    --muted: rgba(17,24,39,.62);

    --radius-xl: 22px;
    --radius-lg: 16px;
}

html, body {
    font-family: var(--font-sans), sans-serif;
    color: var(--text);
    line-height: 1.55;
    background-color: var(--afro-bg);
}

/* Container rechts ausrichten */
.afro-auth-container {
    display: flex;
    align-items: center;
}

/* Die kleine Benutzer-Pille */
.auth-pill-small {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem; /* Kleinere Schrift */
}

.user-name-small {
    color: var(--afro-text);
    opacity: 0.9;
    font-weight: 500;
}

/* Vertikale Trennlinie */
.auth-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
}

/* Icon-Links Styling */
.auth-icon-link {
    color: var(--afro-text) !important;
    opacity: 0.7;
    font-size: 1rem;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.auth-icon-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Spezielle Farben für Admin & Logout */
.admin-btn { color: #ffca28 !important; } /* Goldgelb für Admin */
.logout-btn { color: #ff5252 !important; } /* Soft-Rot für Logout */

/* Login Link (wenn nicht eingeloggt) */
.login-link-minimal {
    font-size: 0.85rem;
    color: var(--afro-text) !important;
    text-decoration: none;
    opacity: 0.8;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 6px;
}

.login-link-minimal:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* 2. LAYOUT-KOMPONENTEN */
.afro-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding-top: 1rem;
}

/* Der schlanke Header für Unterseiten */
.afro-header-system, .afro-header-compact {
    position: sticky;
    top: 0;
    z-index: 20000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

/* Sticky Header (neues Layout: Topbar + Nav bleiben beim Scrollen sichtbar) */
.afro-topbar{
    position: sticky;
    top: 0;
    z-index: 50000;
    overflow: visible;
    isolation: isolate;

    background: rgba(255,255,255,0.10); /* glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

/* NAVIGATION (Glas-Effekt) */
.main-nav-bar, .afro-nav-glass, .afro-nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 5px 15px;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    gap: 0.25rem;
}

/* HERO-BEREICH (Startseite) */
.afro-hero {
    background: var(--afro-gradient);
    color: white;
    padding: 4rem 0;
    position: relative;
}

.afro-hero-title {
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
}

/* 5. SEKTIONEN & KARTEN */
.afro-section {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.afro-section::before {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 4px; height: 100%;
    background: linear-gradient(to bottom, var(--afro-primary), var(--afro-secondary));
}

/* 6. AUTH & LOGIN */
.afro-auth-overlay .btn-outline-light {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 999px;
}

/* Container für das Logo im Hero */
.hero-logo-wrapper {
    display: inline-block;
}

/* Das große Home-Logo */
.hero-logo-large {
    /* Größe deutlich erhöhen */
    height: 180px;
    width: auto;
    object-fit: contain;

    /* Glas-Effekt (Glassmorphism) */
    background: rgba(255, 255, 255, 0.15); /* Sehr leichte weiße Füllung */
    backdrop-filter: blur(12px);           /* Macht den Hintergrund unter dem Logo unscharf */
    -webkit-backdrop-filter: blur(12px);

    /* Rahmen und Abrundung */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 20px;

    /* Schatten für mehr Tiefe auf dem Gradienten */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* Animation beim Drüberfahren */
    transition: all 0.3s ease-in-out;
}

.hero-logo-large:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}


/* Den Header schmal halten */
.afro-header-compact {
    width: 100%;
    min-height: 70px; /* Schmale Höhe erzwingen */
    background: var(--afro-gradient);
    color: var(--afro-text);
    z-index: 1000;
}

/* Sicherstellen, dass der Body Platz hat */
.afro-main-content {
    flex: 1;
    width: 100%;
    background-color: #faf7f3; /* Hintergrund */
    padding-bottom: 5rem;
    z-index: 1 !important
}


/* Nav */
.afro-nav-wrapper{
    position: relative;
    z-index: 50001;
}

.afro-nav {
    background-color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: .4rem .75rem;
    gap: .25rem;
}

/* Sektionen als Karten mit akzentfarbener Linie */
.afro-section {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.afro-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--afro-primary), var(--afro-secondary));
}

.afro-section .card-body {
    padding: 1.5rem 1.75rem;
}

.afro-section-title {
    margin-bottom: .75rem;
    font-weight: 700;
    color: #222;
}

.afro-subnav-item {
    display: block;
    margin-bottom: 8px;
}

.afro-subnav-item:last-child {
    margin-bottom: 0;
}

.manage-nav {
    border-radius: 18px;
}

.manage-nav-title {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.manage-nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Buttons */
.manage-nav .nav-link {
    border-radius: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 10px 12px;
}

.btn-tanido-primary{
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.btn-tanido-primary:hover{
    filter: brightness(.92);
}

.btn-afro-nav {
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: none;
    background: transparent;
    color: #444;
    font-weight: 600;
}

.btn-afro-nav:hover {
    background: rgba(20, 92, 44, 0.08);
    color: #145c2c;
}

/* Active */
.manage-nav .nav-link.active {
    color: #fff;
    background: rgba(0,0,0,0.35);
    border-color: rgba(0,0,0,0.25);
}

/* Hover */
.manage-nav .nav-link:hover {
    color: #fff;
    background: rgba(0,0,0,0.18);
}

/* Mobile: horizontal scroll statt hässlich untereinander */
@media (max-width: 992px) {
    .manage-nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .manage-nav .nav-item {
        flex: 0 0 auto;
    }

    .manage-nav .nav-link {
        white-space: nowrap;
    }
}

/* Die Pille dunkler machen für besseren Kontrast */
.auth-pill-modern {
    background: rgba(0, 0, 0, 0.25); /* Dunklerer Hintergrund */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Texte besser lesbar machen */
.user-name-small {
    color: #ffffff !important;
    font-size: 0.82rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Schatten für Lesbarkeit */
}

.user-email-tiny {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    margin-top: 2px;
}

/* Icons schärfer machen */
.auth-icon-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
}

.auth-icon-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Spezielle Hover-Effekte */
.admin-glow:hover { color: #ffca28 !important; }
.logout-hover:hover { color: #ff5252 !important; }

.auth-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
}

.login-btn-glass {
    color: white !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: background 0.2s;
}

.login-btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===  Header Customization === */
/* Basis-Klasse für den dynamischen Hintergrund */
.custom-header-bg {
    background-position: center center;
    transition: background-image 0.3s ease;
}

/* Modus: Bild deckt alles ab (Cover) */
.bg-mode-cover {
    background-size: cover;
    background-repeat: no-repeat;
}

/* Modus: Bild wiederholt sich (Muster/Textur) */
.bg-mode-repeat {
    background-size: auto; /* Bild behält Originalgröße */
    background-repeat: repeat;
}

/* Klasse für das dynamische Logo */
.custom-logo {
    height: auto;
    width: var(--logo-size, 40px); /* Fallback 40px */
    transition: width 0.2s ease;   /* Smoothe Änderung bei Einstellung */
    display: block;
}

.newsletter-widget {
    background-color: #f8f9fa; /* Hellgrau oder passend zum Footer */
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.widget-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.x-small {
    font-size: 0.75rem;
}

.partner-logo {
    height: 50px;             /* WICHTIG: Feste Höhe, sonst 0px */
    width: auto;
    object-fit: contain;
    /* Optional: Grau bis Hover */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === Globales Muster (Umgebung) === */
.afro-page.site-shell {
    min-height: 100vh;
    padding: 28px 14px;

    background-color: var(--afro-bg);
    color: var(--text);

    background-image:
            radial-gradient(1100px 600px at 50% -200px, rgba(255,255,255,0.26), transparent 60%),
            radial-gradient(900px 600px at 85% 30%, rgba(0,0,0,0.16), transparent 55%),
            url('/bg/tile.png');

    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 120px;   /* Tile-Größe */
    background-position: center, center, center;
    background-attachment: fixed, fixed, scroll;
}

/* === Mittlerer "Papier"-Container === */
.site-frame {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--afro-surface);
    border: 1px solid var(--afro-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 70px rgba(0,0,0,0.16);
    overflow: visible;
}

/* Mobile */
@media (max-width: 768px) {
    .afro-page.site-shell { padding: 16px 10px; }
    .site-frame { border-radius: var(--radius-lg); }
}

/* 1. Das Vorschaubild ganz oben in der Karte */
.news-img-top img,
.news-img-top video {
    width: 100% !important;
    height: 220px !important;       /* Zwingt das Bild auf diese Höhe */
    object-fit: cover !important;   /* Schneidet Überreste ab */
    object-position: center top !important; /* Fokus oben */
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* 2. Bilder im Text (wenn aufgeklappt) */
.news-content img,
.news-excerpt img {
    max-width: 100% !important;
    width: 100% !important;         /* Zieht kleine Bilder breit */
    height: auto !important;        /* Hier erlauben wir natürliche Höhe, DAMIT MAN ALLES SIEHT */
    max-height: 400px !important;   /* ABER: Nicht höher als 400px, sonst scrollt man ewig */
    object-fit: cover !important;
    border-radius: 12px !important;
    margin: 15px 0 !important;
}

/* Sicherheitsnetz: Verhindert, dass Bilder aus der Karte ragen */
.news-card-clean {
    overflow: hidden !important;
}

@supports (-webkit-touch-callout: none) {
    .main-nav-bar, .afro-nav-glass, .afro-nav,
    .auth-pill-small, .auth-pill-modern {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ===== Home Reveal: beim ersten Render sanft einblenden ===== */
.home-reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .95s ease, transform .95s ease;
    will-change: opacity, transform;
}

.home-reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .home-reveal,
    .home-reveal.is-visible{
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* Der Kopfbereich (Hilfe) zum Anfassen */
.draggable-help-header {
    cursor: grab;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.draggable-help-header:active {
    cursor: grabbing;
}

.draggable-help-body {
    flex: 1;
    background: transparent;
}
.draggable-help-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ======================================================
   THEME OVERRIDES — echte visuelle Unterschiede:
   Schrift, Größen, Buttons, Cards, Topbar, Nav, Schatten
   ====================================================== */

/* ---- Hero-Bogen: Standard alle ausblenden, nur shape-wave sichtbar ---- */
.shape-arc, .shape-double, .shape-mountains, .shape-tilt, .shape-cubes { display: none; }

/* ---- Hilfsmittel: alle Card-Typen auf einmal ----- */
.afro-section,
.news-card-clean,
.event-card-modern,
.event-card,
.project-card-modern,
.about-card,
.value-card,
.team-member,
.donation-card-modern,
.glass-panel,
.action-item-glass,
.card {
    transition: box-shadow 0.25s, border-radius 0.25s, border-color 0.25s;
}


/* =====================================================
   CLASSIC BLUE — professionell, sauber (Basis)
   ===================================================== */
.theme-classic {
    font-family: "Inter", system-ui, sans-serif;
}
.theme-classic h1, .theme-classic h2, .theme-classic h3,
.theme-classic h4, .theme-classic h5, .theme-classic h6 {
    font-family: "Inter", system-ui;
    font-weight: 700;
}
.theme-classic .afro-section::before {
    background: linear-gradient(to bottom, var(--afro-primary), var(--afro-secondary));
}
.theme-classic .btn { border-radius: 10px; }
.theme-classic .btn-tanido-primary { box-shadow: 0 4px 14px rgba(0,74,153,0.25); }


/* =====================================================
   SUNSET WARM — energetisch, warm, rund, verspielt
   ===================================================== */
.theme-sunset {
    font-family: "Nunito", system-ui, sans-serif;
    line-height: 1.65;
}
/* Headings: größer, runder, fetter */
.theme-sunset h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; }
.theme-sunset h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.theme-sunset h3, .theme-sunset h4, .theme-sunset h5, .theme-sunset h6 {
    font-family: "Nunito", system-ui; font-weight: 800; letter-spacing: -0.02em;
}
/* Hintergrund */
.theme-sunset.afro-page.site-shell {
    background-image:
        radial-gradient(ellipse 1300px 800px at 15% -80px, rgba(255,180,60,0.32), transparent 60%),
        radial-gradient(ellipse 900px 700px at 88% 55%, rgba(247,37,133,0.18), transparent 55%),
        url('/bg/tile.png');
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 100px;
    background-attachment: fixed, fixed, scroll;
}
/* Haupt-Frame */
.theme-sunset .site-frame {
    border-radius: 32px !important;
    box-shadow: 0 28px 90px rgba(255,107,53,0.22), 0 6px 28px rgba(247,37,133,0.12);
    border-color: rgba(255,107,53,0.12) !important;
}
/* Topbar */
.theme-sunset .afro-topbar {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(255,107,53,0.2);
}
/* Nav-Pill */
.theme-sunset .afro-nav {
    border-radius: 999px;
    background: rgba(255,255,255,0.94) !important;
    border: 2px solid rgba(255,107,53,0.22) !important;
    box-shadow: 0 8px 28px rgba(255,107,53,0.18) !important;
    padding: 6px 20px;
}
.theme-sunset .btn-afro-nav {
    border-radius: 999px;
    font-family: "Nunito", system-ui;
    font-weight: 700;
    font-size: 0.9rem;
    padding: .4rem 1.1rem;
}
.theme-sunset .btn-afro-nav:hover { background: rgba(255,107,53,0.12); color: #c44b1a; }
/* Alle Buttons: riesige Pill */
.theme-sunset .btn { border-radius: 999px !important; font-weight: 700; }
.theme-sunset .btn-tanido-primary { box-shadow: 0 6px 20px rgba(255,107,53,0.35); }
/* Cards überall */
.theme-sunset .afro-section,
.theme-sunset .news-card-clean,
.theme-sunset .event-card-modern,
.theme-sunset .event-card,
.theme-sunset .project-card-modern,
.theme-sunset .about-card,
.theme-sunset .value-card,
.theme-sunset .team-member,
.theme-sunset .card {
    border-radius: 24px !important;
    box-shadow: 0 6px 28px rgba(255,107,53,0.1) !important;
}
.theme-sunset .afro-section::before {
    border-radius: 4px 0 0 4px;
    background: linear-gradient(to bottom, #ff6b35, #f72585);
}
/* Badges */
.theme-sunset .badge { border-radius: 999px; }
/* Runde Ecken überall erzwingen */
.theme-sunset .rounded-pill { border-radius: 999px !important; }
.theme-sunset .rounded-4 { border-radius: 24px !important; }
/* Bogen: sanfter Bogen, taller */
.theme-sunset .shape-wave { display: none; }
.theme-sunset .shape-arc  { display: block; }
.theme-sunset .custom-shape-divider-bottom-1 svg { height: 80px; }


/* =====================================================
   FOREST GREEN — natürlich, geerdet, Serif, warm
   ===================================================== */
.theme-forest {
    font-family: "Merriweather", Georgia, serif;
    line-height: 1.75;
}
/* Headings: Serif, klassisch */
.theme-forest h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.theme-forest h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; }
.theme-forest h3, .theme-forest h4, .theme-forest h5, .theme-forest h6 {
    font-family: "Merriweather", Georgia, serif; font-weight: 700;
}
/* Hintergrund: organisch, erdige Töne */
.theme-forest.afro-page.site-shell {
    background-image:
        radial-gradient(ellipse 1100px 600px at 50% -100px, rgba(70,160,70,0.18), transparent 60%),
        radial-gradient(ellipse 800px 500px at 85% 60%, rgba(20,92,44,0.1), transparent 55%),
        url('/bg/tile.png');
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 140px;
    background-attachment: fixed, fixed, scroll;
}
/* Haupt-Frame */
.theme-forest .site-frame {
    border-radius: 18px !important;
    box-shadow: 0 20px 65px rgba(20,92,44,0.2), 0 4px 18px rgba(0,0,0,0.08);
    border-color: rgba(20,92,44,0.15) !important;
}
/* Topbar */
.theme-forest .afro-topbar {
    border-bottom: 2px solid rgba(20,92,44,0.25);
}
/* Nav: grüner Rand */
.theme-forest .afro-nav {
    background: rgba(255,255,255,0.92) !important;
    border: 2px solid rgba(20,92,44,0.2) !important;
    box-shadow: 0 4px 18px rgba(20,92,44,0.14) !important;
    border-radius: 14px;
}
.theme-forest .btn-afro-nav {
    font-family: "Merriweather", Georgia, serif;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 8px;
}
.theme-forest .btn-afro-nav:hover { background: rgba(20,92,44,0.1); color: #145c2c; }
/* Alle Buttons: leicht gerundet, solide */
.theme-forest .btn { border-radius: 8px !important; font-weight: 700; }
.theme-forest .btn-tanido-primary { box-shadow: 0 4px 16px rgba(20,92,44,0.3); }
/* Cards */
.theme-forest .afro-section,
.theme-forest .news-card-clean,
.theme-forest .event-card-modern,
.theme-forest .event-card,
.theme-forest .project-card-modern,
.theme-forest .about-card,
.theme-forest .value-card,
.theme-forest .team-member,
.theme-forest .card {
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(20,92,44,0.1) !important;
}
.theme-forest .afro-section::before {
    background: linear-gradient(to bottom, #145c2c, #0b3d1a, #a7c957);
    width: 5px;
}
.theme-forest .badge { border-radius: 6px; }
/* Berge / Zickzack */
.theme-forest .shape-wave      { display: none; }
.theme-forest .shape-mountains { display: block; }
.theme-forest .custom-shape-divider-bottom-1 svg { height: 80px; }


/* =====================================================
   MINIMAL LIGHT — ultraclean, kein Schatten, Flat
   ===================================================== */
.theme-minimal {
    font-family: "DM Sans", system-ui, sans-serif;
    line-height: 1.5;
}
/* Headings: schlank, eng, kleiner */
.theme-minimal h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 400; letter-spacing: -0.04em; }
.theme-minimal h2 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 500; letter-spacing: -0.03em; }
.theme-minimal h3, .theme-minimal h4, .theme-minimal h5, .theme-minimal h6 {
    font-family: "DM Sans", system-ui; font-weight: 500; letter-spacing: -0.02em;
}
/* Hintergrund: gar kein Muster */
.theme-minimal.afro-page.site-shell {
    background-image: none !important;
    padding: 0 !important;
}
/* Haupt-Frame: kein Schatten, flach */
.theme-minimal .site-frame {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(17,24,39,0.1) !important;
}
/* Topbar: dünne Linie unten, kein Blur */
.theme-minimal .afro-topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: none !important;
}
/* Nav: kein Pill, nur schmale Linie */
.theme-minimal .afro-nav {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2px 0;
    gap: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
.theme-minimal .btn-afro-nav {
    font-family: "DM Sans", system-ui;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 0 !important;
    padding: .5rem 1rem;
    color: rgba(255,255,255,0.8);
    border-bottom: 2px solid transparent;
}
.theme-minimal .btn-afro-nav:hover {
    background: transparent;
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.6);
}
.theme-minimal .btn-afro-nav.active {
    background: transparent !important;
    color: #fff !important;
    border-bottom-color: #fff !important;
    font-weight: 500;
}
/* Alle Buttons: ecken abschneiden */
.theme-minimal .btn { border-radius: 4px !important; font-weight: 400; box-shadow: none !important; }
.theme-minimal .btn-tanido-primary { box-shadow: none !important; }
/* Cards: nur Linie, kein Schatten */
.theme-minimal .afro-section,
.theme-minimal .news-card-clean,
.theme-minimal .event-card-modern,
.theme-minimal .event-card,
.theme-minimal .project-card-modern,
.theme-minimal .about-card,
.theme-minimal .value-card,
.theme-minimal .team-member,
.theme-minimal .card {
    border-radius: 4px !important;
    box-shadow: none !important;
    border: 1px solid rgba(17,24,39,0.12) !important;
}
/* Bogen: komplett ausgeblendet (flat/clean) */
.theme-minimal .custom-shape-divider-bottom-1 { display: none; }
.theme-minimal .afro-section::before { display: none; }
.theme-minimal .shadow-sm { box-shadow: none !important; }
/* rounded-pill → leicht abgerundet */
.theme-minimal .rounded-pill { border-radius: 4px !important; }
.theme-minimal .rounded-4 { border-radius: 4px !important; }
.theme-minimal .badge { border-radius: 2px; font-weight: 400; }


/* =====================================================
   PURPLE NIGHT — dunkel, dramatisch, Premium, Glow
   ===================================================== */
.theme-purple {
    font-family: "Rajdhani", "Trebuchet MS", system-ui, sans-serif;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
/* Headings: uppercase, weit, leuchtet */
.theme-purple h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(167,139,250,0.5);
}
.theme-purple h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.theme-purple h3, .theme-purple h4, .theme-purple h5, .theme-purple h6 {
    font-family: "Rajdhani", system-ui;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Hintergrund: dunkel mit lila Glow-Effekten */
.theme-purple.afro-page.site-shell {
    background-image:
        radial-gradient(ellipse 1200px 700px at 25% -50px, rgba(124,58,237,0.4), transparent 60%),
        radial-gradient(ellipse 900px 800px at 80% 85%, rgba(79,70,229,0.3), transparent 55%),
        radial-gradient(ellipse 600px 600px at 60% 40%, rgba(139,92,246,0.1), transparent 50%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Haupt-Frame: Glow-Border */
.theme-purple .site-frame {
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(124,58,237,0.3), 0 24px 80px rgba(124,58,237,0.4), 0 8px 32px rgba(79,70,229,0.2);
    border-color: rgba(124,58,237,0.3) !important;
}
/* Topbar: dunkles Glas mit Glow */
.theme-purple .afro-topbar {
    border-bottom: 1px solid rgba(124,58,237,0.4) !important;
    box-shadow: 0 4px 30px rgba(124,58,237,0.2);
}
/* Nav: dunkle Pille mit Glow-Rand */
.theme-purple .afro-nav {
    background: rgba(11,16,32,0.88) !important;
    border: 1px solid rgba(124,58,237,0.45) !important;
    box-shadow: 0 0 20px rgba(124,58,237,0.25), 0 4px 16px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.theme-purple .btn-afro-nav {
    font-family: "Rajdhani", system-ui;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(200,180,255,0.75);
    border-radius: 8px;
}
.theme-purple .btn-afro-nav:hover {
    background: rgba(124,58,237,0.25);
    color: #e9d5ff;
    box-shadow: 0 0 12px rgba(124,58,237,0.3);
}
/* Alle Buttons: Glow-Effekt */
.theme-purple .btn {
    border-radius: 8px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.theme-purple .btn-tanido-primary,
.theme-purple .btn-primary {
    box-shadow: 0 0 20px rgba(124,58,237,0.5), 0 4px 16px rgba(124,58,237,0.3) !important;
    border-color: rgba(167,139,250,0.5) !important;
}
/* Cards: Glow-Border, dunkel */
.theme-purple .afro-section,
.theme-purple .news-card-clean,
.theme-purple .event-card-modern,
.theme-purple .event-card,
.theme-purple .project-card-modern,
.theme-purple .about-card,
.theme-purple .value-card,
.theme-purple .team-member,
.theme-purple .card {
    border-radius: 16px !important;
    box-shadow: 0 0 0 1px rgba(124,58,237,0.2), 0 8px 32px rgba(124,58,237,0.15) !important;
    border-color: rgba(124,58,237,0.2) !important;
}
/* Bogen: diagonaler Schnitt */
.theme-purple .shape-wave  { display: none; }
.theme-purple .shape-tilt  { display: block; }
.theme-purple .custom-shape-divider-bottom-1 svg { height: 90px; }
.theme-purple .afro-section::before {
    background: linear-gradient(to bottom, #7c3aed, #4f46e5);
    box-shadow: 2px 0 12px rgba(124,58,237,0.4);
}
.theme-purple .badge { border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.theme-purple .shadow-sm { box-shadow: 0 0 0 1px rgba(124,58,237,0.15), 0 4px 16px rgba(124,58,237,0.1) !important; }
/* Lesbare Textfarben auf hellen Karten-Hintergründen */
.theme-purple {
    --muted: #6d28d9;
    --bs-secondary-color: #6d28d9;
    --text: #1e1b4b;
    --bs-body-color: #1e1b4b;
}
.theme-purple .text-muted { color: #6d28d9 !important; }
.theme-purple .text-dark  { color: #1e1b4b !important; }
.theme-purple h1, .theme-purple h2, .theme-purple h3,
.theme-purple h4, .theme-purple h5, .theme-purple h6 { color: #1e1b4b; }


/* =====================================================
   OCEAN MINT — frisch, luftig, hell, sportlich
   ===================================================== */
.theme-ocean {
    font-family: "Quicksand", system-ui, sans-serif;
    line-height: 1.65;
}
/* Headings: freundlich rund */
.theme-ocean h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.theme-ocean h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; }
.theme-ocean h3, .theme-ocean h4, .theme-ocean h5, .theme-ocean h6 {
    font-family: "Quicksand", system-ui; font-weight: 600;
}
/* Hintergrund: helles Aqua-Glow */
.theme-ocean.afro-page.site-shell {
    background-image:
        radial-gradient(ellipse 1200px 700px at 50% -120px, rgba(14,165,233,0.25), transparent 60%),
        radial-gradient(ellipse 900px 600px at 90% 65%, rgba(6,182,212,0.16), transparent 55%),
        url('/bg/tile.png');
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 110px;
    background-attachment: fixed, fixed, scroll;
}
/* Haupt-Frame */
.theme-ocean .site-frame {
    border-radius: 28px !important;
    box-shadow: 0 24px 80px rgba(14,165,233,0.2), 0 6px 24px rgba(6,182,212,0.12);
    border-color: rgba(14,165,233,0.15) !important;
}
/* Topbar */
.theme-ocean .afro-topbar {
    border-bottom: 2px solid rgba(14,165,233,0.25);
    box-shadow: 0 4px 24px rgba(14,165,233,0.12);
}
/* Nav: sauber weiß */
.theme-ocean .afro-nav {
    background: rgba(255,255,255,0.96) !important;
    border: 2px solid rgba(14,165,233,0.28) !important;
    box-shadow: 0 6px 24px rgba(14,165,233,0.16) !important;
    border-radius: 999px;
}
.theme-ocean .btn-afro-nav {
    font-family: "Quicksand", system-ui;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 999px;
    color: #0f172a;
}
.theme-ocean .btn-afro-nav:hover { background: rgba(14,165,233,0.1); color: #0369a1; }
/* Alle Buttons: Pill */
.theme-ocean .btn { border-radius: 999px !important; font-weight: 600; }
.theme-ocean .btn-tanido-primary { box-shadow: 0 6px 20px rgba(14,165,233,0.35); }
/* Cards */
.theme-ocean .afro-section,
.theme-ocean .news-card-clean,
.theme-ocean .event-card-modern,
.theme-ocean .event-card,
.theme-ocean .project-card-modern,
.theme-ocean .about-card,
.theme-ocean .value-card,
.theme-ocean .team-member,
.theme-ocean .card {
    border-radius: 22px !important;
    box-shadow: 0 6px 24px rgba(14,165,233,0.1) !important;
    border-color: rgba(14,165,233,0.12) !important;
}
/* Doppelwelle */
.theme-ocean .shape-wave   { display: none; }
.theme-ocean .shape-double { display: block; }
.theme-ocean .afro-section::before {
    background: linear-gradient(to bottom, #0ea5e9, #06b6d4);
    border-radius: 4px 0 0 4px;
}
.theme-ocean .badge { border-radius: 999px; }
.theme-ocean .rounded-pill { border-radius: 999px !important; }
.theme-ocean .rounded-4 { border-radius: 22px !important; }
.theme-ocean .shadow-sm { box-shadow: 0 4px 16px rgba(14,165,233,0.12) !important; }


/* =====================================================
   HIGH CONTRAST — barrierefreiheit, eckig, maximum
   ===================================================== */
.theme-contrast {
    font-family: -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
    line-height: 1.5;
}
/* Headings: riesig, fett, schwarz */
.theme-contrast h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-underline-offset: 6px;
}
.theme-contrast h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; }
.theme-contrast h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 900; }
.theme-contrast h4, .theme-contrast h5, .theme-contrast h6 { font-weight: 900; }
/* Hintergrund: reines Weiß */
.theme-contrast.afro-page.site-shell {
    background-image: none !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}
/* Topbar: schwarz massiv */
.theme-contrast .afro-topbar {
    background-image: none !important;
    background-color: #000000 !important;
    border-bottom: 4px solid #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Haupt-Frame: harter Rahmen, keine Kurven */
.theme-contrast .site-frame {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 3px solid #000000 !important;
}
/* Nav: eckig, schwarz auf weiß */
.theme-contrast .afro-nav {
    background: #ffffff !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 4px 8px;
    gap: 0 !important;
}
.theme-contrast .btn-afro-nav {
    border-radius: 0 !important;
    font-weight: 900;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    border-right: 1px solid #ccc;
    padding: .5rem .9rem;
}
.theme-contrast .btn-afro-nav:last-child { border-right: none; }
.theme-contrast .btn-afro-nav:hover { background: #000; color: #fff; }
.theme-contrast .btn-afro-nav.active { background: #000 !important; color: #fff !important; }
/* Alle Buttons: 0 Radius, fett, Rand */
.theme-contrast .btn {
    border-radius: 0 !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
}
/* Cards: schwerer Rand, keine Schatten */
.theme-contrast .afro-section,
.theme-contrast .news-card-clean,
.theme-contrast .event-card-modern,
.theme-contrast .event-card,
.theme-contrast .project-card-modern,
.theme-contrast .about-card,
.theme-contrast .value-card,
.theme-contrast .team-member,
.theme-contrast .card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 3px solid #000 !important;
}
.theme-contrast .afro-section::before {
    width: 8px;
    background: #000000;
}
/* Alles eckig */
.theme-contrast .rounded-pill { border-radius: 0 !important; border: 2px solid #000 !important; }
.theme-contrast .rounded-4 { border-radius: 0 !important; }
.theme-contrast .rounded { border-radius: 0 !important; }
.theme-contrast .shadow-sm { box-shadow: none !important; border: 2px solid #000 !important; }
.theme-contrast .badge { border-radius: 0; font-weight: 900; border: 2px solid currentColor; background: transparent !important; }
/* Würfel / Blöcke */
.theme-contrast .shape-wave  { display: none; }
.theme-contrast .shape-cubes { display: block; }
.theme-contrast .custom-shape-divider-bottom-1 svg { height: 70px; }
/* Kein Glas-Effekt */
.theme-contrast .glass-panel,
.theme-contrast .action-item-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
}
/* Schwarzer Text im glass-panel */
.theme-contrast .glass-panel .text-white,
.theme-contrast .glass-panel .text-white-50,
.theme-contrast .glass-panel .action-item-glass {
    color: #000000 !important;
}
.theme-contrast .glass-panel * {
    color: #000000 !important;
}