/* ---------- Fallstudie ---------- */
.back-link{order:-1}
.cover{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;min-height:100%}
.cover-copy{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.8cqi,22px)}
.hmw{position:relative;margin:0;padding:14px 18px 16px;border:1.5px solid var(--color-ink);border-radius:var(--shape-sketch-c);background-image:var(--hatch-light);box-shadow:var(--shadow-sm)}
.hmw > span{display:block;background:var(--color-surface);padding:6px 10px 8px;border-radius:var(--shape-small-b)}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0}
.meta-grid dt{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.meta-grid dd{margin:2px 0 0;font-size:.9375rem;line-height:1.4}
.shot{position:relative;padding:12px;background:var(--color-surface);border:1.5px solid var(--color-ink);border-radius:var(--shape-small-b);box-shadow:var(--shadow-md);transform:rotate(-.8deg)}
.shot .ph{aspect-ratio:16/10}
.shot-note{position:absolute;z-index:4}
.shot-note svg{width:70px;height:44px}
.sn-1{bottom:calc(100% + 2px);right:8%;flex-direction:row-reverse;align-items:flex-end}
.sn-2{top:calc(100% + 8px);left:10%;align-items:flex-start}

.ctx{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,2.6cqi,36px) clamp(20px,2.4cqi,32px);align-items:start}
.persona-top{display:flex;gap:14px;align-items:center}
.persona-ph{flex:0 0 auto;width:72px;height:80px;border:1.5px solid var(--color-ink);border-radius:var(--shape-small-a);background-image:var(--hatch-light)}
.facts{margin:0;display:flex;flex-direction:column;gap:8px}
.facts dt{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.facts dd{margin:1px 0 0;font-size:.9375rem;line-height:1.45}
.problem{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + .9cqi,2rem);line-height:1.1;margin:0}
.insights{display:flex;flex-direction:column;gap:18px}
.insight{position:relative;padding:12px 14px 14px;background:var(--color-surface-muted);border:1.5px solid var(--color-ink);box-shadow:var(--shadow-sm)}
.insight:nth-child(1){border-radius:var(--shape-sketch-a);transform:rotate(-1deg)}
.insight:nth-child(2){border-radius:var(--shape-sketch-b);transform:rotate(.8deg);margin-left:14px}
.insight:nth-child(3){border-radius:var(--shape-sketch-c);transform:rotate(-.5deg)}
.insight .annot{display:block;margin-bottom:2px}

.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.step{position:relative;display:flex;gap:14px;align-items:flex-start}
.step .pin{position:relative;flex:0 0 auto}
.step-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.step-body h3{overflow-wrap:anywhere;hyphens:auto}
.loop{position:relative;display:flex;align-items:center;gap:8px;margin-top:10px}
.loop svg{width:120px;height:44px}
.evolution{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:clamp(28px,3cqi,40px);align-items:center}
.evo{position:relative;display:flex;flex-direction:column;gap:8px}
.evo:nth-child(1){transform:rotate(-1.2deg)}.evo:nth-child(3){transform:rotate(.6deg)}.evo:nth-child(5){transform:rotate(-.4deg)}
.evo-arrow{display:none;justify-content:center}
.evo-arrow svg{width:46px;height:24px}

.decide{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3cqi,40px);align-items:start}
.decide .shot{transform:rotate(.6deg)}
.decide .pin{box-shadow:var(--shadow-sm)}
.decisions{display:flex;flex-direction:column;gap:18px}
.decision{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:14px 16px 16px;background:var(--color-surface);border:1.5px solid var(--color-ink);box-shadow:var(--shadow-sm)}
.decision:nth-child(1){border-radius:var(--shape-sketch-b)}
.decision:nth-child(2){border-radius:var(--shape-sketch-c)}
.decision:nth-child(3){border-radius:var(--shape-sketch-a)}
.decision .pin{grid-row:1 / span 3}
.decision dl{margin:0;display:flex;flex-direction:column;gap:5px}
.decision dt{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.decision dd{margin:0;font-size:.9375rem;line-height:1.45}

.pcraft{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,2.6cqi,36px) clamp(20px,2.4cqi,30px);align-items:start}
.pcraft .ph{aspect-ratio:4/3}

.results{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.6cqi,34px);align-items:start}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.metric{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px;border:1.5px solid var(--color-ink);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.metric:nth-child(1){border-radius:var(--shape-sketch-a)}.metric:nth-child(2){border-radius:var(--shape-sketch-b)}.metric:nth-child(3){border-radius:var(--shape-sketch-c)}
.metric .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.5rem + 1.6cqi,3.25rem);line-height:.95}
.quote{position:relative;margin:0;padding:18px 20px 18px;background:var(--color-surface-muted);border:1.5px solid var(--color-ink);border-radius:var(--shape-sketch-c);box-shadow:var(--shadow-md);transform:rotate(-.8deg)}
.quote p{font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + .9cqi,2rem);font-weight:600;line-height:1.15;margin:0 0 8px}
.learn{display:flex;flex-direction:column;gap:14px}
.end-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:clamp(28px,3cqi,40px);padding-top:18px;border-top:1.5px dashed var(--color-ink-muted)}
.end-links{display:flex;flex-wrap:wrap;gap:14px 18px}

@container sk (min-width: 600px){
  .cover{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}
  .ctx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctx .insights{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .ctx .insight{flex:1 1 200px;min-width:0}
  .steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 16px}
  .step{flex-direction:column}
  .evolution{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:10px}
  .evo-arrow{display:flex}
  .pcraft{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
}
@container sk (min-width: 1024px){
  .ctx{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr)}
  .ctx .insights{grid-column:auto;flex-direction:column}
  .ctx .insight{flex:0 0 auto}
  .steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .decide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pcraft{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps::before{content:"";position:absolute;left:18px;right:6%;top:17px;border-top:1.5px dashed var(--color-ink-muted)}
}
@container sk (max-width: 599px){
  .metrics{grid-template-columns:minmax(0,1fr)}
  .shot-note.sn-1{position:static;margin-top:10px;flex-direction:row;align-items:flex-start}
  .sn-1 svg{transform:scaleY(-1)}
  .shot-note .annot{font-size:1.05rem}
}

@container sk (max-width: 1023px){
  .logo{display:none}
  .nav{order:3;width:100%;overflow-x:auto;padding:2px 4px 6px 0;scrollbar-width:none}
  .tab{flex:0 0 auto}
}