/* ==========================================================================
   MG-Bauinstallation — mg-bauinstallation.de
   Static rebuild of the original Wix site. All assets self-hosted.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* All three families are SIL Open Font License — free for commercial use and
   free to self-host. Jost stands in for the original Futura LT / Brandon
   Grotesque (both commercially licensed); it is the closest open geometric
   sans, measured within 1.7% of the originals. Tracking is tuned below so
   line-breaks land exactly where they did before. */
@font-face{font-family:'Jost';src:url('../fonts/jost.woff2?v=4') format('woff2-variations'),url('../fonts/jost.woff2?v=4') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Lobster';src:url('../fonts/lobster.woff2?v=4') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Oswald XL';src:url('../fonts/oswald.woff2?v=4') format('woff2-variations'),url('../fonts/oswald.woff2?v=4') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --yellow:#FFDE11;
  --blue:#185F9C;
  --blue-deep:#0E2436;
  --blue-contact:#0E4D82;
  --blue-phone:#2B6CA3;
  --dark:#1A1A1A;
  --grey-page:#6E6E6E;
  --about-overlay:#29251D;
  --video-overlay:#212121;
  --footer-link:#0C4426;
  --f-book:'Jost',sans-serif;
  --f-light:'Jost',sans-serif;
  --f-brandon:'Jost',sans-serif;
  --track:-0.024em;            /* matches Brandon Grotesque's set width */
  --f-lobster:'Lobster',cursive;
  --f-oswald:'Oswald XL','Oswald',sans-serif;
  --f-impact:Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --header-h:81px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0;font-family:var(--f-brandon);background:#fff;overflow-x:hidden}
img{border:0;display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;color:#116dff;padding:12px 24px;border-radius:24px}
.skip-link:focus{left:50%;transform:translateX(-50%)}

/* 980px design container (home + header + footer) */
.c980{width:980px;margin:0 auto;position:relative}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:var(--yellow);height:var(--header-h)}
.site-header .c980{height:var(--header-h)}
.logo{position:absolute;left:0;top:17px;width:213px;height:47px}
.logo img{width:213px;height:47px;object-fit:contain}

.nav{position:absolute;left:220px;top:25px;width:589px;height:31px}
.nav-list{display:flex;align-items:flex-start;white-space:nowrap}
.nav-item{position:relative;display:inline-block}
.nav-item>a,.nav-more>button{
  display:inline-block;padding:0 12px;line-height:19.6px;
  font-family:var(--f-brandon);font-size:14px;font-weight:700;color:var(--blue);
  transition:opacity .2s ease}
.nav-item>a:hover,.nav-more>button:hover{opacity:.7}
.nav-item.is-current>a{text-decoration:underline}
.nav-item.has-sub>a{padding-right:22px}
.nav-caret{position:absolute;right:8px;top:6px;width:10px;height:10px;pointer-events:none}
.nav-caret svg{width:10px;height:10px;fill:var(--blue)}

/* dropdown */
.sub-list{
  position:absolute;left:0;top:31px;min-width:190px;z-index:120;
  background:var(--yellow);padding:6px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-item.has-sub:hover .sub-list,
.nav-item.has-sub:focus-within .sub-list,
.nav-item.has-sub.open .sub-list{opacity:1;visibility:visible;transform:translateY(0)}
.sub-list a{display:block;padding:7px 16px;font-family:var(--f-brandon);font-size:14px;font-weight:700;color:var(--blue)}
.sub-list a:hover{background:rgba(0,0,0,.07)}

/* "More" overflow menu (matches Wix behaviour when items exceed 589px) */
.nav-more{position:relative;display:none}
.nav-more.show{display:inline-block}
.nav-more>button{letter-spacing:2px}
.nav-more .sub-list{left:auto;right:0}
.nav-more:hover .sub-list,.nav-more:focus-within .sub-list,.nav-more.open .sub-list{opacity:1;visibility:visible;transform:translateY(0)}
.nav-item.moved{display:none}

.header-phone{
  position:absolute;left:799px;top:27px;width:180px;text-align:center;
  font-family:var(--f-light);font-size:20px;line-height:26px;
  color:var(--blue-phone);letter-spacing:.1em;text-decoration:underline}
.header-phone:hover{opacity:.8}

/* burger — mobile only */
.burger{position:absolute;right:0;top:22px;width:38px;height:38px;display:none;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:2px;background:var(--blue);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:24px;height:2px;background:var(--blue);transition:transform .25s ease,top .25s ease}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{display:none}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:#fff;height:71px;position:relative}
.site-footer .c980{height:71px}
.copyright{position:absolute;left:89px;top:24px;width:315px;
  font-family:var(--f-brandon);font-size:15px;color:var(--dark)}
.foot-btn{position:absolute;top:15px;width:187px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-oswald);font-size:19px;font-weight:700;color:var(--footer-link);
  transition:opacity .2s ease}
.foot-btn:hover{opacity:.65}
.foot-btn--ds{left:463px}
.foot-btn--im{left:665px}

/* ==========================================================================
   HOME — full-bleed section backgrounds
   ========================================================================== */
.bleed{position:relative;width:100%}
.bleed>.bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bleed>.c980{z-index:1}

/* --- Hero --- */
.hero{height:679px;overflow:hidden}
.hero .bg video,.hero .bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero .c980{height:679px}
.hero-title{position:absolute;left:0;top:110px;width:656px;
  font-family:var(--f-lobster);font-size:109px;line-height:1.2em;color:#fff;font-weight:400}
.btn-projekte{position:absolute;left:1px;top:570px;width:230px;height:47px;
  display:flex;align-items:center;justify-content:center;background:var(--blue);
  font-family:var(--f-book);font-size:17px;line-height:23.8px;color:var(--yellow);
  transition:background .2s ease,color .2s ease}
.btn-projekte:hover{background:#0E2436;color:#fff}
.hero-chevron{display:block;position:absolute;left:465px;top:627px;width:49px;height:29px}
.hero-chevron svg{display:block;width:100%;height:100%;fill:#fff}

/* --- Services --- */
.services{height:911px;background:linear-gradient(90deg,#185F9C 0%,#0E2436 100%)}
.services .c980{height:911px}
.sec-title{font-family:var(--f-book);font-size:44px;line-height:1.34;color:#fff;text-align:center}
.services .sec-title{position:absolute;left:0;top:91px;width:980px}
.svc{position:absolute;top:216px;width:156px;text-align:center}
/* icon and name are links to the matching project page (as on the original) */
.svc-icon{height:121px;display:flex;align-items:flex-end;justify-content:center;transition:opacity .2s ease}
.svc-icon:hover{opacity:.8}
.svc-icon img{object-fit:contain;max-width:none}
.svc-name{font-family:var(--f-light);font-size:20px;line-height:26px;color:#fff;margin-top:29px}
.svc-name a{color:inherit;transition:opacity .2s ease}
.svc-name a:hover{opacity:.8;text-decoration:underline}
.svc-text{font-family:var(--f-brandon);font-size:18px;line-height:26px;color:#fff;margin-top:59px}
.svc-1{left:39px}.svc-2{left:227px}.svc-3{left:412px}.svc-4{left:596px}.svc-5{left:780px}
.btn-kontakt{position:absolute;left:403px;top:827px;width:178px;height:55px;
  display:flex;align-items:center;justify-content:center;background:#fff;
  font-family:var(--f-brandon);font-size:15px;letter-spacing:1.5px;color:var(--blue);
  transition:background .2s ease,color .2s ease}
.btn-kontakt:hover{background:var(--yellow);color:var(--blue-deep)}

/* --- About --- */
.about{height:395px;background:var(--about-overlay)}
.about .bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.about .c980{height:395px}
.about-title{position:absolute;left:-25px;top:24px;width:675px;text-align:center;
  font-size:45px;line-height:1.34;color:var(--yellow)}
.about-title .brand{font-family:var(--f-impact);font-weight:400}
.about-title .sub{font-family:var(--f-book)}
.about-text{position:absolute;left:60px;top:96px;width:505px;text-align:center;
  font-family:var(--f-brandon);font-size:35px;line-height:49px;color:#fff}
.video-box{position:absolute;left:670px;top:26px;width:274px;height:343px;
  background:var(--video-overlay);overflow:hidden;
  -webkit-mask-image:var(--arch);mask-image:var(--arch);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
:root{--arch:url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='42.5 28.283 115 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 28.283c-31.756 0-57.5 23.983-57.5 53.568v90.432h115V81.851c0-29.585-25.744-53.568-57.5-53.568z'/%3E%3C/svg%3E")}
.video-box video,.video-box img{width:100%;height:100%;object-fit:cover;display:block}
.video-toggle{position:absolute;left:670px;top:26px;width:274px;height:343px;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
.video-box:hover+.video-toggle,.video-toggle:hover,.video-toggle:focus-visible{opacity:1}
.video-toggle svg{width:60px;height:60px;fill:#fff;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
/* icon swap handled by JS toggling .is-paused (no inline styles — strict CSP) */
.video-toggle .i-play{display:none}
.video-toggle.is-paused .i-play{display:block}
.video-toggle.is-paused .i-pause{display:none}
.btn-senden.is-busy{opacity:.6;pointer-events:none}

/* --- Testimonials --- */
.testimonials{height:593px;background:#fff}
.testimonials .c980{height:593px}
.testimonials .sec-title{position:absolute;left:0;top:61px;width:980px;color:var(--blue)}
.quote-mark{display:block;position:absolute;width:40px;height:40px}
.quote-mark svg{display:block;width:100%;height:100%;fill:var(--blue-phone)}
.quote-text{position:absolute;text-align:center;
  font-family:var(--f-brandon);font-size:18px;line-height:26px;color:var(--dark)}
.q1-mark{left:469px;top:198px}
.q1-text{left:521px;top:220px;width:315px}
.q2-mark{left:188px;top:381px}
.q2-text{left:240px;top:403px;width:316px}

/* --- Contact --- */
.contact{height:676px;background:var(--blue-contact)}
.contact .c980{height:676px}
.contact .sec-title{position:absolute;left:0;top:45px;width:980px}

.contact-form{position:absolute;left:38px;top:118px;width:540px;height:484px;background:#fff}
.form-inner{padding:63px 45px 0}
.field{position:relative;margin-bottom:0}
.field label{display:block;font-family:var(--f-book);font-size:14px;line-height:14px;color:#000;margin-bottom:2px}
.field input,.field textarea{
  display:block;width:100%;height:44px;padding:0 3px;
  background:transparent;border:0;border-bottom:2px solid #000;border-radius:0;
  font-family:var(--f-book);font-size:18px;color:#000}
.field textarea{height:88px;padding-top:6px;resize:none;line-height:1.4}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--blue)}
.row2{display:flex;gap:30px}
.row2 .field{width:210px}
.f-vorname{margin-top:0}
.f-email{margin-top:57px}
.f-msg{margin-top:25px}
.form-foot{display:flex;align-items:center;gap:18px;margin-top:31px;margin-left:-3px}
.btn-senden{width:147px;height:42px;display:flex;align-items:center;justify-content:center;
  background:#000;border:2px solid #000;border-radius:300px;
  font-family:var(--f-book);font-size:16px;line-height:22.4px;color:#fff;
  transition:background .2s ease,color .2s ease}
.btn-senden:hover{background:#fff;color:#000}
.form-msg{font-family:var(--f-book);font-size:15px;line-height:21px;color:#000;flex:1;text-align:right}
.form-msg.error{color:#c0392b}

/* Privacy consent — absolutely placed so the SENDEN button keeps the
   exact position it had on the original site. */
.consent{position:absolute;left:45px;right:45px;top:369px;
  display:flex;align-items:center;gap:7px}
.consent input{width:14px;height:14px;flex:none;accent-color:var(--blue)}
.consent label{font-family:var(--f-brandon);font-size:12px;line-height:16px;color:#444;white-space:nowrap}
.consent a{color:var(--blue);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.info{position:absolute;left:628px;top:0;width:352px;height:676px;color:#fff}
.info-h{position:absolute;left:0;width:100%;font-family:var(--f-light);font-size:20px;line-height:26px;letter-spacing:1px;color:#fff}
.info-t{position:absolute;left:0;width:100%;font-family:var(--f-brandon);font-size:19px;line-height:27px;color:#fff}
.i-social{position:absolute;left:0}
.info-t a:hover{text-decoration:underline}
/* dial link added by JS on phones only — inherits the surrounding style so
   the number looks exactly as it does on the original site */
.tel-link{color:inherit;text-decoration:none}
.tel-link:active{opacity:.7}
.i-call{top:154px}.i-phone{top:180px}
.i-mailh{top:241px}.i-mail{top:267px}
.i-loc{top:330px}.i-addr{top:354px}
.i-follow{top:441px}
.i-social{top:475px;width:38px;height:38px}
.i-social img{width:38px;height:38px}
.i-social a{display:block;transition:opacity .2s ease}
.i-social a:hover{opacity:.75}

/* ==========================================================================
   PROJECT PAGES  (fluid: max(980px, 100vw - 160px))
   ========================================================================== */
.proj-page{background:var(--grey-page)}
/* 100% (not 100vw) so the scrollbar isn't counted — matches the original's 1265px */
.wrap{width:max(980px,calc(100% - 160px));margin:0 auto}

.phero-sec{padding:40px 0 34px}
.gallery{padding:20px 0 45px}
/* every band on a project page is a blue panel sitting on the grey page
   background — hero and all gallery rows alike */
.gbox{padding:40px;background:var(--blue)}
.gbox--blue{background:var(--blue)}

/* hero */
.phero{display:flex;height:383px;background:var(--blue)}
.phero--sub{height:340px}
.phero-img{width:25%;flex:none;overflow:hidden;background:var(--blue)}
.phero-img img{width:100%;height:100%;object-fit:cover}
.phero-body{width:75%;position:relative;padding-left:20px}
.phero-inner{width:715px;max-width:100%;margin:0 auto}
.phero h1{font-family:var(--f-impact);font-size:56px;line-height:1.21;color:#fff;font-weight:400;padding-top:45px}
.phero--sub h1{padding-top:61px}
.phero p{width:543px;max-width:100%;font-family:var(--f-brandon);font-size:25px;line-height:35px;color:#fff;padding-top:6px}
.phero--sub p{width:525px;font-size:18px;line-height:28.8px;padding-top:38px}
.phero--sub.fs16 p{font-size:16px;width:500px}

/* gallery rows */
.grow{display:flex;gap:40px;height:469px}
.proj-sub .grow{height:470px}
.grow+.grow{margin-top:40px}
.gcell{overflow:hidden;background:var(--grey-page)}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcell a:hover img{transform:scale(1.04)}
.gcell--empty{background:transparent}
.r2 .gcell:nth-child(1){width:calc((100% - 40px)*.5013)}
.r2 .gcell:nth-child(2){width:calc((100% - 40px)*.4987)}
.r3 .gcell:nth-child(1){width:calc((100% - 80px)*.20)}
.r3 .gcell:nth-child(2){width:calc((100% - 80px)*.60)}
.r3 .gcell:nth-child(3){width:calc((100% - 80px)*.20)}
.r4 .gcell:nth-child(1){width:calc((100% - 80px)*.25)}
.r4 .gcell:nth-child(2){width:calc((100% - 80px)*.375)}
.r4 .gcell:nth-child(3){width:calc((100% - 80px)*.375)}
.r5 .gcell{width:calc((100% - 80px)/3)}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal{background:var(--grey-page);padding:60px 0 90px}
.legal .sheet{width:min(980px,calc(100vw - 80px));margin:0 auto;background:#fff;padding:56px 60px 64px}
.legal h1{font-family:var(--f-book);font-size:44px;line-height:1.3;color:var(--blue);margin-bottom:26px}
.legal h2{font-family:var(--f-book);font-size:24px;line-height:1.35;color:var(--blue);margin:34px 0 10px}
.legal h3{font-family:var(--f-book);font-size:19px;line-height:1.35;color:var(--blue-deep);margin:22px 0 8px}
.legal p{font-family:var(--f-brandon);font-size:17px;line-height:1.62;color:var(--dark);margin-bottom:12px}
.legal ul{margin:0 0 14px 0}
.legal li{position:relative;padding-left:20px;margin-bottom:6px;
  font-family:var(--f-brandon);font-size:17px;line-height:1.62;color:var(--dark)}
.legal li::before{content:'';position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.legal a{color:var(--blue);text-decoration:underline}

/* ==========================================================================
   Scroll-reveal (matches Wix entrance animations)
   ========================================================================== */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .gcell img,.btn-projekte,.btn-kontakt{transition:none}
}

/* ==========================================================================
   Font tuning — Jost stands in for Futura LT / Brandon Grotesque.
   Weights and tracking are set here so text occupies the same space as the
   originals and every line breaks in the same place.
   ========================================================================== */
/* body copy — Light cut, slightly tighter tracking (matches Brandon's width) */
.svc-text,.quote-text,.about-text,.phero p,.legal p,.legal li,
.copyright,.info-t,.consent label{font-weight:300;letter-spacing:var(--track)}

/* small label text that used the Futura Light cut */
.svc-name,.info-h,.header-phone{font-weight:300}

/* headings, buttons and form text used the Futura Book cut */
.sec-title,.btn-projekte,.btn-senden,.btn-kontakt,.form-msg,
.field label,.field input,.field textarea,.about-title .sub,
.legal h1,.legal h2,.legal h3{font-weight:400}

/* the nav lives in a fixed 589px strip — medium keeps the item widths right */
.nav-item>a,.nav-more>button,.sub-list a,.mobile-nav a{font-weight:500}

/* ==========================================================================
   RESPONSIVE  — Wix serves a separate 320px mobile design; this reflows the
   same content, colours, fonts and order into a single column.
   ========================================================================== */
@media (max-width:1000px){
  .nav,.header-phone{display:none}
  .burger{display:flex}
  .c980{width:100%;padding:0 20px}
  .site-header .c980{padding:0 20px}
  .logo{left:20px}

  .mobile-nav{
    display:block;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:60;
    background:var(--yellow);padding:18px 24px 40px;overflow-y:auto;
    transition:transform .3s ease}
  .mobile-nav:not(.open){transform:translateX(100%);visibility:hidden}
  .mobile-nav.open{transform:translateX(0);visibility:visible}
  .mobile-nav a{display:block;padding:13px 0;font-family:var(--f-brandon);
    font-size:18px;font-weight:700;color:var(--blue);border-bottom:1px solid rgba(24,95,156,.18)}
  .mobile-nav .sub a{padding-left:18px;font-size:16px;opacity:.85}
  .mobile-nav .m-phone{margin-top:22px;font-family:var(--f-light);font-size:20px;
    color:var(--blue-phone);letter-spacing:.1em;text-decoration:underline;border:0}
  body.nav-open{overflow:hidden}

  /* ----- home reflow ----- */
  .bleed>.c980{position:relative}
  .hero,.hero .c980{height:auto;min-height:520px}
  .hero .c980{padding:70px 20px 60px}
  .hero-title,.btn-projekte,.hero-chevron{position:static;width:auto}
  .hero-title{font-size:46px;line-height:1.2em}
  .btn-projekte{margin-top:34px;width:200px;height:44px;font-size:16px}
  .hero-chevron{margin:44px auto 0;width:38px;height:22px}

  .services,.services .c980{height:auto}
  .services .c980{padding:56px 20px 60px}
  .services .sec-title{position:static;width:auto;font-size:32px}
  .svc{position:static;width:100%;max-width:340px;margin:40px auto 0}
  .svc .svc-icon{margin-top:0!important;height:auto!important}
  .svc-icon img{max-height:110px;width:auto}
  .svc-name{margin-top:18px;font-size:22px}
  .svc-text{margin-top:12px;font-size:17px}
  .btn-kontakt{position:static;margin:46px auto 0;width:200px;height:52px}

  .about,.about .c980{height:auto}
  .about .c980{padding:52px 20px 56px;display:flex;flex-direction:column;align-items:center}
  .about-title,.about-text,.video-box,.video-toggle{position:static;width:100%;left:auto;top:auto}
  .about-title{font-size:26px}
  .about-text{margin-top:18px;font-size:19px;line-height:1.45}
  .video-box{margin-top:30px;width:240px;height:300px}
  .video-toggle{display:none}

  .testimonials,.testimonials .c980{height:auto}
  .testimonials .c980{padding:56px 20px 60px}
  .testimonials .sec-title{position:static;width:auto;font-size:32px}
  .quote-mark{position:static;margin:34px auto 10px}
  .quote-text{position:static;width:100%;max-width:420px;margin:0 auto;font-size:17px}

  .contact,.contact .c980{height:auto}
  .contact .c980{padding:52px 20px 60px}
  .contact .sec-title{position:static;width:auto;font-size:32px}
  .contact-form{position:relative;left:auto;top:auto;width:100%;max-width:540px;height:auto;margin:30px auto 0}
  .form-inner{padding:34px 26px 36px}
  .f-email{margin-top:26px}
  .f-msg{margin-top:22px}
  .row2{gap:18px}
  .row2 .field{width:50%}
  /* consent returns to normal flow so it can't detach from the form */
  .consent{position:static;left:auto;right:auto;top:auto;margin-top:20px;align-items:flex-start}
  .consent label{white-space:normal}
  .form-foot{margin-top:22px;margin-left:0}

  .info{position:static;height:auto;width:100%;margin:44px auto 0;max-width:540px}
  .info-h,.info-t,.i-social{position:static!important;top:auto!important;left:auto!important;width:auto!important}
  .info-h{margin-top:22px}
  .i-call{margin-top:0}
  .i-social{margin-top:14px}

  /* ----- footer ----- */
  .site-footer,.site-footer .c980{height:auto}
  .site-footer .c980{padding:22px 20px 26px;display:flex;flex-direction:column;
    align-items:center;gap:8px;text-align:center}
  .copyright,.foot-btn{position:static;width:auto;left:auto;top:auto}
  .foot-btn{height:auto}

  /* ----- project pages ----- */
  .wrap{width:100%;padding:0 16px}
  .phero-sec{padding:16px 0 0}
  .gallery{padding:16px 0 24px}
  .gbox{padding:16px}

  .phero,.phero--sub{flex-direction:column;height:auto}
  .phero-img{width:100%;height:230px}
  .phero-body{width:100%;padding:0}
  .phero-inner{width:100%}
  .phero h1,.phero--sub h1{font-size:32px;line-height:1.15;padding:22px 16px 0}
  .phero p,.phero--sub p,.phero--sub.fs16 p{
    width:100%;font-size:17px;line-height:1.55;padding:12px 16px 22px}

  /* one image per row, natural aspect, no cropping surprises */
  .grow,.proj-sub .grow{flex-wrap:wrap;height:auto;gap:16px}
  .grow+.grow{margin-top:16px}
  .grow .gcell{width:100%!important;height:auto;aspect-ratio:4/3}
  .gcell img{height:100%}
  .gcell--empty{display:none}

  .legal{padding:26px 0 50px}
  .legal .sheet{width:100%;padding:30px 20px 38px}
  .legal h1{font-size:30px}
  .legal h2{font-size:21px}
  .legal h3{font-size:18px}
  .legal p,.legal li{font-size:16px}
}

@media (max-width:520px){
  .hero-title{font-size:36px}
  .services .sec-title,.testimonials .sec-title,.contact .sec-title{font-size:27px}
  .about-text{font-size:17px}
  .row2{flex-direction:column;gap:0}
  .row2 .field{width:100%}
  .row2 .field+.field{margin-top:22px}
  .form-foot{flex-direction:column;align-items:stretch;gap:12px}
  .btn-senden{width:100%}
  .form-msg{text-align:center}
  .logo{width:170px}
  .logo img{width:170px;height:38px}
}


/* ==========================================================================
   FEINSCHLIFF — small touch-ups (Aug 2026). Append-only overrides.
   ========================================================================== */

/* Datenschutz consent stays inside the white form box (it overflowed) */
.consent{top:363px;align-items:flex-start}
.consent label{white-space:normal;font-size:11px;line-height:13px}

/* hero entrance: slogan, button and arrow ease in; arrow gets a soft bob */
@keyframes fsIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.hero-title{animation:fsIn .85s ease-out both}
.btn-projekte{animation:fsIn .85s .22s ease-out both}
.hero-chevron{left:calc(50% - 24.5px);animation:fsIn .8s .48s ease-out both,fsBob 2.6s 1.9s ease-in-out infinite}

/* tactile buttons: gentle lift on hover, settle on press */
.btn-projekte,.btn-kontakt,.btn-senden{transition:background .2s ease,color .2s ease,transform .18s ease,box-shadow .18s ease}
.btn-projekte:hover,.btn-kontakt:hover,.btn-senden:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.btn-projekte:active,.btn-kontakt:active,.btn-senden:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.16)}

/* service icons + names: clear clickable feedback */
a.svc-icon{transition:transform .22s ease,opacity .2s ease}
a.svc-icon:hover{transform:translateY(-5px);opacity:1}
.svc-name a{transition:color .18s ease}
.svc-name a:hover{color:var(--yellow);opacity:1}

/* nav dropdown caret sits exactly on the text line */
.nav-caret{top:5px}

/* dropdown entries nudge right on hover */
.sub-list a{transition:background .15s ease,padding-left .15s ease}
.sub-list a:hover{padding-left:22px}

/* gallery images: soft zoom on hover */
.gcell img{transition:transform .5s ease}
.gcell:hover img{transform:scale(1.025)}

/* slim page-load bar (element injected by main.js) */
#pgbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--yellow);z-index:200}
#pgbar.go{width:72%;transition:width 6s cubic-bezier(.08,.62,.18,1)}
#pgbar.done{width:100%;opacity:0;transition:width .3s ease,opacity .5s ease .35s}

@media (prefers-reduced-motion:reduce){
  .hero-title,.btn-projekte,.hero-chevron{animation:none}
  #pgbar{display:none}
  .gcell:hover img,a.svc-icon:hover,.btn-projekte:hover,.btn-kontakt:hover,.btn-senden:hover:not(:disabled){transform:none;box-shadow:none}
}
@media (max-width:1000px){
  .hero-chevron{left:auto;animation:fsIn .8s .48s ease-out both}
  .consent label{font-size:12px;line-height:1.35}
}
/* FEINSCHLIFF 2 — consent sits clear of the message field's underline */
.consent{top:375px;align-items:center}
.consent label{font-size:12px;line-height:15px}