/* ═══════════════════════════════════════════════════════════════
   gwp-flipboxen.css  –  passend zum GWP-Design
   Heller Hintergrund, GWP-Blau (#0b5394 / #1a73b5), s/w Fotos
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --gf-w:           280px;   /* Kartenbreite  */
    --gf-h:           360px;   /* Kartenhöhe    */
    --gf-radius:      4px;

    --gf-speed:       0.48s;
    --gf-ease:        cubic-bezier(0.4, 0, 0.2, 1);

    /* Vorderseite: Foto mit dunklem Overlay unten */
    --gf-overlay:     linear-gradient(
                        to bottom,
                        transparent 45%,
                        rgba(0, 0, 0, 0.72) 100%
                      );

    /* Rückseite: heller GWP-Stil */
    --gf-back-bg:     #1a73b5;   /* GWP-Blau      */
    --gf-back-text:   #ffffff;
    --gf-back-sub:    rgba(255,255,255,0.82);
    --gf-accent-line: rgba(255,255,255,0.30);

    --gf-name-front:  #ffffff;
    --gf-pos-front:   rgba(255,255,255,0.88);

    --gf-shadow:      0 2px 12px rgba(0,0,0,0.18);
    --gf-shadow-h:    0 6px 20px rgba(0,0,0,0.28);
}

/* ── Abschnittsgruppe ────────────────────────────────────────── */
.gwp-flipteam__group {
    margin-bottom: 2.5rem;
}

/* ── Gruppenüberschrift erbt Theme-Stil ──────────────────────── */
.gwp-flipteam__group-title {
    /* Keine eigenen Farben – erbt vom Theme (h2) */
    margin-bottom: 1.2rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #1a73b5;
}

/* ── Flex-Grid ───────────────────────────────────────────────── */
.gwp-flipteam__grid {
    display:     flex;
    flex-wrap:   wrap;
    gap:         16px;
    align-items: flex-start;
}

/* ── Card-Wrapper ────────────────────────────────────────────── */
.gwp-flip {
    width:       var(--gf-w);
    height:      var(--gf-h);
    perspective: 800px;
    cursor:      pointer;
    flex-shrink: 0;
    outline:     none;
    -webkit-tap-highlight-color: transparent;
}

.gwp-flip:focus-visible {
    outline:        2px solid #1a73b5;
    outline-offset: 3px;
    border-radius:  var(--gf-radius);
}

/* ── Drehendes Innen-Element ─────────────────────────────────── */
.gwp-flip__inner {
    position:        relative;
    width:           100%;
    height:          100%;
    transform-style: preserve-3d;
    transition:      transform var(--gf-speed) var(--gf-ease);
    will-change:     transform;
}

/* Hover nur auf Geräten mit echter Maus */
@media (hover: hover) {
    .gwp-flip:hover .gwp-flip__inner {
        transform: rotateY(180deg);
    }
}

/* Klick-Toggle (Touch + Keyboard) */
.gwp-flip.is-flipped .gwp-flip__inner {
    transform: rotateY(180deg);
}

/* ── Gemeinsame Seiten-Basis ─────────────────────────────────── */
.gwp-flip__front,
.gwp-flip__back {
    position:                    absolute;
    inset:                       0;
    border-radius:               var(--gf-radius);
    backface-visibility:         hidden;
    -webkit-backface-visibility: hidden;
    overflow:                    hidden;
    box-shadow:                  var(--gf-shadow);
    transition:                  box-shadow var(--gf-speed);
}

.gwp-flip:hover .gwp-flip__front,
.gwp-flip:hover .gwp-flip__back,
.gwp-flip.is-flipped .gwp-flip__front,
.gwp-flip.is-flipped .gwp-flip__back {
    box-shadow: var(--gf-shadow-h);
}

/* ══ VORDERSEITE ════════════════════════════════════════════════ */
.gwp-flip__front {
    background:      #c8c8c8;  /* Fallback wenn kein Foto */
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    align-items:     stretch;
}

/* Foto – schwarz/weiß, beim Hover leicht aufhellen */
.gwp-flip__front > img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top center;
    filter:          grayscale(100%);
    transition:      filter var(--gf-speed) var(--gf-ease),
                     transform var(--gf-speed) var(--gf-ease);
}

@media (hover: hover) {
    .gwp-flip:hover .gwp-flip__front > img {
        filter:    grayscale(60%);
        transform: scale(1.04);
    }
}

/* Verlauf über Foto */
.gwp-flip__front::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     var(--gf-overlay);
    pointer-events: none;
    z-index:        1;
}

/* Platzhalter ohne Foto */
.gwp-flip__no-img {
    position: absolute;
    inset:    0;
    background: linear-gradient(160deg, #c8d8e8 0%, #8fafc8 100%);
}

/* Textbereich über Foto */
.gwp-flip__front-content {
    position:   relative;
    z-index:    2;
    padding:    8px 10px 10px;
    background: rgba(51, 153, 204, 1);

}

.gwp-flip__name {
    margin:      0;
    font-size:   1.4em;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--gf-name-front);
    word-break:  break-word;
}

.gwp-flip__position {
    margin:         3px 0 0;
    font-size:      .9em;
    line-height:    1.3;
    color:          var(--gf-name-front);
}

/* ══ RÜCKSEITE ══════════════════════════════════════════════════ */
.gwp-flip__back {
    background:      rgba(51, 153, 204, 1);
    transform:       rotateY(180deg);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     flex-start;
    padding:         14px 12px;
}

.gwp-flip__back-name {
    margin:        0 0 2px;
    font-size:     1.2em;
    font-weight:   700;
    color:         var(--gf-back-text);
    line-height:   1.25;
    word-break:    break-word;
}

.gwp-flip__back-position {
    margin:        0 0 12px;
    font-size:     .9em;
    color:         var(--gf-back-sub);
    line-height:   1.3;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gf-accent-line);
    width:         100%;
}

/* ── Kontakt-Links ───────────────────────────────────────────── */
.gwp-flip__contacts {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    width:          100%;
}

.gwp-flip__contact {
    display:         flex;
    align-items:     flex-start;
    gap:             6px;
    font-size:       1em;
    color:           var(--gf-back-sub);
    text-decoration: none;
    line-height:     1.35;
    transition:      color .15s;
    word-break:      break-all;
}

.gwp-flip__contact:hover,
.gwp-flip__contact:focus {
    color: var(--gf-back-text);
    text-decoration: underline;
}

.gwp-flip__contact svg {
    flex-shrink: 0;
    margin-top:  1px;
    opacity:     .85;
}


/* ── "Mehr Info"-Link ────────────────────────────────────────── */
.gwp-flip__more {
    display:         inline-block;
    margin-top:      12px;
    font-size:       1em;
    font-weight:     600;
    color:           rgba(255,255,255,0.70);
    text-decoration: none;
    border:          1px solid rgba(255,255,255,0.30);
    border-radius:   3px;
    padding:         3px 9px;
    transition:      color .15s, background .15s, border-color .15s;
    align-self:      flex-start;  /* linksbündig */
}

.gwp-flip__more:hover,
.gwp-flip__more:focus {
    color:            #ffffff;
    background:       rgba(255,255,255,0.15);
    border-color:     rgba(255,255,255,0.60);
    text-decoration:  none;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gwp-flipteam__grid {
        gap: 12px;
    }
    :root {
        --gf-w: calc(50% - 6px);
        --gf-h: 210px;
    }
}

@media (max-width: 380px) {
    :root { --gf-w: 100%; --gf-h: 240px; }
}