/* Lightweight mobile presentation. No webfonts, canvas or scroll choreography. */
:root{--base:#f7f7f2;--ink:#182322;--petrol:#182322;--muted:#596360;--border:#d9ded8;--mint:#9ac5ba;--display:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--body:var(--display)}
*{box-sizing:border-box}html{scroll-padding-top:95px}body{margin:0;background:var(--base);color:var(--ink);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.2;letter-spacing:-.04em;overflow-wrap:break-word}h1{font-size:clamp(34px,8.8vw,54px);font-weight:650}h2{font-size:32px}h3{font-size:24px}p{color:var(--muted)}.wrap{width:calc(100% - 36px);max-width:680px;margin-inline:auto}:focus-visible{outline:3px solid #3d635a;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip{position:fixed;top:-100px;left:18px;z-index:50;background:var(--ink);color:white;padding:12px}.skip:focus{top:12px}
.nav-shell{position:sticky;top:10px;z-index:30;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;width:calc(100% - 36px);margin:10px auto 0;padding:10px 12px;background:#f7f7f2f7;border:1px solid var(--border);border-radius:14px}.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:18px;font-weight:700;letter-spacing:-.8px}.brand img{width:28px;height:28px}.brand-light{font-weight:500;color:var(--muted)}.menu-toggle{display:none}.js .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;background:var(--base);color:var(--ink);border:1px solid var(--border);border-radius:8px}.menu-lines{display:none}.nav-shell nav{display:grid;width:100%;gap:4px;border-top:1px solid var(--border);padding-top:8px}.js .nav-shell nav{display:none}.js .menu-open nav{display:grid}.nav-shell nav a{display:flex;align-items:center;min-height:48px;padding:8px 14px;border-radius:8px}.nav-contact{background:var(--ink);color:white}
.eyebrow{font-size:12px;line-height:1.6;font-weight:650;letter-spacing:.8px;text-transform:uppercase;margin-bottom:16px}.highlight{background:linear-gradient(transparent 75%,#9ac5ba55 75%,#9ac5ba55 96%,transparent 96%)}.button{display:flex;align-items:center;justify-content:center;min-height:54px;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.5;font-weight:650;text-align:center}.primary{background:var(--mint);color:var(--ink)}.text-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid var(--mint);font-size:15px;font-weight:600;padding-block:10px 7px}.hero{padding:44px 0 32px}.hero-description{margin-top:24px}.actions{display:grid;gap:12px;margin-top:24px}.actions .text-link{justify-self:start}.hero-person{display:flex;align-items:center;gap:12px;margin-top:28px}.hero-person img{border-radius:50%;width:44px;height:44px}.hero-person p{font-size:12px}.hero-person strong,.hero-person span{display:block}.hero-person strong{color:var(--ink)}
.hero-collage{margin-top:32px}.hero-camera{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-tile{display:block;min-height:100px;padding:14px;border:1px solid #fff2;border-radius:14px;color:#fff;background:#191b1c;order:1}.hero-tile-finance{order:2;background:#1a2332}.hero-tile-winkel{order:3;background:#142634}.hero-tile-seeblick{order:4;background:#ebe5dc;color:#302a25}.hero-tile-copy{display:block}.hero-tile-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}.hero-tile-name{display:block;font-size:17px;font-weight:650;line-height:1.2}.hero-tile-accent{color:#4ade80}.hero-tile-subtitle,.hero-tile-visual,.hero-tile-name img,.hero-tile-name .setrack-logo,.hero-tile-name .seeblick-swan,.scene-glow,.collage-orbit,.scene-progress{display:none}.hero-tile-winkel .hero-tile-name::after{content:'Winkel Baugesellschaft'}.scene-caption{font-size:12px;color:var(--muted);margin-top:12px}.project-index{padding:20px;border:1px solid var(--border);border-radius:20px;background:#fff9;display:grid;gap:8px}.index-label{font-size:12px;color:var(--muted);margin-bottom:4px}.project-index a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px}.index-number{font-size:12px;color:var(--muted);padding:3px 5px;border:1px solid var(--border);border-radius:7px}.work-section{padding-top:64px}.section-heading{display:grid;gap:20px;margin-bottom:28px}
.featured,.client-project{--setrack-accent:#47d1c9;--client-accent:#4ade80;--card-ink:#f4f6f7;--card-muted:#c6ccd2;position:relative;overflow:hidden;border-radius:22px;background:#191b1c;color:var(--card-ink);margin-top:28px}.featured-copy,.client-copy{padding:24px}.featured p,.client-project p{color:var(--card-muted)}.setrack-brand,.client-brand{display:flex;align-items:center;gap:12px;font-size:38px}.setrack-logo{display:block;flex-shrink:0;width:36px;height:36px;background:var(--setrack-accent);mask:url('/assets/portfolio-20261023-editorial/setrack-logo.png') center/contain no-repeat}.setrack-brand{color:#fff}.project-subtitle,.client-subtitle{font-size:24px;line-height:1.4;font-weight:600;letter-spacing:-.03em;margin-top:24px}.project-description,.client-description{margin-top:20px}.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0;padding:0}.tags li{font-size:12px;border:1px solid #ffffff30;border-radius:8px;padding:5px 9px}.setrack-themes{padding:16px;background:#ffffff08;border:1px solid #ffffff20;border-radius:16px}.setrack-themes p{font-size:12px;margin-bottom:8px}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-option{display:flex;align-items:center;gap:8px;min-height:44px;color:#eee;background:transparent;border:1px solid transparent;border-radius:8px;padding:8px;font-size:13px}.theme-option[aria-pressed=true]{border-color:var(--setrack-accent);background:#ffffff10}.theme-dot{width:10px;height:10px;border-radius:50%;background:#47d1c9}.theme-sky{background:#66b3ff}.theme-lavendel{background:#c49eff}.theme-pumpkin{background:#ffb361}.pale{background:var(--setrack-accent);color:#142322;margin-top:16px}.featured-footnote{display:block;font-size:12px;color:var(--card-muted);margin-top:16px}.app-stage{padding:0 24px 24px}.device-pair{display:flex;align-items:end;justify-content:center;gap:12px}.phone{width:44%;height:auto}.phone-back{width:40%}.stage-word,.project-atmosphere,.seeblick-scenery,.project-cursor-layer{display:none}.setrack-detail{margin-top:-1px;background:#191b1c;color:#f4f6f7;border-radius:0 0 22px 22px}.setrack-detail-panel{padding:24px;display:grid;gap:24px;border-top:1px solid #ffffff25}.setrack-detail h3{font-size:23px}.setrack-detail p{color:#c6ccd2}.detail-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}.detail-links .text-link{color:var(--setrack-accent,#47d1c9);border-color:currentColor}.featured{border-radius:22px 22px 0 0}
.client-finance{background:#1a2332}.client-winkel{background:#142634;--client-accent:#ff9b96}.client-seeblick{background:#eee8df;--client-accent:#574638;--card-ink:#302a25;--card-muted:#5e5148}.client-brand img{width:44px;height:44px;border-radius:9px}.brand-name{display:flex;flex-direction:column}.brand-accent{color:var(--client-accent)}.winkel-wordmark{max-width:210px}.winkel-wordmark img{width:100%;filter:brightness(0) invert(1)}.client-role{padding:18px;border:1px solid #ffffff30;border-radius:12px;margin:22px 0}.client-role>span{font-size:13px;font-weight:600;color:var(--client-accent)}.client-role p{font-size:14px;margin-top:8px}.client-seeblick .client-role,.client-seeblick .tags li{border-color:#57463830}.client-button{background:var(--client-accent);color:#142322}.client-seeblick .client-button{color:#fff}.project-detail-link{margin-top:14px}.client-stage{padding:0 24px 24px}.browser-mockup{display:block;overflow:hidden;border-radius:10px;border:1px solid #ffffff30}.window-top{display:flex;align-items:center;justify-content:center;background:#ffffff09;height:30px;font-size:11px}.window-dots,.window-mark{display:none}.client-stage figcaption{font-size:12px;color:var(--card-muted);margin-top:14px;text-align:center}.seeblick-kicker{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.client-seeblick .client-brand{font-family:Georgia,serif;font-weight:400}
.about-section{margin-top:64px;padding:48px 0;background:#eeefea}.about-grid{display:grid;gap:32px}.about-copy>p:not(.eyebrow){margin-top:22px}.working{display:flex;gap:14px;padding:22px 0;border-top:1px solid var(--border);margin-top:20px}.working>span{font-size:12px;color:var(--muted)}.working h3{font-size:18px;margin-bottom:8px}.contact-section{padding:36px 24px;margin-top:64px;text-align:center;border:1px solid var(--border);border-radius:22px;background:#e6efeb}.contact-signet img{margin:0 auto 24px}.contact-section h2{font-size:30px}.contact-section>p:not(.eyebrow){margin:22px 0}.email{display:block;font-size:14px;overflow-wrap:anywhere;margin-top:16px}.contact-person{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;font-size:12px;text-align:left}.contact-person img{border-radius:50%}footer.wrap{display:grid;gap:16px;margin-top:40px;padding:24px 0;border-top:1px solid var(--border);font-size:13px}footer>div{display:flex;gap:22px}footer>div a{min-height:44px;display:flex;align-items:center}.device-credit{font-size:11px}
.hero-camera{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-tile{min-width:0}.hero-tile-label{overflow-wrap:anywhere}.hero-tile-finance .hero-tile-accent{display:block}.hero-tile-winkel .hero-tile-name{font-size:clamp(14px,4vw,17px);overflow-wrap:anywhere}
/* Mobile glass uses static highlights instead of costly backdrop filters. */
.hero-copy.hero-copy h1{font-size:clamp(30px,8.2vw,48px)}.hero-copy .hero-person{padding-top:18px;border-top:1px solid #b9cbc350}.section-heading.section-heading h2{font-size:clamp(27px,7.5vw,32px)}.nav-shell{background:linear-gradient(120deg,#f7f8f0f5,#eef2ebf0);border-color:#ffffffe0;box-shadow:inset 0 1px 0 #fff,0 8px 24px -20px #203c3240}.nav-shell nav .nav-contact{gap:9px;background:linear-gradient(135deg,#263d37,#142521);border:1px solid #658c7c70;box-shadow:inset 0 1px 0 #ffffff1c}.nav-contact::before{content:'';width:6px;height:6px;border-radius:50%;background:#b4dbc9;box-shadow:0 0 0 3px #9ac5ba1c}


/* Direct WhatsApp link: inline artwork, no SDK, timer or third-party request. */
.whatsapp-contact { position: fixed; z-index: 40; right: max(18px,env(safe-area-inset-right,0px)); bottom: calc(26px + env(safe-area-inset-bottom,0px)); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid #ffffffb3; border-radius: 20px; background: linear-gradient(145deg,#285f4e,#154231); color: #fff; box-shadow: inset 0 1px 0 #ffffff38,inset 0 -1px 0 #0d302340,0 10px 26px -12px #173f3470; -webkit-tap-highlight-color: #9ac5ba33; }
.whatsapp-contact svg { display: block; width: 28px; height: 28px; }
.whatsapp-contact:focus-visible { outline: 3px solid #3d635a; outline-offset: 4px; }
.whatsapp-contact-label { display: none; }
@media (min-width:720px) {
  .whatsapp-contact { right: max(28px,env(safe-area-inset-right,0px)); bottom: calc(28px + env(safe-area-inset-bottom,0px)); }
  .whatsapp-contact-label { display: block; position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 7px 12px; border: 1px solid #d9ded8; border-radius: 11px; background: #f7f9f3; color: #263e34; font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; }
  .whatsapp-contact:focus-visible .whatsapp-contact-label { opacity: 1; }
}
@media (hover:hover) and (pointer:fine) {
  .whatsapp-contact:hover { background: linear-gradient(145deg,#34775f,#1b553f); box-shadow: inset 0 1px 0 #ffffff4d,0 12px 28px -12px #173f3490; }
  .whatsapp-contact:hover .whatsapp-contact-label { opacity: 1; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .whatsapp-contact { transition: transform .22s ease,box-shadow .22s ease; }
  .whatsapp-contact:hover { transform: translateY(-3px); }
  .whatsapp-contact-label { transition: opacity .18s ease; }
}

.setrack-story{overflow:hidden;isolation:isolate;border:1px solid #ffffff20;border-radius:22px;background:#191b1c;margin-top:28px}.setrack-story>.featured{margin-top:0;border-radius:0}.setrack-story>.setrack-detail{margin:0;border-radius:0}

/* Open portrait, with static masks and no glass or animation. */
.portrait { position: relative; width: 100%; max-width: 360px; margin-inline: auto; }
.portrait-visual { position: relative; isolation: isolate; border-bottom: 1px solid #18232230; }
/* Use the explicitly selected transparent portrait directly. */
.portrait-visual > img { position: relative; display: block; width: 100%; height: auto; }
.portrait figcaption { position: relative; margin-top: 24px; text-align: left; }
.portrait-caption-copy strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.015em; line-height: 1.5; }
.portrait figcaption span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* Match the open editorial hierarchy without desktop effects. */
.section-heading{padding-bottom:28px;border-bottom:1px solid var(--border);margin-bottom:32px}
.section-heading>p{color:var(--muted)}
.client-section-heading{display:grid;gap:16px;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--border)}
.client-section-heading .eyebrow{margin-bottom:10px}
.client-section-heading h3{font-size:27px;line-height:1.2;letter-spacing:-.035em}
.client-section-heading>p{font-size:15px;color:var(--muted)}
.work-section .client-role{padding:16px 0 0;border:0;border-top:1px solid #ffffff30;border-radius:0;background:transparent}
.work-section .client-seeblick .client-role{border-color:#57463830}
.featured .setrack-brand{font-size:44px}
.hero-tile-setrack{grid-column:1/-1;min-height:104px;border-color:#47d1c966}
.hero-tile-setrack .hero-tile-name{font-size:24px}
.hero-tile-seeblick{grid-column:1/-1}
.contact-section{background:#edf2ed}

.hero-heading-line{display:block}
.work-section .client-button{border-radius:10px}
.client-project .tags li{border-radius:6px}