/* GFZA Hero Slider v3.3 */

.gfza-slider {
    --dk:   #2d5a52;
    --md:   #4a8a7e;
    --mn:   #8bbdb5;
    --lm:   #b8d8d4;
    --ye:   #f5c014;
    --ye2:  #ffd034;
    --or:   #e8944a;
    --wh:   #ffffff;
    --w7:   rgba(255,255,255,.75);
    --tr:   680ms cubic-bezier(.4,0,.2,1);
    /* Aus WP-Einstellungen ueberschrieben per inline style: */
    --gold: #f5c014;
    --dark: #2d5a52;
    --img-size: 340px;
}

/* Volle Breite, Muster-Hintergrund */
.gfza-slider {
    position: relative;
    width: 100%;
    height: var(--h, 520px);
    overflow: hidden;
    background: var(--dark);
    font-family: Georgia, 'Times New Roman', serif;
}

.gfza-slider::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-color: var(--lm);
    background-image:
        repeating-linear-gradient(45deg,
            var(--dark) 0px, var(--dark) 44px, transparent 44px, transparent 88px,
            var(--mn) 88px, var(--mn) 132px, transparent 132px, transparent 176px
        ),
        repeating-linear-gradient(-45deg,
            var(--gold) 0px, var(--gold) 44px, transparent 44px, transparent 88px,
            var(--or) 88px, var(--or) 132px, transparent 132px, transparent 176px
        );
    opacity: var(--overlay, .55);
}

.gfza-slider::after {
    content: '';
    position: absolute; bottom: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg,
        var(--dark) 0%, var(--md) 14%, var(--mn) 28%, var(--lm) 38%,
        var(--gold) 50%, var(--or) 62%, var(--gold) 72%,
        var(--lm) 82%, var(--mn) 90%, var(--dark) 100%
    );
    z-index: 30;
}

/* Track */
.gfza-track { position: relative; width: 100%; }

/* Slides */
.gfza-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transform: translateX(20px) scale(1.02);
    transition: opacity var(--tr), transform var(--tr);
    pointer-events: none;
}
.gfza-slide--active {
    opacity: 1; transform: none;
    pointer-events: auto; z-index: 2;
    position: relative;
}
.gfza-slide--leaving {
    opacity: 0; transform: translateX(-20px) scale(.98);
    z-index: 1;
}

/* Zwei-Spalten-Layout: Text | Bild */
.gfza-slide-inner {
    position: relative; z-index: 5;
    display: grid;
    grid-template-columns: 1fr var(--img-size);
    gap: 0;
    align-items: center;
    height: var(--h, 520px);
    padding: 52px 60px 72px 60px;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Kein Bild: nur eine Spalte */
.gfza-slide--plain .gfza-slide-inner {
    grid-template-columns: 1fr;
}

/* Text-Seite */
.gfza-slide-text {
    display: flex;
    flex-direction: column;
    padding-right: 48px;
}
.gfza-slide--plain .gfza-slide-text {
    padding-right: 0;
    max-width: 640px;
}

/* Bild-Box */
.gfza-slide-imgbox {
    width: var(--img-size);
    height: var(--img-size);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
    border: 3px solid rgba(255,255,255,.12);
}
.gfza-slide-imgbox img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Gelbe Ecken-Akzente */
.gfza-slide-imgbox::before {
    content: '';
    position: absolute; top: -3px; left: -3px;
    width: 36px; height: 36px;
    border-top: 3px solid var(--gold);
    border-left: 3px solid var(--gold);
    z-index: 2; border-radius: 0;
}
.gfza-slide-imgbox::after {
    content: '';
    position: absolute; bottom: -3px; right: -3px;
    width: 36px; height: 36px;
    border-bottom: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    z-index: 2; border-radius: 0;
}

/* Content-Elemente */
.gfza-badge {
    display: inline-block;
    background: var(--gold); color: var(--dark);
    font-family: sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 11px; border-radius: 2px; margin-bottom: 16px;
    width: fit-content;
}

.gfza-date, .gfza-location {
    display: flex; align-items: center; gap: 5px;
    color: var(--gold); font-family: sans-serif;
    font-size: 12px; font-weight: 500;
    margin: 0 0 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

.gfza-title {
    color: var(--wh);
    font-weight: 700; line-height: 1.15;
    margin: 0 0 14px;
    font-style: italic;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.gfza-sub {
    color: var(--w7);
    line-height: 1.65; margin: 0 0 26px;
    font-family: sans-serif; font-style: normal;
    max-width: 480px;
}

.gfza-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--gold); color: var(--dark);
    font-family: sans-serif; font-size: 13px; font-weight: 700;
    padding: 11px 22px; border-radius: 3px;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: background .2s, transform .18s;
    width: fit-content;
}
.gfza-btn:hover { background: var(--ye2); transform: translateY(-2px); color: var(--dark); text-decoration: none; }

/* Pfeile */
.gfza-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
    color: var(--wh); width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .2s;
}
.gfza-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.gfza-arrow--prev { left: 16px; }
.gfza-arrow--next { right: 16px; }

/* Dots – mittig unten */
.gfza-dots {
    position: absolute; bottom: 18px;
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 7px; z-index: 20;
}
.gfza-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); background: transparent;
    cursor: pointer; padding: 0; transition: background .22s, transform .18s;
}
.gfza-dot--active, .gfza-dot:hover {
    background: var(--gold); border-color: var(--gold); transform: scale(1.35);
}

/* Fortschrittsbalken */
.gfza-prog { position: absolute; bottom: 6px; left: 0; width: 100%; height: 3px; z-index: 25; }
.gfza-prog-bar { height: 100%; background: var(--gold); width: 0%; transition: width .1s linear; }

.gfza-empty { padding: 40px; text-align: center; color: #ccc; font-family: sans-serif; }

/* ── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .gfza-slide-inner {
        grid-template-columns: 1fr;
        padding: 28px 20px 56px;
        height: auto;
        min-height: clamp(360px, 90vw, 520px);
        gap: 20px;
        align-items: start;
        overflow-y: auto;
    }
    .gfza-slide-text {
        padding-right: 0;
        order: 1;
    }
    .gfza-slide-imgbox {
        width: 100%;
        height: 220px;
        border-radius: 6px;
        order: 2;
    }
    /* Mobil: Schrift deutlich größer */

    .gfza-badge { margin-bottom: 12px; }

    .gfza-arrow--prev { left: 10px; }
    .gfza-arrow--next { right: 10px; }
    .gfza-arrow { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .gfza-slide, .gfza-prog-bar { transition: none !important; }
}

/* Thumbnails */
.gfza-thumbs {
    position: absolute; right: 0; top: 0; bottom: 6px;
    width: clamp(100px,25%,200px); z-index: 10;
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.gfza-thumb {
    flex: 1; cursor: pointer; position: relative; overflow: hidden;
    transition: opacity .22s;
}
.gfza-thumb img,
.gfza-thumb > div { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfza-thumb-ov {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45); transition: background .2s;
}
.gfza-thumb--active .gfza-thumb-ov {
    background: rgba(0,0,0,.06);
    outline: 3px solid var(--gold); outline-offset: -3px;
}
.gfza-thumb:not(.gfza-thumb--active) { opacity: .7; }
.gfza-thumb-lbl {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.7); color: #fff;
    font-family: sans-serif; font-size: 9px; padding: 3px 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) { .gfza-thumbs { display: none; } }