/*
Theme Name: Twenty Twenty-Four Child
Template:twentytwentyfour
Description: Mein indiveiduesse Child Theme für christian-frewer.de
Version:    1.1
 */

/* ==========================================================================
 *  1. GLOBALER CURSOR RESET
 *  Deaktiviert den Standard-System-Cursor auf der gesamten Seite.
 *  ========================================================================== */
* {
    cursor: none !important;
}

/* ==========================================================================
 *  2. DER HAUPT-CURSOR (PUNKT & SCHATTEN)
 *  Die Basis-Elemente, die per JavaScript bewegt werden.
 *  ========================================================================== */

/* Der schwarze Punkt */
.custom-cursor {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Übergänge für Form- und Farbänderungen */
    transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, border 0.3s ease;
}

/* Der Schatten unter dem Punkt */
.custom-cursor-shadow {
    width: 18px;
    height: 18px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999998;
    filter: blur(5px);
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* ==========================================================================
 * DER HEADER - FIXIERT
 * ========================================================================== */
.mein-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;

    /* Weiß mit 10% Deckkraft (0.1 steht für 10%) */
    background-color: rgba(255, 255, 255, 0.9) !important;

    /* Der neue Schatten-Effekt:
     *     0px (rechts), 4px (unten), 10px (Unschärfe), Farbe* (Schwarz mit 10% Deckkraft) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

    /* Ein leichter Blur-Effekt lässt es noch edler wirken (wie Milchglas) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Kaum sichtbare Linie unten */
}

/* WICHTIG: Damit die Bilder unter den Header rutschen */
body {
    padding-top: 0 !important;
}

/* Wir geben dem ersten Block der Seite einen Puffer,
 *  damit er nicht UNTER dem Header startet, sondern DARAN ANSCHLIESST */
.wp-site-blocks > *:first-child {
    padding-top: 70px !important; /* Hier die Höhe deines Headers + etwas Luft */
}



# auskommentiert am 2.4.26 ich möchte das der Header etwas transparent wird.
# diese folgende Einstellung macht den Header uneditierbar. ! und weiß!
#    position: fixed !important;
#    top: 0 !important;
#    left: 0 !important;
#    width: 100% !important;
#    z-index: 99999 !important; /* Bleibt über den Grid-Bildern */
#    background-color: #ffffff !important; /* Hier deine exakte Header-Farbe */
#    margin: 0 !important;
#}
#
#/* Platzhalter, damit die Seite nicht unter den Header rutscht */
#body {
#    padding-top: 80px !important; /* Passe dies an die tatsächliche Höhe an */
#}

/* ==========================================================================
 *  3. DIE "PILLE" (TEXT-MODUS FÜR NAV & ALLGEMEIN)
 *  ========================================================================== */

/* Die ausfahrende schwarze Pille */
.custom-cursor-text {
    position: absolute;
    left: 30px;
    background-color: black;
    color: white;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 600;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease, padding 0.4s ease;
}

/* Aktiv-Zustand für die Pille (wird per JS .active ausgelöst) */
.custom-cursor.active .custom-cursor-text {
    width: 160px;
    opacity: 1;
    padding: 0 15px;
}

/* Der passende Schatten für die ausfahrende Pille */
.custom-cursor-shadow::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    height: 30px;
    width: 0;
    border-radius: 20px;
    filter: blur(5px);
    opacity: 0;
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

.custom-cursor-shadow.active::after {
    width: 160px;
    opacity: 1;
}

/* --- Effekt für Christians Porträt --- */

/*  ==========================================================================
 *  Mein Foto
 *  Das Foto soll sich (mich) nicht verzerren
 *  ========================================================================== */

.mein-foto img {
    width: 100%;
    height: 100%; /* Oder eine feste Höhe, falls gewünscht */

    /* Das ist der entscheidende Teil: */
    object-fit: cover;

    /* Optional: Damit dein Gesicht immer im Fokus bleibt,
     *      auch wenn oben/unten beschnitten wird */
    object-position: center top;
}


/* 1. Grundzustand des Bildes (mit dem Anker) */
#portrait-christian img {
/* Sanfte Übergänge für alle Änderungen (Dauer 0.4s) */
transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;

/* Start-Schatten (sehr dezent) */
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);

/* Leicht abgerundete Ecken für moderne Optik */
border-radius: 4px;
}

/* 2. Zustand beim Drüberfahren (Hover) */
#portrait-christian img:hover {
/* Minimaler Zoom (3%) und leichtes Anheben (5px) */
transform: scale(1.01) translateY(-2px);

/* Tieferer, weicherer Schatten (Schwebe-Effekt) */
box-shadow: 0px 10px 20px rgba(0,0,0,0.15);

/* Ein ganz dezenter heller Schein/Glanz */
filter: brightness(1.03) contrast(1.01);

/* Cursor als Zeigefinger */
cursor: pointer;
}

/* Gezielte Vergrößerung, um die Fluchtlinie des Banners zu treffen */
#portrait-christian img {
/* Wir vergrößern das Bild auf 105%, um die 2-3mm Differenz auszugleichen */
width: 101% !important;

/* WICHTIG: Damit das Bild nicht nur nach rechts wächst, sondern mittig bleibt */
max-width: none !important;
margin-left: -0.5% !important; /* Schiebt das Bild wieder exakt in die Mitte */

height: auto;
display: block;
}

/* ==========================================================================
 *  SPEZIAL-ANIMATIONEN FÜR DEINE BEREICHE
 *  Diese Klassen werden per JS hinzugefügt, wenn man die Bereiche betritt.
 *  ========================================================================== */

/* --- A) SCHWING ANIMATION --- */
/* Der Cursor wird weicher, größer und pulsiert leicht */
.custom-cursor.is-schwing {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid black;
    animation: cursorPulse 2s infinite ease-in-out;
}

@keyframes cursorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); }
}

/* --- B) KI-MANAGER ANIMATION --- */
/* Technischer Look: Quadratisch mit abgerundeten Ecken und "Scan"-Effekt */
.custom-cursor.is-ki-manager {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 2px dashed black;
    border-radius: 12px;
}

/* --- C) LIEBHERR MODUS --- */
/* Klassisch, solide, vielleicht etwas größer und markanter */
.custom-cursor.is-liebherr {
    width: 30px;
    height: 30px;
    background-color: #ffda00; /* Liebherr Gelb als Akzent, falls gewünscht */
    border: 3px solid black;
}

/* Schiebt den Button einfach nach unten, ohne das Header-CSS zu stören */
.wp-block-button {
    margin-top: auto !important;
}
/* ==========================================================================
 *  LIEBHERR-PAGE:
 *  ========================================================================== */
/* allgemeine Einstellung */

.kran-container,
.handout-container,
.well-done-container {
    max-width: 1584px !important; /* Deine Standard-Seitenbreite */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}


/* ==========================================================================
 *  LIEBHERR-PAGE: obere Kruppe Hero-Bild und sechs Zwerge (kran-container)
 *  ========================================================================== */

/* Container für die Kran-Sektion */
.hero-foto-MK88-klasse,
.kran-container {
    width: 100%;
    max-width: 1584px;
    margin: 10px auto;
    display: flex;
    padding: 0 0px !important;
    flex-direction: column;
    /* Der Abstand zwischen Hero-Bild und der Bilderreihe darunter */
    gap: 15px !important;
}

.zwergen-fotos {
    max-width: 1584px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding: 0 0px !important; /* Angleichung an den verkleinerten Seitenabstand */
}

/* Die Spalten-Reihe der 6 Zwerge */
.kran-container .wp-block-columns {
    margin-top: 0 !important; /* Margin entfernen, da die Gruppe den Gap regelt */
    margin-bottom: 0 !important;
    /* Der Abstand ZWISCHEN den 6 Zwergen (horizontal) */
    gap: 10px !important;
}

/* Sicherstellen, dass die Spalten keine Standard-Abstände von WordPress haben */
.kran-container .wp-block-column {
    margin-left: 0 !important;
}

/* Die Bilder selbst */
.kran-container .wp-block-image img {
    border-radius: 4px;
    display: block; /* Verhindert kleine Abstände unter den Bildern */
}



/* Responsive Anpassung für 6 Bilder */
@media (max-width: 1024px) {
    .kran-container .wp-block-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Bilder pro Reihe auf dem Tablet */
    }
}

@media (max-width: 600px) {
    .kran-container .wp-block-columns {
        grid-template-columns: repeat(2, 1fr); /* 2 Bilder pro Reihe auf dem Handy */
    }
}

/* =================
 *  Die Überschrift
 *  ================ */
/* Der Satz jetzt als "Outro" UNTER dem Bild */
.hero-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 15px;

    /* TAUSCH DER ABSTÄNDE: */
    margin-top: 5px !important;    /* Kleiner, feiner Abstand zum Bild darüber */
    margin-bottom: 5px !important; /* Großer Abstand zum nächsten Sektor (nach der gelben Linie) */
}

/* "Der Mobilbaukran" - Groß und technisch */
.main-subject {
    font-size: 28px; /* Etwas größer, da es jetzt die Haupt-Überschrift ist */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #33333;
    line-height: 1;
}

/* Der emotionale Teil - Dezent daneben */
.sub-text {
    font-size: 18px;
    font-weight: 300;
    color: #33333;
    font-style: italic;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .hero-intro {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    .main-subject { font-size: 24px; }
    .sub-text { font-size: 16px; }
}


/* LIEBHERR BRANDING LINIEN
 * Trennt die Sektionen Krantechnik, Übergabe und Well Done mit der Akzentfarbe */
.kran-container,
/* .handout-container, */
.well-done-container {
    border-top: 2px solid #ffcd00 !important;   /* Das markante Liebherr-Gelb */
    border-bottom: 2px solid #ffcd00 !important;
    padding: 30px 0 !important;                /* Etwas mehr Luft zum Atmen */
    margin-bottom: 60px !important;            /* Abstand zur nächsten Sektion */
    display: flex;                             /* Beibehaltung deiner Flex-Struktur */
    flex-direction: column;
}


/* ==========================================================================
 * 2. WELL-DONE CONTAINER (FLIP GERETTET)
 * ======================================================================= */

.well-done-container {
    perspective: 2000px !important;
    position: relative;
    max-width: 1584px !important;
    margin: 60px auto !important;
    width: 100% !important;
    display: block;
    line-height: 0;
}

/* Wir adressieren die Well-Done Bilder EXKLUSIV über ihre eigenen Klassen */
.well-done-container .well_done_front,
.well-done-container .well_done_back {
    width: 100% !important;
    height: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* Hier bleibt die lange, edle Flip-Zeit erhalten */
    transition: transform 1.7s cubic-bezier(0.22, 1, 0.46, 1), box-shadow 1.7s !important;
}

.well_done_back {
    position: absolute !important;
    top: 0;
    left: 0;
    transform: rotateY(180deg) !important;
}

.well_done_front {
    position: relative !important;
    transform: rotateY(0deg) !important;
}

/* Der Flip-Befehl */
.well-done-container.show-back .well_done_front {
    transform: rotateY(-180deg) !important;
}

.well-done-container.show-back .well_done_back {
    transform: rotateY(0deg) !important;
}

/* --- FIX FÜR DEN FLIP (Stabil & Beweglich) --- */

/* 1. Den Container stabilisieren */
.well-done-container {
    perspective: 2000px !important;
    position: relative;
    max-width: 1584px !important;
    margin: 60px auto !important;
    width: 100% !important;
    /* Damit das absolute Bild nicht "unten rausguckt" */
    display: block;
    line-height: 0; /* Verhindert den Geister-Spalt unter Bildern */
}

/* 2. Die Bilder: Beide absolut übereinander */
.well-done-container .well_done_front,
.well-done-container .well_done_back {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 1.7s cubic-bezier(0.22, 1, 0.46, 1),
    box-shadow 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. Die Positionierung - Das ist der Trick gegen das Hüpfen */
.well_done_back {
    position: absolute !important;
    top: 0;
    left: 0;
    transform: rotateY(180deg) !important;
    z-index: 1;
}

.well_done_front {
    /* Das vordere Bild bleibt "relative", um dem Container die Höhe zu geben */
    position: relative !important;
    z-index: 2;
    transform: rotateY(0deg) !important;
}

/* 4. Der Flip-Befehl (Klasse wird per Klick/Hover hinzugefügt) */
.well-done-container.show-back .well_done_front {
    transform: rotateY(-180deg) !important;
}

.well-done-container.show-back .well_done_back {
    transform: rotateY(0deg) !important;
    z-index: 3;
}


/* ==========================================================================
 * KI-MANAGER BRANDING LINIEN
 * ========================================================================== */
.ki-manager-container-top {
    /*    border-top: 2px solid #7d90b6 !important;    /* Das dezente KI-Manager Blau */
    /*   border-bottom: 2px solid #7d90b6 !important;
     *  m ax-width: 1584px !important;                                         *
     *  margin-left: auto !important;  /* Zentriert die Gruppe */
     margin-right: auto !important; /* Zentriert die Gruppe */

     /* Deine restlichen Werte */
     margin-bottom: 60px !important;
     display: flex;
     flex-direction: column;
     width: 100%; /* Stellt sicher, dass sie bis zur max-width aufspannt */
     align-items: center !important; /* DAS zentriert die Unter-Stapel (und damit die Linien) */

}

.ki-manager-container {
    border-top: 2px solid #7d90b6 !important;    /* Das dezente KI-Manager Blau */
    border-bottom: 2px solid #7d90b6 !important;
    padding: 30px 0 !important;                 /* Luft zum Atmen */
    margin-bottom: 30px !important;             /* Abstand zur nächsten Sektion */
    display: flex;                              /* Flex-Struktur beibehalten */
    flex-direction: column;

    /* Diese Zeilen sorgen für die volle Breite im Stapel: */
    width: 100% !important;           /* Dehnt die Gruppe auf 100% des Vaters aus */
    max-width: none !important;        /* Hebt eventuelle Beschränkungen auf */
    align-self: stretch !important;    /* Zwingt die Gruppe, sich im Stapel voll aufzuspannen */
}

/* ki-manager-contain-ohne Linie ... aber mit der selben Ausrichtung */
.ki-manager-container-ol {
    /* border-top: 2px solid #7d90b6 !important;    /* Das dezente KI-Manager Blau */
    /* border-bottom: 2px solid #7d90b6 !important; */
    /* padding: 30px 0 !important;                 /* Luft zum Atmen */
    * margin-bottom: 30px !important;             /* Abstand zur nächsten Sektion */
    display: flex;                              /* Flex-Struktur beibehalten */
    flex-direction: column;

    /* Diese Zeilen sorgen für die volle Breite im Stapel: */
    width: 100% !important;           /* Dehnt die Gruppe auf 100% des Vaters aus */
    max-width: none !important;        /* Hebt eventuelle Beschränkungen auf */
    align-self: stretch !important;    /* Zwingt die Gruppe, sich im Stapel voll aufzuspannen */
}






/* Container für die Story-Sektion */
.ki-manager-story {
    gap: 40px !important; /* Abstand zwischen den Spalten */
    align-items: flex-start !important;
}

/* Stil für die Bilder in der Story */
.ki-manager-story img {
    border-radius: 8px; /* Leicht abgerundete Ecken für modernen Look */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtiler Schatten */
    transition: transform 0.3s ease;
    margin-bottom: 20px !important;
    width: 100%;
    height: 250px; /* Einheitliche Höhe für alle Bilder */
    object-fit: cover; /* Schneidet Bilder sauber zu, ohne sie zu quetschen */
}

/* Hover-Effekt: Zeigt Dynamik */
.ki-manager-story img:hover {
    transform: translateY(-5px);
}

/* Text-Styling innerhalb der Spalten */
.ki-manager-story p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333333; /* Dein Anthrazit */
}



/* ==========================================================================
 * SCHWING-Page: Nur spezifische Bereiche in Graustufen
 * ======================================================================= */

/* 0. DIE GRÜNEN LINIEN (Branding)
 *  Packe diese Klasse in JEDE Gruppe oder Galerie, die oben/unten grün sein soll */
.schwing-kachel-optik,
.ProjektleiterGalerie,
.Sales-Manager-Export,
/* .Baustellen-Bereich, */
.Mischanlagen-Galerie {
    border-top: 2px solid #00A34B !important;
    border-bottom: 2px solid #00A34B !important;
    padding: 25px 0 !important;
    margin-bottom: 60px !important;
    display: block;
}



/* 1. Graustufen für ALLE Schwing-Bereiche */
.ProjektleiterGalerie img,
.schwing-teaser img,
.Sales-Manager-Export img,
.Baustellen-Bereich img,
.Mischanlagen-Galerie img,
.Abschluss-Foto img {
    filter: grayscale(100%);
    transition: filter 0.6s ease, transform 0.6s ease;
    cursor: pointer;
}

/* 2. Hover-Effekt (Farbe & Zoom) für diese Bereiche */
.ProjektleiterGalerie img:hover,
.schwing-teaser img:hover,
.Sales-Manager-Export img:hover,
.Baustellen-Bereich img:hover,
.Mischanlagen-Galerie img:hover,
.Abschluss-Foto img:hover {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
    z-index: 10;
}

/* 3. AUSNAHME: S 61 SX (Immer Farbe) */
.S-61-SX img {
    filter: grayscale(0%) !important;
    transform: none !important;
}






/* ==========================================================================
 *  5. NAVIGATION HOVER EFFEKT (UNTERSTREICHUNG) Allgemein auf allen Seiten
 *  ========================================================================== */
.websitetitel a,
.wp-block-navigation-item__content,
.mail-to a {
    position: relative !important;
    text-decoration: none !important;
    display: inline-block;
}
.websitetitel a::after,
.wp-block-navigation-item__content::after,
.mail-to a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.6s ease-in-out;
}
.websitetitel a:hover::after,
.wp-block-navigation-item__content:hover::after,
.mail-to a:hover::after {
    width: 100% !important;
}

/* Banner-Fix für volle Sichtbarkeit */
.wp-block-image.size-full img,
.wp-block-cover img {
    width: 100% !important;
    height: auto !important;
    max-width: 1584px; /* Deine Originalbreite als Limit */
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain !important;
}

/* Verhindert, dass Container (wie Cover-Blocks) eine feste Höhe erzwingen */
.wp-block-cover, .wp-block-image {
    height: auto !important;
    min-height: 0 !important;
}

/* Vergrößerung des Briefumschlag-Icons ohne Auswirkung auf die Header-Höhe */
.mail-to a {
    display: inline-block;        /* Notwendig, damit transform greift */
    letter-spacing: 1px !important;
    transform: scale(2.5);        /* Vergrößert das Icon um 350% */
    transform-origin: center;     /* Vergrößerung erfolgt aus der Mitte */
    text-decoration: none;
    transition: transform 0.3s ease; /* Geschmeidiger Übergang */
}

/* Optional: Ein kleiner zusätzlicher Effekt beim Drüberfahren */
.mail-to a:hover {
    transform: scale(2.7);        /* Wird beim Hover noch ein Stück größer */
}

/* Vergrößerung des Websitetitels ohne Auswirkung auf die Header-Höhe */
.websitelogo a {
    display: inline-block;        /* Notwendig, damit transform greift */
    letter-spacing: 1px !important;
    transform: scale(1.3);        /* Vergrößert 50% */
    transform-origin: center;     /* Vergrößerung erfolgt aus der Mitte */
    text-decoration: none;
    transition: transform 0.3s ease; /* Geschmeidiger Übergang */
}

/* 1. Den Container-Block positionieren */
.websitetitel {
    margin-right: auto !important; /* Schiebt den gesamten Block nach links */
    margin-left: 40px !important;  /* Präziser Abstand zum Logo */
    display: flex !important;      /* Hilft bei der Ausrichtung */
}

/* 2. Den Text im Link aufwerten */
.websitetitel a {
    display: inline-block;
    letter-spacing: 1px !important;
    transform: scale(1.25);        /* Deine 25% Vergrößerung */
    transform-origin: left center; /* Vergrößert nach rechts, bleibt links bündig */
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* ==========================================================================
 *  Die HTML-Logik des sanften Wechsels
 * ========================================================================== */
/* Standardzustand: Seite ist unsichtbar */
body {
    opacity: 1; /* Testweise auf 1 gesetzt */
    transition: opacity 0.5s ease-in-out;
}

/* Klasse für die sichtbare Seite */
body.page-loaded {
    opacity: 1;
}

/* Klasse für das Ausfaden beim Verlassen */
body.fade-out {
    opacity: 0;
}
/* ==========================================================================
 *  Das Overlay ! Also das "Gefäß" für das große Bild
 * ========================================================================== */
/* 1. Der Grundzustand: Absolut unsichtbar und klick-durchlässig */
#fido-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;            /* Immer Flex, damit Zentrierung greift */
align-items: center;
justify-content: center;
z-index: 2000000;         /* Höher als alles andere */
opacity: 0;               /* Unsichtbar */
pointer-events: none;     /* Maus klickt durch die Lightbox durch */
transition: opacity 0.3s ease;
}

/* 2. Der aktive Zustand */
#fido-lightbox.active {
opacity: 1;               /* Sichtbar werden */
pointer-events: auto;     /* Jetzt Klicks fangen zum Schließen */
}

/* 3. Das Bild */
#fido-lightbox img {
max-width: 90%;
max-height: 90%;
transform: scale(0.9);
transition: transform 0.3s ease;
}

#fido-lightbox.active img {
transform: scale(1);
}