/*
 * Designrichtung „Eiche“ der Werner Lindemann Schule Lübstorf.
 * Idee: Die Eiche auf dem Schulhof und die vier Portalfarben des Anbaus (Gelb, Grün, Rot, Blau) auf warmem Sand.
 * Wird nach den Standardfarben geladen (global/styles/base/colors.css) und überschreibt nur, was hier steht.
 * Kontraste (WCAG 2.2 AA): Text #33241A auf Sand 13,7:1 · Weiß auf Eichenlaub #167029 6,2:1 · Link #167029 auf Sand 5,7:1.
 * Gelb (#FFB800) ist nur Fläche: Text darauf immer in #33241A (8,6:1), nie Gelb als Schrift oder Linie.
 */

/* Fraunces (Überschriften), SIL OFL 1.1, lokal ausgeliefert – keine Verbindung zu Google */
@font-face {
    font-family: "Fraunces";
    src: url("fonts/Fraunces-Variable-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    src: url("fonts/Fraunces-Variable-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

    /* Marke */
    --color-primary: #167029;        /* Eichenlaub */
    --color-primary-dark: #0F4F1D;
    --color-primary-light: #DDF1D6;
    --color-accent: #C2410C;
    --color-accent-hover: #9A3412;

    /* Flächen: warmer Sand statt kühlem Grau */
    --color-bg: #FBF5E8;
    --color-surface: #FFFDF8;
    --color-surface-elevated: #FFFDF8;
    --color-border: #E2D3B5;
    --color-border-strong: #8A7358;

    /* Text: Rinde */
    --color-text: #33241A;
    --color-text-muted: #66513F;
    --color-link: #167029;
    --color-link-hover: #0F4F1D;
    --color-focus: #33241A;

    --color-news-bg: #EAF4E3;
    --color-footer-bar: #33241A;

    /* Terminkalender */
    --color-cat-ferien: #C2410C;
    --color-cat-ferien-bg: #FEEDE0;
    --color-cat-ferien-text: #A9440C;
    --color-cat-schule: #0B5FC4;
    --color-cat-schule-bg: #DCEBFB;
    --color-cat-schule-text: #0A478F;
    --color-cat-eltern: #2E9B2E;
    --color-cat-eltern-bg: #DDF1D6;
    --color-cat-eltern-text: #14602A;

    --color-error: #B42318;

    /* Weiche, großzügige Rundungen und warme Schatten */
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2rem;
    --shadow-sm: 0 1px 3px rgba(51, 36, 26, 0.12);
    --shadow-md: 0 4px 16px rgba(51, 36, 26, 0.14);
    --shadow-lg: 0 12px 40px rgba(51, 36, 26, 0.18);
}


/* ==========================================================================
   Tokens im Branch-Format (calm): Marken- und Tonfarben, Kalender, Dunkel („Abend-Eiche“)
   ========================================================================== */
:root {
    --brand-gelb: #FFB800; --brand-gruen: #2E9B2E; --brand-rot: #CC2418; --brand-blau: #0B5FC4;
    --tone-gelb-soft: #FFEDB8; --tone-gelb-ink: #6E4A00; --tone-gelb-solid: #FFB800; --tone-gelb-on-solid: #33241A;
    --tone-gruen-soft: #DDF1D6; --tone-gruen-ink: #14602A; --tone-gruen-solid: #167029; --tone-gruen-on-solid: #FFFFFF;
    --tone-rot-soft: #FFE3DE; --tone-rot-ink: #A71F14; --tone-rot-solid: #CC2418; --tone-rot-on-solid: #FFFFFF;
    --tone-blau-soft: #DCEBFB; --tone-blau-ink: #0A478F; --tone-blau-solid: #0B5FC4; --tone-blau-on-solid: #FFFFFF;
    --color-bg-warm: #F1E6CF;
    --color-footer-ink: #F3EBDD;
    --color-text-on-primary: #FFFFFF;
    --color-image-scrim: rgba(51, 36, 26, 0.72);
    --color-mark: #FFE08A;
    --color-focus-offset: #FFFDF8;
    --color-cat-ferien: var(--brand-gelb); --color-cat-ferien-bg: var(--tone-gelb-soft); --color-cat-ferien-text: var(--tone-gelb-ink);
    --color-cat-schule: var(--brand-blau); --color-cat-schule-bg: var(--tone-blau-soft); --color-cat-schule-text: var(--tone-blau-ink);
    --color-cat-eltern: var(--brand-gruen); --color-cat-eltern-bg: var(--tone-gruen-soft); --color-cat-eltern-text: var(--tone-gruen-ink);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tone-gelb-soft: #3F300A; --tone-gelb-ink: #FFD66B; --tone-gelb-solid: #FFC933; --tone-gelb-on-solid: #241A10;
        --tone-gruen-soft: #16301A; --tone-gruen-ink: #9BDD9A; --tone-gruen-solid: #5CC45A; --tone-gruen-on-solid: #14100B;
        --tone-rot-soft: #43201A; --tone-rot-ink: #FFA89A; --tone-rot-solid: #FF8A78; --tone-rot-on-solid: #14100B;
        --tone-blau-soft: #1A2E4A; --tone-blau-ink: #AFCDFF; --tone-blau-solid: #7AB0FF; --tone-blau-on-solid: #14100B;
        --color-primary: #7FCB78; --color-primary-dark: #A9E3A3; --color-primary-light: #16301A;
        --color-bg: #1B1510; --color-bg-warm: #221A13; --color-surface: #261D16; --color-surface-elevated: #2E241B;
        --color-border: #3D3126; --color-border-strong: #9A8670;
        --color-text: #F5EDE0; --color-text-muted: #C4B5A2; --color-text-inverse: #14100B; --color-text-on-primary: #14100B;
        --color-link: #7FCB78; --color-link-hover: #A9E3A3; --color-link-visited: #C9A8F0;
        --color-focus: #F5EDE0; --color-focus-offset: #1B1510;
        --color-news-bg: #1F2A1C; --color-footer-bar: #120D09; --color-footer-ink: #E9DFCF; --color-mark: #5C4A12;
        --color-image-scrim: rgba(20, 14, 9, 0.78); --color-error: #FF8A80;
    }
}

/* ==========================================================================
   Hero: große Slideshow über die volle Breite, Textkarte aus Milchglas in der Hauptfarbe darüber
   ========================================================================== */
:root {
    --color-hero-card: linear-gradient(150deg, color-mix(in srgb, var(--hero-from, #167029) 90%, transparent) 0%, color-mix(in srgb, var(--hero-to, #0F4F1D) 94%, transparent) 100%); /* Weiß darauf ≥ 5:1 auch über weißem Foto */
    --color-hero-card-solid: var(--hero-from, #167029);
    --color-hero-overlay: rgba(15, 79, 29, 0.82);
}
.hero-intro { --color-text-inverse: #FFFFFF; } /* Karte bleibt in beiden Modi weiß auf Grün */
.hero-intro .hero-intro__card {
    position: relative;
    background: var(--color-hero-card-solid);
    border-color: rgb(255 255 255 / 0.3);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.3),
        0 20px 40px -18px color-mix(in srgb, var(--hero-to, #0F4F1D) 70%, transparent),
        -34px 10px 50px -18px color-mix(in srgb, var(--brand-gelb) 55%, transparent),
        34px 10px 50px -18px color-mix(in srgb, var(--brand-rot) 40%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-intro .hero-intro__card {
        background: var(--color-hero-card);
    }
}
.hero-intro .hero-intro__badge {
    color: var(--tone-gelb-on-solid);
    background: var(--tone-gelb-solid);
    font-weight: 700;
}
.hero-intro .button {
    color: var(--tone-gelb-on-solid);
    background: var(--tone-gelb-solid);
    border-color: var(--tone-gelb-solid);
    font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
    .hero-intro .button:hover {
        background: color-mix(in srgb, var(--tone-gelb-solid) 82%, #fff);
        border-color: color-mix(in srgb, var(--tone-gelb-solid) 82%, #fff);
        color: var(--tone-gelb-on-solid);
    }
}

/* Kopfzeile: zartes Milchglas */
.header {
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
}

/* ==========================================================================
   Karten: leichter Farbverlauf in der Tonfarbe statt dicker Ränder
   ========================================================================== */
.card--feature,
.card.card--link {
    background: linear-gradient(155deg, color-mix(in srgb, var(--tone-soft, var(--color-primary-light)) 90%, var(--color-surface)) 0%, var(--color-surface) 65%);
    border-color: color-mix(in srgb, var(--tone-solid, var(--color-border-strong)) 26%, var(--color-border));
}
@media (hover: hover) and (pointer: fine) {
    .card--feature,
    .card.card--link {
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .2s ease;
    }
    .card--feature:hover,
    .card.card--link:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 38px -26px var(--tone-solid, var(--color-border-strong));
        border-color: color-mix(in srgb, var(--tone-solid, var(--color-border-strong)) 55%, var(--color-border));
    }
    .card--feature:hover .card__icon,
    .card.card--link:hover .card__icon { color: var(--tone-on-solid); background: var(--tone-solid); }
}
.card__icon { transition: background .25s ease, color .25s ease; }

/* ==========================================================================
   Papier: Muster wählt man im Admin je Bereich (Ohne, Punkte, Karo, Linien, Heft).
   Hier nur der zarte Farbschimmer in je einer Ecke jedes Bereichs (≤ 14 % Deckkraft).
   ========================================================================== */
.section.section--about    { --wash-img: radial-gradient(34rem 22rem at 0% 0%, color-mix(in srgb, var(--brand-gelb) 14%, transparent), transparent 70%); }
.section.section--service  { --wash-img: radial-gradient(34rem 22rem at 100% 100%, color-mix(in srgb, var(--brand-blau) 10%, transparent), transparent 70%); }
.section.section--upcoming { --wash-img: radial-gradient(30rem 20rem at 100% 0%, color-mix(in srgb, var(--brand-gruen) 10%, transparent), transparent 70%); }
.section.section--news     { --wash-img: radial-gradient(30rem 20rem at 0% 100%, color-mix(in srgb, var(--brand-gelb) 14%, transparent), transparent 70%); }

@media (prefers-reduced-motion: reduce) {
    .card--feature, .card.card--link, .card__icon { transition: none !important; transform: none !important; }
}