/* ================================================
   Glasoptik (Entwurf 3, 30.10.2026)
   Nur der Rahmen wird glaesern: Leiste, Kopfbereich, Karten, Fusszeile.
   Lerninhalte bleiben hell genug zum Lesen.
   Wird in menu.php als LETZTES Stylesheet geladen, damit die
   Fach-CSS (mathe8.css usw.) es nicht ueberschreiben.
   Rueckbau: Link in menu.php entfernen (oder Commit zuruecknehmen).
   ================================================ */

/* Hintergrund bleibt weiss (Wunsch 30.10.2026: farbiger Verlauf war zu bunt).
   Das Glas zeigt sich dadurch vor allem an der Leiste, wenn Inhalt darunter scrollt. */
body {
    background: #ffffff;
}

/* Menueleiste: kraeftiges Blau, nur leicht durchsichtig (dunkles Marineblau
   mit viel Durchsicht wirkte ueber Weiss graeulich) */
.navbar {
    background: linear-gradient(135deg, rgba(30, 90, 170, .76), rgba(52, 152, 219, .70)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 32px rgba(15, 30, 70, .18);
}

/* Aufklappmenue auf dem Desktop: Farbton der Leiste, aber fast deckend.
   Ein Glas-Element in der Glas-Leiste kann den Seiteninhalt nicht
   weichzeichnen (Browser-Eigenheit) - durchscheinende Schrift waere sonst
   scharf hinter den Menuepunkten zu lesen. */
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        background: linear-gradient(135deg, rgba(70, 120, 185, .97), rgba(80, 150, 210, .97));
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 14px;
    }
}

/* Kopfbereich: eigener heller Blau-Tuerkis-Ton, weil der Seitenhintergrund weiss ist */
.hero {
    background: linear-gradient(120deg, rgba(194, 233, 251, .55) 0%, rgba(136, 196, 255, .42) 55%, rgba(64, 180, 220, .45) 100%) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(30, 60, 114, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
    margin: 1rem 1rem 3rem !important;
}

/* Textflaechen (ohne !important, damit Sonderformen ihre Farbe behalten) */
.content-section,
.intro-section {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(30, 60, 114, .10);
}

/* Karten: nur Bootstraps Kartenvariablen setzen. Karten mit eigener Farbe
   (bg-success, pros-card, cons-card ...) behalten sie dadurch.
   Kartenkoepfe bleiben unberuehrt - sie tragen die Schwierigkeitsfarbe
   (card-header-light/-medium/-dark). */
.card {
    --bs-card-bg: rgba(255, 255, 255, .4);
    --bs-card-border-color: rgba(255, 255, 255, .75);
    --bs-card-border-radius: 20px;
    --bs-card-inner-border-radius: 19px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(30, 60, 114, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Startseiten-Karten setzen Rand und Rundung in style.css direkt */
.topic-card {
    border-color: rgba(255, 255, 255, .75);
    border-radius: 20px;
}

.card-icon {
    opacity: .92;
}

/* Knoepfe in Karten nur rund - die Farbe bleibt (btn-mathe-light/-dark
   zeigen die Schwierigkeit, btn-danger usw. haben Bedeutung) */
.card .btn {
    border-radius: 999px;
}

/* Fusszeile: gleicher Verlauf wie die Menueleiste.
   footer.php setzt "bg-dark" - dessen dunkles Grau (mit !important) laege
   sonst unter dem halbdurchsichtigen Verlauf und dunkelte ihn ab. */
footer,
footer.bg-dark,
.footer {
    background: linear-gradient(135deg, rgba(30, 90, 170, .76), rgba(52, 152, 219, .70)) !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Wer in macOS/iOS "Transparenz reduzieren" eingestellt hat, bekommt deckende Flaechen */
@media (prefers-reduced-transparency: reduce) {
    .navbar,
    footer,
    .footer {
        background: linear-gradient(135deg, #5482be, #71b7e6) !important;
    }
    .hero,
    .content-section,
    .intro-section {
        background: #ffffff !important;
    }
    .card {
        --bs-card-bg: #ffffff;
    }
    .navbar .dropdown-menu {
        background-color: #1e5a8e;
    }
}