/* Schriften (lokal gehostet) */
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/barlow-condensed-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/barlow-condensed-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/barlow-condensed-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/barlow-condensed-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --font-sans: 'Manrope', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}
a { color:inherit; }
:root {
  --background: oklch(.985 0 0);
  --foreground: oklch(.155 0 0);
  --primary: oklch(.155 0 0);
  --primary-foreground: oklch(.985 0 0);
  --secondary: oklch(.93 0 0);
  --muted: oklch(.95 0 0);
  --muted-foreground: oklch(.49 0 0);
  --border: oklch(.84 0 0);
  --image-overlay: linear-gradient(180deg, transparent 30%, oklch(.08 0 0 / .55));
}
* { box-sizing: border-box; border-color: var(--border); }
body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
::selection { background:var(--foreground); color:var(--background); }
a { text-decoration:none; }
button, a, input, textarea, select { -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:2px solid var(--foreground); outline-offset:5px; }
.site-shell { position:sticky; top:0; z-index:50; background:var(--background); transition:transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s; }
.site-shell.is-hidden { transform:translateY(-100%); visibility:hidden; transition:transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s linear .42s; }
.site-header { height:100px; margin:0 4.4%; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); gap:30px; position:relative; }
.wordmark { font-family:var(--font-display); font-weight:700; font-size:37px; line-height:1; display:flex; align-items:center; }
.wordmark img { display:block; width:132px; height:auto; }
.wordmark span { font-family:var(--font-sans); font-size:14px; margin-left:3px; margin-top:2px; }
.desktop-nav { display:flex; align-items:center; gap:32px; font-size:12px; font-weight:600; position:absolute; left:50%; transform:translateX(-50%); }
.nav-link { position:relative; padding:8px 0; }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--foreground); transition:width .25s; }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.studio-button { border-radius:0; height:44px; font-size:11px; font-weight:600; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.site-header .mobile-toggle { display:none; }
.page { animation:page-in .65s cubic-bezier(.2,.7,.2,1) both; }
.home-page { animation:home-page-in .65s ease both; }
.scroll-reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
.scroll-reveal.is-visible { opacity:1; transform:translateY(0); }
.project-tile:nth-child(2),.service-row:nth-of-type(2) { transition-delay:100ms; }
.project-tile:nth-child(3),.service-row:nth-of-type(3) { transition-delay:180ms; }
.container { width:auto; max-width:none; margin:0 4.4%; }
.hero { padding-top:42px; }
.hero-eyebrow { display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:600; letter-spacing:1.5px; }
.availability { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:0; font-weight:400; }
.status-dot { width:5px; height:5px; background:var(--foreground); border-radius:50%; box-shadow:0 0 0 3px var(--secondary); }
.hero h1 { font-family:var(--font-display); font-size:140px; font-weight:600; line-height:.88; margin:31px 0 25px; letter-spacing:0; }
.reveal-line { display:block; overflow:hidden; }
.reveal-line > span { display:block; animation:text-in .9s cubic-bezier(.16,1,.3,1) both; }
.reveal-line:nth-child(2) > span { animation-delay:.12s; }
.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; padding-bottom:34px; }
.hero-description { max-width:355px; font-size:12px; line-height:1.9; color:var(--muted-foreground); margin:0; }
.hero-actions { display:flex; gap:23px; align-items:center; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:11px; border-bottom:1px solid var(--border); padding-bottom:7px; }
.hero-image { position:relative; height:390px; overflow:hidden; background:#080908; }
.hero-word-stage { position:absolute; top:12%; left:32px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:18px; color:#f8f7f2; }
.hero-word-prefix,.hero-word-note { grid-column:1 / -1; font-size:9px; font-weight:600; letter-spacing:1.6px; }
.hero-word-prefix { display:flex; align-items:center; gap:.3em; line-height:1; }
.hero-article-static { display:block; height:1em; line-height:1; }
.hero-article-mask { display:block; height:1em; overflow:hidden; }
.hero-article-track { display:block; animation:hero-article 9s cubic-bezier(.65,0,.35,1) infinite; }
.hero-article-track > span { display:block; height:1em; line-height:1; white-space:nowrap; }
.hero-word-mask { height:clamp(58px,9vw,118px); overflow:hidden; font:600 clamp(58px,9vw,118px)/1 var(--font-display); letter-spacing:-.025em; }
.hero-word-track { display:block; animation:hero-words 9s cubic-bezier(.65,0,.35,1) infinite; }
.hero-word-track > span { display:block; height:1em; line-height:1; white-space:nowrap; }
.hero-word-note { margin-top:5px; color:#b9beb4; }
.image-caption { position:absolute; bottom:26px; left:32px; right:32px; z-index:1; display:flex; justify-content:space-between; align-items:end; color:var(--primary-foreground); }
.image-caption strong { font-family:var(--font-display); font-size:79px; font-weight:600; line-height:.9; }
.image-caption p { font-size:9px; letter-spacing:1.3px; margin:12px 0 0; }
.image-caption > span { font-size:10px; }
.hero-stamp { position:absolute; top:25px; right:28px; z-index:1; color:var(--primary-foreground); width:60px; height:60px; animation:spin 24s linear infinite; }
@media(min-width:1201px) {
  .hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:clamp(32px,4vw,64px); row-gap:0; align-items:center; min-height:calc(100vh - 132px); min-height:calc(100svh - 132px); }
  .hero > * { position:relative; top:-40px; }
  .hero-eyebrow { grid-column:1 / -1; }
  .hero h1 { grid-column:1; grid-row:2; font-size:clamp(52px,5.2vw,104px); line-height:.9; margin:clamp(24px,3vw,42px) 0 22px; }
  .hero-bottom { grid-column:1; grid-row:3; flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:0; }
  .hero-description { max-width:560px; font-size:clamp(15px,1.15vw,22px); line-height:1.7; color:var(--foreground); }
  .hero-actions { flex-wrap:wrap; gap:18px 24px; }
  .hero-image { grid-column:2; grid-row:2 / 4; width:100%; height:auto; min-height:clamp(420px,58vh,760px); min-height:clamp(420px,58svh,760px); }
  .hero-word-stage { top:14%; left:32px; }
  .hero-word-mask { height:clamp(58px,6.1vw,110px); font-size:clamp(58px,6.1vw,110px); }
  .image-caption strong { font-size:clamp(48px,4.2vw,80px); }
}
.section { padding:76px 0; }
.section-top { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:30px; }
.eyebrow { font-size:10px; letter-spacing:1.4px; font-weight:600; margin:0 0 15px; }
h2 { font-family:var(--font-display); font-size:58px; line-height:1; font-weight:600; margin:0; }
.project-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.project-tile { display:block; min-width:0; text-align:left; }
.web-demo { padding:0; }
.demo-browserbar { height:25px; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; padding:0 9px; background:#f8f8f6; color:#777; font:500 7px var(--font-sans); letter-spacing:.2px; }
.demo-browserbar > span:nth-child(2) { justify-self:center; background:#efefed; padding:4px 18px; min-width:90px; text-align:center; }
.demo-window-dots { display:flex; gap:3px; }
.demo-window-dots i { width:5px; height:5px; display:block; border-radius:50%; background:#c6c3bd; }
.demo-window-dots i:first-child { background:#d88779; }
.demo-window-dots i:nth-child(2) { background:#dfc27c; }
.demo-window-dots i:nth-child(3) { background:#91af86; }
.demo-browser-icon { justify-self:end; font-size:10px; }
.demo-viewport { height:calc(100% - 25px); position:relative; overflow:hidden; background:#f4f1e9; }
.onepage-track { height:500%; animation:onepage-scroll 24s cubic-bezier(.65,0,.35,1) infinite; animation-play-state:paused; }
.web-demo-onepage.is-playing .onepage-track { animation-play-state:running; }
.onepage-screen { width:100%; height:20%; position:relative; overflow:hidden; padding:16px 20px; }
.onepage-hero { color:#f4f1e9; background:#282c28; }
.demo-site-nav,.multipage-site-nav { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; font-size:7px; letter-spacing:1px; }
.demo-site-nav strong,.multipage-site-nav strong { font:700 17px var(--font-display); letter-spacing:-.4px; }
.demo-site-nav strong span,.multipage-site-nav strong span { font:8px var(--font-sans); vertical-align:top; }
.demo-site-nav > div { display:flex; gap:clamp(7px,1.5vw,17px); margin-left:auto; font-size:clamp(5px,.65vw,8px); letter-spacing:.7px; opacity:.72; }
.demo-site-nav > div b { opacity:1; }
.onepage-hero-copy { position:relative; z-index:1; margin:21px 0 0 5px; }
.onepage-hero-copy small,.onepage-about small,.onepage-services small,.onepage-contact small { display:block; font-size:6px; letter-spacing:1.3px; opacity:.7; }
.onepage-hero-copy strong { display:block; margin-top:7px; font:600 clamp(34px,5.4vw,67px)/.78 var(--font-display); letter-spacing:-1.2px; }
.onepage-hero-copy em,.onepage-about em,.onepage-services em,.onepage-contact em { color:#c8d0ba; font-style:normal; }
.onepage-hero-copy > span { display:block; margin-top:10px; font-size:7px; opacity:.75; }
.onepage-hero-copy > span b { margin-left:10px; font-size:10px; }
.onepage-section-copy { position:relative; z-index:1; margin:16px 0 0 5px; }
.onepage-section-copy strong { display:block; margin-top:7px; font:600 clamp(28px,4.2vw,50px)/.84 var(--font-display); letter-spacing:-.7px; }
.onepage-section-copy p { max-width:48%; margin:9px 0 0; font-size:clamp(6px,.75vw,9px); line-height:1.6; color:#60645b; }
.onepage-about { color:#272a26; background:#d9d6cb; }
.onepage-about .demo-site-nav { color:#272a26; }
.onepage-about em { color:#777e6b; }
.onepage-about .onepage-section-copy > span { display:block; margin-top:12px; font-size:6px; letter-spacing:1px; }
.onepage-architecture { position:absolute; width:53%; height:58%; right:0; bottom:0; overflow:hidden; background:linear-gradient(135deg,#b4b8a7,#73796c); clip-path:polygon(23% 0,100% 0,100% 100%,0 100%,0 36%); }
.onepage-architecture::before { content:''; position:absolute; left:22%; top:0; width:22%; height:100%; background:#e1ded2; transform:skewY(-33deg); transform-origin:top; }
.onepage-architecture::after { content:''; position:absolute; right:13%; top:18%; width:31%; height:82%; background:linear-gradient(90deg,#53584f,#a2a28f); }
.onepage-architecture i { position:absolute; z-index:1; left:42%; top:27%; width:13%; height:24%; background:#30352f; }
.onepage-architecture b { position:absolute; z-index:1; left:4%; top:0; width:80%; height:1px; background:#e6e3d7; transform:rotate(-33deg); transform-origin:left; }
.onepage-services { color:#f1eee5; background:#787c70; }
.onepage-services em { color:#d6dacb; }
.onepage-service-list { position:absolute; right:7%; bottom:9%; width:43%; }
.onepage-service-list span { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid #ffffff70; font-size:clamp(7px,.9vw,11px); }
.onepage-service-list b { font-size:6px; font-weight:400; opacity:.65; }
.onepage-service-list i { margin-left:auto; font-size:10px; font-style:normal; }
.onepage-contact { color:#f1eee5; background:#343a34; }
.onepage-contact-layout { display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:7%; height:calc(100% - 32px); padding:12px 5px 0; }
.onepage-contact-layout > div:first-child > strong { display:block; margin:9px 0; font:600 clamp(25px,3.4vw,41px)/.84 var(--font-display); letter-spacing:-.6px; }
.onepage-contact-layout > div:first-child > span { font-size:6px; letter-spacing:.7px; }
.onepage-contact em { color:#bdc7af; }
.onepage-mini-form { display:flex; flex-direction:column; gap:5px; padding:9px 11px; background:#ffffff0c; }
.onepage-mini-form > span { margin-top:2px; font-size:5px; letter-spacing:.9px; opacity:.7; }
.onepage-mini-form > i { height:1px; background:#f1eee577; }
.onepage-mini-form > .onepage-message-line { height:17px; background:linear-gradient(to bottom,transparent calc(100% - 1px),#f1eee577 calc(100% - 1px)); }
.onepage-mini-form > b { align-self:flex-start; margin-top:5px; padding:6px 8px; background:#f1eee5; color:#343a34; font-size:5px; letter-spacing:.5px; }
.onepage-loop { background:#282c28; }
.onepage-loop .onepage-architecture { background:linear-gradient(135deg,#b4b8a7,#73796c); }
.web-demo-multipage { background:#d9ddd2; }
.multipage-track { position:relative; display:flex; width:500%; height:100%; color:#f5f3e9; background:#28332b; animation:multipage-slide 30s cubic-bezier(.65,0,.35,1) infinite; animation-play-state:paused; }
.web-demo-multipage.is-playing .multipage-track { animation-play-state:running; }
.multipage-screen { position:relative; inset:auto; flex:0 0 20%; width:20%; height:100%; overflow:hidden; padding:24px clamp(12px,3vw,48px); opacity:1; }
.multipage-home { background:#344137; }
.multipage-about,.multipage-services { background:#e8e5d9; color:#252a26; }
.multipage-services { background:#b6bcb0; color:#242923; }
.multipage-contact { background:#343a34; }
.multipage-site-nav { height:32px; border-bottom:1px solid currentColor; }
.multipage-site-nav strong { font-size:clamp(19px,2.5vw,27px); }
.multipage-site-nav > div { display:flex; gap:clamp(10px,2.3vw,28px); margin-left:auto; margin-right:clamp(12px,2.8vw,34px); font-size:clamp(6px,.72vw,9px); letter-spacing:1px; opacity:.8; }
.multipage-site-nav > div b { opacity:1; }
.multipage-site-nav > i { font-style:normal; font-size:10px; }
.multi-home-copy { position:relative; z-index:1; margin:24px 0 0 6px; }
.multi-home-copy small,.multi-inner-heading small,.multi-story-copy small { font-size:6px; letter-spacing:1.2px; opacity:.7; }
.multi-home-copy strong,.multi-inner-heading strong,.multi-story-copy strong { display:block; margin-top:8px; font:600 clamp(32px,5.2vw,64px)/.82 var(--font-display); letter-spacing:-1.2px; }
.multi-home-copy em,.multi-inner-heading em,.multi-story-copy em { color:#d4a26f; font-style:normal; }
.multi-home-copy > span { display:block; margin-top:10px; font-size:7px; }
.multi-landscape { position:absolute; right:0; bottom:0; width:49%; height:66%; overflow:hidden; background:linear-gradient(160deg,#a7a68d 0 29%,#5f6a50 30% 51%,#27382f 52%); clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.multi-landscape::before { content:''; position:absolute; inset:0; background:linear-gradient(119deg,transparent 38%,#c0b69c 39% 41%,transparent 42%),linear-gradient(75deg,transparent 49%,#e2d6b7 50% 51%,transparent 52%); }
.multi-landscape i,.multi-landscape b,.multi-landscape span { position:absolute; bottom:0; display:block; width:2px; height:66%; background:#252e28; transform:rotate(18deg); }
.multi-landscape i { left:32%; height:80%; }.multi-landscape b { left:57%; height:70%; }.multi-landscape span { left:78%; height:92%; }
.multi-inner-heading { position:relative; z-index:1; margin:17px 0 0 3px; }
.multi-inner-heading strong { font-size:clamp(30px,4.5vw,53px); }
.multi-about-copy { max-width:58%; }
.multi-about-copy strong,.multi-services-copy strong { font-size:clamp(24px,3.7vw,44px); }
.multi-about-copy p { margin:10px 0 0; max-width:300px; font-size:clamp(7px,.82vw,10px); line-height:1.65; color:#53574f; }
.multi-about-copy > span { display:block; margin-top:11px; font-size:clamp(5px,.62vw,7px); letter-spacing:.8px; color:#747a6c; }
.multi-services-copy { margin-top:14px; }
.multi-service-list { position:absolute; z-index:2; left:5%; bottom:9%; width:30%; }
.multi-service-list span { display:flex; align-items:center; gap:6px; padding:7px 0; border-top:1px solid #252a264d; font-size:clamp(6px,.78vw,9px); }
.multi-service-list b { font-size:5px; font-weight:400; opacity:.6; }
.multi-service-list strong { font-weight:600; }
.multi-service-list i { margin-left:auto; font-size:9px; font-style:normal; }
.multi-products { position:absolute; display:flex; gap:7px; right:6%; bottom:10%; width:54%; height:38%; }
.multi-products i { flex:1; background:linear-gradient(155deg,#d5d1c3 0 38%,#879082 39% 60%,#393f37 61%); }
.multi-products i:nth-child(2) { background:linear-gradient(135deg,#aeb7aa 0 35%,#343d34 36% 63%,#c6b99f 64%); }
.multi-products i:nth-child(3) { background:linear-gradient(155deg,#b6aa95 0 28%,#626b5c 29% 58%,#30372f 59%); }
.multi-story-art { position:absolute; left:0; top:34px; bottom:0; width:53%; overflow:hidden; background:linear-gradient(158deg,#c7bea9 0 31%,#777c69 32% 54%,#3e4a3f 55%); }
.multi-story-art::before { content:''; position:absolute; left:22%; top:17%; width:55%; height:80%; border-left:2px solid #ded9ca; border-right:2px solid #ded9ca; transform:skewY(-18deg); }
.multi-story-art i { position:absolute; left:16%; bottom:0; width:68%; height:56%; background:linear-gradient(145deg,#343c33,#a8a592); clip-path:polygon(30% 0,100% 0,78% 100%,0 100%); }
.multi-story-art b { position:absolute; left:47%; top:16%; width:2px; height:86%; background:#ded9ca; transform:rotate(17deg); }
.multi-story-art span { position:absolute; left:10px; top:10px; font-size:5px; line-height:1.5; letter-spacing:1px; }
.multi-story-copy { position:absolute; right:8px; top:58px; width:42%; }
.multi-story-copy strong { font-size:clamp(26px,4vw,48px); }
.multi-story-copy em { color:#68765d; }
.multipage-contact .multi-story-art { top:60px; width:41%; }
.multipage-contact .multi-story-copy { top:49px; right:5%; width:53%; }
.multipage-contact .multi-story-copy strong { font-size:clamp(22px,3.2vw,38px); }
.multipage-contact .multi-story-copy em { color:#bdc7af; }
.multi-mini-form { display:flex; flex-direction:column; gap:5px; margin-top:10px; padding:8px 10px; background:#ffffff0c; }
.multi-mini-form > span { margin-top:2px; font-size:clamp(5px,.58vw,7px); letter-spacing:.8px; opacity:.75; }
.multi-mini-form > i { height:1px; background:#f1eee577; }
.multi-mini-form > .multi-message-line { height:14px; background:linear-gradient(to bottom,transparent calc(100% - 1px),#f1eee577 calc(100% - 1px)); }
.multi-mini-form > b { align-self:flex-start; margin-top:3px; padding:5px 7px; background:#f1eee5; color:#343a34; font-size:clamp(5px,.58vw,7px); letter-spacing:.4px; }
.project-art { position:relative; height:310px; overflow:hidden; background:var(--secondary); }
.project-art.web-demo { height:430px; }
.project-meta { display:flex; justify-content:space-between; align-items:center; padding:17px 0; border-bottom:1px solid var(--border); }
.project-meta h3 { margin:0 0 5px; font-size:14px; }
.project-meta p { margin:0; color:var(--muted-foreground); font-size:10px; }
.project-disclaimer { color:var(--muted-foreground); font-size:10px; margin:20px 0 0; }
.project-jump-links { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:27px; }
.project-jump-links a { display:inline-flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); padding:0 0 8px; font-size:11px; font-weight:600; }
.project-jump-links span { font-size:14px; }
.project-demos { padding-top:66px; }
.project-section-intro { max-width:360px; margin:0; color:var(--muted-foreground); font-size:12px; line-height:1.9; }
.project-demo-grid { align-items:stretch; }
.project-demo-card { display:flex; min-width:0; flex-direction:column; scroll-margin-top:24px; }
.project-demo-copy { display:flex; flex:1; flex-direction:column; padding:23px 0 0; }
.project-demo-copy .eyebrow { margin-bottom:9px; color:var(--muted-foreground); }
.project-demo-copy h3 { margin:0 0 10px; font-family:var(--font-display); font-size:38px; font-weight:600; line-height:1; }
.project-demo-copy > p:not(.eyebrow) { max-width:470px; margin:0; color:var(--muted-foreground); font-size:12px; line-height:1.9; }
.project-demo-copy > .project-demo-structure { margin-top:auto!important; padding-top:13px; color:var(--foreground); font-size:9px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; }
.project-demos .project-disclaimer { padding-top:16px; border-top:1px solid var(--border); line-height:1.8; }
.project-comparison { border-top:1px solid var(--border); }
.project-comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.project-comparison-grid article { padding:24px 0; border-top:1px solid var(--border); }
.project-comparison-grid h3 { margin:18px 0 10px; font-family:var(--font-display); font-size:38px; line-height:1; }
.project-comparison-grid p,.project-comparison-grid li { color:var(--muted-foreground); font-size:12px; line-height:1.9; }
.project-comparison-grid p { max-width:440px; margin:0; }
.project-comparison-grid ul { display:grid; gap:7px; margin:18px 0 0; padding:0; list-style:none; }
.project-comparison-grid li::before { content:'—'; margin-right:9px; color:var(--foreground); }
.project-next-step { margin:0 0 76px; padding:48px; background:var(--foreground); color:var(--background); }
.project-next-step .eyebrow { color:var(--border); }
.project-next-step h2 { max-width:760px; font-size:clamp(44px,6vw,76px); line-height:.95; }
.project-next-step > p:not(.eyebrow) { max-width:460px; margin:18px 0 24px; color:var(--border); font-size:12px; line-height:1.9; }
.project-next-step .button-primary { display:inline-flex; align-items:center; gap:12px; background:var(--background); color:var(--foreground); }
.home-process { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,8vw,120px); border-top:1px solid var(--border); }
.home-process-intro h2 { max-width:560px; font-size:clamp(44px,5.2vw,72px); line-height:.98; }
.home-process-intro > p:last-child { max-width:420px; margin:19px 0 0; color:var(--muted-foreground); font-size:12px; line-height:1.9; }
.home-process-steps { align-self:center; }
.process-step { display:grid; grid-template-columns:54px minmax(0,1fr); gap:16px; padding:21px 0; border-top:1px solid var(--border); }
.process-step .service-number { padding-top:4px; }
.process-step h3 { margin:0 0 6px; font-family:var(--font-display); font-size:30px; font-weight:600; line-height:1; }
.process-step p { max-width:460px; margin:0; color:var(--muted-foreground); font-size:11px; line-height:1.8; }
.philosophy { display:grid; grid-template-columns:1fr; gap:24px; border-top:1px solid var(--border); }
.philosophy h2 { max-width:680px; font-size:58px; line-height:1.1; }
.philosophy p:not(.eyebrow) { color:var(--muted-foreground); font-size:13px; line-height:1.9; max-width:460px; }
.site-footer { background:var(--foreground); color:var(--background); padding:60px 4.4% 25px; }
.footer-top { display:flex; justify-content:space-between; align-items:end; padding-bottom:48px; }
.footer-brand-mark { display:block; width:64px; height:64px; object-fit:contain; filter:brightness(0) invert(1); margin:0 0 20px; }
.footer-top h2 { font-size:84px; }
.footer-link { display:flex; align-items:center; gap:20px; font-size:13px; border-bottom:1px solid var(--muted-foreground); padding:10px 0; }
.footer-bottom { border-top:1px solid var(--muted-foreground); padding-top:22px; display:flex; justify-content:space-between; font-size:9px; color:var(--border); }
.footer-bottom span:last-child { text-transform:uppercase; letter-spacing:1px; }
.inner-header { padding:65px 0 55px; border-bottom:1px solid var(--border); }
.inner-header h1 { font-family:var(--font-display); font-size:100px; font-weight:600; line-height:.94; margin:20px 0; white-space:pre-line; }
.inner-header p:last-child { font-size:14px; line-height:1.9; color:var(--muted-foreground); max-width:520px; }
.legal-content { max-width:820px; padding:54px 0 90px; }
.legal-content section { padding:26px 0; border-bottom:1px solid var(--border); }
.legal-content h2 { font-size:34px; margin:0 0 18px; }
.legal-content p,.legal-content address { color:var(--muted-foreground); font-size:13px; line-height:1.9; margin:0 0 14px; }
.legal-content address { font-style:normal; }
.legal-content a { text-decoration:underline; text-underline-offset:3px; }
.legal-notice { padding:18px 20px; background:var(--muted); color:var(--foreground)!important; }
.footer-bottom { gap:20px; }
.footer-legal-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal-links a { text-decoration:underline; text-underline-offset:3px; }
.service-row { display:grid; grid-template-columns:70px 1fr 1fr; gap:30px; border-bottom:1px solid var(--border); padding:38px 0; }
.service-number { color:var(--muted-foreground); font-size:12px; }
.service-row h2 { font-size:40px; }
.service-row p { font-size:13px; line-height:1.9; color:var(--muted-foreground); margin:0; }
.service-tags { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:9px; text-transform:uppercase; }
.studio-layout { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:start; }
.studio-layout img { width:100%; height:450px; object-fit:cover; }
.parallax-frame { display:block; overflow:hidden; }
.parallax-frame img { display:block; transform:scale(1.12); will-change:transform; }
.studio-layout p { font-size:17px; line-height:1.8; margin:0 0 28px; }
.contact-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:70px; }
.contact-layout h2 { font-size:40px; }
.contact-layout p { font-size:12px; color:var(--muted-foreground); line-height:1.9; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.form-field { display:flex; flex-direction:column; gap:11px; }
.form-field label { font-size:11px; font-weight:600; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; font-family:inherit; color:var(--foreground); font-size:13px; padding:12px 0; border-radius:0; outline-offset:5px; }
.form-field textarea { resize:vertical; min-height:110px; }
.form-wide { grid-column:1 / -1; }
.form-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status { font-size:12px; line-height:1.8; }
.form-status:not([hidden]) { animation:status-in .5s cubic-bezier(.2,.7,.2,1) both; }
.form-status-success { display:flex; align-items:center; gap:16px; margin-top:18px; padding:18px 20px; border:1px solid var(--foreground); color:var(--foreground); }
.form-status-error { margin-top:18px; padding:14px 0 0; border-top:1px solid #9b2c2c; color:#9b2c2c; }
.form-check { flex:none; width:34px; height:34px; }
.form-check circle { stroke-dasharray:76; stroke-dashoffset:0; animation:check-draw .7s cubic-bezier(.65,0,.35,1) .15s backwards; }
.form-check path { stroke-dasharray:20; stroke-dashoffset:0; animation:check-draw-short .45s cubic-bezier(.65,0,.35,1) .7s backwards; }
.contact-form .button.is-sending { opacity:.7; pointer-events:none; }
.contact-form .button.is-sending svg { animation:spin 1s linear infinite; }
@keyframes status-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes check-draw { from { stroke-dashoffset:76; } }
@keyframes check-draw-short { from { stroke-dashoffset:20; } }
.mobile-menu { display:none; }
@keyframes text-in { from { transform:translateY(110%); } to { transform:translateY(0); } }
@keyframes page-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes home-page-in { from { opacity:0; } to { opacity:1; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes hero-words {
  0%,14% { transform:translateY(0); }
  22%,36% { transform:translateY(-20%); }
  44%,58% { transform:translateY(-40%); }
  66%,80% { transform:translateY(-60%); }
  88%,100% { transform:translateY(-80%); }
}
@keyframes hero-article {
  0%,36% { transform:translateY(0); }
  44%,66% { transform:translateY(-50%); }
  74%,100% { transform:translateY(0); }
}
@keyframes onepage-scroll {
  0%,10% { transform:translateY(0); }
  22%,30% { transform:translateY(-20%); }
  42%,50% { transform:translateY(-40%); }
  62%,70% { transform:translateY(-60%); }
  82%,100% { transform:translateY(-80%); }
}
@keyframes multipage-slide {
  0%,16% { transform:translateX(0); }
  20%,36% { transform:translateX(-20%); }
  40%,56% { transform:translateX(-40%); }
  60%,76% { transform:translateX(-60%); }
  80%,96% { transform:translateX(-80%); }
  100% { transform:translateX(-80%); }
}
@media(max-width:1200px) {
  .desktop-nav,.site-header .header-cta { display:none; }
  .site-header .mobile-toggle { display:inline-flex; }
  .mobile-menu { display:flex; flex-direction:column; padding:20px 6%; gap:18px; border-bottom:1px solid var(--border); font-size:17px; }
  .hero h1 { font-size:clamp(64px,10vw,112px); }
  .hero-description { font-size:clamp(14px,1.6vw,17px); color:var(--foreground); }
}
@media(min-width:1600px) { .hero-image {min-height:clamp(460px,58svh,760px);} }
@media(max-width:1000px) { .hero h1 {font-size:clamp(64px,10vw,112px);} .desktop-nav {gap:20px;} .hero-actions {gap:15px;} .project-art {height:260px;} .service-row {grid-template-columns:40px 1fr 1.2fr;} }
@media(max-width:700px) {
  .site-header {height:auto; min-height:78px; margin:0 6%; padding:16px 0; flex-wrap:wrap; row-gap:16px;} .wordmark {font-size:32px;} .wordmark img {width:108px;} .desktop-nav {position:static; order:3; transform:none; width:100%; justify-content:center; gap:clamp(12px,4vw,24px);} .site-header .header-cta {display:none;}
  .mobile-menu {display:flex; flex-direction:column; padding:20px 6%; gap:18px; border-bottom:1px solid var(--border); font-size:17px;}
  .project-jump-links {gap:12px 18px;} .project-demos {padding-top:48px;} .project-demos .section-top,.project-comparison .section-top {align-items:flex-start;flex-direction:column;} .project-demo-grid,.project-comparison-grid {grid-template-columns:minmax(0,1fr);gap:24px;} .project-section-intro {font-size:11px;} .project-demo-copy {padding-top:17px;} .project-demo-copy h3,.project-comparison-grid h3 {font-size:34px;} .project-next-step {margin-bottom:48px;padding:30px 22px;} .project-next-step h2 {font-size:clamp(39px,10vw,58px);}
  .container {margin:0 6%;} .hero {padding-top:28px;} .hero-eyebrow {font-size:8px;letter-spacing:1px;} .availability {font-size:8px;}
  .hero h1 {font-size:52px; margin:28px 0 24px;} .hero-bottom {flex-direction:column; align-items:start;gap:20px;padding-bottom:28px;} .hero-description {font-size:13px;max-width:340px;} .hero-actions {width:100%;justify-content:space-between;gap:12px;} .studio-button {padding:0 16px;font-size:10px;} .text-link {font-size:10px;}
  .hero-image {height:300px;} .hero-word-stage {top:14%;left:20px;row-gap:1px;column-gap:10px;} .hero-word-prefix,.hero-word-note {font-size:7px;letter-spacing:1.1px;} .hero-word-mask {height:65px;font-size:65px;} .image-caption {left:20px;right:20px;bottom:22px;} .image-caption strong {font-size:60px;} .image-caption p {font-size:7px;} .image-caption > span {font-size:8px;} .hero-stamp {width:45px;height:45px;right:20px;top:20px;}
  .section {padding:48px 0;} h2 {font-size:43px;} .section-top {align-items:end;} .section-top .text-link {max-width:100px;} .project-grid {grid-template-columns:minmax(0,1fr);gap:22px;} .project-art {height:280px;} .project-art.web-demo {height:390px;} .demo-viewport {height:353px;} .onepage-screen {padding:12px;} .onepage-screen .demo-site-nav strong {font-size:13px;} .onepage-screen .demo-site-nav > div {gap:5px;font-size:5px;letter-spacing:.2px;} .onepage-contact-layout {gap:4%;}.onepage-contact-layout > div:first-child > strong {font-size:clamp(23px,7vw,32px);} .multipage-screen {padding:18px 12px;} .multipage-site-nav > div {gap:5px;margin-right:8px;font-size:5px;letter-spacing:.4px;} .multi-about-copy {max-width:68%;}.multi-about-copy strong,.multi-services-copy strong {font-size:clamp(22px,6vw,30px);}.multi-about-copy p {max-width:62%;font-size:7px;}.multi-about-copy > span {font-size:5px;}.multi-services-copy {max-width:68%;}.multi-service-list {left:5%;bottom:8%;width:50%;}.multi-service-list span {gap:4px;font-size:6px;padding:6px 0;}.multi-products {right:5%;width:32%;height:34%;}.multipage-contact .multi-story-art {width:32%;}.multipage-contact .multi-story-copy {top:47px;right:4%;width:62%;}.multipage-contact .multi-story-copy strong {font-size:clamp(20px,6vw,27px);}.multi-mini-form {margin-top:7px;padding:6px 7px;gap:4px;}.multi-mini-form > .multi-message-line {height:10px;}
  .demo-viewport {height:calc(100% - 25px);}
  .home-process {grid-template-columns:minmax(0,1fr);gap:25px;} .home-process-intro h2 {font-size:43px;} .process-step {grid-template-columns:40px minmax(0,1fr);gap:10px;padding:17px 0;} .process-step h3 {font-size:27px;}
  .philosophy {grid-template-columns:1fr;gap:12px;} .philosophy h2 {font-size:43px;} .site-footer {padding:42px 6% 25px;} .footer-top {flex-direction:column;align-items:start;gap:25px;padding-bottom:35px;} .footer-top h2 {font-size:62px;} .footer-bottom {gap:20px;line-height:1.7;flex-direction:column;} .legal-content {padding:36px 0 60px;} .legal-content h2 {font-size:30px;}
  .inner-header {padding:45px 0 30px;} .inner-header h1 {font-size:64px;} .inner-header p:last-child {font-size:12px;} .service-row {grid-template-columns:30px 1fr;gap:15px;padding:30px 0;} .service-row h2 {font-size:34px;} .service-content {grid-column:2;} .studio-layout,.contact-layout {grid-template-columns:1fr;gap:30px;} .studio-layout img {height:320px;} .studio-layout p {font-size:15px;} .contact-form {gap:22px;} }
@media(max-width:380px) { .hero h1 {font-size:47px;} .availability {display:none;} .hero-actions {align-items:start;flex-direction:column;} .inner-header h1 {font-size:55px;} }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;}
  .scroll-reveal {opacity:1;transform:none;}
  .hero-word-track,.hero-article-track {transform:translateY(0);}
  .onepage-loop,.multipage-loop {display:none;}
  .onepage-track {animation:none;transform:none;}
  .multipage-track {animation:none;transform:none;}
}

/* ===== Schaltflächen ===== */
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; cursor:pointer; font-size:14px; font-weight:500; font-family:inherit; background:none; border:0; color:inherit; padding:0; }
.button.studio-button { padding:0 26px; }
.button svg { pointer-events:none; flex-shrink:0; }
.button:focus-visible { outline:2px solid var(--foreground); outline-offset:5px; }
.button-primary { background:var(--primary); color:var(--primary-foreground); }
.button-primary:hover { background:oklch(.28 0 0); transform:translateY(-2px); box-shadow:0 8px 20px oklch(.155 0 0 / .14); }
.button-primary:hover svg { transform:translate(2px,-2px); }
.button-primary svg { transition:transform .2s ease; }
.button-ghost:hover { background:var(--secondary); }
.button-icon { width:38px; height:38px; }

@media(min-width:1600px) {
  .page.container > .inner-header { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(400px,.7fr); column-gap:clamp(72px,7vw,132px); align-items:end; padding:46px 0 42px; }
  .page.container > .inner-header > .eyebrow { grid-column:1 / -1; }
  .page.container > .inner-header h1 { grid-column:1; grid-row:2; font-size:clamp(96px,5.7vw,110px); margin:14px 0 0; }
  .page.container > .inner-header > p:not(.eyebrow) { grid-column:2; grid-row:2; align-self:end; max-width:650px; margin:0; font-size:16px; line-height:1.75; }
  .project-jump-links { grid-column:2; grid-row:3; align-self:start; gap:16px 30px; margin-top:18px; }
  .project-jump-links a { font-size:13px; }
  .projects-page > .inner-header { padding:30px 0 12px; }
  .projects-page .project-demos { padding-top:16px; }
  .projects-page .project-demos .section-top { margin-bottom:8px; flex-direction:column; align-items:flex-start; gap:10px; }
  .projects-page .project-demos .section-top h2 { font-size:clamp(58px,3.4vw,66px); }
  .projects-page .project-section-intro { max-width:520px; font-size:15px; line-height:1.75; }
  .projects-page .project-art.web-demo { height:auto; aspect-ratio:1920 / 1225; }
  .projects-page .project-demo-copy { padding-top:14px; }
  .projects-page .project-demo-copy h3 { font-size:44px; }
  .projects-page .project-demo-copy > p:not(.eyebrow):not(.project-demo-structure) { font-size:15px; line-height:1.7; }
  .projects-page .project-demo-copy > .project-demo-structure { font-size:10px; }
  .service-row { grid-template-columns:84px minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px,4vw,72px); padding:36px 0; }
  .service-number { font-size:14px; }
  .service-row h2 { font-size:48px; }
  .service-row p { font-size:15px; line-height:1.8; }
  .service-tags { gap:20px; margin-top:26px; font-size:10px; }
  .studio-layout { gap:clamp(64px,6vw,110px); }
  .studio-layout img { height:clamp(500px,42vh,560px); }
  .studio-layout p { font-size:19px; line-height:1.8; }
  .contact-layout { gap:clamp(80px,7vw,140px); }
  .contact-layout h2 { font-size:48px; }
  .contact-layout p { font-size:14px; line-height:1.8; }
  .contact-form { gap:32px; }
  .form-field label { font-size:13px; }
  .form-field input,.form-field select,.form-field textarea { font-size:15px; }
  .form-field textarea { min-height:130px; }
  .legal-content { max-width:1000px; }
  .legal-content > .legal-notice { font-size:14px; line-height:1.8; }
  .legal-content h2 { font-size:38px; }
  .legal-content p,.legal-content address { font-size:15px; line-height:1.8; }
  .desktop-nav { font-size:14px; }
  .site-header .studio-button { font-size:13px; }
  h2 { font-size:64px; }
  .page.container > .inner-header h1 { font-size:clamp(102px,6vw,116px); }
  .hero-eyebrow { font-size:11px; }
  .availability { font-size:12px; }
  .hero-description { font-size:clamp(17px,1.25vw,24px); }
  .text-link,.footer-link { font-size:15px; }
  .hero-word-prefix,.hero-word-note { font-size:11px; }
  .image-caption p { font-size:11px; }
  .image-caption > span { font-size:12px; }
  .eyebrow { font-size:11px; }
  .section-top .text-link { font-size:14px; }
  .project-meta h3 { font-size:16px; }
  .project-meta p { font-size:12px; }
  .project-disclaimer { font-size:12px; }
  .project-demos .project-disclaimer { font-size:12px; }
  .project-demo-copy .eyebrow { font-size:11px; }
  .projects-page > .inner-header h1 { font-size:clamp(100px,6vw,116px); }
  .projects-page > .inner-header > p:not(.eyebrow) { font-size:18px; }
  .projects-page .project-jump-links a { font-size:14px; }
  .projects-page .project-demos .section-top h2 { font-size:clamp(64px,3.7vw,72px); }
  .projects-page .project-section-intro { font-size:17px; }
  .projects-page .project-art.web-demo { height:auto; aspect-ratio:1920 / 1225; }
  .projects-page .project-demo-copy { padding-top:6px; }
  .projects-page .project-demo-copy h3 { font-size:48px; }
  .projects-page .project-demo-copy > p:not(.eyebrow):not(.project-demo-structure) { font-size:16px; line-height:1.65; }
  .projects-page .project-demo-copy > .project-demo-structure { font-size:11px; }
  .project-comparison-grid h3 { font-size:43px; }
  .project-comparison-grid p,.project-comparison-grid li { font-size:15px; line-height:1.75; }
  .project-next-step h2 { font-size:clamp(48px,6.3vw,82px); }
  .project-next-step > p:not(.eyebrow) { font-size:15px; }
  .project-next-step .button { font-size:16px; }
  .service-row { padding:30px 0; }
  .service-number { font-size:16px; }
  .service-row h2 { font-size:54px; }
  .service-row p { font-size:17px; line-height:1.7; }
  .service-tags { gap:20px; margin-top:22px; font-size:12px; }
  .studio-layout p { font-size:21px; }
  .contact-layout h2 { font-size:54px; }
  .contact-layout p { font-size:16px; line-height:1.75; }
  .contact-form { gap:27px 32px; }
  .form-field label { font-size:15px; }
  .form-field input,.form-field select,.form-field textarea { font-size:17px; }
  .form-status { font-size:14px; }
  .inner-header p:last-child { font-size:17px; }
  .legal-content > .legal-notice { font-size:16px; }
  .legal-content h2 { font-size:42px; }
  .legal-content p,.legal-content address { font-size:17px; line-height:1.75; }
  .legal-content { padding-top:38px; padding-bottom:60px; }
  .legal-content section { padding:20px 0; }
  .legal-content h2 { margin-bottom:14px; }
  .legal-content p,.legal-content address { margin-bottom:12px; }
  .home-process-intro h2 { font-size:clamp(48px,5.5vw,78px); }
  .home-process-intro > p:last-child { font-size:15px; }
  .process-step .service-number { font-size:16px; }
  .process-step h3 { font-size:34px; }
  .process-step p { font-size:14px; }
  .philosophy p:not(.eyebrow) { font-size:16px; }
  .philosophy h2 { font-size:64px; }
  .footer-bottom { font-size:11px; }
}

@media(min-width:1201px) {
  .hero h1 { align-self:start; margin-top:0; font-size:clamp(58px,6.1vw,110px); line-height:1; }
  .hero { align-content:center; }
  .hero-image { align-self:stretch; }
  .hero-bottom { align-self:end; }
  .hero-word-stage { top:calc(clamp(58px,6.1vw,110px) - 11px); }
}

@media(min-width:1201px) {
  .home-process { grid-template-columns:1fr; gap:36px; }
  .home-process-intro h2 { max-width:none; }
  .home-process-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; align-self:stretch; border:1px solid var(--border); }
  .process-step { grid-template-columns:1fr; gap:28px; padding:32px 36px 36px; border-top:0; border-left:1px solid var(--border); }
  .process-step:first-child { border-left:0; }
  .process-step .service-number { font-size:22px; padding-top:0; }
  .process-step:last-child { border-bottom:0; }
  .process-step p { max-width:380px; }
}

@media(min-width:1201px) {
  .page.container.projects-page > .inner-header { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:clamp(32px,4vw,64px); row-gap:0; align-items:center; align-content:center; min-height:calc(100svh - 132px); box-sizing:border-box; padding:42px 0 0; }
  .page.container.projects-page > .inner-header > * { position:relative; top:-40px; }
  .page.container.projects-page > .inner-header > .eyebrow { grid-column:1 / -1; margin:0; }
  .page.container.projects-page > .inner-header h1 { grid-column:1; grid-row:2; align-self:start; margin:0 0 22px; font-size:clamp(58px,6.1vw,110px); line-height:1; }
  .project-hero-lead { grid-column:1; grid-row:3; align-self:end; }
  .page.container.projects-page > .inner-header .project-hero-lead p { max-width:560px; margin:0; font-size:clamp(15px,1.15vw,24px); line-height:1.7; color:var(--foreground); }
  .project-hero-panel { grid-column:2; grid-row:2 / 4; align-self:stretch; width:100%; height:auto; min-height:clamp(420px,58svh,760px); box-sizing:border-box; }
  .project-hero-note-mask { grid-column:1 / -1; display:block; height:1em; margin-top:5px; overflow:hidden; font-size:9px; font-weight:600; letter-spacing:1.6px; line-height:1; color:#b9beb4; }
  .project-hero-note-track { display:block; animation:project-words 8s cubic-bezier(.65,0,.35,1) infinite; }
  .project-hero-note-track > span { display:block; height:1em; line-height:1; white-space:nowrap; }
  .project-hero-panel .hero-word-track { animation-name:project-words; animation-duration:8s; }
}
@keyframes project-words {
  0%,38% { transform:translateY(0); }
  50%,88% { transform:translateY(-33.3333%); }
  100% { transform:translateY(-66.6667%); }
}
@keyframes project-words-3 {
  0%,22% { transform:translateY(0); }
  33%,55% { transform:translateY(-25%); }
  66%,88% { transform:translateY(-50%); }
  100% { transform:translateY(-75%); }
}
.project-hero-triple .hero-word-track,.project-hero-triple .project-hero-note-track { animation-name:project-words-3; animation-duration:12s; }
@media(prefers-reduced-motion:reduce) { .project-hero-triple .hero-word-track { transform:translateY(0); } }
@media(min-width:1600px) { .project-hero-note-mask { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .project-hero-note-track { transform:translateY(0); } }
@media(min-width:1600px) { .project-hero-panel { min-height:clamp(460px,58svh,760px); } }
@media(max-width:1200px) { .project-hero-panel { display:block; margin-top:28px; } .project-hero-note-mask { grid-column:1 / -1; } .project-hero-lead p { margin:0; } .project-hero-note-mask { display:block; height:1em; margin-top:5px; overflow:hidden; font-size:9px; font-weight:600; letter-spacing:1.2px; line-height:1; color:#b9beb4; } .project-hero-note-track { display:block; animation:project-words 8s cubic-bezier(.65,0,.35,1) infinite; } .project-hero-triple .project-hero-note-track { animation-name:project-words-3; animation-duration:12s; } .project-hero-note-track > span { display:block; height:1em; line-height:1; white-space:nowrap; } .project-hero-panel .hero-word-track { animation-name:project-words; animation-duration:8s; } .project-hero-triple .hero-word-track { animation-name:project-words-3; animation-duration:12s; } }

/* ===== Seitenübergang ===== */
:root { --pt-logo-w:290.4px; }
@media(max-width:700px) { :root { --pt-logo-w:237.6px; } }
html::before,html::after { content:''; position:fixed; opacity:0; pointer-events:none; }
html::before { display:none; }
html::after { z-index:10000; left:50%; top:50%; width:var(--pt-logo-w); height:calc(var(--pt-logo-w) * 473 / 838); transform:translate(-50%,-50%); background:url('LOGO/Komplett_Logo_ohne%20Hintergrund.png') center / contain no-repeat; }
.page-transition-logo { position:fixed; z-index:10001; margin:0; max-width:none; transform-origin:0 0; will-change:transform; pointer-events:none; }
html { background:var(--background); }
body { transition:opacity .32s ease; }
html.pt-leaving body,html.pt-arriving:not(.pt-reveal) body { opacity:0; pointer-events:none; }
html.pt-arriving.pt-reveal body { transition-duration:.5s; }
html.pt-arriving:not(.pt-js)::after { opacity:1; }
html.pt-nav .page { animation:none; }
html.pt-arriving:not(.pt-reveal) *,html.pt-arriving:not(.pt-reveal) *::before,html.pt-arriving:not(.pt-reveal) *::after { animation-play-state:paused !important; }

/* ===== Hilfsklassen ===== */
.flex { display:flex; } .items-center { align-items:center; }
.gap-9 { gap:36px; }
.mt-4 { margin-top:16px; } .mt-10 { margin-top:40px; }
.block { display:block; } .inline { display:inline; }
.ml-3 { margin-left:12px; }
.text-muted-foreground { color:var(--muted-foreground); }
.mobile-menu[hidden] { display:none !important; }
/* ===== iPhone / Smartphone (bis 700px, optimiert für 402×874) ===== */
@media(max-width:700px) {
  .container { margin:0 5.5%; }
  .site-header,.mobile-menu { margin-left:5.5%; margin-right:5.5%; }
  .mobile-menu { padding:20px 0; margin-left:5.5%; margin-right:5.5%; font-size:19px; }
  .hero { padding-top:24px; }
  .hero-eyebrow,.eyebrow { font-size:10px; letter-spacing:1.4px; }
  .hero h1 { font-size:clamp(48px,13.4vw,60px); margin:22px 0 22px; }
  .hero-description { font-size:16px; line-height:1.65; max-width:none; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:16px; }
  .hero-actions .studio-button,.hero-actions .button { width:100%; justify-content:center; min-height:52px; font-size:14px; }
  .hero-actions .text-link { font-size:13px; align-self:flex-start; }
  .hero-image { height:clamp(300px,42svh,380px); }
  .hero-word-prefix,.hero-word-note { font-size:9px; letter-spacing:1.2px; }
  .image-caption strong { font-size:clamp(40px,12vw,52px); }
  .image-caption p { font-size:9px; }
  .image-caption > span { font-size:9px; white-space:normal; text-align:right; max-width:46%; }
  .image-caption { gap:8px; }
  .inner-header { padding:34px 0 26px; }
  .inner-header h1 { font-size:clamp(50px,14.5vw,62px); line-height:1; }
  .inner-header p:last-child,.project-hero-lead p { font-size:16px; line-height:1.65; }
  .project-hero-lead { margin-top:18px; }
  h2 { font-size:clamp(36px,10vw,42px); }
  .home-process-intro h2,.philosophy h2 { font-size:clamp(34px,9.4vw,40px); }
  .home-process-intro p,.philosophy p,.section-top p { font-size:15px; line-height:1.7; }
  .process-step { grid-template-columns:44px minmax(0,1fr); }
  .process-step h3 { font-size:30px; }
  .process-step p { font-size:14.5px; line-height:1.65; }
  .service-number { font-size:13px; }
  .service-row h2 { font-size:34px; }
  .service-row p { font-size:15px; line-height:1.7; }
  .service-tags { gap:10px 16px; font-size:11px; }
  .studio-layout p { font-size:16px; line-height:1.7; }
  .project-section-intro { font-size:15px; line-height:1.7; }
  .project-demo-copy > p:not(.eyebrow):not(.project-demo-structure) { font-size:15px; line-height:1.65; }
  .project-demo-copy > .project-demo-structure { font-size:10px; }
  .text-link { font-size:12px; }
  .footer-top h2 { font-size:clamp(52px,15vw,64px); }
  .footer-bottom { font-size:12px; }
  .footer-legal-links a { font-size:12px; }
  .legal-content p,.legal-content li { font-size:15px; line-height:1.7; }
  .legal-content h2 { font-size:28px; }
  .form-field input,.form-field select,.form-field textarea { font-size:16px; }
  .form-field label { font-size:13px; }
  .project-hero-panel .image-caption { flex-wrap:wrap; align-items:flex-end; row-gap:10px; }
  .project-hero-panel .image-caption strong { font-size:clamp(38px,10.4vw,46px); white-space:nowrap; }
  .project-hero-panel .image-caption > span { margin-left:auto; }
}
@media(max-width:380px) {
  .image-caption strong { font-size:clamp(34px,11vw,42px); }
  .project-hero-panel .image-caption strong { font-size:clamp(32px,9.6vw,38px); }
  .hero-word-prefix,.hero-word-note,.project-hero-note-mask { font-size:8px; letter-spacing:.8px; }
  .hero-image .hero-word-stage { left:16px; right:16px; }
  .hero-image .image-caption { left:16px; right:16px; }
}
@media(max-width:340px) {
  .hero-image .image-caption { flex-wrap:wrap; }
  .hero-image .image-caption > span { max-width:100%; margin-left:0; text-align:left; }
  .project-hero-note-mask,.hero-word-prefix { letter-spacing:.4px; }
}

/* ===== Kontaktseite ===== */
.contact-layout { align-items:start; }
.contact-aside { position:sticky; top:120px; }
.contact-aside > p:not(.eyebrow):not(.contact-privacy) { max-width:46ch; }
.contact-steps { list-style:none; margin:34px 0 30px; padding:0; border-top:1px solid var(--border); }
.contact-steps li { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--border); transition:padding-left .3s ease; }
.contact-steps li:hover { padding-left:8px; }
.contact-steps li > span { font:600 22px/1 var(--font-display); letter-spacing:.5px; color:var(--muted-foreground); }
.contact-steps strong { display:block; font:600 22px/1.1 var(--font-display); letter-spacing:.3px; text-transform:uppercase; }
.contact-steps p { margin:6px 0 0; font-size:13px; line-height:1.6; }
.contact-mail { display:block; padding:22px 26px; background:var(--foreground); color:var(--primary-foreground); border-radius:2px; transition:transform .3s ease; }
.contact-mail:hover { transform:translateY(-3px); }
.contact-mail small { display:block; font-size:10px; letter-spacing:1.6px; opacity:.6; }
.contact-mail strong { display:block; margin-top:6px; font:600 30px/1 var(--font-display); letter-spacing:.5px; }
.contact-layout .contact-privacy { margin-top:22px; font-size:11px; line-height:1.7; }
.contact-form { padding:44px; background:#fff; border:1px solid var(--border); border-radius:2px; box-shadow:0 24px 60px -34px oklch(.15 0 0 / .35); position:relative; }
.contact-form::before { content:''; position:absolute; left:-1px; top:-1px; width:72px; height:4px; background:var(--foreground); }
.form-field label,.form-field legend { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:0; }
.form-field input,.form-field select,.form-field textarea { border-bottom:1.5px solid var(--border); transition:border-color .25s ease, background-color .25s ease; outline:none; }
.form-field input:hover,.form-field textarea:hover { border-bottom-color:var(--muted-foreground); }
.form-field input:focus,.form-field textarea:focus { border-bottom-color:var(--foreground); background:linear-gradient(180deg,transparent 92%,oklch(.95 0 0) 100%); }
.form-choice { border:0; margin:0; padding:0; min-width:0; }
.choice-group { display:flex; flex-wrap:wrap; gap:10px; }
.choice-group label { position:relative; font-size:inherit; letter-spacing:0; text-transform:none; font-weight:500; cursor:pointer; }
.choice-group input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.choice-group span { display:block; padding:11px 18px; border:1px solid var(--border); border-radius:999px; font-size:13px; transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease; }
.choice-group label:hover span { border-color:var(--foreground); transform:translateY(-2px); }
.choice-group input:checked + span { background:var(--foreground); color:var(--primary-foreground); border-color:var(--foreground); }
.choice-group input:focus-visible + span { outline:2px solid var(--foreground); outline-offset:3px; }
.contact-form .button { width:100%; justify-content:center; padding-block:18px; }
@media (max-width:1200px) {
  .contact-aside { position:static; }
  .contact-form { padding:28px 22px; }
}
@media (max-width:700px) {
  .contact-form { padding:26px 18px; grid-template-columns:minmax(0,1fr); }
  .choice-group span { padding:10px 14px; font-size:14px; }
  .contact-mail strong { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) { .contact-steps li,.contact-mail,.choice-group span { transition:none; } }