/* ============================================================
   Case Studies (projekte/<slug>.html)
   Dieselbe Sprache wie die Unterseiten von getyoursite: Papier,
   Ink, Brand Blau, Kicker mit Stern, Titel bis 76px in 540.
   Die Markenfarbe des Projekts (--case-bg, --case-glow) erscheint
   nur in den Buehnen, die sich von einer gerundeten Karte zur
   vollen Breite oeffnen.
   ============================================================ */

.page-case { background:var(--sys-paper); }
.page-case main { overflow:clip; }

/* ---------- Hero ---------- */
.case-hero { padding:calc(72px + clamp(28px,4vw,56px)) 0 clamp(44px,5vw,80px); }
.case-hero__top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:clamp(44px,6vw,96px);
  color:var(--sys-muted);
  font-size:13px;
  font-weight:600;
}
.case-back { display:inline-flex; align-items:center; gap:10px; color:var(--sys-muted); text-decoration:none; transition:color var(--sys-fast) ease,gap var(--sys-normal) var(--sys-ease); }
.case-back:hover,.case-back:focus-visible { color:var(--sys-ink); gap:16px; }
.case-count { font-variant-numeric:tabular-nums; letter-spacing:.08em; }

.case-hero__grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.34fr);
  gap:clamp(36px,6vw,110px);
  align-items:end;
}
.case-title {
  margin:0;
  max-width:none!important;
  font-size:var(--sys-page-title)!important;
  font-weight:540!important;
  letter-spacing:-.062em!important;
  line-height:.96!important;
}
.case-lead {
  max-width:48ch;
  margin:clamp(20px,2.4vw,30px) 0 0;
  color:var(--sys-muted);
  font-size:var(--sys-body-lg);
  line-height:1.55;
}
.case-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:clamp(26px,3vw,38px); }
.case-actions .site-button { display:inline-flex; align-items:center; gap:10px; }

.case-facts { margin:0; border-top:1px solid var(--sys-line); }
.case-fact { display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--sys-line); }
.case-fact dt { color:var(--sys-muted); font-size:var(--sys-label); font-weight:720; letter-spacing:.14em; text-transform:uppercase; }
.case-fact dd { margin:0; font-size:14px; font-weight:600; text-align:right; }
.case-fact a { color:var(--sys-ink); text-decoration:none; }
.case-fact a:hover { color:var(--sys-blue); }

/* Eintritt beim Laden: Titelwoerter aus der Maske, der Rest unscharf von unten */
.case-mw { display:inline-block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; vertical-align:top; }
.case-mw__i { display:inline-block; animation:case-word 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--case-start,.25s) + var(--i) * 70ms); }
@keyframes case-word { from { transform:translateY(105%); } }
.case-in { animation:case-rise 1s var(--sys-ease) both; animation-delay:calc(var(--case-start,.25s) + .2s + var(--d) * 90ms); }
@keyframes case-rise { from { opacity:0; transform:translateY(18px); filter:blur(8px); } }

/* ---------- Buehne: gerundete Karte oeffnet sich zur vollen Breite ---------- */
.case-stage { padding:0 0 var(--sys-section); }
.case-stage__panel {
  --open:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(40px,7vw,120px) clamp(20px,6vw,110px) 0;
  background:var(--case-bg);
  clip-path:inset(0 calc((1 - var(--open)) * var(--sys-gutter)) round calc((1 - var(--open)) * 24px));
  animation:case-panel-in 1.2s .45s var(--sys-ease) both;
}
@keyframes case-panel-in { from { opacity:0; transform:translateY(40px); } }
.case-stage__glow {
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(50% 60% at 50% 100%,var(--case-glow),transparent 100%),
    radial-gradient(40% 50% at 15% 0%,color-mix(in srgb,var(--case-glow) 55%,transparent),transparent 100%);
  opacity:.75;
}
.case-browser {
  position:relative;
  width:min(100%,1120px);
  margin:0;
  overflow:hidden;
  border-radius:clamp(10px,1vw,14px) clamp(10px,1vw,14px) 0 0;
  background:#fff;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);
  transform:translateY(calc((1 - var(--open)) * 60px)) scale(calc(.94 + var(--open) * .06));
  transform-origin:50% 100%;
}
.case-browser__bar {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  height:clamp(26px,2.3vw,34px);
  padding:0 14px;
  background:#fff;
  border-bottom:1px solid rgba(11,12,16,.08);
}
.case-browser__bar i { width:8px; height:8px; border-radius:50%; background:#ff5f57; }
.case-browser__bar i:nth-child(2) { background:#febc2e; }
.case-browser__bar i:nth-child(3) { background:#28c840; }
.case-browser__bar span {
  position:absolute;
  left:50%;
  max-width:56%;
  padding:3px 16px;
  overflow:hidden;
  border-radius:6px;
  background:var(--sys-soft);
  color:var(--sys-muted);
  font-size:11px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
  transform:translateX(-50%);
}
.case-browser img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.case-hero__img { view-transition-name:case-media; }
::view-transition-group(case-media) { animation-duration:780ms; animation-timing-function:cubic-bezier(.7,0,.15,1); }

/* ---------- Aufgabe und Umsetzung ---------- */
.case-story { padding:0 0 var(--sys-section); }
.case-story__grid {
  display:grid;
  grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,40px) clamp(24px,5vw,90px);
  align-items:start;
}
.case-story__title {
  margin:0;
  padding-top:.2em;
  font-size:clamp(22px,2vw,28px);
  font-weight:540;
  letter-spacing:-.035em;
  line-height:1.15;
}
.case-story__statement {
  margin:0 0 clamp(30px,4vw,60px);
  font-size:clamp(26px,3vw,44px);
  font-weight:540;
  letter-spacing:-.045em;
  line-height:1.12;
}
.case-story__statement .w { color:color-mix(in srgb,var(--sys-ink) 16%,transparent); transition:color .5s ease; }
.case-story__statement .w.is-on { color:var(--sys-ink); }
.case-story__body { max-width:60ch; margin:0; color:var(--sys-ink-2); font-size:var(--sys-body-lg); line-height:1.6; }

/* ---------- Highlights ---------- */
.case-highlights { padding:0 0 var(--sys-section); }
.case-h2 {
  max-width:18ch;
  margin:16px 0 clamp(32px,4vw,56px);
  font-size:var(--sys-section-title)!important;
  font-weight:540!important;
  letter-spacing:-.058em!important;
  line-height:.98!important;
}
.case-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(14px,1.6vw,22px); }
.case-card {
  position:relative;
  overflow:hidden;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--sys-line);
  border-radius:18px;
  background:var(--sys-paper);
  transition:transform .5s var(--sys-ease),border-color .5s ease,box-shadow .5s var(--sys-ease);
}
.case-card::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--sys-blue),#9fc0ff);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .7s var(--sys-ease);
}
.case-card:hover { transform:translateY(-4px); border-color:rgba(35,104,245,.28); box-shadow:var(--sys-shadow); }
.case-card:hover::after { transform:scaleX(1); }
.case-card__n { color:var(--sys-blue); font-size:12px; font-weight:700; letter-spacing:.16em; font-variant-numeric:tabular-nums; }
.case-card h3 { margin:14px 0 8px; font-size:clamp(17px,1vw + 12px,20px); font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.case-card p { margin:0; color:var(--sys-muted); font-size:15px; line-height:1.55; }

/* ---------- Mobil ---------- */
.case-mobile { padding:0 0 var(--sys-section); }
.case-mobile__panel {
  --open:1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,80px);
  align-items:center;
  padding:clamp(40px,6vw,96px) clamp(26px,5vw,80px);
  border-radius:24px;
  background:var(--case-bg);
  color:var(--case-fg);
}
.case-mobile__copy .kicker { color:inherit; opacity:.75; }
.case-mobile__copy .kicker b { color:inherit; }
.case-mobile__copy .case-h2 { color:inherit; }
.case-mobile__copy p:last-child { max-width:40ch; margin:0; font-size:var(--sys-body-lg); line-height:1.55; opacity:.75; }
.case-phones { display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px,1.8vw,26px); }
.case-phone {
  position:relative;
  flex:0 1 clamp(150px,15vw,230px);
  margin:0;
  aspect-ratio:390/844;
  padding:clamp(5px,.5vw,8px);
  border-radius:clamp(24px,2.4vw,36px);
  background:#0a0b0e;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.case-mobile--live .case-phone:nth-child(2) { margin-bottom:36px; }
.case-mobile--design .case-phone { flex-basis:clamp(200px,20vw,290px); }
.case-phone__notch { position:absolute; left:50%; top:clamp(11px,1vw,16px); z-index:2; width:28%; height:clamp(13px,1.2vw,18px); border-radius:99px; background:#0a0b0e; transform:translateX(-50%); }
.case-phone__screen { width:100%; height:100%; overflow:hidden; border-radius:clamp(19px,1.9vw,29px); background:#111; }
.case-phone__screen img { display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- Farben ---------- */
.case-colors { padding:0 0 var(--sys-section); }
.case-swatches { display:flex; gap:8px; height:clamp(180px,20vw,280px); margin:22px 0 0; padding:0; list-style:none; }
.case-swatches li { flex:1 1 0; min-width:0; transition:flex-grow .7s var(--sys-ease); }
.case-swatches li:hover,.case-swatches li:focus-within { flex-grow:2.2; }
.case-swatch {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  width:100%; height:100%;
  padding:16px;
  border:0;
  border-radius:var(--sys-r-md);
  background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(11,12,16,.08);
  color:var(--sys-ink);
  text-align:left;
  cursor:copy;
  font:inherit;
}
.case-swatch.is-dark { color:#fff; box-shadow:none; }
.case-swatch__name { font-size:14px; font-weight:650; white-space:nowrap; }
.case-swatch__hex { font-size:11px; font-weight:600; letter-spacing:.08em; opacity:.68; font-variant-numeric:tabular-nums; }
.case-swatch:focus-visible { outline:2px solid var(--sys-blue); outline-offset:3px; }
.case-swatch__toast { min-height:1.4em; margin:12px 0 0; color:var(--sys-blue); font-size:13px; font-weight:650; }

/* ---------- Naechstes Projekt ---------- */
.case-next { padding:clamp(56px,6vw,96px) 0 clamp(40px,4vw,64px); border-top:1px solid var(--sys-line); }
.case-next__link {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,90px);
  align-items:center;
  color:var(--sys-ink);
  text-decoration:none;
}
.case-next__copy { display:flex; flex-direction:column; gap:14px; }
.case-next__copy .kicker { margin:0; }
.case-next__name { font-size:var(--sys-section-title); font-weight:540; letter-spacing:-.058em; line-height:.98; transition:color .4s ease; }
.case-next__meta { display:inline-flex; gap:10px; color:var(--sys-muted); font-size:15px; font-weight:600; }
.case-next__meta .text-arrow { transition:transform .5s var(--sys-ease); }
.case-next__link:hover .case-next__name { color:var(--sys-blue); }
.case-next__link:hover .case-next__meta .text-arrow { transform:translateX(6px); }
.case-next__media {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--sys-r-md);
  background:#fff;
  box-shadow:0 24px 60px -34px rgba(11,12,16,.32),0 0 0 1px rgba(11,12,16,.07);
  transition:transform .6s var(--sys-ease),box-shadow .6s var(--sys-ease);
}
.case-next__bar { display:flex; gap:5px; align-items:center; height:24px; padding:0 12px; border-bottom:1px solid rgba(11,12,16,.07); }
.case-next__bar i { width:7px; height:7px; border-radius:50%; background:#dfe2e8; }
.case-next__media img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.case-next__link:hover .case-next__media { transform:translateY(-8px); box-shadow:0 40px 80px -36px rgba(11,12,16,.45),0 0 0 1px rgba(11,12,16,.08),0 30px 90px -30px var(--next-glow); }
.case-next__foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-top:clamp(40px,4vw,64px); padding-top:22px; border-top:1px solid var(--sys-line); }

/* Globale Link-Unterstreichung (app.js: has-link-hover) gilt hier nicht. */
.site-shell .case-next__link.has-link-hover,
.site-shell .case-back.has-link-hover,
.site-shell .case-fact a.has-link-hover { background-image:none!important; }
.site-shell .case-next__link.has-link-hover { --link-hover-color:var(--sys-ink); color:var(--sys-ink); }

/* ---------- Reveals ---------- */
.case-js [data-case-reveal] { opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity .9s var(--sys-ease),transform 1s var(--sys-ease),filter .9s var(--sys-ease); transition-delay:calc(var(--d,0) * 80ms); }
.case-js [data-case-reveal].is-in { opacity:1; transform:none; filter:none; }
.case-js .case-card[data-case-reveal].is-in { transition:opacity .9s var(--sys-ease),transform .5s var(--sys-ease),filter .9s var(--sys-ease),border-color .5s ease,box-shadow .5s var(--sys-ease); transition-delay:0s; }
/* Handys wischen von unten ins Bild */
.case-js [data-case-wipe] { clip-path:inset(100% 0 0 0 round 36px); opacity:0; transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),opacity .6s ease; transition-delay:calc(var(--d,0) * 140ms); }
.case-js [data-case-wipe].is-in { clip-path:inset(0 0 0 0 round 36px); opacity:1; }
.case-js [data-case-wipe] img { transform:scale(1.12); transition:transform 1.6s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--d,0) * 140ms); }
.case-js [data-case-wipe].is-in img { transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .case-hero__grid { grid-template-columns:1fr; align-items:start; }
  .case-story__grid { grid-template-columns:1fr; }
  .case-story__title { padding-top:0; }
  .case-mobile__panel { grid-template-columns:1fr; }
  .case-next__link { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .case-stage__panel { padding:36px 18px 0; }
  .case-browser__bar span { max-width:62%; padding:2px 10px; font-size:10px; }
  .case-mobile__panel { padding:36px 20px; border-radius:18px; }
  .case-mobile--live .case-phone:nth-child(3) { display:none; }
  .case-mobile--live .case-phone:nth-child(2) { margin-bottom:0; }
  .case-phone { flex-basis:44%; }
  .case-mobile--design .case-phone { flex-basis:62%; }
  .case-swatches { flex-wrap:wrap; height:auto; }
  .case-swatches li { flex:1 1 calc(50% - 4px); height:110px; }
  .case-swatches li:hover,.case-swatches li:focus-within { flex-grow:1; }
  .case-next__foot { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  .case-mw__i,.case-in,.case-stage__panel { animation:none!important; }
  .case-js [data-case-reveal],.case-js [data-case-wipe],.case-js [data-case-wipe] img { opacity:1; transform:none; filter:none; clip-path:none; transition:none; }
  .case-stage__panel { --open:1!important; }
  .case-story__statement .w { color:var(--sys-ink); }
}