@font-face{font-family:'Fraunces';src:url('fonts/fraunces-italic.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --burgundy:#6C0820; --pink:#F2AEBC; --mist:#F2DCDB; --silver:#5A86CB; --lapis:#3D5D91; --white:#fff;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--lapis);background:var(--mist);font-size:18px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-style:italic;font-weight:380;line-height:1.12;color:var(--burgundy)}
.eyebrow{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--lapis)}
.eyebrow::before{content:"";width:48px;height:2px;background:currentColor}
.arch{border-radius:999px 999px 0 0;overflow:hidden}
.btn{display:inline-block;font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:16px 34px;border-radius:999px;border:2px solid var(--burgundy);color:var(--burgundy);transition:.25s}
.btn:hover{background:var(--burgundy);color:var(--mist)}
.btn.light{border-color:var(--pink);color:var(--pink)}
.btn.light:hover{background:var(--pink);color:var(--burgundy)}
.btn.solid{background:var(--burgundy);color:var(--mist)}
.btn.solid:hover{background:transparent;color:var(--burgundy)}

/* Header */
header{position:sticky;top:0;z-index:20;background:rgba(242,220,219,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(108,8,32,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:52px;height:52px}
.brand .wm{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--burgundy);line-height:1}
.brand .tag{display:block;font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--lapis);margin-top:5px}
nav ul{display:flex;gap:34px;list-style:none;align-items:center}
nav a{text-decoration:none;font-size:15px;font-weight:400;letter-spacing:.06em}
nav a:hover{color:var(--burgundy)}
.lang{font-size:13px;letter-spacing:.2em;border:1px solid var(--lapis);border-radius:999px;padding:5px 12px}
.menu-btn{display:none;background:none;border:0;font:inherit;color:var(--burgundy);font-size:15px;letter-spacing:.2em;text-transform:uppercase}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:calc(100vh - 84px)}
.hero-left{background:var(--burgundy);color:var(--mist);display:flex;flex-direction:column;justify-content:center;padding:80px 5vw 80px max(28px, calc((100vw - var(--max))/2 + 28px))}
.hero-left .eyebrow{color:var(--silver)}
.hero h1{color:var(--mist);font-size:clamp(42px,4.4vw,66px);margin:28px 0 26px}
.hero h1 em{color:var(--pink);font-style:italic}
.hero p{color:var(--pink);max-width:470px;font-size:20px;margin-bottom:40px}
.hero-right{display:flex;align-items:center;justify-content:center;padding:60px 28px;position:relative}
.hero-arch-frame{border:2px solid var(--burgundy);border-radius:999px 999px 0 0;padding:14px;width:min(420px,80%)}
.hero-arch{background:var(--silver);aspect-ratio:4/5.6;display:flex;align-items:flex-end;justify-content:center}
.hero-arch img{width:74%;margin-bottom:-2%}
.scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:var(--burgundy)}

/* Sections */
section{padding:120px 0}
.section-head{max-width:700px;margin-bottom:64px}
.section-head h2{font-size:clamp(36px,4vw,56px);margin-top:22px}
.section-head p{margin-top:20px;font-size:19px}

/* About */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.portrait-frame{border:2px solid var(--burgundy);border-radius:999px 999px 0 0;padding:14px;max-width:440px}
.portrait{aspect-ratio:4/5.4;background:var(--pink);display:flex;align-items:center;justify-content:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait.fox{align-items:flex-end}
.portrait.fox img{width:70%;height:auto;object-fit:contain;transform:translate(-9.9%,4.3%)}
.about h2{font-size:clamp(36px,4vw,54px);margin:22px 0 26px}
.about p+p{margin-top:18px}
.stations{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:2px solid var(--burgundy)}
.station{padding:22px 18px 0 0}
.station .no{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--pink);line-height:1}
.station h3{font-size:22px;margin:10px 0 6px}
.station p{font-size:15px;line-height:1.5}

/* Services */
.services-bg{background:var(--white);position:relative}
.services-bg::before{content:"FOXI ASSISTS  ·  LEISTUNGEN";position:absolute;left:0;top:0;bottom:0;width:72px;background:var(--lapis);color:var(--mist);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;line-height:72px;font-size:12px;letter-spacing:.4em}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--mist);padding:40px 34px 36px;border-radius:24px}
.card .num{font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;color:var(--pink)}
.card h3{font-size:26px;margin:14px 0 18px}
.card ul{list-style:none}
.card li{position:relative;padding-left:34px;margin-bottom:10px;font-size:16px;line-height:1.5}
.card li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--silver) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23F2DCDB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* Quote */
.quote{background:var(--pink);padding:110px 0}
.quote-arch{max-width:720px;margin:0 auto;border:2px solid var(--burgundy);border-radius:999px 999px 0 0;padding:16px}
.quote-inner{background:var(--mist);border-radius:999px 999px 0 0;text-align:center;padding:170px 70px 80px}
.quote-inner .eyebrow{justify-content:center}
.quote-inner .eyebrow::before{display:none}
.quote-inner blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.6vw,46px);line-height:1.25;color:var(--burgundy);margin:24px 0 30px}
.quote-inner img{width:64px;margin:0 auto}

/* Pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.price{border:2px solid var(--burgundy);border-radius:999px 999px 24px 24px;padding:90px 36px 44px;text-align:center;display:flex;flex-direction:column;background:var(--mist)}
.price.featured{background:var(--burgundy);color:var(--mist)}
.price.featured h3,.price.featured .amount{color:var(--pink)}
.price .label{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:400}
.price h3{font-size:30px;margin:12px 0 18px}
.price .amount{font-family:var(--serif);font-style:italic;font-size:60px;color:var(--burgundy);line-height:1}
.price .unit{font-size:15px;margin-top:8px}
.price ul{list-style:none;margin:28px 0 34px;font-size:16px;flex:1}
.price li{padding:9px 0;border-bottom:1px solid rgba(108,8,32,.15)}
.price.featured li{border-color:rgba(242,174,188,.3)}
.note{text-align:center;margin-top:36px;font-size:15px}

/* Contact */
.contact-bg{background:var(--burgundy);color:var(--mist)}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}
.contact .arch{background:var(--silver);aspect-ratio:4/5.4;display:flex;align-items:flex-end;justify-content:center;max-width:380px}
.contact .arch img{width:74%}
.contact h2{color:var(--pink);font-size:clamp(36px,4vw,56px);margin:22px 0 18px}
.contact .eyebrow{color:var(--silver)}
.contact p.lead{color:var(--mist);margin-bottom:36px}
form{display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
input,textarea{width:100%;font:inherit;font-size:17px;color:var(--mist);background:transparent;border:0;border-bottom:2px solid rgba(242,174,188,.55);padding:14px 2px;outline:none}
input::placeholder,textarea::placeholder{color:rgba(242,220,219,.6)}
input:focus,textarea:focus{border-color:var(--pink)}
textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:12px;font-size:14px;align-items:flex-start;color:rgba(242,220,219,.85)}
.check input{width:18px;height:18px;margin-top:4px;accent-color:var(--pink)}
.contact-meta{display:flex;gap:40px;margin-top:40px;font-size:15px;flex-wrap:wrap}
.contact-meta span{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--silver)}
.contact-meta a{text-decoration:none;color:var(--pink)}
form button{justify-self:start;cursor:pointer;background:transparent}
.hidden{display:none}

footer{background:var(--mist);padding:46px 0;font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none;margin-left:26px}
.foot a:hover{color:var(--burgundy)}

@media (max-width:960px){
  .portrait-frame.fox-placeholder{display:none}
  .hero-right{padding:48px 28px 0}
  nav ul{display:none;position:absolute;top:84px;left:0;right:0;background:var(--mist);flex-direction:column;gap:22px;padding:30px;border-bottom:1px solid rgba(108,8,32,.15)}
  nav ul.open{display:flex}
  .menu-btn{display:block}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding:70px 28px}
  .scroll{display:none}
  .about,.contact{grid-template-columns:1fr;gap:56px}
  .services,.prices{grid-template-columns:1fr}
  .services-bg::before{display:none}
  .stations{grid-template-columns:1fr}
  .station{padding:20px 0;border-bottom:1px solid rgba(108,8,32,.15)}
  .quote-inner{padding:120px 30px 60px}
  .row{grid-template-columns:1fr}
  section{padding:84px 0}
  .foot a{margin:0 20px 0 0}
}
/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.project{margin:0}
.project-img{border:2px solid var(--burgundy);border-radius:999px 999px 0 0;padding:10px;background:var(--mist)}
.project-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;display:block;transition:transform .6s ease}
.project-img{overflow:hidden}
.project:hover .project-img img{transform:scale(1.03)}
.project figcaption{padding-top:22px}
.project .tag{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:var(--lapis);border:1px solid var(--lapis);border-radius:999px;padding:4px 12px}
.project h3{font-size:28px;margin:14px 0 8px}
.project p{font-size:16px;line-height:1.55}
#projekte{padding-bottom:40px}
@media (max-width:960px){
  .projects{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:14px;margin-right:-28px;padding-right:28px}
  .project{scroll-snap-align:start}
  .project h3{font-size:24px}
}

/* Grasegger slideshow */
.project-img.slides{position:relative}
.project-img.slides img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;animation:foxi-fade 30s infinite both}
.project-img.slides img:first-child{position:relative;inset:auto;width:100%;height:auto}
.project-img.slides img:nth-child(1){animation-delay:0s}
.project-img.slides img:nth-child(2){animation-delay:5s}
.project-img.slides img:nth-child(3){animation-delay:10s}
.project-img.slides img:nth-child(4){animation-delay:15s}
.project-img.slides img:nth-child(5){animation-delay:20s}
.project-img.slides img:nth-child(6){animation-delay:25s}
@keyframes foxi-fade{0%{opacity:0}3%{opacity:1}17%{opacity:1}20%{opacity:0}100%{opacity:0}}
.project-img.slides img:first-child{animation-name:foxi-fade-first}
@keyframes foxi-fade-first{0%,17%{opacity:1}20%,97%{opacity:0}100%{opacity:1}}
.project:nth-child(2) .project-img.slides img{animation-delay:calc(var(--i,0) * 5s + 2.5s)}
.project:nth-child(2) .project-img.slides img:nth-child(1){--i:0}.project:nth-child(2) .project-img.slides img:nth-child(2){--i:1}.project:nth-child(2) .project-img.slides img:nth-child(3){--i:2}.project:nth-child(2) .project-img.slides img:nth-child(4){--i:3}.project:nth-child(2) .project-img.slides img:nth-child(5){--i:4}.project:nth-child(2) .project-img.slides img:nth-child(6){--i:5}
.project-img.slides.ten img{animation-name:foxi-fade10;animation-duration:50s}
.project-img.slides.ten img:first-child{animation-name:foxi-fade10-first}
.project-img.slides.ten img:nth-child(7){animation-delay:30s}.project-img.slides.ten img:nth-child(8){animation-delay:35s}.project-img.slides.ten img:nth-child(9){animation-delay:40s}.project-img.slides.ten img:nth-child(10){animation-delay:45s}
@keyframes foxi-fade10{0%{opacity:0}1.5%{opacity:1}10%{opacity:1}11.5%{opacity:0}100%{opacity:0}}
@keyframes foxi-fade10-first{0%,10%{opacity:1}11.5%,98.5%{opacity:0}100%{opacity:1}}
.project-img.slides.seven img{animation-name:foxi-fade7;animation-duration:35s}
.project-img.slides.seven img:first-child{animation-name:foxi-fade7-first}
.project-img.slides.seven img:nth-child(7){animation-delay:30s}
@keyframes foxi-fade7{0%{opacity:0}2%{opacity:1}14.3%{opacity:1}16.3%{opacity:0}100%{opacity:0}}
@keyframes foxi-fade7-first{0%,14.3%{opacity:1}16.3%,98%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.project-img.slides img{animation:none;opacity:0}.project-img.slides img:first-child{opacity:1}}

/* Legal pages */
.legal{max-width:820px;padding:100px 28px 120px;margin:0 auto}
.legal h1{font-size:clamp(34px,5vw,60px);overflow-wrap:break-word;hyphens:auto;margin:22px 0 40px}
.legal h2{font-size:28px;margin:44px 0 12px}
.legal h3{font-size:21px;margin:26px 0 8px}
.legal p,.legal li{font-size:17px}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 0 22px}
.legal a{color:var(--burgundy)}
.legal .ph{background:var(--pink);color:var(--burgundy);padding:0 6px;border-radius:4px}