/* ══════════════════════════════════════════════════════════════
   REFURBISHED HARDWARE — „Das Gerät stirbt nicht. Es wechselt den Job."
   WELT   Produkt-Dokumentation, physisch gedacht
   HELD   EIN Gerät (ThinkPad T14, SN PF-2XK9)
   KAMERA Aufsicht → Explosionszeichnung → Biografie
   MOMENT dasselbe Gerät wechselt sichtbar den Besitzer

   HINWEIS: Es existiert keine echte Gerätefotografie im Repo.
   Statt Stockbilder als „unsere Hardware" auszugeben, ist die
   Materialität hier in CSS gebaut — ehrlich als Zeichnung lesbar.
══════════════════════════════════════════════════════════════ */
.dev{--dv-bg:#14120f;--dv-panel:#1d1a15;--dv-ink:#efeae1;--dv-mut:#948b7c;
  --dv-line:rgba(255,255,255,.1);--dv-metal:#3a352d;--dv-acc:#c98a3c;--dv-life:#6fae7c;
  --dv-e:cubic-bezier(.22,.9,.24,1);
  position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--dv-bg);color:var(--dv-ink);overflow-x:clip}
.dev-in{width:min(1220px,92vw);margin-inline:auto}
.dev-slug{padding:clamp(4.5rem,9vh,7rem) 0 clamp(1.2rem,3vh,1.8rem)}
.dev-slug__k{font-family:var(--font-heading);font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dv-acc)}
.dev-slug__h{font-family:var(--font-heading);font-weight:800;letter-spacing:-.033em;font-size:clamp(1.45rem,3.2vw,2.35rem);margin:.6rem 0 .5rem;max-width:22ch}
.dev-slug__c{margin:0;color:var(--dv-mut);font-size:.93rem;line-height:1.62;max-width:58ch}

.dev-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1rem,3vw,2.2rem);align-items:start}
@media(max-width:900px){.dev-stage{grid-template-columns:1fr}}

/* Das Gerät — eine Zeichnung, kein Foto */
.dev-obj{border:1px solid var(--dv-line);border-radius:12px;background:var(--dv-panel);padding:clamp(1rem,2.6vw,1.6rem)}
.dev-obj__k{display:flex;justify-content:space-between;gap:.6rem;font-family:var(--font-heading);font-size:.6rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dv-mut);margin:0 0 .9rem}
.dev-lap{position:relative;aspect-ratio:16/11;perspective:900px}
.dev-lid{position:absolute;left:6%;top:4%;width:88%;height:58%;border-radius:8px 8px 3px 3px;
  background:linear-gradient(160deg,#464036,#2b2721);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px rgba(0,0,0,.5);
  transform-origin:50% 100%;transition:transform .7s var(--dv-e)}
.dev-scr{position:absolute;inset:7% 6%;border-radius:4px;background:linear-gradient(180deg,#0e1a16,#0a1210);
  border:1px solid rgba(255,255,255,.06);display:grid;place-items:center}
.dev-scr__t{font-size:.62rem;color:#6f8b7f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}
.dev-base{position:absolute;left:2%;bottom:4%;width:96%;height:36%;border-radius:4px 4px 9px 9px;
  background:linear-gradient(180deg,#3d382f,#25211b);border:1px solid rgba(255,255,255,.11);
  box-shadow:0 16px 36px rgba(0,0,0,.55)}
.dev-keys{position:absolute;inset:14% 8% 34% 8%;border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 6px,transparent 6px 9px),
             repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 5px,transparent 5px 9px)}
.dev-pad{position:absolute;left:41%;bottom:9%;width:18%;height:16%;border-radius:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09)}
/* Gebrauchsspuren: echt gedacht, nicht kosmetisch */
.dev-wear{position:absolute;border-radius:50%;background:rgba(255,255,255,.09);opacity:0;transition:opacity .5s var(--dv-e)}
.dev.is-worn .dev-wear{opacity:1}
.dev-wear--1{left:24%;bottom:16%;width:9%;height:5%;transform:rotate(-8deg)}
.dev-wear--2{left:58%;bottom:15%;width:7%;height:4%}
.dev-wear--3{left:12%;top:9%;width:4%;height:2.5%;background:rgba(255,255,255,.06)}

/* Explosionsansicht */
.dev-parts{position:absolute;inset:0;pointer-events:none}
.dev-part{position:absolute;left:50%;border:1px solid rgba(201,138,60,.45);background:rgba(201,138,60,.12);
  border-radius:5px;padding:.22rem .5rem;font-size:.62rem;font-family:var(--font-heading);font-weight:700;color:#ffd9a8;
  white-space:nowrap;opacity:0;transform:translate(-50%,0);transition:opacity .5s var(--dv-e),transform .5s var(--dv-e)}
.dev.is-open .dev-part{opacity:1}
.dev.is-open .dev-part--ssd{transform:translate(-50%,-118%)}
.dev.is-open .dev-part--ram{transform:translate(-50%,-70%)}
.dev.is-open .dev-part--akku{transform:translate(-50%,-22%)}
.dev.is-open .dev-part--luef{transform:translate(-50%,26%)}
.dev.is-open .dev-part--ports{transform:translate(-150%,68%)}.dev.is-open .dev-part--keys{transform:translate(48%,68%)}
.dev-part--ssd,.dev-part--ram,.dev-part--akku,.dev-part--luef,.dev-part--ports,.dev-part--keys{top:50%}
.dev.is-open .dev-lid{transform:rotateX(-16deg) translateY(-6%)}
.dev.is-open .dev-base{box-shadow:0 22px 48px rgba(0,0,0,.7),inset 0 0 0 2px rgba(201,138,60,.12)}

.dev-tools{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.dev-b{appearance:none;cursor:pointer;font:inherit;font-family:var(--font-heading);font-weight:700;font-size:.78rem;
  border:1px solid var(--dv-line);border-radius:999px;padding:.45rem .95rem;background:rgba(255,255,255,.04);color:var(--dv-ink);
  transition:border-color .2s var(--dv-e),background .2s var(--dv-e)}
.dev-b:hover{border-color:var(--dv-acc)}
.dev-b.is-on{background:var(--dv-acc);color:#1a1206;border-color:var(--dv-acc)}
.dev-b:focus-visible{outline:2px solid var(--dv-acc);outline-offset:2px}
.dev-note{margin:.8rem 0 0;font-size:.74rem;color:var(--dv-mut);line-height:1.5}

/* Die Biografie */
.dev-bio{border:1px solid var(--dv-line);border-radius:12px;background:var(--dv-panel);padding:clamp(1rem,2.6vw,1.5rem)}
.dev-bio__k{font-family:var(--font-heading);font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dv-mut);margin:0 0 .8rem}
.dev-years{display:flex;gap:.3rem;margin-bottom:1rem}
.dev-y{flex:1;appearance:none;cursor:pointer;font:inherit;text-align:center;
  border:1px solid var(--dv-line);border-radius:7px;padding:.42rem .2rem;background:rgba(255,255,255,.03);color:var(--dv-ink);
  font-family:var(--font-heading);font-weight:800;font-size:.72rem;transition:border-color .2s var(--dv-e),background .2s var(--dv-e)}
.dev-y:hover{border-color:var(--dv-acc)}
.dev-y.is-on{background:var(--dv-acc);color:#1a1206;border-color:var(--dv-acc)}
.dev-y:focus-visible{outline:2px solid var(--dv-acc);outline-offset:2px}
.dev-ev{transition:opacity .22s var(--dv-e)}
.dev-ev.is-swap{opacity:0}
.dev-ev__o{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.22rem .6rem;margin-bottom:.5rem;
  background:rgba(111,174,124,.14);color:#a8e0b4;border:1px solid rgba(111,174,124,.35)}
.dev-ev__t{font-family:var(--font-heading);font-weight:800;font-size:1.05rem;margin:0 0 .35rem}
.dev-ev__s{font-size:.86rem;color:var(--dv-mut);line-height:1.62;margin:0 0 .7rem}
.dev-ev__m{font-size:.72rem;color:var(--dv-mut);border-top:1px solid var(--dv-line);padding-top:.6rem;margin:0}
.dev-ev__m b{color:var(--dv-ink)}

.dev-read{padding:clamp(3.5rem,9vh,6rem) 0 clamp(4rem,10vh,7rem);border-top:1px solid var(--dv-line);margin-top:clamp(2.5rem,6vh,4rem)}
.dev-read__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,5vw,4rem);align-items:start}
@media(max-width:880px){.dev-read__grid{grid-template-columns:1fr}}
.dev-read__lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.66;margin:0 0 1rem}
.dev-read__p{font-size:.93rem;line-height:1.72;color:var(--dv-mut);margin:0 0 .9rem;max-width:62ch}
.dev-read__p b{color:var(--dv-ink)}
.dev-read__p a,.dev-qa__a a,.dev-rel a{color:var(--dv-acc);text-underline-offset:3px}
.dev-qa{border-left:1px solid var(--dv-line);padding-left:clamp(.9rem,2vw,1.6rem)}
@media(max-width:880px){.dev-qa{border-left:none;border-top:1px solid var(--dv-line);padding:1.4rem 0 0}}
.dev-qa__h{font-family:var(--font-heading);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dv-mut);margin:0 0 1rem}
.dev-qa__i{margin:0 0 1.1rem}
.dev-qa__q{font-family:var(--font-heading);font-weight:700;font-size:.86rem;margin:0 0 .28rem}
.dev-qa__a{font-size:.82rem;line-height:1.62;color:var(--dv-mut);margin:0}
.dev-close{margin-top:clamp(2rem,5vh,3rem);padding-top:1.4rem;border-top:1px solid var(--dv-line)}
.dev-close__t{font-family:var(--font-heading);font-weight:800;letter-spacing:-.028em;font-size:clamp(1.15rem,2.3vw,1.6rem);margin:0 0 .9rem;max-width:32ch}
.dev-go{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-heading);font-weight:700;font-size:.88rem;
  color:#1a1206;background:var(--dv-acc);text-decoration:none;padding:.68rem 1.25rem;border-radius:999px;transition:transform .22s var(--dv-e)}
.dev-go:hover{transform:translateY(-2px)}
.dev-go--q{background:transparent;color:var(--dv-ink);border:1px solid var(--dv-line)}
.dev-rel{margin:1.1rem 0 0;font-size:.82rem;color:var(--dv-mut)}
@media(prefers-reduced-motion:reduce){.dev-lid,.dev-part,.dev-wear,.dev-ev{transition:none}}
@media(max-width:520px){.dev.is-open .dev-part--ports{transform:translate(-115%,76%)}.dev.is-open .dev-part--keys{transform:translate(15%,76%)}.dev-part{font-size:.55rem}}