/* Praktello – fünf fiktive Designstudien. Eigenständige HTML-/CSS-Layouts. */
:root{--ink:#141514}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit}img{display:block;max-width:100%}a:focus-visible,button:focus-visible{outline:3px solid #68e3c6;outline-offset:5px}.study-label{position:relative;z-index:30;padding:11px 18px;text-align:center;background:#072423;color:#afffe4;font:700 10px/1.4 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}.study-link{display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .3s,color .3s,background .3s}.study-link:hover{transform:translateY(-3px)}.study-footer{padding:36px 6%;display:flex;justify-content:space-between;gap:20px;font:11px/1.5 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.disclaimer{font-size:11px;line-height:1.6;opacity:.65}.anim-in{animation:rise .85s ease both}@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{50%{transform:translateY(-12px)}}@keyframes glide{from{background-position:0 50%}to{background-position:100% 50%}}@keyframes reveal-img{from{opacity:.4;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{box-shadow:0 0 0 14px #ccff6d00}}
/* 01 SALON – Editorial / Gallery / warm cream + plum */
.salon{color:#2f2928;background:#f1eee7;font-family:Arial,sans-serif}.salon .s-nav{height:95px;padding:0 6%;display:flex;justify-content:space-between;align-items:center;gap:30px;border-bottom:1px solid #46322d2b}.salon .s-brand{font-family:Georgia,serif;font-size:33px;letter-spacing:-.045em}.salon .s-brand em{font-size:17px;font-weight:normal;color:#a07568}.salon .s-navlinks{display:flex;gap:32px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;align-items:center}.salon .s-navlinks a:last-child{border-bottom:1px solid #46322d;padding-bottom:7px}.salon .s-hero{min-height:700px;display:grid;grid-template-columns:44% 56%;position:relative}.salon .s-copy{padding:105px 6% 80px 14%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.salon .s-kicker{font-size:11px;letter-spacing:.22em;color:#a07568;text-transform:uppercase}.salon h1{font-family:Georgia,serif;font-size:clamp(64px,7.4vw,116px);line-height:.94;letter-spacing:-.07em;font-weight:normal;margin:34px 0}.salon h1 em{font-weight:normal;color:#ad806e}.salon .s-copy p{max-width:440px;line-height:1.9;color:#736763;font-size:16px}.salon .s-button{margin-top:26px;padding:17px 28px;background:#342521;color:white;border-radius:100px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.salon .s-photo{position:relative;margin:28px 36px 55px 0;overflow:hidden;border-radius:260px 260px 12px 12px;background:#bb9d84}.salon .s-photo img{width:100%;height:100%;object-fit:cover;animation:reveal-img 1.2s ease both;filter:saturate(.75)}.salon .s-photo-badge{position:absolute;right:3%;bottom:9%;width:138px;height:138px;border-radius:50%;display:grid;place-items:center;text-align:center;background:#e4c6b1;color:#3d2922;font:italic 24px/1.1 Georgia,serif;animation:drift 6s ease-in-out infinite}.salon .s-index{font-size:11px;letter-spacing:.22em;margin-top:36px;color:#8b7267}.salon .s-bottom{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:25px;padding:80px 6%;border-top:1px solid #d8c9bd}.salon .s-bottom h2{font:normal 43px/1.14 Georgia,serif;margin:0}.salon .s-bottom div{font-size:15px;line-height:1.8;color:#756660}.salon .study-footer{border-top:1px solid #d8c9bd;color:#8c7c73}
/* 02 RESTAURANT – full cinematic, golden evening */
.restaurant{background:#171812;color:#fff4dd;font-family:Arial,sans-serif}.restaurant .r-hero{position:relative;isolation:isolate;min-height:790px;display:flex;flex-direction:column;align-items:stretch}.restaurant .r-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2100&q=90') center/cover no-repeat;animation:reveal-img 1.5s both}.restaurant .r-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080a06dd,#080a0670 65%,#080a0644),linear-gradient(0deg,#080a06e6,transparent 50%)}.restaurant .r-nav{padding:28px 5.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff42;gap:25px}.restaurant .r-brand{font:normal 33px/.9 Georgia,serif;letter-spacing:.04em}.restaurant .r-brand small{display:block;font:9px Arial,sans-serif;letter-spacing:.35em;margin-top:12px}.restaurant .r-menu{display:flex;align-items:center;gap:35px;font-size:12px;letter-spacing:.11em;text-transform:uppercase}.restaurant .r-reserve{padding:13px 22px;border:1px solid #e3c891}.restaurant .r-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:1000px;margin:auto;padding:80px 25px}.restaurant .r-kicker{font-size:12px;letter-spacing:.33em;text-transform:uppercase;color:#d5b37c}.restaurant h1{font:normal clamp(70px,10vw,148px)/.91 Georgia,serif;letter-spacing:-.06em;margin:30px 0;color:#fffaed}.restaurant h1 em{font-weight:normal;color:#e2c38f}.restaurant .r-content p{font-size:17px;line-height:1.8;max-width:480px;color:#eedfc8}.restaurant .r-cta{background:#d9b37f;color:#16140c;padding:18px 28px;border-radius:50px;margin-top:28px;font-size:12px;font-weight:bold;letter-spacing:.09em}.restaurant .r-strip{overflow:hidden;display:flex;gap:50px;justify-content:space-around;padding:25px 6%;border-top:1px solid #ffffff4d;font:12px Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}.restaurant .r-bottom{padding:92px 6%;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.restaurant .r-bottom h2{font:normal 60px/1.04 Georgia,serif;letter-spacing:-.06em;margin:0}.restaurant .r-bottom p{font:16px/1.9 Arial;color:#d0c3a7}.restaurant .study-footer{background:#11140e;color:#b6aa8c}
/* 03 AUTO – aggressive performance / acid neon / wide photo */
.auto{background:#090c10;color:#f1f5f5;font-family:Arial,sans-serif}.auto .a-top{background:#c9f36c;color:#0b1410;font:700 10px/1 Arial,sans-serif;letter-spacing:.2em;text-align:center;padding:11px}.auto .a-nav{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 5%;border-bottom:1px solid #ffffff2a}.auto .a-brand{font-weight:950;font-size:32px;letter-spacing:-.09em;line-height:1}.auto .a-brand span{color:#c9f36c}.auto .a-links{display:flex;align-items:center;gap:30px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.auto .a-pill{border:1px solid #c9f36c;color:#c9f36c;padding:14px 20px}.auto .a-hero{position:relative;min-height:710px;overflow:hidden;isolation:isolate;display:flex;align-items:center}.auto .a-hero:before{content:"";position:absolute;z-index:-2;inset:0;background:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2100&q=90') 70% center/cover no-repeat;filter:saturate(.9) contrast(1.08)}.auto .a-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#070a0feF,#070a0fc7 34%,#070a0f20 78%),linear-gradient(0deg,#070a0f,transparent 30%)}.auto .a-gridlines{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#ffffff10 25%);pointer-events:none}.auto .a-copy{padding:70px 5%;position:relative;max-width:1100px}.auto .a-label{color:#c9f36c;font-size:13px;letter-spacing:.22em;font-weight:900}.auto h1{font-weight:950;font-style:italic;text-transform:uppercase;font-size:clamp(80px,10.5vw,158px);line-height:.83;letter-spacing:-.095em;margin:32px 0}.auto h1 span{color:#c9f36c}.auto .a-copy p{max-width:420px;color:#c3cad0;line-height:1.85;font-size:16px}.auto .a-button{margin-top:24px;padding:17px 25px;background:#c9f36c;color:#0c170e;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;box-shadow:0 0 0 0 #c9f36599;animation:pulse 3s infinite}.auto .a-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#222b26}.auto .a-stat{padding:38px 6%;background:#101519}.auto .a-stat strong{display:block;font-size:50px;color:#c9f36c;letter-spacing:-.07em}.auto .a-stat span{font-size:12px;letter-spacing:.15em;color:#a5b6b5}.auto .study-footer{border-top:1px solid #33413c;color:#9cabac}
/* 04 PRAXIS – soft airy modern / rounded asymmetric cards */
.praxis{background:#f5f8f7;color:#244446;font-family:Arial,sans-serif}.praxis .p-nav{margin:0 auto;max-width:1600px;height:102px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;gap:28px}.praxis .p-brand{font-size:26px;font-weight:800;letter-spacing:-.055em}.praxis .p-brand i{color:#70b8ae;font-style:normal}.praxis .p-links{display:flex;align-items:center;gap:30px;font-size:13px}.praxis .p-btn{border-radius:100px;padding:15px 24px;background:#245f5c;color:white;font-size:13px;font-weight:700}.praxis .p-hero{padding:46px 5% 90px;max-width:1600px;margin:auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}.praxis .p-copy{padding-left:3%}.praxis .p-label{display:inline-flex;align-items:center;gap:10px;color:#4b9187;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}.praxis .p-label:before{content:'✳';font-size:24px}.praxis h1{font-size:clamp(65px,7.4vw,105px);font-weight:550;letter-spacing:-.085em;line-height:1.05;margin:32px 0;color:#193a3b}.praxis h1 span{color:#60a99e}.praxis .p-copy p{font-size:17px;line-height:1.85;color:#638281;max-width:460px}.praxis .p-cta{margin-top:28px}.praxis .p-art{position:relative;height:660px}.praxis .p-photo{height:100%;width:100%;object-fit:cover;border-radius:280px 280px 65px 65px;background:#dfedeb;animation:reveal-img 1.2s both}.praxis .p-float{position:absolute;left:-11%;bottom:45px;background:white;border-radius:16px;padding:24px 28px;box-shadow:0 28px 60px #1a55502a;animation:drift 6s ease-in-out infinite}.praxis .p-float b{font-size:40px;letter-spacing:-.065em;display:block;color:#2f7f78}.praxis .p-float small{color:#6a8a85;font-size:12px}.praxis .p-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:25px 6% 90px}.praxis .p-mini{background:#e7f1ee;border-radius:18px;padding:35px}.praxis .p-mini b{display:block;font-size:20px;margin-bottom:10px}.praxis .p-mini p{font-size:14px;color:#698682;line-height:1.7}.praxis .study-footer{color:#658984;border-top:1px solid #d8e7e3}
/* 05 ARCHITEKTUR – swiss / minimal asymmetric editorial + grid */
.architektur{background:#eeeae2;color:#1b2524;font-family:Arial,sans-serif}.architektur .ar-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding:28px 5%;align-items:center;border-bottom:1px solid #28342d55}.architektur .ar-logo{font-size:29px;font-weight:800;letter-spacing:-.08em}.architektur .ar-num{font:12px Georgia,serif;letter-spacing:.05em}.architektur .ar-link{justify-self:end;font:12px Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:7px}.architektur .ar-hero{padding:55px 5% 0;display:grid;grid-template-columns:.88fr 1.12fr;gap:4%;align-items:end}.architektur .ar-left{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:50px}.architektur .ar-label{font-size:11px;letter-spacing:.25em;text-transform:uppercase}.architektur h1{font-size:clamp(75px,8.1vw,128px);line-height:.91;letter-spacing:-.095em;font-weight:500;margin:45px 0}.architektur h1 em{font-family:Georgia,serif;font-weight:normal;letter-spacing:-.07em}.architektur .ar-left p{max-width:460px;color:#5d6862;font-size:16px;line-height:1.8}.architektur .ar-cta{display:inline-flex;align-items:center;gap:20px;text-transform:uppercase;font-size:12px;letter-spacing:.16em;border-bottom:1px solid currentColor;margin-top:34px;padding-bottom:13px}.architektur .ar-photo{width:100%;height:720px;object-fit:cover;filter:saturate(.56);animation:reveal-img 1.2s both}.architektur .ar-bottom{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:35px;padding:60px 5%;border-top:1px solid #28342d45}.architektur .ar-bottom small{font:11px Arial,sans-serif;letter-spacing:.19em}.architektur .ar-bottom strong{font-size:36px;line-height:1.2;font-weight:500;letter-spacing:-.055em}.architektur .ar-bottom p{font-size:14px;line-height:1.8;color:#5d6862;margin:0}.architektur .study-footer{border-top:1px solid #28342d45;color:#6b7470}
@media(max-width:840px){.salon .s-hero,.praxis .p-hero,.architektur .ar-hero{grid-template-columns:1fr}.salon .s-copy{padding:70px 7%}.salon .s-photo{height:500px;margin:0 6% 40px}.salon .s-bottom{grid-template-columns:1fr}.restaurant .r-nav,.auto .a-nav{gap:10px}.restaurant .r-menu a:not(.r-reserve),.auto .a-links a:not(.a-pill){display:none}.restaurant .r-content{padding:80px 20px}.restaurant .r-bottom{grid-template-columns:1fr}.praxis .p-hero{gap:30px}.praxis .p-art{height:440px}.praxis .p-float{left:0}.praxis .p-strip{grid-template-columns:1fr}.praxis .p-links a:not(.p-btn){display:none}.architektur .ar-photo{height:490px}.architektur .ar-bottom{grid-template-columns:1fr}.auto .a-stats{grid-template-columns:1fr}}
@media(max-width:520px){.study-label{font-size:9px}.salon .s-nav,.praxis .p-nav{height:80px}.salon .s-navlinks a:not(:last-child){display:none}.salon .s-brand{font-size:26px}.salon h1{font-size:70px}.salon .s-photo{height:440px}.restaurant .r-nav{padding:22px 5%}.restaurant .r-brand{font-size:24px}.restaurant .r-hero{min-height:670px}.restaurant h1{font-size:75px}.restaurant .r-strip{gap:15px;font-size:10px}.auto h1{font-size:clamp(64px,17vw,112px)}.auto .a-hero{min-height:600px}.auto .a-brand{font-size:24px}.praxis h1{font-size:67px}.praxis .p-art{height:390px}.praxis .p-float{padding:18px}.architektur h1{font-size:72px}.architektur .ar-photo{height:380px}.study-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}