/* =========================================================
   yourpage24 – Studio-Block "Cinematic"
   Nutzt die Variablen aus style.css (Petrol, Türkis, DM Sans).
   Die Schrift für Zähler und Zeitcode ist die System-Monospace, nichts wird geladen.
   ========================================================= */

.cin-sec { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(90px, 10vw, 140px) var(--pad) 60px; }
.cin-sec::before { /* kühles Licht hinter der Überschrift */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 140%; height: 520px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 150, 150, 0.22), transparent 62%); pointer-events: none;
}

.cin-head { text-align: center; }
.cin-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(2, 14, 18, 0.6);
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice-soft);
}
.cin-rec { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 10px rgba(255, 90, 90, 0.8); }
@media (prefers-reduced-motion: no-preference) { .cin-rec { animation: cin-blink 1.8s steps(1, end) infinite; } }
@keyframes cin-blink { 50% { opacity: 0.25; } }
.cin-hint { display: none; margin: 14px 0 0; font: 400 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .cin-hint { display: block; } }

/* ---------- Die drei Karten ---------- */
.cin-reel { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.cin-reel > li { grid-column: span 3; display: flex; }
.cin-reel > li:first-child { grid-column: 1 / -1; }
.cin-card {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card), #041a22;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transition: border-color 250ms var(--ease-out), transform 350ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .cin-card:hover { border-color: rgba(120, 230, 222, 0.38); } }
.cin-card--lead { flex-direction: row; }
.cin-card--lead .cin-screen { flex: 1.55; aspect-ratio: auto; min-height: 380px; }
.cin-card--lead .cin-meta { flex: 1; justify-content: center; }
.cin-card--lead .cin-title { font-size: clamp(28px, 3vw, 42px); }

/* Bildschirm mit Sucher-Ecken, Zeitcode und Fortschritt */
.cin-screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: var(--ink); text-decoration: none; }
.cin-screen > img:not(.cin-phone) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cin-screen:hover > img:not(.cin-phone) { transform: scale(1.025); } }
.cin-screen::before { /* dunkle Ränder wie im Kino */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 22%, transparent 70%, rgba(0, 0, 0, 0.6));
}
.cin-screen::after { /* vier Sucher-Ecken */
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none; opacity: 0.8;
  --c: rgba(233, 251, 255, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 18px no-repeat;
}
.cin-tc {
  position: absolute; z-index: 3; left: 28px; top: 26px; display: inline-flex; gap: 6px; align-items: baseline;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.12em; color: var(--ink);
  padding: 6px 9px; border-radius: 6px; background: rgba(0, 8, 10, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cin-tc b { font-weight: 500; color: var(--ice); min-width: 3ch; }
.cin-phone {
  position: absolute; z-index: 3; left: 28px; bottom: 28px; width: clamp(54px, 11%, 96px); height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top;
  border: 3px solid #0b1d24; border-radius: 12px; box-shadow: 0 0 0 1px #24424b, 0 18px 40px -8px rgba(0, 0, 0, 0.9);
}
.cin-card--lead .cin-phone { width: clamp(64px, 10%, 110px); }
.cin-open {
  position: absolute; z-index: 3; right: 28px; bottom: 26px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--bg);
  background: var(--ice); box-shadow: 0 0 40px rgba(34, 227, 214, 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .cin-open { opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
  .cin-screen:hover .cin-open, .cin-screen:focus-visible .cin-open { opacity: 1; transform: none; }
}
.cin-screen:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
.cin-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(233, 251, 255, 0.12); }
.cin-bar i { display: block; height: 100%; background: var(--ice); transform: scaleX(0); transform-origin: left; transition: transform 160ms linear; box-shadow: 0 0 12px var(--glow); }

/* Text neben bzw. unter dem Bild */
.cin-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(22px, 2.6vw, 38px); }
.cin-no { margin: 0 0 18px; font: 400 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; color: var(--text); }
.cin-no b { color: var(--ice); font-weight: 500; }
.cin-cat { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-soft); }
.cin-title { margin: 0 0 12px; font: 400 clamp(24px, 2.2vw, 30px)/1.15 "DM Sans", sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.cin-lead { margin: 0 0 24px; color: var(--text); }
.cin-spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: auto 0 28px; padding: 0; width: 100%; border-top: 1px solid var(--line); }
.cin-spec > div { padding: 14px 22px 0 0; margin-right: 22px; }
.cin-spec > div + div { border-left: 1px solid var(--line); padding-left: 22px; }
.cin-spec dt { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); opacity: 0.8; }
.cin-spec dd { margin: 0; font-size: 15px; color: var(--ink); }

/* ---------- Wie es entsteht ---------- */
.cin-making { margin-top: clamp(64px, 8vw, 110px); }
.cin-making-h { margin: 0 0 30px; font: 400 clamp(22px, 2.2vw, 30px)/1.2 "DM Sans", sans-serif; letter-spacing: -0.02em; color: var(--ink); text-align: center; }
.cin-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: none; }
.cin-steps > li { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.cin-steps > li::before { /* leuchtender Punkt auf der Linie */
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px var(--glow);
}
.cin-step-no { display: block; margin-bottom: 14px; font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; color: var(--ice); }
.cin-steps b { display: block; margin-bottom: 8px; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.cin-steps p { margin: 0; font-size: 15px; }

.cin-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.cin-cta p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink); }
.cin-making .note { margin-top: 28px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 960px) {
  .cin-card--lead { flex-direction: column; }
  .cin-card--lead .cin-screen { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .cin-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 720px) {
  .cin-reel { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .cin-reel > li, .cin-reel > li:first-child { grid-column: auto; }
  .cin-spec { grid-template-columns: 1fr 1fr 1fr; }
  .cin-spec > div { margin-right: 0; padding-right: 12px; }
  .cin-spec > div + div { padding-left: 14px; }
  .cin-tc { left: 22px; top: 20px; }
  .cin-phone { display: none; }
  .cin-open { right: 22px; bottom: 20px; }
  .cin-cta .btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 520px) {
  .cin-steps { grid-template-columns: 1fr; }
  .cin-spec { grid-template-columns: 1fr; }
  .cin-spec > div, .cin-spec > div + div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; margin: 0; border-left: 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .cin-spec dt { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cin-card, .cin-screen > img, .cin-open, .cin-bar i { transition: none; }
}

/* Vier Filme: Aufmacher breit, darunter drei Karten (V39) */
.cin-reel > li { grid-column: span 2; }
.cin-reel > li:first-child { grid-column: 1 / -1; }
.cin-reel .cin-card:not(.cin-card--lead) .cin-lead { font-size: 16px; }
@media (max-width: 960px) { .cin-reel > li { grid-column: span 3; } .cin-reel > li:last-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .cin-reel > li, .cin-reel > li:last-child { grid-column: auto; } }
.cin-card--lead .cin-screen > img:not(.cin-phone) { object-position: left center; }
@media (min-width: 521px) {
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec > div { padding: 12px 10px 0 0; margin-right: 0; min-width: 0; }
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec > div + div { padding-left: 12px; }
}
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec dt { font-size: 11px; letter-spacing: .06em; }
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec dd { font-size: 14px; overflow-wrap: anywhere; }
.cin-reel .cin-card:not(.cin-card--lead) .cin-spec dd { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
.cin-card--lead .cin-phone { left: auto; right: 28px; }
@media (hover: hover) and (pointer: fine) { .cin-card--lead .cin-open { right: auto; left: 28px; } }