/* ================================================================
   iMac Mockup Block
   Modi: focal_point | autoscroll | slider
   ================================================================ */

.kss_imac_mockup_for_case_study {
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
}

.kss-imac {
width: min(900px, 100%);
display: flex;
flex-direction: column;
align-items: center;
}

/* ----------------------------------------------------------------
   Monitor
   ---------------------------------------------------------------- */

.kss-imac__monitor {
position: relative;
width: 100%;
background: linear-gradient(160deg, #e4e6ea 0%, #d0d4da 40%, #bec2ca 100%);
border-radius: 16px 16px 0 0;
padding: 3% 2.2% 0;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 20px 56px rgba(0, 0, 0, 0.38);
}

/* Kamera */
.kss-imac__camera {
position: absolute;
top: 11px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #5e6068 0%, #101014 72%);
z-index: 2;
}

/* ----------------------------------------------------------------
   Screen (fester 16:9-Rahmen, overflow:hidden)
   ---------------------------------------------------------------- */

.kss-imac__screen {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #0b0b0d;
overflow: hidden;
}

/* ----------------------------------------------------------------
   Modus 1 – Fokus (statisches Einzelbild, object-fit via bg-pos)
   ---------------------------------------------------------------- */

.kss-imac__content--focal {
width: 100%;
height: 100%;
background-image: var(--kss-imac-img);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: var(--kss-imac-pos, center top);
}

/* ----------------------------------------------------------------
   Modus 2 – Auto-Scroll (langes Bild scrollt durch)
   ---------------------------------------------------------------- */

.kss-imac__content--scroll {
width: 100%;
height: 100%;
background-image: var(--kss-imac-img);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center top;
animation: kss-imac-scroll var(--kss-imac-scroll-dur, 14s) ease-in-out infinite alternate;
}

@keyframes kss-imac-scroll {
from { background-position: center top; }
to   { background-position: center bottom; }
}

/* ----------------------------------------------------------------
   Modus 3 – Slider (Slick)
   ---------------------------------------------------------------- */

.kss-imac__slider {
width: 100%;
height: 100%;
}

/* Slick überschreibt height – wir zwingen es auf 100% des Screens */
.kss-imac__slider.slick-initialized,
.kss-imac__slider .slick-list,
.kss-imac__slider .slick-track,
.kss-imac__slider .slick-slide,
.kss-imac__slider .slick-slide > div {
height: 100%;
}

.kss-imac__slide {
height: 100%;
}

.kss-imac__slide-img {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

/* Slick Dots innerhalb des Screens – unten mittig */
.kss-imac__slider .slick-dots {
bottom: 8px;
}

.kss-imac__slider .slick-dots li button::before {
color: #fff;
opacity: 0.65;
font-size: 8px;
}

.kss-imac__slider .slick-dots li.slick-active button::before {
opacity: 1;
color: #fff;
}

/* Slick Arrows */
.kss-imac__slider .slick-prev,
.kss-imac__slider .slick-next {
z-index: 10;
}

.kss-imac__slider .slick-prev { left: 6px; }
.kss-imac__slider .slick-next { right: 6px; }

.kss-imac__slider .slick-prev::before,
.kss-imac__slider .slick-next::before {
color: #fff;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ----------------------------------------------------------------
   Placeholder
   ---------------------------------------------------------------- */

.kss-imac__placeholder {
width: 100%;
height: 100%;
min-height: 160px;
display: grid;
place-items: center;
padding: 20px;
text-align: center;
color: #d1d1d6;
font-size: 14px;
background: linear-gradient(145deg, #141416 0%, #0e0e11 100%);
}

/* ----------------------------------------------------------------
   Chin (untere Leiste mit Apple-Logo)
   ---------------------------------------------------------------- */

.kss-imac__chin {
width: calc(100% + 4.4%);
margin-left: -2.2%;
height: clamp(30px, 5vw, 58px);
background: linear-gradient(180deg, #d2d6dc 0%, #c0c4cc 50%, #b0b5be 100%);
border-radius: 0 0 14px 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.kss-imac__apple-logo {
width: clamp(13px, 1.8vw, 20px);
height: clamp(13px, 1.8vw, 20px);
display: block;
flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Standfuss: Hals + Basis
   ---------------------------------------------------------------- */

.kss-imac__stand {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.kss-imac__neck {
width: clamp(40px, 7%, 72px);
height: clamp(40px, 7vw, 80px);
background: linear-gradient(90deg, #b0b4bc 0%, #d2d6dc 40%, #c8ccd4 60%, #b4b8c0 100%);
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.kss-imac__base {
width: clamp(180px, 44%, 440px);
height: clamp(10px, 2vw, 22px);
border-radius: 50% / 100%;
background: linear-gradient(180deg, #c4c8d0 0%, #a8acb6 60%, #98a0aa 100%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}