:root { --ink:#11110f; --paper:#f4f2ec; --line:#c8c6bf; --muted:#6c6b66; --acid:#c8ff00; --page-gutter:clamp(22px,2.5vw,36px); --section-space:clamp(76px,8vw,118px); }
body.dark { --ink:#f0f0eb; --paper:#10110f; --line:#343530; --muted:#afb0a9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.45 Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1320px,100%); margin:auto; padding:0 var(--page-gutter); }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
nav { height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { justify-self:start; font-size:11px; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.nav-links { display:flex; gap:clamp(18px,2vw,30px); color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; }
.nav-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.contact { padding:7px 10px; color:var(--paper); background:var(--ink); font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.back { display:inline-block; margin:24px 0 0; font-size:12px; font-weight:bold; }
.project-title { padding:clamp(48px,6vw,76px) 0 clamp(32px,4vw,52px); display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(28px,4vw,56px); }
h1 { margin:10px 0 0; max-width:850px; font-size:clamp(50px,8vw,120px); font-weight:800; line-height:.84; letter-spacing:-.085em; }
.project-summary { align-self:end; margin:0; font-size:17px; line-height:1.35; }
.hero-image { height:min(66vw,790px); overflow:hidden; background:#262625; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.facts { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); }
.fact { min-height:120px; padding:18px 16px 20px 0; border-right:1px solid var(--line); }
.fact + .fact { padding-left:16px; }
.fact:last-child { border-right:0; }
.fact strong { display:block; margin-top:20px; font-size:14px; line-height:1.2; }
.case { display:grid; grid-template-columns:1fr 2fr; gap:clamp(46px,7vw,96px); padding:var(--section-space) 0; }
.case h2, .case h3 { margin:0; font-size:clamp(32px,4vw,56px); letter-spacing:-.065em; line-height:.92; }
.case h3 { font-size:clamp(24px,3vw,40px); }
.case p { max-width:700px; margin:0 0 24px; font-size:18px; line-height:1.4; }
.case .detail { color:var(--muted); font-size:15px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:50px; }
.principle { min-height:190px; padding:16px; border-top:2px solid var(--ink); background:#e7e5df; }
.principle b { display:block; margin-bottom:54px; font-size:13px; }
.feature-image { margin:0; overflow:hidden; background:#d9d8d4; }
.feature-image img { width:100%; max-height:700px; display:block; object-fit:cover; }
.next { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:clamp(52px,6vw,76px) 0; border-top:1px solid var(--ink); }
.next h2 { max-width:720px; margin:12px 0 0; font-size:clamp(38px,6vw,82px); letter-spacing:-.075em; line-height:.85; }
.next-link { padding:12px 16px; color:var(--paper); background:var(--ink); font-size:12px; font-weight:bold; white-space:nowrap; }
.cv-hero { padding:clamp(48px,6vw,76px) 0 var(--section-space); border-bottom:1px solid var(--ink); }
.cv-intro { display:grid; grid-template-columns:minmax(0,3fr) minmax(340px,2fr); gap:clamp(46px,7vw,96px); align-items:end; }
.cv-hero h1 { max-width:1040px; }
.cv-hero p { max-width:680px; margin:34px 0 0; font-size:18px; line-height:1.4; }
.portrait { width:100%; min-height:0; aspect-ratio:1; margin:0; display:grid; place-items:end center; overflow:visible; border-radius:0; background:transparent; }
.portrait img { width:100%; height:auto; max-width:100%; display:block; object-fit:contain; object-position:center bottom; }
.cv-hero .portrait {
  position:relative;
  width:min(100%,384px);
  min-height:0;
  aspect-ratio:.86;
  justify-self:end;
  padding:8px 10px 0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(32,46,68,.15);
  border-radius:18px;
  background:
    radial-gradient(100% 72% at 84% 8%,rgba(81,174,218,.18) 0%,rgba(81,174,218,0) 62%),
    radial-gradient(90% 70% at 8% 96%,rgba(78,113,214,.12) 0%,rgba(78,113,214,0) 68%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,246,250,.76) 50%,rgba(226,241,239,.68));
  box-shadow:0 30px 80px rgba(49,62,78,.18),inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  backdrop-filter:blur(24px) saturate(120%);
}
.cv-hero .portrait::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 42%,rgba(110,201,196,.04));
  pointer-events:none;
}
.cv-hero .portrait::after {
  content:"";
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  height:19%;
  border-radius:inherit;
  background:linear-gradient(to bottom,transparent 0%,rgba(232,239,243,.52) 58%,rgba(222,237,236,.94) 100%);
  pointer-events:none;
}
.cv-hero .portrait img {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
  transform:scale(1.18);
  transform-origin:center bottom;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.24));
  -webkit-mask-image:none;
  mask-image:none;
}
body.dark .cv-hero .portrait {
  border-color:rgba(255,255,255,.24);
  background:
    radial-gradient(100% 72% at 84% 8%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 64%),
    radial-gradient(90% 70% at 8% 96%,rgba(91,154,211,.1) 0%,rgba(91,154,211,0) 70%),
    linear-gradient(145deg,rgba(137,155,174,.22),rgba(24,36,52,.25) 52%,rgba(15,51,57,.24));
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(26px) saturate(110%) brightness(.72);
  backdrop-filter:blur(26px) saturate(110%) brightness(.72);
}
body.dark .cv-hero .portrait::after { background:linear-gradient(to bottom,transparent 0%,rgba(10,22,33,.46) 58%,rgba(10,27,35,.92) 100%); }
.cv-grid { display:grid; grid-template-columns:1fr 2fr; gap:clamp(46px,7vw,96px); padding:var(--section-space) 0; }
.cv-grid h2 { margin:0; font-size:clamp(30px,4vw,54px); letter-spacing:-.065em; line-height:.9; }
.cv-row { display:grid; grid-template-columns:150px 1fr; gap:25px; padding:21px 0; border-top:1px solid var(--line); }
.cv-row:last-child { border-bottom:1px solid var(--line); }
.cv-row time, .cv-row .place { color:var(--muted); font-size:12px; }
.cv-row h3 { margin:0 0 5px; font-size:17px; line-height:1.2; }
.cv-row p { margin:0; color:#40403d; }
body.dark .cv-row p { color:#c6c7c0; }
.cv-row.has-brand { grid-template-columns:125px minmax(0,1fr) 170px; align-items:center; }
.company-brand { grid-column:3; grid-row:1; display:flex; align-items:center; color:var(--ink); font-size:15px; font-weight:900; line-height:.95; letter-spacing:-.06em; }
.company-brand::before { display:none; }
.company-logo { display:block; background:transparent; object-fit:contain; object-position:left center; }
.company-logo.bosch { width:142px; height:32px; }
.company-logo.asus { width:108px; height:28px; }
.company-logo.phoenix { width:130px; height:27px; }
.logo-dark { display:none; filter:invert(1); }
body.dark .logo-light { display:none; }
body.dark .logo-dark { display:block; }
.company-brand.morgen { font-size:15px; letter-spacing:-.08em; }
.company-brand.nec { font-size:13px; letter-spacing:-.04em; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tags span { padding:8px 10px; border:1px solid var(--ink); font-size:11px; font-weight:bold; }
.cv-contact { display:flex; gap:28px; margin-top:36px; font-size:15px; font-weight:bold; }
footer { padding:30px 0; color:var(--paper); background:var(--ink); }
footer .wrap { display:flex; justify-content:space-between; }
body.dark .principle { background:#1c1d1a; }
body.dark .feature-image { background:#20211f; }
@media (max-width:760px) { :root{--page-gutter:14px;--section-space:64px}.nav-links{display:none}.project-title,.case,.cv-grid,.cv-intro{grid-template-columns:1fr;gap:22px}.hero-image{height:480px}.facts{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}.principles{grid-template-columns:1fr}.case{padding:65px 0}.cv-grid{padding:65px 0}.cv-row,.cv-row.has-brand{grid-template-columns:1fr;gap:5px}.company-brand{grid-column:auto;grid-row:auto;margin-top:12px}.next{align-items:flex-start;flex-direction:column}.cv-contact{flex-direction:column;gap:8px}.portrait{width:min(100%,420px);min-height:0;max-width:420px;margin-inline:auto} }