/* Navigation: siehe css/valen-nav.css (seitenübergreifend identisch) */
.caseos-page { background:#0a0b0c; }

/* Auf den hellen Sektionen trägt der helle Fokusring nicht. */
.case-calm :focus-visible,
.case-product-proof :focus-visible,
.case-complement :focus-visible { outline-color:#7a5b3c; }

.case-hero { position:relative; min-height:100svh; overflow:hidden; background:#08090a; }
.case-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.76; }
.case-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.98) 0%,rgba(5,6,7,.9) 30%,rgba(5,6,7,.26) 68%,rgba(5,6,7,.18)),linear-gradient(0deg,rgba(5,6,7,.84),transparent 36%); }
.case-hero-inner { position:relative; z-index:2; min-height:100svh; display:flex; align-items:center; padding-top:8rem; padding-bottom:5rem; }
.case-hero-copy { width:min(660px,58%); }
.case-kicker { display:flex; align-items:center; gap:.8rem; margin-bottom:2rem; color:rgba(243,243,244,.58); font-size:.69rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; }
.case-symbol { width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-xs); background:rgba(255,255,255,.07); color:#eed6bc; font-size:.72rem; box-shadow:inset 0 1px rgba(255,255,255,.15); }
.case-title { font-size:clamp(3.7rem,6vw,6.3rem); line-height:.91; letter-spacing:-.075em; text-wrap:balance; }
.case-title .line:nth-child(3) span { color:#d3af88; }
.case-lead { max-width:610px; margin-top:2rem; color:rgba(243,243,244,.66); font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.68; }
.case-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.3rem; margin-top:2.2rem; }
.case-download-primary { display:inline-flex; align-items:center; gap:.9rem; padding:.9rem 1.25rem; border:1px solid rgba(255,255,255,.75); border-radius:var(--radius); background:#f4f4f5; color:#0a0b0c; text-decoration:none; box-shadow:0 22px 55px -28px rgba(255,255,255,.65); transition:transform .35s var(--ease-out),background .25s,box-shadow .35s; }
.case-download-primary:hover { transform:translateY(-3px); background:#fff; box-shadow:0 26px 65px -28px rgba(255,255,255,.85); }
.case-download-primary svg { width:23px; height:23px; flex:none; }
.case-download-primary > span { display:grid; gap:.15rem; min-width:0; }
.case-download-primary b { font-size:.86rem; font-weight:700; }
.case-download-primary small { color:rgba(10,11,12,.55); font-size:.62rem; font-weight:550; }
.case-text-link { color:rgba(255,255,255,.68); font-size:.77rem; font-weight:600; text-decoration:none; }
.case-text-link:hover { color:#fff; }
.case-trust { display:flex; flex-wrap:wrap; gap:.65rem 1.5rem; margin-top:1.6rem; color:rgba(243,243,244,.4); font-size:.62rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.case-trust span { display:flex; align-items:center; gap:.5rem; }
.case-trust i { width:6px; height:6px; border-radius:50%; background:#8bbda1; box-shadow:0 0 12px rgba(139,189,161,.7); }

.case-calm { position:relative; overflow:hidden; padding:8rem 0; background:#f2f0ec; color:#171819; }
.case-calm::before { content:""; position:absolute; width:42rem; height:42rem; left:50%; top:-30rem; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(183,140,99,.13),transparent 68%); }
.case-calm-intro { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.case-calm-kicker { display:flex; align-items:center; gap:.65rem; color:#966f49; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.case-calm-kicker span { width:22px; height:1px; background:currentColor; }
.case-calm h2,.case-proof-head h2,.case-complement h2 { color:#171819; font-size:clamp(2.7rem,5.2vw,5.2rem); line-height:.98; letter-spacing:-.065em; }
.case-calm h2 { max-width:18ch; margin-top:1.5rem; }
.case-calm h2 em { color:#9b7652; font-style:normal; font-weight:inherit; }
.case-calm-intro > p:last-child { max-width:680px; margin-top:1.8rem; color:#68645f; font-size:1rem; line-height:1.72; }
.case-feeling-row { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:4.5rem; }
.case-feeling-row article { min-height:290px; display:flex; flex-direction:column; padding:2rem; border:1px solid rgba(30,28,25,.09); border-radius:var(--radius-md); background:rgba(255,255,255,.62); box-shadow:0 24px 70px -55px rgba(30,24,18,.45); }
.feeling-card-top { display:flex; align-items:center; justify-content:space-between; }
.case-feeling-row span,.feature-no { color:#9b7652; font-size:.62rem; font-weight:650; letter-spacing:.14em; }
.feeling-card-top i { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(30,28,25,.1); border-radius:50%; color:#7e7871; font-size:.9rem; font-style:normal; }
.feeling-card-top i svg { width:16px; height:16px; }
.case-feeling-row h3 { margin-top:3rem; color:#1b1c1d; font-size:clamp(1.35rem,2vw,1.75rem); line-height:1.12; letter-spacing:-.035em; }
.case-feeling-row p { margin-top:auto; padding-top:1.5rem; color:#74706b; font-size:.83rem; line-height:1.65; }

.case-product-proof { padding:9rem 0 10rem; background:#e9e7e2; color:#171819; }
.case-proof-head { display:grid; grid-template-columns:1.2fr .8fr; gap:7vw; align-items:end; margin-bottom:4rem; }
.case-proof-head .eyebrow { margin-bottom:1rem; color:#926d49; }
.case-proof-head h2 { max-width:12ch; font-size:clamp(2.7rem,4.7vw,4.7rem); }
.case-proof-head > p { max-width:520px; color:#6c6863; font-size:.95rem; line-height:1.75; }
.case-gallery-stage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.case-shot { min-width:0; overflow:hidden; border:1px solid rgba(25,24,22,.1); border-radius:var(--radius-lg); background:rgba(255,255,255,.62); box-shadow:0 36px 90px -66px rgba(30,24,19,.8),inset 0 1px rgba(255,255,255,.9); }
.case-shot-main { grid-column:1/-1; }
.case-shot-frame { overflow:hidden; background:#f3f1ed; }
.case-shot img { display:block; width:100%; height:auto; }
.case-shot figcaption { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem; padding:1rem 1.25rem; border-top:1px solid rgba(25,24,22,.08); color:#6f6b66; }
.case-shot figcaption span { color:#9b7652; font-size:.6rem; font-weight:700; letter-spacing:.14em; }
.case-shot figcaption strong { color:#292a2b; font-size:.74rem; font-weight:650; letter-spacing:-.01em; }
.case-shot figcaption small { color:#8a8681; font-size:.62rem; }
.case-story-progress { display:none; }
.case-gallery.is-story-ready { position:relative; height:var(--case-story-height); }
.case-gallery.is-story-ready .case-gallery-stage { --case-story-top:clamp(5.5rem,10svh,7rem); --case-progress-gap:clamp(.65rem,1.5vw,1.25rem); --case-shot-width:min(124%,calc((100svh - var(--case-story-top) - 1rem) * 1.68),calc(100vw - 3.5rem)); position:sticky; top:var(--case-story-top); height:calc(100svh - var(--case-story-top) - 2rem); display:block; }
.case-gallery.is-story-ready .case-shot { position:absolute; z-index:var(--story-layer,0); left:50%; top:50%; width:var(--case-shot-width); opacity:var(--story-opacity,0); transform:translate(-50%,-50%) scale(var(--story-scale,.84)); transform-origin:center; pointer-events:none; will-change:opacity,transform; }
.case-gallery.is-story-ready .case-shot.is-active { pointer-events:auto; }
.case-gallery.is-story-ready .case-story-progress { position:absolute; z-index:10; left:50%; top:50%; width:var(--case-shot-width); display:grid; justify-items:end; gap:.45rem; transform:translate(-50%,-50%); }
.case-story-progress i { width:4px; height:4px; border-radius:50%; background:rgba(45,42,38,.2); transform:translateX(var(--case-progress-gap,0)); transition:height .35s var(--ease-soft),background .35s var(--ease-soft); }
.case-story-progress i.is-active { height:22px; border-radius:99px; background:#9b7652; }
.case-capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.case-capabilities article { min-height:210px; padding:1.8rem; border:1px solid rgba(25,24,22,.09); border-radius:var(--radius-md); background:rgba(255,255,255,.58); box-shadow:inset 0 1px rgba(255,255,255,.85); }
.case-capabilities span { color:#9b7652; font-size:.6rem; font-weight:700; letter-spacing:.14em; }
.case-capabilities h3 { margin-top:2.2rem; color:#191a1b; font-size:1.25rem; letter-spacing:-.035em; }
.case-capabilities p { margin-top:.65rem; color:#716d68; font-size:.82rem; line-height:1.65; }

.case-complement { padding:10rem 0; background:#f4f2ee; color:#151617; }
.case-complement-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:7vw; align-items:center; }
.case-complement h2 { margin-top:1rem; font-size:clamp(2.7rem,4.5vw,4.5rem); }
.case-complement-grid > div:first-child > p:last-child { max-width:690px; margin-top:2rem; color:#706c67; line-height:1.75; }
.system-compare { position:relative; display:grid; gap:1rem; }
.system-compare > div { display:grid; gap:.65rem; padding:2rem; border:1px solid rgba(20,21,22,.1); border-radius:var(--radius-md); background:#fff; box-shadow:0 25px 65px -50px #2b231d; }
.system-compare > div:last-child { background:#151617; color:#fff; }
.system-compare small { color:#a37c56; font-size:.62rem; font-weight:650; letter-spacing:.15em; text-transform:uppercase; }
.system-compare b { font-size:1.25rem; }
.system-compare span { color:#827e78; font-size:.78rem; }
.system-compare > i { position:absolute; z-index:2; left:50%; top:50%; width:44px; height:44px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; background:#c09a73; color:#fff; font-size:1.6rem; font-style:normal; box-shadow:0 10px 30px rgba(70,50,32,.18); }

.case-download-section { padding:10rem 0; background:#0a0b0c; scroll-margin-top:calc(var(--nav-h-compact) + var(--nav-float) + 24px); }
.download-panel { position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; padding:clamp(2rem,6vw,5.5rem); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-xl); background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 60%); box-shadow:inset 0 1px rgba(255,255,255,.12),0 50px 110px -65px rgba(205,154,103,.35); }
.download-glow { position:absolute; width:36rem; height:36rem; right:-16rem; top:-20rem; border-radius:50%; background:radial-gradient(circle,rgba(232,194,151,.19),transparent 69%); }
.download-copy,.download-actions,.release-proof { position:relative; z-index:1; }
.download-copy h2 { max-width:14ch; font-size:clamp(2.6rem,5vw,4.7rem); line-height:.96; letter-spacing:-.062em; }
.download-copy > p:last-child { margin-top:1.3rem; font-size:1rem; }
.download-actions { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.download-actions .case-download-primary { width:100%; justify-content:center; padding:1.05rem 1.3rem; }
.msi-link { margin:1.2rem auto 0; color:rgba(243,243,244,.45); font-size:.7rem; font-weight:600; text-decoration:none; }
.msi-link:hover { color:#fff; }
.release-proof { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); color:rgba(243,243,244,.32); font-size:.62rem; }
.release-proof a { color:rgba(243,243,244,.5); text-decoration:none; }
.release-proof code { margin-left:auto; color:rgba(243,243,244,.26); font:inherit; }

@media (max-width:1050px) {
  .case-hero-copy { width:min(680px,72%); }
  .case-complement-grid { grid-template-columns:1fr; gap:3rem; }
}
@media (max-width:760px) {
  .case-hero-photo { object-position:64% center; opacity:.48; }
  .case-hero-shade { background:linear-gradient(90deg,rgba(5,6,7,.97),rgba(5,6,7,.55)),linear-gradient(0deg,rgba(5,6,7,.95),transparent 50%); }
  .case-hero-inner { align-items:flex-end; padding:8rem 1.2rem 4rem; }
  .case-hero-copy { width:100%; }
  .case-title { font-size:clamp(3.1rem,14vw,5rem); }
  .case-actions { align-items:flex-start; flex-direction:column; }
  .case-calm,.case-product-proof,.case-complement,.case-download-section { padding:6.5rem 0; }
  .case-feeling-row { grid-template-columns:1fr; margin-top:4rem; }
  .case-feeling-row article { min-height:240px; }
  .case-proof-head { grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; }
  .case-gallery-stage { gap:1rem; }
  .case-shot { border-radius:var(--radius-md); }
  .case-capabilities { grid-template-columns:1fr; }
  .case-capabilities article { min-height:190px; }
  .download-panel { grid-template-columns:1fr; gap:2rem; border-radius:var(--radius-lg); }
  .release-proof { grid-column:auto; }
  .release-proof code { width:100%; margin-left:0; }
}
@media (max-width:480px) {
  .case-download-primary { width:100%; justify-content:flex-start; padding:.85rem 1rem; }
  .case-download-primary b { font-size:.78rem; }
  .case-download-primary small { font-size:.57rem; white-space:normal; }
  .case-trust { gap:.6rem 1rem; }
  .case-gallery-stage { grid-template-columns:1fr; }
  .case-shot-main { grid-column:auto; }
  .case-shot figcaption { grid-template-columns:auto 1fr; }
  .case-shot figcaption small { grid-column:2; }
  .download-panel { padding:1.6rem 1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .case-download-primary,.case-story-progress i { transition:none; }
}