/* ============================================================
   AC Projektbau — editorial monochrome system
   Stark black/white, oversized grotesque caps, sticky vertical
   section rails, hairline rules, desaturated imagery,
   one saturated accent (the brand ultramarine).
   ============================================================ */
:root{
  /* neutrals */
  --black:#0B0B0B;
  --ink:#121212;
  --ink-2:#171717;
  --ink-3:#242423;
  --ink-4:#2C2C2C;
  --grey:#828384;
  --grey-2:#A9A9A9;
  --line:#DADCDD;
  --line-soft:#E5E6E7;
  --shade:#EDEEEF;
  --white:#FFFFFF;

  /* accent — brand ultramarine, used exactly like a single spot colour */
  --accent:#1800AD;
  --accent-deep:#120086;
  --accent-lift:#9B8CFF;   /* readable tint for small marks on black */
  --rust:#121212;          /* legacy alias kept so old inline styles stay sane */

  /* apple.com's stack: real San Francisco on Apple platforms,
     Inter as the closest freely-licensed stand-in everywhere else */
  --display:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
            'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
         'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(.4,0,0,1);
  --rail-w:9%;

  --s1:6px; --s2:11px; --s3:16px; --s4:24px; --s5:40px; --s6:60px;
}
@media (min-width:768px){
  :root{--s3:18px; --s4:30px; --s5:54px; --s6:82px; --rail-w:8%;}
}
@media (min-width:1200px){
  :root{--s4:34px; --s5:66px; --s6:102px; --rail-w:7.5%;}
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:68px;
  background:var(--black);
}
body{
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a,button{touch-action:manipulation;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------------- type ---------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.06;
  letter-spacing:.004em;
  hyphens:auto;
  overflow-wrap:break-word;
}
h1{font-size:clamp(1.6rem, .95rem + 2.4vw, 2.9rem); font-weight:700; line-height:1.06; letter-spacing:-.004em;}
h2{font-size:clamp(1.2rem, .92rem + 1.1vw, 1.8rem); letter-spacing:-.002em;}
h3{font-size:clamp(.92rem, .86rem + .34vw, 1.1rem);}
h1 em{font-style:normal;color:var(--accent-lift);}

.eyebrow{
  font-family:var(--display);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--accent);
  flex:none;
}
.sec--dark .eyebrow{color:var(--grey-2);}
.sec--dark .eyebrow::before{background:var(--accent-lift);}

.lead{
  font-size:clamp(.95rem, .9rem + .28vw, 1.1rem);
  line-height:1.42;
  color:var(--ink-3);
  font-weight:400;
}
.sec--dark .lead{color:rgba(255,255,255,.72);}

.note{
  font-size:.82rem;
  line-height:1.55;
  color:var(--grey);
  max-width:40ch;
  hyphens:auto;
}
.sec--dark .note{color:rgba(255,255,255,.6);}

/* hyphenate long German compounds in narrow measures */
p, li{hyphens:auto;}

.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(16px,3.4vw,40px);
}

/* ---------------- section shell + sticky vertical rail ---------------- */
.sec{position:relative;}
.section-pad{padding:var(--s6) 0;}
.sec--light{background:var(--white);color:var(--ink);}
.sec--shade{background:var(--shade);color:var(--ink);}
.sec--dark{background:var(--black);color:var(--white);}

.rail{display:none;}
@media (min-width:960px){
  .sec--rail{padding-left:var(--rail-w);}
  .rail{
    display:block;
    position:absolute;
    left:0;top:0;bottom:0;
    width:var(--rail-w);
    pointer-events:none;
  }
  .rail::after{
    content:"";
    position:absolute;right:0;top:0;bottom:0;
    width:1px;background:var(--line);
  }
  .sec--dark .rail::after{background:rgba(255,255,255,.13);}
  .rail-text{
    position:sticky;
    top:calc(50vh - 3rem);
    display:block;
    writing-mode:vertical-lr;
    margin-left:clamp(18px,1.8vw,30px);
    font-family:var(--display);
    font-size:calc(.5rem + .22vw);
    font-weight:500;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--grey);
    white-space:nowrap;
  }
  .sec--dark .rail-text{color:var(--grey-2);}
  /* the rail replaces the inline label on wide screens */
  .section-head .eyebrow{display:none;}
}

.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3);
  padding-bottom:var(--s4);
}
.section-head h2{margin-top:var(--s2);}
@media (min-width:900px){
  .section-head{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:end;
    gap:var(--s4);
  }
  .section-head h2{margin-top:0;}
  .section-head .note{justify-self:end;padding-bottom:.4rem;}
}

/* ---------------- buttons (4px frame, zero radius) ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:.72rem 1.15rem;
  border-radius:0;
  border:2px solid rgba(0,0,0,.3);
  font-family:var(--display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{border-color:var(--ink);}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn-ghost{border-color:rgba(0,0,0,.3);color:var(--ink);}

.sec--dark .btn,.hero .btn{border-color:rgba(255,255,255,.3);color:#fff;}
.sec--dark .btn:hover,.hero .btn:hover{border-color:#fff;}
.sec--dark .btn-primary,.hero .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.sec--dark .btn-primary:hover,.hero .btn-primary:hover{background:#fff;border-color:#fff;color:var(--black);}
@media (max-width:600px){
  .btn{padding:.62rem .9rem;font-size:.62rem;}
}

/* ---------------- header ---------------- */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
header.is-stuck{
  background:rgba(11,11,11,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.12);
}
.nav{
  display:flex;
  align-items:center;
  gap:var(--s3);
  height:68px;
}
.logo{flex:none;display:block;}
.logo-img{height:34px;width:auto;}
@media (max-width:600px){.logo-img{height:28px;} .nav{height:60px;}}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.4vw,24px);
  margin-left:auto;
}
.nav-links a{
  font-family:var(--display);
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  padding:5px 0;
  position:relative;
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent-lift);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-whatsapp{display:inline-flex;align-items:center;gap:7px;}
.nav-whatsapp svg{flex:none;}
.nav-cta{margin-left:var(--s2);padding:.55rem .9rem;font-size:.6rem;}
header .btn-primary:hover{background:#fff;border-color:#fff;color:var(--black);}

.burger{
  display:none;
  margin-left:auto;
  width:38px;height:38px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:5px;
}
.burger span{display:block;width:22px;height:2px;background:#fff;transition:transform .3s var(--ease), opacity .2s ease;}
.burger span:nth-child(2){width:14px;}

@media (max-width:1080px){
  .burger{display:flex;}
  .nav-cta{display:none;}
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--black);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:0 clamp(16px,3.4vw,40px);
    max-height:0;
    overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .nav-links.is-open{max-height:80vh;}
  .nav-links a{
    width:100%;
    padding:13px 0;
    font-size:.85rem;
    letter-spacing:.1em;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:#fff;
  }
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a::after{display:none;}
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  background:var(--black);
  color:#fff;
  min-height:84svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding-top:calc(68px + var(--s4));
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img,.hero-bg video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.04) saturate(1.03) brightness(.68);
  transform:scale(1.03);
  display:block;
}
/* The footage has to buffer before it can show a frame, so the still and the
   video are stacked and script crossfades between them — no cut from
   photograph to motion. The still is only faded up if the footage is not
   running yet, so a fast or cached load goes straight to the video. */
.hero-still{opacity:0;transition:opacity .45s linear;}
.hero-bg.still-in .hero-still{opacity:1;}
.hero-bg video{opacity:0;transition:opacity .9s var(--ease);}
.hero-bg.footage-in video{opacity:1;}
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.5) 34%, rgba(11,11,11,.95) 100%);
}
.hero-inner{position:relative;z-index:2;padding-bottom:var(--s4);}
.hero-inner .eyebrow{margin-bottom:var(--s3);}
.hero h1{
  font-size:clamp(2rem, 1rem + 4.6vw, 5rem);
  line-height:1.01;
  max-width:16ch;
  margin-bottom:var(--s3);
}
.is-home h2{font-size:clamp(1.4rem, .95rem + 1.9vw, 2.5rem);}
.hero .lead{max-width:46ch;color:#fff;}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  margin-top:var(--s4);
}

/* stats strip pinned to the bottom of the hero */
.dimension-bar{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
}
.dimension-bar .wrap{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.dim-item{
  padding:var(--s3) 0;
  position:relative;
}
.dim-item + .dim-item{padding-left:clamp(12px,3vw,var(--s3));}
.dim-item + .dim-item::before{
  content:"";
  position:absolute;left:0;top:var(--s3);bottom:var(--s3);
  width:1px;background:rgba(255,255,255,.16);
}
.dim-num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem,.9rem + 1.6vw,2.3rem);
  line-height:1;
  letter-spacing:-.02em;
}
.dim-label{
  font-family:var(--display);
  margin-top:8px;
  font-size:clamp(.52rem,.46rem + .2vw,.6rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey-2);
}

/* on phones the hero sizes to its own content: the headline lands in view
   immediately and the stats strip follows the buttons directly, so no dead
   space opens up between them on tall screens */
@media (max-width:700px){
  .hero{
    justify-content:flex-start;
    min-height:0;
    padding-top:calc(60px + var(--s3));
  }
  .hero-inner{padding-bottom:var(--s5);}
  .hero-inner .eyebrow{margin-bottom:var(--s2);}
  .hero-actions{margin-top:var(--s3);}
  .dimension-bar{margin-top:0;}
}

/* ---------------- page head (sub pages) ---------------- */
.page-head{
  background:var(--black);
  color:#fff;
  padding:calc(68px + var(--s4)) 0 var(--s4);
}
.page-head h1{max-width:22ch;margin-top:var(--s2);}
.page-head .lead{max-width:52ch;margin-top:var(--s2);color:#fff;}
@media (max-width:600px){
  .page-head{padding-top:calc(60px + var(--s4));}
}

/* ---------------- Leistungen — bordered tiles that fill on hover ---------------- */
.svc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s2);
}
@media (min-width:620px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1080px){
  .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.svc-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  padding:var(--s3);
  border:1px solid var(--line);
  background:var(--white);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.svc-tile:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.svc-num{
  position:absolute;
  top:var(--s3);right:var(--s3);
  font-family:var(--display);
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--grey);
  transition:color .3s var(--ease);
}
.svc-tile:hover .svc-num{color:rgba(255,255,255,.7);}
.svc-icon{
  width:22px;height:22px;
  color:var(--accent);
  transition:color .3s var(--ease);
}
.svc-tile:hover .svc-icon{color:#fff;}
.svc-tile h3{
  padding-right:calc(var(--s3) + 26px);
  hyphens:auto;
  overflow-wrap:break-word;
}
.svc-tile p{
  font-size:.82rem;
  line-height:1.55;
  color:var(--grey);
  transition:color .3s var(--ease);
}
.svc-tile:hover p{color:rgba(255,255,255,.82);}

/* ---------------- Gewerke — text-only spec list ---------------- */
.trade-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3) var(--s4);
}
@media (min-width:620px){
  .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1000px){
  .trade-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.trade-item{
  border-top:1px solid var(--line);
  padding-top:var(--s2);
}
.trade-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:var(--line-soft);
  margin-bottom:var(--s2);
}
.trade-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.trade-item:hover .trade-media img{transform:scale(1.04);}
.trade-item h3{
  font-size:.82rem;
  letter-spacing:.12em;
  color:var(--ink);
  hyphens:auto;
  overflow-wrap:break-word;
}
.trade-item ul{margin-top:var(--s1);}
.trade-item li{
  font-size:.78rem;
  line-height:1.5;
  color:var(--grey);
  padding:2px 0;
}

/* ---------------- Referenzen — compact cards ---------------- */
.ref-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3);
}
@media (min-width:620px){
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1100px){
  .ref-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);}
}
.ref-card{display:flex;flex-direction:column;gap:var(--s1);}
.ref-media{
  position:relative;
  overflow:hidden;
  background:var(--shade);
  aspect-ratio:4 / 3;
  margin-bottom:var(--s1);
}
.ref-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.ref-card:hover .ref-media img{transform:scale(1.04);}
.ref-live{
  position:absolute;
  z-index:2;
  top:0;left:0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  background:var(--accent);
  color:#fff;
  font-family:var(--display);
  font-size:.52rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ref-live .dot{
  width:5px;height:5px;
  background:#fff;
  border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.ref-live .dot{animation:none}}

.ref-index{
  font-family:var(--display);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--accent);
}
.ref-title{font-size:.9rem;line-height:1.32;hyphens:auto;}
.ref-desc{color:var(--grey);font-size:.8rem;line-height:1.5;}
.more-line{
  margin-top:var(--s4);
  font-family:var(--display);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.more-line a{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
  transition:opacity .2s ease;
}
.more-line a:hover{opacity:.6;}

/* ---------------- Über uns ---------------- */
.ueber-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
}
@media (min-width:900px){
  .ueber-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s5);}
}
.ueber-grid > div > p{
  font-size:clamp(.98rem,.9rem + .4vw,1.22rem);
  line-height:1.45;
  color:var(--ink);
}
.ueber-list{border-top:1px solid var(--line);}
.ueber-list li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:.86rem;
  color:var(--ink-3);
}
.tick{
  width:14px;height:14px;
  flex:none;
  margin-top:3px;
  color:var(--accent);
}

/* ---------------- Kontakt ---------------- */
.kontakt-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
}
@media (min-width:900px){
  .kontakt-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:start;}
}
.kontakt-info h2{margin-bottom:var(--s3);}
.kontakt-info > p{color:rgba(255,255,255,.68);max-width:48ch;margin-bottom:var(--s4);font-size:.95rem;}
.info-row{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
@media (min-width:600px){
  .info-row{grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s2);align-items:baseline;}
}
.info-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.14);}
.info-row .k{
  font-family:var(--display);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey-2);
}
.info-row .v{font-size:.95rem;color:#fff;}
.info-row .v a{transition:color .2s ease;border-bottom:1px solid rgba(255,255,255,.3);}
.info-row .v a:hover{color:var(--accent-lift);border-bottom-color:var(--accent-lift);}

.kontakt-whatsapp{
  border:1px solid rgba(255,255,255,.16);
  padding:var(--s3) clamp(16px,2vw,28px);
  display:flex;
  flex-direction:column;
  gap:var(--s3);
  align-items:flex-start;
}
.wa-lead{color:#fff;font-size:.95rem;line-height:1.5;}
.wa-note{color:var(--grey);font-size:.78rem;line-height:1.55;}
.btn-whatsapp{width:100%;}

/* ---------------- back to top ---------------- */
.to-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:var(--s3) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:var(--s4);
  font-family:var(--display);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey-2);
  transition:color .2s ease;
}
.to-top:hover{color:#fff;}
.to-top svg{
  width:13px;height:13px;
  flex:none;
  transition:transform .3s var(--ease);
}
.to-top:hover svg{transform:translateY(-3px);}

/* ---------------- footer ---------------- */
footer{
  background:var(--black);
  color:#fff;
  padding:var(--s4) 0 var(--s3);
  border-top:1px solid rgba(255,255,255,.14);
}
.foot-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
}
.foot-inner > span{
  font-family:var(--display);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--grey);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-left:auto;
}
.footer-link{
  font-family:var(--display);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--grey-2);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.footer-link:hover{color:#fff;border-bottom-color:var(--accent-lift);}

/* ---------------- modals ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(16px,4vw,64px);
  background:rgba(11,11,11,.78);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow-y:auto;
}
.modal-overlay.is-open{display:flex;}
.modal{
  position:relative;
  width:100%;
  max-width:760px;
  background:var(--white);
  color:var(--ink);
  border-radius:0;
  padding:clamp(20px,3vw,44px);
  animation:sheet-in .5s var(--ease);
}
@keyframes sheet-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.modal{animation:none}}
.modal h2{font-size:clamp(1.2rem,1rem + .7vw,1.7rem)!important;margin-bottom:var(--s3)!important;}
.modal-close{
  position:absolute;
  top:0;right:0;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  font-size:1rem;
  color:var(--ink);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background-color .2s ease, color .2s ease;
}
.modal-close:hover{background:var(--accent);color:#fff;}
.modal .eyebrow{margin-bottom:var(--s2)!important;}
.modal-text{
  font-size:.85rem;
  line-height:1.62;
  color:var(--ink-3);
  margin-bottom:var(--s3);
}
.modal-text a{border-bottom:1px solid var(--line);}
.modal-text a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.modal-label{
  display:block;
  font-family:var(--display);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.modal-note{
  padding:var(--s3);
  background:var(--shade);
  color:var(--grey);
  font-size:.78rem;
}

/* ---------------- motion ---------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{opacity:1;transform:none;}

/* line-by-line masked headline reveal
   padding + negative margins keep descenders from clipping */
.rt-line{display:block;overflow:hidden;padding:.1em 0;}
.rt-line:first-child{margin-top:-.1em;}
.rt-line:not(:first-child){margin-top:-.2em;margin-bottom:-.2em;}
.rt-line:last-child{margin-bottom:-.1em;}
.rt-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--ease);
}
.rt.in .rt-line > span{transform:none;}
.rt.in .rt-line:nth-child(2) > span{transition-delay:.09s;}
.rt.in .rt-line:nth-child(3) > span{transition-delay:.18s;}
.rt.in .rt-line:nth-child(4) > span{transition-delay:.27s;}

/* staggered children — one observer target, sequenced items */
.reveal-group > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-group.in > *{opacity:1;transform:none;}
.reveal-group.in > :nth-child(2){transition-delay:.09s;}
.reveal-group.in > :nth-child(3){transition-delay:.18s;}
.reveal-group.in > :nth-child(4){transition-delay:.27s;}
.reveal-group.in > :nth-child(5){transition-delay:.36s;}
.reveal-group.in > :nth-child(6){transition-delay:.45s;}

/* on-load entrance, sequenced by an inline --d on each element */
[data-enter]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .95s var(--ease) var(--d,0s), transform .95s var(--ease) var(--d,0s);
}
body.is-ready [data-enter]{opacity:1;transform:none;}

/* Both hero layers keep the same static bleed scale: the footage already moves,
   and a drift on only one of them would pull the crossfade between the still
   and the video out of register. Parallax therefore goes on the wrapper, which
   is also the only layer the script animates — a full-bleed composited layer is
   expensive to keep around on a phone. */
@media (min-width:900px) and (pointer:fine){
  .hero-bg{will-change:transform;}
}

/* accent hairline that draws itself out of the hero eyebrow
   (.eyebrow is a flex row, so this trails to the right of the text) */
.hero-inner .eyebrow::after{content:none;}
@media (min-width:760px){
  .hero-inner .eyebrow::after{
    content:"";
    flex:0 1 auto;
    min-width:0;
    width:min(170px,20vw);
    height:1px;
    background:linear-gradient(90deg, var(--accent-lift), rgba(255,255,255,0));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s var(--ease) .55s;
  }
  body.is-ready .hero-inner .eyebrow::after{transform:scaleX(1);}
}

/* reading-progress hairline, pinned above the header */
.scroll-line{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:200;
  pointer-events:none;
}
.scroll-line span{
  display:block;
  height:100%;
  background:var(--accent-lift);
  transform:scaleX(0);
  transform-origin:left;
}

/* trade ticker — a moving band instead of a second list of services */
.ticker{
  display:block;
  overflow:hidden;
  background:var(--black);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:var(--s3) 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:tickerRun 42s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-row{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,38px);
  padding-right:clamp(18px,3vw,38px);
  font-family:var(--display);
  font-size:clamp(.62rem,.56rem + .24vw,.78rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker-row i{
  font-style:normal;
  color:var(--accent-lift);
}
@keyframes tickerRun{from{transform:none;}to{transform:translate3d(-50%,0,0);}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .reveal-group > *{opacity:1;transform:none;transition:none;}
  [data-enter]{opacity:1;transform:none;transition:none;}
  .rt-line > span{transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .hero-bg img,.hero-bg video{transform:none;animation:none;transition:none;}
  .hero-inner .eyebrow::after{transform:none;transition:none;}
  .ticker-track{animation:none;}
}

/* hero rail sits over the photograph */
.hero .rail{z-index:2;}  /* above the hero photograph and its gradient */
.hero .rail::after{background:rgba(255,255,255,.22);}
@media (min-width:960px){
  /* the hero clips its background image, so sticky can't engage inside it */
  .hero .rail-text{
    position:absolute;
    top:50%;
    left:clamp(18px,1.8vw,30px);
    margin-left:0;
    transform:translateY(-50%);
    color:rgba(255,255,255,.58);
  }
}
@media (min-width:960px){
  /* the vertical rail is the section label; drop the inline duplicate */
  .kontakt-info .eyebrow,
  .page-head .eyebrow{display:none;}
  .page-head h1{margin-top:0;}
}