/**
 * Die grosse Geschenkefahrt – winterliche Blau-Palette
 * Tierschutz Helfer, 2026
 */

.gf-wrap {
    --gf-night: #0b1b2e;
    --gf-deep: #143254;
    --gf-steel: #27496f;
    --gf-ice: #bed6ee;
    --gf-frost: #eef4fb;
    --gf-surface: #ffffff;
    --gf-line: #d3e1f0;
    --gf-text: #16293d;
    --gf-text-soft: #4d6480;
    --gf-gold: #b8872c;
    --gf-gold-bright: #ffd98a;
    --gf-berry: #9c2430;
    --gf-shadow: 0 18px 40px -24px rgba(12, 30, 54, .55);

    /* Buttons: geprueft nach WCAG 2.1, Textkontrast 9.9:1, Flaechenkontrast 8.9:1 */
    --gf-btn-bg: #1d4474;
    --gf-btn-bg-hover: #143254;
    --gf-btn-ink: #ffffff;
    --gf-focus: #0b1b2e;

    color: var(--gf-text);
    font-variant-numeric: tabular-nums;
    /* Keine eigene Maximalbreite: die Seite nutzt den Inhaltsbereich des
       Templates (YOOtheme: 1200 px) wie alle anderen Seiten auch. */
}

@media (prefers-color-scheme: dark) {
    .gf-wrap {
        --gf-frost: #0d1a2a;
        --gf-surface: #15263a;
        --gf-line: #26405e;
        --gf-text: #e8f1fb;
        --gf-text-soft: #a6bcd4;
        --gf-gold: #e3b45c;
        --gf-shadow: 0 20px 44px -22px rgba(0, 0, 0, .7);

        /* Im Dunkelmodus traegt Gold den Button: Text 13.6:1, Flaeche 11.3:1 */
        --gf-btn-bg: #ffd98a;
        --gf-btn-bg-hover: #e3b45c;
        --gf-btn-ink: #1b1304;
        --gf-focus: #ffd98a;
    }
}

.gf-header { margin-bottom: 1.5rem; }

.gf-title {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 .4em;
}

.gf-lede {
    font-size: 1.05rem;
    color: var(--gf-text-soft);
    max-width: 62ch;
    margin: 0 0 .8em;
}

/* Volle Breite wie Szene und Teams darunter. */
.gf-intro { max-width: none; margin: 0 0 1.25rem; }
.gf-intro > :last-child { margin-bottom: 0; }

.gf-empty {
    padding: 1.2rem;
    border-radius: 14px;
    background: var(--gf-frost, #eef4fb);
    color: #16293d;
}

/* ---------- Szene und Etappenstand nebeneinander ---------- */
.gf-hero {
    display: grid;
    gap: 1.2rem;
    margin: 0 0 1.4rem;
}

.gf-scene {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--gf-shadow);
    background: var(--gf-night);
}

.gf-scene img { display: block; width: 100%; height: auto; }

/* Ab Laptop-Breite: Bild drei Fünftel, Stand zwei Fünftel, gleich hoch.
   Darunter (Tablet hochkant, Handy) bleibt es untereinander. */
@media (min-width: 960px) {
    .gf-hero:not(.gf-hero--ohne-bild) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: stretch;
    }

    .gf-hero .gf-scene { height: 100%; }
    .gf-hero .gf-scene img { height: 100%; object-fit: cover; }

    .gf-hero .gf-goal {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Gold auf dem dunklen Stand: Text 13.6:1, deutlich abgesetzt von der Fläche.
   Der normale Spendenknopf (Dunkelblau) ginge auf dem Nachtblau unter. */
.gf-hero-cta {
    align-self: flex-start;
    display: inline-block;
    margin-top: 1.3rem;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    background: var(--gf-gold-bright);
    color: #1b1304;
    font-weight: 700;
    text-decoration: none;
}

.gf-hero-cta:hover,
.gf-hero-cta:focus { background: #e3b45c; color: #1b1304; }
.gf-hero-cta:focus-visible { outline: 3px solid var(--gf-gold-bright); outline-offset: 3px; }

/* Ziel des Knopfs: ohne JavaScript ein Grundabstand zur mitlaufenden
   Kopfzeile, mit JavaScript wird die tatsächliche Höhe gemessen. */
.gf-teams { scroll-margin-top: 120px; }
.gf-teams .gf-h2:focus { outline: none; }

/* ---------- Etappenziel ---------- */
.gf-goal {
    background: linear-gradient(135deg, var(--gf-deep), var(--gf-night));
    color: #eaf3ff;
    border-radius: 20px;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    box-shadow: var(--gf-shadow);
}

.gf-goal-big {
    font-size: clamp(1.25rem, 3.2vw, 1.85rem);
    line-height: 1.25;
    margin: 0;
}

.gf-goal-big strong { color: var(--gf-gold-bright); }

.gf-goal-sub {
    color: #b9cde4;
    font-size: .95rem;
    margin: .5rem 0 0;
}

.gf-cheer {
    display: inline-block;
    margin: .8rem 0 0;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(255, 217, 138, .16);
    color: var(--gf-gold-bright);
    font-weight: 700;
    font-size: .92rem;
}

/* Ohne diese Regel überstimmt display:inline-block das hidden-Attribut, und
   der leere Hinweis stünde als heller Balken im Kasten. */
.gf-cheer[hidden] { display: none; }

/* Im Kasten neben dem Bild (Flex-Spalte) nicht auf volle Breite ziehen. */
.gf-hero .gf-cheer { align-self: flex-start; }

@media (prefers-reduced-motion: no-preference) {
    .gf-cheer { animation: gf-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
}

.gf-xmas {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--gf-gold);
    margin: .2rem 0 .7rem;
}

.gf-bar {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
    margin-top: 1rem;
}

.gf-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #b8872c, var(--gf-gold-bright));
    transition: width .6s ease;
}

.gf-goal-row {
    font-size: .82rem;
    color: #b9cde4;
    margin: .45rem 0 0;
}

/* Volle Schlittenladungen als Reihe kleiner Schlitten – zählt endlos weiter,
   darum kein Ziel und keine Grenze. */
.gf-loads-icons {
    display: block;
    margin-top: .25rem;
    font-size: 1.1rem;
    letter-spacing: .12em;
    line-height: 1.4;
    word-break: break-all;
}

.gf-loads-icons:empty { display: none; }

.gf-leader {
    margin: .9rem 0 0;
    font-size: .95rem;
    color: #dbe7f5;
}

.gf-leader b { color: var(--gf-gold-bright); }

/* ---------- Teams ---------- */
.gf-h2 {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    margin: 2.4rem 0 .4rem;
}

.gf-teams-intro { color: var(--gf-text-soft); margin: 0 0 1rem; max-width: 62ch; }

.gf-team {
    background: var(--gf-surface);
    border: 1px solid var(--gf-line);
    border-radius: 18px;
    padding: .9rem 1rem;
    margin-bottom: .9rem;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(180px, 1.1fr) minmax(140px, auto);
    gap: 1rem;
    align-items: center;
}

@media (max-width: 760px) {
    .gf-team { grid-template-columns: 1fr; gap: .6rem; }
}

/* Platz 1 wird nur leicht hinterlegt: erkennbar, ohne die anderen
   abzuwerten. Jede Spende ist ein Gewinn. */
.gf-team.gf-leading {
    border-color: var(--gf-gold);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--gf-gold) 9%, var(--gf-surface)),
            var(--gf-surface) 70%);
    box-shadow: 0 10px 26px -18px rgba(90, 70, 20, .7), inset 0 0 0 1px var(--gf-gold);
}

.gf-who { display: flex; align-items: center; gap: .75rem; }
.gf-who-img { width: 64px; height: auto; flex: none; }
.gf-who-name { display: block; font-weight: 700; font-size: 1.05rem; }
.gf-who-teaser { display: block; font-size: .86rem; color: var(--gf-text-soft); margin-top: .15rem; line-height: 1.3; }
.gf-who-note { display: block; font-size: .8rem; color: var(--gf-text-soft); margin-top: .1rem; line-height: 1.3; }

.gf-rank {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gf-text-soft);
    background: var(--gf-frost);
    border: 1px solid var(--gf-line);
    font-variant-numeric: tabular-nums;
}

.gf-leading .gf-rank {
    color: #4a3708;
    background: var(--gf-gold-bright);
    border-color: var(--gf-gold);
}

@media (prefers-color-scheme: dark) {
    .gf-leading .gf-rank { color: #1b1304; }
}

/* Die Paeckli liegen frei auf der Grundlinie, darunter der Vergleichsbalken. */
.gf-track { display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; min-height: 92px; }

/* Einspaltig wäre die reservierte Päckli-Fläche vor der ersten Spende eine
   grosse Lücke pro Karte; ohne Mindesthöhe wächst sie mit den Päckli.
   Muss NACH der Grundregel stehen – bei gleicher Gewichtung gewinnt die spätere. */
@media (max-width: 760px) {
    .gf-track { min-height: 0; }
}

.gf-load {
    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    justify-content: center;
    gap: 2px;
    max-height: 66px;
    overflow: hidden;
}

.gf-load img { display: block; width: auto; }

.gf-duell {
    height: 6px;
    border-radius: 999px;
    background: var(--gf-frost);
    border: 1px solid var(--gf-line);
    overflow: hidden;
}

.gf-duell-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gf-steel), var(--gf-gold));
    transition: width .6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .gf-duell-bar { transition: none; }
}

.gf-nums { text-align: right; }
@media (max-width: 760px) { .gf-nums { text-align: left; } }

.gf-gifts { display: block; font-size: 1.3rem; font-weight: 700; }
.gf-nums span { font-size: .8rem; color: var(--gf-text-soft); }
.gf-min { display: block; margin-top: .3rem; }

.gf-give {
    display: inline-block;
    margin-top: .5rem;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    background: var(--gf-btn-bg);
    color: var(--gf-btn-ink);
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
}

.gf-give:hover, .gf-give:focus { background: var(--gf-btn-bg-hover); color: var(--gf-btn-ink); }

/* Nur für Screenreader sichtbar (z. B. „öffnet in neuem Fenster"). Eigene
   Klasse, weil das Template (YOOtheme/UIkit) kein .visually-hidden kennt. */
.gf-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.gf-give:focus-visible { outline: 3px solid var(--gf-focus); outline-offset: 3px; }

/* ---------- Bescherung ---------- */
.gf-secret {
    background: var(--gf-surface);
    border: 1px solid var(--gf-line);
    border-radius: 18px;
    padding: 1.3rem;
    box-shadow: var(--gf-shadow);
}

.gf-secret-text { color: var(--gf-text-soft); max-width: 62ch; }

.gf-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}

.gf-box {
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--gf-frost) center/72% no-repeat;
}

.gf-box[data-variant="0"] { background-image: url("../images/paket-2.png"); }
.gf-box[data-variant="1"] { background-image: url("../images/paket-4.png"); }
.gf-box[data-variant="2"] { background-image: url("../images/paket-6.png"); }
.gf-box[data-variant="3"] { background-image: url("../images/paket-5.png"); }
.gf-box[data-variant="4"] { background-image: url("../images/paket-7.png"); }
.gf-box[data-variant="5"] { background-image: url("../images/paket-3.png"); }

@media (prefers-reduced-motion: no-preference) {
    .gf-pop { animation: gf-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
}

@keyframes gf-pop {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Popup: wer zuletzt gespendet hat */
.gf-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 32px));
    padding: .7rem .8rem;
    background: var(--gf-surface);
    color: var(--gf-text);
    border: 1px solid var(--gf-line);
    border-left: 4px solid var(--gf-gold);
    border-radius: 10px;
    box-shadow: var(--gf-shadow);
}

.gf-toast[hidden] { display: none; }
.gf-toast-icon { font-size: 1.4rem; line-height: 1; }
.gf-toast-text { flex: 1; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.gf-toast-text small { display: block; color: var(--gf-text-soft); font-size: .8rem; }

.gf-toast-close {
    align-self: flex-start;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--gf-text-soft);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.gf-toast-close:hover { color: var(--gf-text); }
.gf-toast-close:focus-visible { outline: 2px solid var(--gf-focus); outline-offset: 1px; }

@media (max-width: 640px) {
    .gf-toast { right: 16px; bottom: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
    .gf-toast { animation: gf-toast-in .3s ease; }

    @keyframes gf-toast-in {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
}