/* ========================================
   CONTACT LIVE
======================================== */

.contact-live-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:35px;
}

/* ========================================
   UHREN
======================================== */

.world-clocks{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.clock-card{

    position:relative;
    overflow:hidden;

    min-height:150px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(240,248,242,.88)
        );

    border:1px solid rgba(0,92,71,.12);

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);

    padding:22px;

}

/* Bildbereich rechts */

.clock-card::after{

    content:"";

    position:absolute;

    inset:0;

    background-size:cover;
    background-position:center;

    opacity:.85;

    pointer-events:none;

      filter:
        brightness(.80)
        contrast(1.10)
        blur(.5px);
}

/* NEW YORK */

.ny::after{

    background-image:
    linear-gradient(
        to right,
        rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.90) 35%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.15) 75%,
    rgba(255,255,255,0) 100%
),
    url("../../images/clocks/new-york.avif");

}


/* ALTWIES */

.lu::after{

    background-image:
    linear-gradient(
        to right,
        rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.90) 35%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.15) 75%,
    rgba(255,255,255,0) 100%
),
    url("../../images/clocks/altwies-centre.avif");

}

/* TOKYO */

.tokyo::after{

    background-image:
    linear-gradient(
        to right,
        rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.90) 35%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.15) 75%,
    rgba(255,255,255,0) 100%
),
    url("../../images/clocks/japanese-pagoda.avif");

}

.clock-city{

    position:relative;
    z-index:5;

    font-size:2rem;

    font-weight:700;

    color:#d4af37;

    text-transform:uppercase;

    text-shadow:
        0 2px 4px rgba(0,0,0,.60),
        0 0 10px rgba(212,175,55,.35);

    letter-spacing:1px;
}
.clock-city img{

    width:36px;

    height:auto;

    margin-right:10px;
}

.clock-time{

    position:relative;
    z-index:2;

    margin-top:20px;

    font-size:3rem;
    font-weight:700;

    color:#005c47;

    text-shadow:
        0 2px 3px rgba(255,255,255,.25),
        0 3px 8px rgba(0,0,0,.25);
}

/* ========================================
   STATUS BOX
======================================== */

.availability-box{

    position:relative;

    background:
    linear-gradient(
        135deg,
        rgba(0,35,25,.92),
        rgba(0,15,10,.96)
    );

    backdrop-filter:blur(12px);

    border-radius:24px;

    border:1px solid rgba(212,175,55,.45);

    box-shadow:
        0 0 20px rgba(212,175,55,.12),
        0 12px 40px rgba(0,0,0,.35);

    padding:28px;

}
.availability-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;

    border-radius:24px;

    pointer-events:none;

    box-shadow:
        inset 0 0 0 1px rgba(255,215,100,.15),
        0 0 18px rgba(255,215,100,.12);
}

.availability-box::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:35px;
    height:35px;

    background:
linear-gradient(
    135deg,
    rgba(255,255,255,.95),
    rgba(230,230,230,.75)
);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%
        );

    box-shadow:
        -4px 4px 12px rgba(0,0,0,.30);

    z-index:20;
	
	border-left:
    1px solid rgba(255,255,255,.35);

border-bottom:
    1px solid rgba(255,255,255,.20);
}

.availability-box h3{

    color:#d4af37;

    text-shadow:
        0 0 8px rgba(212,175,55,.35);

    letter-spacing:2px;

}

.availability-box p{
    color:#e8e8e8;
}

.info-item{
 position:relative;
    display:flex;
    align-items:flex-start;

    gap:20px;

    margin-bottom:35px;
  padding-bottom:25px;

    border-bottom:
        1px solid rgba(212,175,55,.15);
}



.info-item:last-child{
    border-bottom:none;
}



.info-icon{

    width:58px;
    height:58px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.6);

    color:#d4af37;

    font-size:1.6rem;

    box-shadow:
        0 0 12px rgba(212,175,55,.15);
}
.info-text h4{

    color:white;

    margin:0 0 8px 0;

    font-size:1.0rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.info-text p{

    color:#d8d8d8;

    margin:0;
}

#status-dot{

    width:18px;
    height:18px;

    min-width:18px;

    margin-top:8px;

    border-radius:50%;
}
.online{

    background:#00d26a;

    animation:
        pulse-green 2.5s infinite;

    box-shadow:
        0 0 10px #00d26a;
}

@keyframes pulse-green {

    0%{
        box-shadow:
            0 0 0 0 rgba(0,210,106,.7);
    }

    70%{
        box-shadow:
            0 0 0 12px rgba(0,210,106,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(0,210,106,0);
    }
}

.offline{

    background:#ff4040;

    animation:
        pulse-red 2.5s infinite;

    box-shadow:
        0 0 10px #ff4040;
}

@keyframes pulse-red {

    0%{
        box-shadow:
            0 0 0 0 rgba(255,64,64,.7);
    }

    70%{
        box-shadow:
            0 0 0 12px rgba(255,64,64,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(255,64,64,0);
    }
}

#status-text{

    line-height:1.1;

    margin:0;
}
.status-header{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:35px;
}
#status-subtext{

    display:none;

    color:#d8d8d8;

    font-size:.95rem;

    font-style:italic;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

    .contact-live-grid{
        grid-template-columns:1fr;
    }

    .clock-time{
        font-size:2.3rem;
    }

}
/* CSS Document */