/*
 * Foto-Effekt: handgemalter Rahmen plus abgerissene Bildkante.
 *
 * Diese Datei wird nur geladen, wenn unter Einstellungen -> GFK-Tag Team der
 * Haken "Foto-Effekt" gesetzt ist. Ohne sie sind die Variablen, die das Plugin
 * an jedem Bildcontainer ausgibt, wirkungslos.
 *
 * Die Masken sind PNGs mit Alphakanal, exportiert aus den Vorlagen in _src/.
 * mask-composite: subtract schneidet die Rissform aus dem Bild heraus, der
 * Rahmen liegt als eingefaerbte Flaeche mit Rahmenmaske darueber.
 *
 * WICHTIG (seit 5.12.0): Die Riss-Maske sitzt auf dem BILD, nicht auf dem
 * Container. Vorher wurde der ganze Kasten maskiert, dadurch hat der Riss oben
 * auch die obere Kante des gemalten Rahmens weggefressen und der Name musste
 * ueber der Risskante ausweichen, also bei jeder Person auf einer anderen
 * Hoehe. Jetzt bleibt der Rahmen unversehrt und das Namensfeld sitzt fest.
 *
 * Die vier Farben stammen aus Ulrikes Canva-Flyern (Orange und Gelb sind aus
 * den SVGs ausgelesen, Gruen und Pink sind noch geschaetzt).
 */

:root{
    --gfktd-fx-c1:#ff914d; /* orange, aus Flyer 1.svg/2.svg */
    --gfktd-fx-c2:#ffde59; /* gelb,   aus Flyer 1.svg       */
    --gfktd-fx-c3:#8bc53f; /* gruen,  geschaetzt            */
    --gfktd-fx-c4:#ee2f8f; /* pink,   geschaetzt            */

    --gfktd-fx-riss-unten:url("fx-riss-unten.png");
    --gfktd-fx-riss-unten-spiegel:url("fx-riss-unten-spiegel.png");
    --gfktd-fx-riss-oben:url("fx-riss-oben.png");
    --gfktd-fx-riss-oben-spiegel:url("fx-riss-oben-spiegel.png");
    --gfktd-fx-rahmen:url("fx-rahmen.png");
}

/* ------------------------------------------------------------------
 * Der Container traegt nur die Variablen. Maskiert wird das Bild.
 * ------------------------------------------------------------------ */
.gfktd-gallery-wrap .gfktd-gallery-item,
.gfktd-cards .gfktd-cards-photo,
.gfktd-profile-card .gfktd-card-photo,
.gfktd-single-hero .gfktd-single-photo{
    --gfktd-fx-h1:0%;
    --gfktd-fx-h2:0%;
    --gfktd-fx-m1:none;
    --gfktd-fx-m2:none;
    --gfktd-fx-scale:1;
    --gfktd-fx-tear1:calc(var(--gfktd-fx-h1) * var(--gfktd-fx-scale));
    --gfktd-fx-tear2:calc(var(--gfktd-fx-h2) * var(--gfktd-fx-scale));

    position:relative;
    /*
     * overflow:hidden beschneidet den Rahmen auf den Kasten. Frueher hat das
     * die Maske miterledigt (Ebene 1 war genau 100% x 100% gross); ohne diese
     * Zeile stand der Rahmen mit seinen vollen inset:-5% draussen und wurde
     * dadurch doppelt so breit wie gedacht.
     */
    overflow:hidden;
    border-radius:0;
}

/*
 * Gemeinsame Maske. Ebene 1 ist die volle Flaeche, Ebene 2 der Riss unten,
 * Ebene 3 der optionale Riss oben. subtract zieht die Risse ab. Browser ohne
 * mask-composite addieren stattdessen und zeigen das Bild unveraendert, der
 * Rahmen bleibt trotzdem sichtbar.
 */
.gfktd-gallery-wrap .gfktd-gallery-item > img,
.gfktd-gallery-wrap .gfktd-gallery-item > picture,
.gfktd-gallery-wrap .gfktd-gallery-item > .gfktd-img-placeholder,
.gfktd-gallery-wrap .gfktd-gallery-item::after,
.gfktd-cards .gfktd-cards-photo > img,
.gfktd-cards .gfktd-cards-photo > picture,
.gfktd-cards .gfktd-cards-photo > .gfktd-img-placeholder,
.gfktd-profile-card .gfktd-card-photo > img,
.gfktd-profile-card .gfktd-card-photo > picture,
.gfktd-profile-card .gfktd-card-photo > .gfktd-img-placeholder,
.gfktd-single-hero .gfktd-single-photo > img,
.gfktd-single-hero .gfktd-single-photo > picture{
    -webkit-mask-image:linear-gradient(#000,#000),var(--gfktd-fx-m1),var(--gfktd-fx-m2);
            mask-image:linear-gradient(#000,#000),var(--gfktd-fx-m1),var(--gfktd-fx-m2);
    -webkit-mask-size:100% 100%,100% var(--gfktd-fx-tear1),100% var(--gfktd-fx-tear2);
            mask-size:100% 100%,100% var(--gfktd-fx-tear1),100% var(--gfktd-fx-tear2);
    -webkit-mask-position:top,bottom,top;
            mask-position:top,bottom,top;
    -webkit-mask-repeat:no-repeat,no-repeat,no-repeat;
            mask-repeat:no-repeat,no-repeat,no-repeat;
    -webkit-mask-composite:source-out,source-over;
            mask-composite:subtract,add;
}

/*
 * Ohne overflow:hidden koennte das Bild den Container ueber sein
 * aspect-ratio hinaus aufziehen (height:100% wird dann zu auto und das
 * Seitenverhaeltnis der Datei gewinnt). Absolut positioniert bleibt es aus
 * dem Fluss, der Container behaelt sein 4:5. Die Einzelseite ist bewusst
 * nicht dabei, dort gibt das Bild die Hoehe vor.
 */
.gfktd-gallery-wrap .gfktd-gallery-item > img,
.gfktd-gallery-wrap .gfktd-gallery-item > .gfktd-img-placeholder,
.gfktd-cards .gfktd-cards-photo > img,
.gfktd-cards .gfktd-cards-photo > .gfktd-img-placeholder,
.gfktd-profile-card .gfktd-card-photo > img,
.gfktd-profile-card .gfktd-card-photo > .gfktd-img-placeholder{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* Rahmen. Die Galerie belegt ::after bereits mit ihrem Verlauf. */
.gfktd-gallery-wrap .gfktd-gallery-item::before,
.gfktd-cards .gfktd-cards-photo::after,
.gfktd-profile-card .gfktd-card-photo::after,
.gfktd-single-hero .gfktd-single-photo::after{
    content:"";
    position:absolute;
    inset:var(--gfktd-fx-inset,-5%);
    background:var(--gfktd-fx-color,var(--gfktd-fx-c1));
    transform:rotate(var(--gfktd-fx-tilt,0deg));
    -webkit-mask:var(--gfktd-fx-rahmen) center/100% 100% no-repeat;
            mask:var(--gfktd-fx-rahmen) center/100% 100% no-repeat;
    pointer-events:none;
    z-index:5;
}

/* ------------------------------------------------------------------
 * Galerie. Der Name liegt im Bild. Er steht bei allen Karten auf
 * derselben Hoehe, dicht ueber der Risskante, damit die Gesichter frei
 * bleiben. Deshalb faellt der Riss hier flach aus: --gfktd-fx-scale .28
 * begrenzt ihn auf hoechstens 12,6 Prozent der Kartenhoehe (45 * 0,28),
 * und genau darueber liegt --gfktd-fx-namerow.
 * ------------------------------------------------------------------ */
.gfktd-gallery-wrap .gfktd-gallery-item{
    --gfktd-fx-scale:.28;
    --gfktd-fx-namerow:calc(13% + 10px);
    border:0;
    box-shadow:none;
}
.gfktd-gallery-wrap .gfktd-gallery-grid{gap:34px}
@media(max-width:640px){.gfktd-gallery-wrap .gfktd-gallery-grid{gap:22px}}

.gfktd-gallery-wrap .gfktd-gallery-item::after{
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,transparent 34%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.58) 100%);
}
.gfktd-gallery-wrap .gfktd-gallery-label{bottom:var(--gfktd-fx-namerow)}
.gfktd-gallery-wrap .gfktd-gallery-overlay{padding-bottom:calc(var(--gfktd-fx-namerow) + 4px)}

/* ------------------------------------------------------------------
 * Kartenraster. Der Name steht unter dem Bild, der Riss darf voll wirken.
 * ------------------------------------------------------------------ */
.gfktd-cards .gfktd-cards-photo,
.gfktd-cards .gfktd-cards-photo img,
.gfktd-cards .gfktd-cards-photo .gfktd-img-placeholder{border-radius:0}
.gfktd-cards .gfktd-cards-grid{gap:38px 32px}

/* ------------------------------------------------------------------
 * Einzelseite.
 * ------------------------------------------------------------------ */
.gfktd-single-hero .gfktd-single-photo{--gfktd-fx-scale:.75}
.gfktd-single-hero .gfktd-single-photo img{border-radius:0;box-shadow:none}

/* Wer Bewegung reduziert, bekommt den geneigten Rahmen gerade. */
@media(prefers-reduced-motion:reduce){
    .gfktd-gallery-wrap .gfktd-gallery-item::before,
    .gfktd-cards .gfktd-cards-photo::after,
    .gfktd-profile-card .gfktd-card-photo::after,
    .gfktd-single-hero .gfktd-single-photo::after{transform:none}
}