/* ==========================================================
   Projektseiten (Fallstudien) - ergänzt style.css
   ========================================================== */

/* ---------- Kopf der Fallstudie ---------- */
.case-hero { padding: 24px var(--pad) 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.case-hero .hero-meta { grid-column: 1 / -1; }
.case-hero h1 { grid-column: 1 / -1; font-size: clamp(56px, 11.4vw, 210px); }
.case-hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--fg); }
.case-hero .lead { grid-column: 1 / span 6; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; font-weight: 500; max-width: 620px; }
.case-hero .case-cta { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 12px; align-self: end; justify-content: flex-end; }
/* Das Komma von "Ruhe," darf die Zeile darunter nicht berühren */
[data-page="project-kropiunig"] .case-hero h1 .outline { display: inline-block; margin-top: .12em; }
.js .case-hero h1 { animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 900px) {
  .case-hero .lead, .case-hero .case-cta { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Bühne mit Geräten ---------- */
.stage { position: relative; padding: 0 var(--pad) 112px; }
.stage-bg { position: relative; background: #EFE8DD; padding: clamp(28px, 6vw, 96px) clamp(16px, 6vw, 96px) 0; overflow: hidden; }
.stage-bg .blossom { position: absolute; width: clamp(220px, 34vw, 520px); right: -6%; top: -12%; opacity: .9; pointer-events: none; }
.browser { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 40px 80px -40px rgba(53, 40, 31, .55); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: #F3F0EA; border-bottom: 1px solid #E2DDD3; }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #D8D2C7; }
.browser-bar .url { margin-left: 16px; flex: 1; max-width: 360px; height: 24px; border-radius: 999px; background: #fff; font: 12px/24px var(--mono); letter-spacing: .04em; color: #6B5A4C; padding: 0 14px; text-transform: none; }
.browser-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.browser-view img { width: 100%; height: auto; }
/* Die ganze Seite läuft langsam durch das Fenster */
.js .browser-view.scrolling img { animation: page-scroll 38s cubic-bezier(.45,0,.55,1) infinite alternate; }
.browser-view:hover img { animation-play-state: paused; }
@keyframes page-scroll { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.browser-view { container-type: size; }
.phone {
  position: absolute; z-index: 2; width: clamp(120px, 17vw, 250px); aspect-ratio: 390 / 844;
  border-radius: clamp(18px, 2.6vw, 38px); border: clamp(5px, .7vw, 10px) solid #171716; background: #171716;
  overflow: hidden; box-shadow: 0 30px 60px -24px rgba(23, 23, 22, .6);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(12px, 1.9vw, 28px); }
.stage .phone { right: clamp(8px, 4vw, 64px); bottom: clamp(-40px, -2vw, -16px); transform: rotate(4deg); }

/* Neutrale Bühne ohne Kundenfarben */
.stage-bg--neutral { background: #E4E0D7; }

/* ---------- Kennzahlen-Leiste ---------- */
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 var(--pad) 112px; }
.case-facts div { border-top: 1.5px solid var(--fg); padding-top: 16px; font-size: 16px; line-height: 1.45; font-weight: 500; }
.case-facts .mono { display: block; color: var(--muted); margin-bottom: 10px; font-weight: 400; }
@media (max-width: 900px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 72px; } }

/* ---------- Kapitel mit Bild ---------- */
.chapter .cmedia { grid-column: 3 / -1; margin-top: 24px; }
.chapter .cmedia img, .chapter .cmedia video { width: 100%; height: auto; display: block; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trio { display: flex; gap: clamp(10px, 2vw, 28px); justify-content: center; align-items: flex-start; padding: clamp(24px, 4vw, 56px) 16px; background: #EFE8DD; }
.trio .phone { position: relative; width: clamp(110px, 20vw, 260px); }
.trio .phone:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.swatches span { aspect-ratio: 1 / 1.25; display: flex; align-items: flex-end; padding: 10px; font: 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.type-specimen { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding: clamp(24px, 4vw, 48px); background: #F8F4EE; color: #35281F; }
.type-specimen img { height: clamp(48px, 6vw, 84px); width: auto; }
.type-specimen p { font: 400 15px/1.5 Georgia, serif; max-width: 360px; color: #4A3B30; }
@media (max-width: 900px) { .chapter .cmedia { grid-column: 1 / -1; } .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Film ---------- */
.film { padding: 112px var(--pad); background: var(--tarmac); color: var(--paper); }
.film .label { color: var(--muted-d); margin-bottom: 32px; }
.film h2 { font-size: clamp(44px, 7vw, 104px); margin-bottom: 56px; }
.film-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.film video { width: 100%; height: auto; display: block; background: #EFE8DD; }
.film-grid--single { grid-template-columns: minmax(0, 1fr); }
.film-grid--single video { background: #0E0E0D; }
/* Platzhalter, solange das Video fehlt */
.film-wait { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: clamp(16px, 2vw, 28px); background: linear-gradient(150deg, #27354A, #0E0E0D); color: var(--paper); }
.film-wait-text { font-size: clamp(28px, 5vw, 72px); line-height: 1; }
.film figcaption { padding-top: 12px; color: var(--muted-d); }
@media (max-width: 900px) { .film { padding: 72px var(--pad); } .film-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Film als Link (Typo-Cover statt YouTube-Einbettung) ---------- */
.film-stage { padding: 0 var(--pad) 112px; }
.film-link { position: relative; display: block; overflow: hidden; background: var(--volt); color: var(--ink); }
.film-link img { display: block; width: 100%; height: auto; }
.film-link-play { position: absolute; right: clamp(12px, 2vw, 28px); top: clamp(12px, 2vw, 28px); width: clamp(52px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--volt); transition: scale .3s cubic-bezier(.2,.7,.2,1); }
.film-link-play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: clamp(11px, 1.5vw, 20px) 0 clamp(11px, 1.5vw, 20px) clamp(18px, 2.4vw, 32px); border-color: transparent transparent transparent var(--ink); }
.film-link:hover .film-link-play { scale: 1.08; }
.film-link-label { position: absolute; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); background: var(--volt); color: var(--ink); padding: 8px 14px; border-radius: 999px; }
@media (max-width: 900px) { .film-stage { padding-bottom: 72px; } }
/* Handy: Beschriftung unter das Bild, damit sie den Titel im Bild nicht verdeckt */
@media (max-width: 700px) { .film-link-label { position: static; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 0; } }

/* ---------- Ergebnisse ---------- */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.results div { border-top: 1.5px solid var(--fg); padding-top: 16px; font-size: 16px; line-height: 1.45; font-weight: 500; }
.results strong { display: block; font-size: clamp(44px, 5.4vw, 88px); line-height: .95; margin-bottom: 12px; }
@media (max-width: 700px) { .results { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Zitat ---------- */
.quote { padding: 112px var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.quote blockquote { grid-column: 3 / span 9; margin: 0; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.quote cite { display: block; margin-top: 32px; font-style: normal; }
@media (max-width: 900px) { .quote { padding: 72px var(--pad); } .quote blockquote { grid-column: 1 / -1; } }

/* Platzhalter, der vor Veröffentlichung ersetzt werden muss */
.todo { background: var(--volt); color: var(--ink); padding: 0 .2em; }

@media (prefers-reduced-motion: reduce) {
  .js .browser-view.scrolling img { animation: none; }
  .js .case-hero h1 { animation: none; }
  .film-link-play { transition: none; }
}