/**
 * Optionaler „lebensfroher“ Look für die Mathematik-Lernseite.
 * Deaktivieren: Link zu dieser Datei in resources/views/pages/mathematik.php entfernen.
 */

/* Hintergrund wie andere Inhaltsseiten (Wald); „lebensfroh“ nur noch über Kacheln/Flächen unten */
/* Unter dem Banner: kein Streifen (falls ein Sheet nach input_exercises noch Rand setzt). */
body.page-mathe-learning header,
body.page-mathe-learning .header {
    border-bottom: none;
    box-shadow: none;
}

body.page-mathe-learning {
    background-color: var(--mg-parchment, #f5f0e8);
    background-image: url("assets/branding/nordic_forest_bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #2b2b2b;
}

/* Kacheln: weniger „grau“, mehr Farbverlauf aus Fach-Akzent (--tile-glow-color setzt showTileAndLoadContent.js) */
body.page-mathe-learning .tile-horizontal {
    background: linear-gradient(
            155deg,
            color-mix(in srgb, var(--tile-glow-color, #94a3b8) 78%, #ffffff) 0%,
            color-mix(in srgb, var(--tile-glow-color, #94a3b8) 42%, #fffbeb) 100%
        )
        !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 4px 0 rgba(255, 255, 255, 0.35) inset,
        var(--learning-shadow, 0 12px 40px rgba(15, 23, 42, 0.07));
}

body.page-mathe-learning .input-section {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    border-color: rgba(251, 191, 36, 0.22);
}

body.page-mathe-learning .exercises {
    background: linear-gradient(180deg, #fffefb 0%, #fff7ed 100%);
    border-color: rgba(251, 146, 60, 0.2);
}

body.page-mathe-learning .exercises h2 {
    border-bottom-color: rgba(251, 146, 60, 0.35);
}

body.page-mathe-learning .input-section h2 {
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* --- Icons: 💡 = Input / 🏋️ = Aufgaben (Zustand kommt aus showTileAndLoadContent.js) --- */
body.page-mathe-learning .tile-horizontal .tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    font-size: 1.45rem !important;
    line-height: 1;
    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    opacity: 0.45;
    filter: grayscale(0.35);
    box-shadow: none;
    user-select: none;
}

body.page-mathe-learning .tile-horizontal .tile-icon:hover {
    opacity: 0.85;
    transform: scale(1.06);
    filter: grayscale(0);
}

body.page-mathe-learning .tile-horizontal .tile-icon.tile-icon--active {
    opacity: 1;
    filter: grayscale(0);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 6px 16px rgba(15, 23, 42, 0.12);
    transform: scale(1.08);
}

body.page-mathe-learning .tile-horizontal .tile-icon.bulb.tile-icon--active {
    background: linear-gradient(145deg, #fef3c7, #fde68a);
}

body.page-mathe-learning .tile-horizontal .tile-icon.dumbbell.tile-icon--active {
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
}

body.page-mathe-learning .tile-horizontal .tile-icon.tile-icon--inactive:not(:hover) {
    opacity: 0.42;
    filter: grayscale(0.5);
}

body.page-mathe-learning .mathe-lp-hint {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #3d4a5c;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    border: 1px solid rgba(26, 26, 46, 0.08);
}

body.page-mathe-learning .mathe-lp-hint a {
    color: #2d5a3a;
    font-weight: 700;
    text-decoration: none;
}

body.page-mathe-learning .mathe-lp-hint a:hover {
    text-decoration: underline;
}