:root{
  --primary:hsl(242,50%,34%);
  --primary-deep:hsl(242,48%,18%);
  --primary-ink:hsl(242,40%,11%);
  --primary-tint:hsl(242,45%,92%);
  --accent:hsl(71,60%,43%);
  --accent-bright:hsl(71,70%,58%);
  --accent-soft:hsl(71,55%,88%);
  --paper:hsl(55,25%,96%);
  --paper-2:hsl(55,18%,91%);
  --ink:hsl(242,30%,12%);
  --muted:hsl(242,12%,38%);
  --line:hsl(242,15%,80%);
  --radius:6px;
  --pad:clamp(20px,5vw,72px);
  --section:clamp(88px,12vw,180px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:.92;letter-spacing:-.04em;font-weight:800}

@keyframes rise{from{transform:translateY(28px);opacity:.25}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(-40px)}to{transform:none}}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
}
.brand{
  text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;
  display:flex;align-items:center;gap:10px;
}
.brand-dot{width:14px;height:14px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.mainnav{display:flex;align-items:center;gap:6px}
.mainnav a{
  text-decoration:none;font-size:.88rem;font-weight:600;color:var(--muted);
  padding:12px 14px;border-radius:var(--radius);
  transition:color .2s,background .2s;
}
.mainnav a:hover{color:var(--primary);background:var(--primary-tint)}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:var(--radius);
  background:var(--primary);color:#fff;text-decoration:none;
  font-weight:700;font-size:.92rem;white-space:nowrap;
  transition:background .2s,color .2s;
}
.btn-cta:hover{background:var(--accent);color:var(--primary-ink)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100vh - 77px);
  display:flex;align-items:flex-end;
  color:#fff;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;inset:0;
  background:url("assets/pic1.webp") center/cover no-repeat;
  animation:zoom 2.4s ease-out;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,hsla(242,50%,10%,.25) 0%,hsla(242,50%,12%,.55) 45%,hsla(242,55%,10%,.92) 100%),
    linear-gradient(90deg,hsla(242,50%,34%,.55),transparent 70%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding:var(--section) var(--pad) clamp(40px,6vw,80px)}
.kicker{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:28px;
  animation:rise .9s ease-out .1s backwards;
}
.hero h1{
  font-size:clamp(3.4rem,11.5vw,12rem);
  line-height:.84;
  max-width:14ch;
}
.hero h1 span{display:block;animation:slide 1s cubic-bezier(.2,.7,.2,1) backwards}
.hero h1 .l2{
  margin-left:clamp(0px,9vw,180px);margin-top:-.06em;
  color:transparent;-webkit-text-stroke:2px var(--accent-bright);
  animation-delay:.12s;
}
.hero h1 .l3{margin-top:-.06em;color:var(--accent-bright);animation-delay:.24s}
.hero-foot{
  display:grid;grid-template-columns:1fr minmax(260px,420px);gap:40px;align-items:end;
  margin-top:clamp(36px,5vw,64px);padding-top:28px;
  border-top:1px solid hsla(0,0%,100%,.3);
  animation:rise 1s ease-out .4s backwards;
}
.hero-foot p{font-size:1.08rem;color:hsla(0,0%,100%,.88)}
.hero-foot .loc{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:hsla(0,0%,100%,.7)}

/* ---------- section scaffolding ---------- */
.sec{padding:var(--section) var(--pad);border-bottom:1px solid var(--line)}
.sec-head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;
  margin-bottom:clamp(48px,7vw,110px);
}
.sec-num{
  grid-column:1/3;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);
  align-self:start;padding-top:12px;border-top:2px solid var(--primary);
}
.sec-head h2{grid-column:3/11;font-size:clamp(3rem,8.5vw,8.5rem)}
.sec-head h2 em{font-style:normal;color:var(--primary)}
.sec-head .aside{grid-column:11/13;font-size:.95rem;color:var(--muted)}

/* ---------- gallery ---------- */
.gallery{padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}
.gallery .sec-head{padding:0 calc(var(--pad) - clamp(12px,2vw,28px))}
.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(60px,7.2vw,118px);
  gap:clamp(8px,1.1vw,16px);
}
.tile{
  position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);
  margin:0;animation:rise .9s ease-out backwards;
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{
  position:absolute;left:12px;bottom:12px;
  background:var(--paper);color:var(--ink);
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:4px;
}
.t1{grid-column:1/8;grid-row:span 6}
.t2{grid-column:8/13;grid-row:span 3}
.t3{grid-column:8/11;grid-row:span 3}
.t4{grid-column:11/13;grid-row:span 3}
.t5{grid-column:1/4;grid-row:span 4}
.t6{grid-column:4/9;grid-row:span 4}
.t7{grid-column:9/13;grid-row:span 5}
.quote{
  grid-column:1/9;grid-row:span 3;
  display:flex;align-items:center;
  padding:0 clamp(8px,2vw,24px);
}
.quote p{
  font-size:clamp(2.2rem,5.6vw,6rem);font-weight:800;letter-spacing:-.045em;line-height:.9;
}
.quote p span{color:var(--accent)}
.t8{grid-column:9/13;grid-row:span 2}
.t9{grid-column:1/5;grid-row:span 5}
.t10{grid-column:5/10;grid-row:span 3}
.t11{grid-column:10/13;grid-row:span 5}
.t12{grid-column:5/7;grid-row:span 2}
.t13{grid-column:7/10;grid-row:span 2}
.t14{grid-column:1/6;grid-row:span 4}
.t15{grid-column:6/9;grid-row:span 4}
.t16{grid-column:9/13;grid-row:span 4}
.t17{grid-column:1/4;grid-row:span 3}
.t18{grid-column:4/7;grid-row:span 3}
.t19{grid-column:7/10;grid-row:span 3}
.t20{grid-column:10/13;grid-row:span 3}
.t2,.t5,.t8,.t12,.t17{animation-delay:.1s}
.t3,.t6,.t9,.t13,.t18{animation-delay:.2s}
.t4,.t7,.t10,.t14,.t19{animation-delay:.3s}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.faq-list{grid-column:3/11;border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:30px 0;min-height:64px;
  font-size:clamp(1.25rem,2.4vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";flex:none;width:44px;height:44px;border-radius:var(--radius);
  display:grid;place-items:center;font-size:1.5rem;font-weight:500;
  border:1px solid var(--line);color:var(--primary);transition:transform .3s,background .3s;
}
.faq-list details[open] summary::after{transform:rotate(45deg);background:var(--accent-soft)}
.faq-list details p{max-width:60ch;padding:0 0 34px;color:var(--muted);font-size:1.05rem}

/* ---------- offering ---------- */
.offer{background:var(--primary);color:#fff}
.offer .sec-num{color:var(--accent-bright);border-color:var(--accent-bright)}
.offer .sec-head h2 em{color:var(--accent-bright)}
.offer .sec-head .aside{color:hsla(0,0%,100%,.7)}
.offer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.offer-list{grid-column:1/8;list-style:none;border-top:1px solid hsla(0,0%,100%,.25)}
.offer-list li{
  display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid hsla(0,0%,100%,.25);
}
.offer-list .n{font-size:.8rem;font-weight:700;color:var(--accent-bright);letter-spacing:.1em}
.offer-list h3{font-size:clamp(1.3rem,2.3vw,1.9rem);letter-spacing:-.03em;line-height:1.1}
.offer-list small{font-size:.92rem;color:hsla(0,0%,100%,.7);text-align:right}
.offer-side{grid-column:9/13;display:flex;flex-direction:column;gap:24px}
.offer-side figure{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.offer-side figure img{width:100%;height:100%;object-fit:cover}
.prices{list-style:none}
.prices li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid hsla(0,0%,100%,.25);font-size:.98rem;
}
.prices strong{color:var(--accent-bright);font-weight:800;white-space:nowrap}
.prices-note{font-size:.88rem;color:hsla(0,0%,100%,.7)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.contact-intro{grid-column:1/7}
.contact-intro .big{
  font-size:clamp(2.6rem,6vw,5.6rem);font-weight:800;letter-spacing:-.045em;line-height:.92;margin-bottom:28px;
}
.contact-intro .big span{color:var(--primary)}
.contact-intro p{max-width:46ch;color:var(--muted);margin-bottom:16px}
.contact-mark{width:96px;height:96px;margin-top:40px;opacity:1}
.contact-side{grid-column:8/13}
.nap{list-style:none;border-top:1px solid var(--ink);margin-bottom:48px}
.nap li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.nap span{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.nap a,.nap address{font-style:normal;font-weight:700;font-size:1.1rem;text-decoration:none}
.nap a:hover{color:var(--primary);text-decoration:underline}
#anfrage form{
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,3vw,40px);border-radius:var(--radius);
  background:var(--accent-soft);border:1px solid hsl(71,40%,70%);
}
#anfrage label{display:flex;flex-direction:column;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#anfrage input{
  font:inherit;font-size:1.05rem;letter-spacing:0;text-transform:none;
  min-height:56px;padding:0 16px;border-radius:var(--radius);
  border:1px solid hsl(242,20%,70%);background:#fff;color:var(--ink);
}
#anfrage input:focus{outline:3px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
#anfrage button{
  font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;
  min-height:58px;border:0;border-radius:var(--radius);
  background:var(--primary);color:#fff;margin-top:6px;transition:background .2s,color .2s;
}
#anfrage button:hover{background:var(--primary-ink)}

/* ---------- footer ---------- */
.foot{background:var(--primary-ink);color:hsla(0,0%,100%,.82);padding:clamp(64px,8vw,120px) var(--pad) 40px}
.foot-word{
  font-size:clamp(3.2rem,13vw,13rem);font-weight:800;letter-spacing:-.055em;line-height:.82;color:#fff;
  margin-bottom:clamp(40px,6vw,80px);
}
.foot-word span{color:var(--accent-bright)}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-top:32px;border-top:1px solid hsla(0,0%,100%,.2)}
.foot-tag{grid-column:1/5;font-size:1.05rem;color:#fff}
.foot-nap{grid-column:5/10;font-style:normal;font-size:.95rem;line-height:1.9}
.foot-nap a{text-decoration:none}
.foot-nap a:hover{color:var(--accent-bright)}
.foot-legal{grid-column:10/13;list-style:none;display:flex;flex-direction:column;gap:4px}
.foot-legal a{display:inline-block;padding:8px 0;text-decoration:none;font-weight:600}
.foot-legal a:hover{color:var(--accent-bright)}
.foot-copy{margin-top:48px;font-size:.82rem;color:hsla(0,0%,100%,.5)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .mainnav a.lnk{padding:12px 8px}
  .sec-num{grid-column:1/13}
  .sec-head h2{grid-column:1/13}
  .sec-head .aside{grid-column:1/9}
  .faq-list{grid-column:1/13}
  .offer-list{grid-column:1/13}
  .offer-side{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .contact-intro,.contact-side{grid-column:1/13}
  .foot-tag{grid-column:1/13}
  .foot-nap{grid-column:1/8}
  .foot-legal{grid-column:8/13}
}
@media (max-width:680px){
  body{font-size:16px}
  .topbar-inner{flex-wrap:wrap;gap:8px;padding:10px 16px}
  .brand{font-size:1.05rem}
  .mainnav{order:3;width:100%;overflow-x:auto;gap:0;margin:0 -8px}
  .mainnav a.lnk{padding:12px 10px;white-space:nowrap}
  .btn-cta{min-height:46px;padding:0 16px;font-size:.85rem}
  .hero{min-height:88vh}
  .hero-inner{padding:96px 16px 36px}
  .hero h1 .l2{-webkit-text-stroke:1.5px var(--accent-bright);margin-left:.4em}
  .hero-foot{grid-template-columns:1fr;gap:16px}
  .sec{padding:80px 16px}
  .gallery{padding:80px 8px}
  .gallery .sec-head{padding:0 8px}
  .sec-head{gap:16px}
  .sec-head .aside{grid-column:1/13}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;gap:8px}
  .mosaic .tile{grid-column:span 1;grid-row:span 1}
  .mosaic .t1,.mosaic .t7,.mosaic .t11,.mosaic .t14{grid-column:span 2;grid-row:span 2}
  .mosaic .t9,.mosaic .t16{grid-row:span 2}
  .quote{grid-column:span 2;grid-row:auto;padding:28px 4px}
  .offer-list li{grid-template-columns:36px 1fr;padding:18px 0}
  .offer-list small{grid-column:2;text-align:left}
  .offer-side{grid-template-columns:1fr}
  .nap li{grid-template-columns:1fr;gap:4px}
  .foot-nap,.foot-legal{grid-column:1/13}
  .faq-list summary{padding:22px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* engine extras */
.site67m-bar{display:none}
@media(max-width:680px){body{padding-bottom:60px}
.site67m-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.site67m-bar a{display:flex;align-items:center;justify-content:center;padding:16px 8px;font-weight:700;text-decoration:none;font-family:sans-serif;background:#fff;color:hsl(242,50%,24%)}
.site67m-bar a.site67m-bp{background:hsl(242,50%,34%);color:#fff}}
.site67m-cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:#fff;color:#1a1a1a;border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.22);padding:18px 22px;z-index:100;font-family:sans-serif;font-size:.92rem;display:none}
.site67m-cookie.on{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media(max-width:680px){.site67m-cookie{bottom:74px}}
.site67m-cookie a{color:hsl(242,50%,34%)}
.site67m-cookie button{padding:9px 20px;border:none;border-radius:8px;background:hsl(242,50%,34%);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
.site67m-legal{border-top:1px solid rgba(127,127,127,.25);padding:18px 22px;text-align:center;font-family:sans-serif;font-size:.82rem;opacity:.8}
.site67m-legal a{color:inherit;margin:0 8px}
.site67m-legal .site67m-ll{display:block;margin-top:8px}