.case-page{--bg:light-dark(#f3f1eb,#0b0d0c);--paper:light-dark(#faf9f5,#101310);--ink:light-dark(#171a18,#f0f3ed);--muted:light-dark(#626660,#9da49c);--line:light-dark(#d7d5ce,#2a302b);--line2:light-dark(#b6b7b0,#424a43);--acid:light-dark(#426616,#d5ff72);--acid-bg:light-dark(#273c0e,#d5ff72);--acid-on:light-dark(#fff,#11160c);--shell:1240px;--gutter:clamp(1.25rem,4vw,3rem);--f-sans:'Manrope',sans-serif;--f-mono:'IBM Plex Mono',monospace;background:var(--bg);color:var(--ink);font-family:var(--f-sans)}
.case-page main{overflow:clip}.icon-sprite{position:absolute}.case-shell{width:min(100%,var(--shell));margin:auto;padding-inline:var(--gutter)}.case-page :where(h1,h2,h3){text-wrap:balance}.case-page p{text-wrap:pretty}
.case-nav{position:fixed;inset:0 0 auto;z-index:100;background:color-mix(in srgb,var(--bg) 87%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);transition:transform .25s}.case-nav[data-hidden=true]{transform:translateY(-100%)}.case-nav__inner{height:72px;display:flex;align-items:center;gap:2rem}.case-brand{display:flex;align-items:center;gap:.75rem;color:var(--ink)}.case-brand:hover{color:var(--ink)}.case-brand b{display:grid;place-items:center;width:2.25rem;aspect-ratio:1;background:var(--ink);color:var(--bg);font-size:.72rem}.case-brand span{font-size:.75rem;font-weight:700;line-height:1.1}.case-brand small{display:block;color:var(--muted);font-size:.58rem;font-weight:500}.case-nav__links{display:flex;gap:1.6rem;margin-left:auto}.case-nav__links a,.case-nav__portfolio{color:var(--muted);font-size:.72rem;font-weight:600}.case-nav__actions{display:flex;align-items:center;gap:.75rem}.case-theme{display:grid;place-items:center;width:2.5rem;aspect-ratio:1;border:1px solid var(--line)}.case-theme .icon{width:1rem}.case-theme .icon--sun,.case-theme .icon--moon{display:none}:root[data-theme=light] .case-theme .icon--sun,:root[data-theme=dark] .case-theme .icon--moon{display:block}:root:not([data-theme]) .case-theme .icon--system{display:block}
.case-button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.2rem;padding:.8rem 1.2rem;background:var(--acid-bg);border:1px solid var(--acid-bg);border-radius:2px;color:var(--acid-on);font-size:.8rem;font-weight:700;transition:transform .2s,filter .2s,box-shadow .2s}.case-button:hover{color:var(--acid-on);transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 28px #0002}.case-button:active{transform:scale(.985)}.case-button .icon{width:1rem}.case-button--small{min-height:2.5rem;padding:.55rem .9rem;font-size:.7rem}.case-text-link{color:var(--ink);font-size:.8rem;font-weight:700;border-bottom:1px solid var(--line2);padding-bottom:.2rem}.case-text-link:hover{color:var(--acid)}.case-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}
.case-hero{position:relative;padding:clamp(9rem,14vw,12rem) 0 clamp(4.5rem,8vw,7rem);background:radial-gradient(circle at 76% 16%,color-mix(in srgb,var(--acid) 10%,transparent),transparent 32%),var(--bg)}.case-hero__grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(#000,transparent 60%)}.case-hero__inner{position:relative;display:grid;grid-template-columns:1.55fr .65fr;gap:clamp(2rem,6vw,6.5rem);align-items:end}.case-kicker,.case-label,.case-index{color:var(--acid);font:500 .66rem var(--f-mono);letter-spacing:.11em;text-transform:uppercase}.case-kicker span{color:var(--muted);margin-left:2rem}.case-hero h1{display:flex;align-items:baseline;font-size:clamp(4.8rem,12vw,10rem);font-weight:800;line-height:.8;letter-spacing:-.085em}.case-hero h1 span{color:var(--acid)}.case-hero__thesis{max-width:20ch;margin-top:2.2rem;font-size:clamp(1.7rem,3.2vw,3.15rem);font-weight:600;line-height:1.08;letter-spacing:-.045em}.case-hero__lead{max-width:64ch;margin-top:1.5rem;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.75}.case-brief{align-self:stretch;border-top:1px solid var(--line2);padding-top:1rem}.case-brief dl{margin-top:1rem}.case-brief dl div{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}.case-brief dt{color:var(--muted);font:400 .62rem var(--f-mono);text-transform:uppercase}.case-brief dd{font-size:.78rem;font-weight:600;line-height:1.45}.case-brief__available{display:flex;align-items:center;gap:.55rem;margin-top:1.2rem;color:var(--muted);font-size:.66rem}.case-brief__available i,.case-product__bar i{width:.45rem;height:.45rem;border-radius:50%;background:var(--acid);box-shadow:0 0 10px color-mix(in srgb,var(--acid) 60%,transparent)}
.case-product{grid-column:1/-1;margin-top:clamp(2.5rem,6vw,5.5rem);background:#090d13;border:1px solid #303730;box-shadow:0 36px 80px #0004}.case-product__bar,.case-shot__bar{display:flex;justify-content:space-between;align-items:center;min-height:2.7rem;padding:.65rem 1rem;color:#9ea69f;background:#111713;border-bottom:1px solid #2b332d;font:400 .6rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase}.case-product__bar span:first-child{display:flex;align-items:center;gap:.55rem;color:#eef2eb}.case-product img{width:100%}.case-proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}.case-proof>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.9rem;padding:1.35rem;border-right:1px solid var(--line)}.case-proof>div:first-child{padding-left:0}.case-proof>div:last-child{border:0}.case-proof strong{font:500 clamp(1.3rem,2vw,2rem) var(--f-mono);letter-spacing:-.06em}.case-proof span{color:var(--muted);font-size:.65rem;line-height:1.45}
.case-intro,.case-system,.case-architecture,.case-evidence{padding:clamp(5.5rem,10vw,9rem) 0}.case-intro,.case-architecture{background:var(--paper)}.case-intro__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:0 clamp(3rem,10vw,9rem)}.case-heading h2{max-width:19ch;margin-top:.9rem;font-size:clamp(2.25rem,5vw,4.8rem);font-weight:600;line-height:.99;letter-spacing:-.06em}.case-intro__copy{padding-top:4rem}.case-pullquote{max-width:30ch;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:600;line-height:1.3;letter-spacing:-.03em}.case-intro__copy>p:last-child{max-width:62ch;margin-top:1.5rem;color:var(--muted);font-size:.92rem;line-height:1.75}.case-principles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--line2)}.case-principles article{min-height:13rem;padding:1.5rem 2rem 1.2rem 0;border-right:1px solid var(--line)}.case-principles article+article{padding-left:2rem}.case-principles article:last-child{border:0}.case-principles span,.case-decisions span{color:var(--muted);font:400 .65rem var(--f-mono)}.case-principles h3{max-width:22ch;margin-top:2.7rem;font-size:1.1rem;font-weight:700;line-height:1.35}.case-principles p{max-width:34ch;margin-top:.7rem;color:var(--muted);font-size:.76rem;line-height:1.65}
.case-heading--split{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(2rem,8vw,8rem);align-items:end}.case-heading--split>p{max-width:53ch;color:var(--muted);font-size:.85rem;line-height:1.75}.case-flow{margin-top:clamp(4.5rem,9vw,8rem)}.case-flow__item{display:grid;grid-template-columns:.58fr 1.42fr;gap:clamp(2.5rem,7vw,6rem);align-items:center;padding:clamp(3.5rem,7vw,6.5rem) 0;border-top:1px solid var(--line)}.case-flow__item--reverse{grid-template-columns:1.42fr .58fr}.case-flow__item--reverse .case-flow__copy{order:2}.case-flow__item--reverse .case-shot{order:1}.case-flow__copy h3{max-width:14ch;margin-top:1rem;font-size:clamp(1.75rem,3.3vw,3.2rem);font-weight:600;line-height:1.05;letter-spacing:-.055em}.case-flow__copy>p:not(.case-index){max-width:48ch;margin-top:1.35rem;color:var(--muted);font-size:.85rem;line-height:1.75}.case-flow__copy ul{display:grid;gap:.6rem;margin-top:1.4rem}.case-flow__copy li{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:600}.case-flow__copy .icon{width:.85rem;color:var(--acid)}.case-shot{margin:0;overflow:hidden;background:#0b1018;border:1px solid #2b332d;box-shadow:0 24px 60px #0003}.case-shot img{width:100%;transition:transform .7s}.case-shot:hover img{transform:scale(1.012)}.case-shot figcaption{padding:.75rem 1rem;color:#959d96;background:#111713;border-top:1px solid #2b332d;font-size:.64rem;line-height:1.5}
.case-forecast{padding:clamp(5.5rem,10vw,9rem) 0 clamp(7rem,12vw,11rem);color:#f5f7f1;background:#0b0f0c}.case-forecast .case-heading--split>p{color:#9ea69f}.case-forecast .case-index{color:#d5ff72}.case-forecast__gallery{display:grid;grid-template-columns:1.35fr .65fr;gap:1.2rem;align-items:end;margin-top:clamp(4rem,8vw,7rem)}.case-shot--small{transform:translateY(3rem)}
.case-decisions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--line2)}.case-decisions article{min-height:17rem;padding:1.5rem 2rem 2rem 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.case-decisions article:nth-child(3){border-right:0}.case-decisions article:nth-child(n+4){transform:translateX(33.333%)}.case-decisions h3{max-width:20ch;margin-top:2.8rem;font-size:1.1rem;font-weight:700;line-height:1.3}.case-decisions p{max-width:38ch;margin-top:.75rem;color:var(--muted);font-size:.76rem;line-height:1.7}.case-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:4rem}.case-stack li{padding:.45rem .65rem;color:var(--muted);border:1px solid var(--line);font:400 .6rem var(--f-mono)}
.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(4rem,8vw,7rem);border-block:1px solid var(--line2)}.case-metrics article{min-height:13rem;padding:1.5rem;border-right:1px solid var(--line)}.case-metrics article:first-child{padding-left:0}.case-metrics article:last-child{border:0}.case-metrics strong{display:block;color:var(--acid);font:400 clamp(2.2rem,4vw,4rem) var(--f-mono);letter-spacing:-.08em}.case-metrics h3{margin-top:2.4rem;font-size:.88rem;font-weight:700}.case-metrics p{margin-top:.3rem;color:var(--muted);font-size:.65rem}.case-boundaries{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,10vw,9rem);margin-top:clamp(5rem,10vw,9rem)}.case-boundaries h2{max-width:12ch;margin-top:1rem;font-size:clamp(2rem,4vw,4rem);font-weight:600;line-height:1;letter-spacing:-.055em}.case-boundaries ol{border-top:1px solid var(--line2)}.case-boundaries li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}.case-boundaries li>span{color:var(--muted);font:400 .63rem var(--f-mono)}.case-boundaries h3{font-size:.92rem;font-weight:700}.case-boundaries li p{margin-top:.45rem;color:var(--muted);font-size:.75rem;line-height:1.65}
.case-cta{padding:clamp(6rem,11vw,10rem) 0;color:#f5f7f1;background:#172618}.case-cta .case-index{color:#d5ff72}.case-cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(3rem,9vw,9rem)}.case-cta__grid>.case-index,.case-cta__grid>.case-actions,.case-cta__grid>small{grid-column:1/-1}.case-cta h2{max-width:18ch;margin-top:1.3rem;font-size:clamp(2.8rem,6vw,6rem);font-weight:600;line-height:.94;letter-spacing:-.07em}.case-cta__grid>p:not(.case-index){align-self:end;color:#b6beb5;font-size:.92rem;line-height:1.75}.case-button--light{background:#d5ff72;border-color:#d5ff72;color:#11160c}.case-button--light:hover{color:#11160c}.case-text-link--light{color:#f5f7f1;border-color:#6a766c}.case-cta small{margin-top:2.3rem;color:#899189;font:400 .6rem var(--f-mono)}.case-footer{padding:2rem 0;border-top:1px solid var(--line);color:var(--muted)}.case-footer>div{display:flex;justify-content:space-between;gap:2rem;font:400 .6rem var(--f-mono)}.case-footer nav{display:flex;gap:1.2rem}.case-footer a{color:var(--muted)}
@media(max-width:960px){.case-nav__links{display:none}.case-hero__inner,.case-intro__grid,.case-heading--split,.case-boundaries,.case-cta__grid{grid-template-columns:1fr}.case-brief{min-height:18rem}.case-proof{grid-template-columns:repeat(2,1fr)}.case-proof>div:nth-child(2){border-right:0}.case-intro__copy{padding-top:2rem}.case-flow__item,.case-flow__item--reverse{grid-template-columns:1fr}.case-flow__item--reverse .case-flow__copy,.case-flow__item--reverse .case-shot{order:initial}.case-forecast__gallery{grid-template-columns:1fr}.case-shot--small{width:72%;margin-left:auto;transform:none}.case-decisions{grid-template-columns:repeat(2,1fr)}.case-decisions article:nth-child(n){transform:none;border-right:1px solid var(--line)}.case-decisions article:nth-child(even){border-right:0}.case-metrics{grid-template-columns:repeat(2,1fr)}.case-metrics article:nth-child(2){border-right:0}.case-cta__grid>*{grid-column:auto!important}.case-cta__grid>p:not(.case-index){margin-top:2rem}}
@media(max-width:640px){.case-nav__inner{height:64px}.case-brand span,.case-nav__portfolio{display:none}.case-hero{padding-top:7.8rem}.case-hero h1{font-size:clamp(4.3rem,25vw,7rem)}.case-kicker span,.case-product__bar span:last-child{display:none}.case-proof,.case-principles,.case-decisions,.case-metrics{grid-template-columns:1fr}.case-proof>div,.case-proof>div:first-child{padding:1rem 0;border-right:0;border-bottom:1px solid var(--line)}.case-principles article,.case-principles article+article,.case-decisions article:nth-child(n),.case-metrics article,.case-metrics article:first-child{min-height:auto;padding:1.4rem 0 2rem;border-right:0;border-bottom:1px solid var(--line)}.case-principles h3,.case-decisions h3,.case-metrics h3{margin-top:1.4rem}.case-shot--small{width:100%}.case-shot figcaption{display:none}.case-cta h2{font-size:clamp(2.7rem,14vw,4rem)}.case-footer>div{flex-direction:column}.case-footer nav{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.case-shot:hover img,.case-button:hover{transform:none}}

/* Vergrößerbare Produktansichten */
.case-zoom{position:relative;display:block;width:100%;padding:0;overflow:hidden;background:#0b1018;color:#f5f7f1;text-align:left;cursor:zoom-in}.case-zoom img{width:100%}.case-zoom__hint{position:absolute;right:.85rem;bottom:.85rem;display:flex;align-items:center;gap:.45rem;padding:.5rem .65rem;background:rgba(9,13,11,.86);border:1px solid rgba(213,255,114,.45);color:#eef2eb;font:500 .6rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(10px);transform:translateY(.2rem);opacity:.82;transition:opacity .2s,transform .2s,border-color .2s}.case-zoom__hint svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.7}.case-zoom:hover .case-zoom__hint,.case-zoom:focus-visible .case-zoom__hint{opacity:1;transform:none;border-color:#d5ff72}.case-product .case-zoom{display:block}
body.is-lightbox-open{overflow:hidden}.case-lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(5,7,6,.94);color:#f5f7f1}.case-lightbox::backdrop{background:rgba(5,7,6,.94);backdrop-filter:blur(12px)}.case-lightbox__panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;height:100dvh}.case-lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;padding:.75rem clamp(1rem,3vw,2rem);border-bottom:1px solid #303831;background:#0d120f}.case-lightbox__title{overflow:hidden;color:#b5beb6;font:500 .68rem var(--f-mono);letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.case-lightbox__actions{display:flex;gap:.55rem}.case-lightbox__action{min-height:2.4rem;padding:.5rem .75rem;border:1px solid #49534a;color:#eef2eb;font:500 .65rem var(--f-mono);transition:background .18s,border-color .18s,color .18s}.case-lightbox__action:hover,.case-lightbox__action[aria-pressed=true]{background:#d5ff72;border-color:#d5ff72;color:#11160c}.case-lightbox__viewport{display:grid;place-items:center;min-width:0;min-height:0;padding:clamp(.75rem,2vw,1.5rem);overflow:auto;overscroll-behavior:contain}.case-lightbox__image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 8.5rem);box-shadow:0 28px 80px #0008;cursor:zoom-in}.case-lightbox__viewport.is-actual{display:block}.case-lightbox__viewport.is-actual .case-lightbox__image{max-width:none;max-height:none;margin:auto;cursor:zoom-out}.case-lightbox__caption{min-height:3.5rem;padding:.85rem clamp(1rem,3vw,2rem);border-top:1px solid #303831;background:#0d120f;color:#8f9990;font-size:.68rem;line-height:1.5}.case-lightbox__help{float:right;color:#69736a;font-family:var(--f-mono)}
@media(max-width:640px){.case-zoom__hint{right:.55rem;bottom:.55rem}.case-lightbox__bar{align-items:flex-start;min-height:4.5rem}.case-lightbox__title{padding-top:.55rem}.case-lightbox__action{padding-inline:.6rem}.case-lightbox__caption{font-size:.62rem}.case-lightbox__help{display:none}}


/* ============================================================================
   Nachtrag UI/UX-Audit 09.09.2026 — Mobile Navigation
   Ab 960px war .case-nav__links ausgeblendet, ohne Toggle. Ab 640px fiel
   zusaetzlich .case-nav__portfolio weg, sodass keine Sprungmarke uebrig blieb.
   ========================================================================== */
.case-nav__toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.case-nav__toggle .icon { width: 1.15rem; }
.case-nav__toggle .icon--close { display: none; }
.case-nav__toggle[aria-expanded='true'] .icon--menu { display: none; }
.case-nav__toggle[aria-expanded='true'] .icon--close { display: block; }

@media (max-width: 960px) {
  .case-nav__toggle { display: grid; }

  .case-nav__links {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: .25rem var(--gutter) 1.5rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }
  .case-nav__links[data-open='true'] { display: flex; }

  .case-nav__links a {
    padding: .95rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: .95rem;
  }
  .case-nav__links a:last-child { border-bottom: 0; }
}

/* Touch-Ziele: WCAG 2.2 AA 2.5.8 */
@media (max-width: 960px) {
  .case-footer nav a,
  .case-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .case-footer nav { gap: .25rem 1.4rem; }
}