/* ==========================
   CSS VARIABLES
========================== */
:root{
  --primary:#f68611;
  --secondary:#3c3b39;
  --bg:#d9d9d9;
  --text:#1a1a1a;
  --text-light:#eee;
  --hover:#ffa94d;

  --section-spacing-lg:4rem;
  --section-spacing-md:2rem;
  --section-spacing-sm:1rem;
}

/* ==========================
   GLOBAL RESET / BASE
========================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:2px}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset:2px;
  border-radius:6px;
}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  left:1rem;top:1rem;width:auto;height:auto;overflow:visible;
  background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:1000
}

/* ==========================
   ICONS
========================== */
.icon-small{width:1.2rem;height:1.2rem}
.icon-large{width:24px;height:24px;fill:var(--primary)}

/* ==========================
   TOP HEADER
========================== */
.top-header{
  display:flex;justify-content:center;align-items:center;gap:2rem;
  padding:1rem 2rem;background:var(--bg);flex-wrap:wrap;
}
.logo img{max-height:200px;width:auto;object-fit:contain;display:block}
.contact-buttons{display:flex;gap:.8rem;align-items:center}
.btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem 1rem;border-radius:9999px;background:var(--primary);
  color:var(--secondary);font-size:1.1rem;text-decoration:none;transition:background .3s;
}
.btn:hover{background:var(--hover)}

/* ==========================
   MAIN NAVIGATION
========================== */
.main-header nav{background:var(--primary);position:relative;z-index:10}
.nav-list{
  display:flex;justify-content:center;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.nav-list>li{position:relative}
.nav-list>li>a{
  display:block;padding:1rem 1.5rem;color:var(--secondary);
  font-weight:bold;text-decoration:none;text-align:center;transition:background-color .2s;
}
.nav-list>li>a:hover,.nav-list>li>a:focus{background:var(--hover)}

/* Dropdown (desktop/JS fallback) */
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;background:var(--primary);
  list-style:none;margin:0;padding:0;min-width:100%;box-shadow:0 4px 6px rgba(0,0,0,.1);
  text-align:center;width:max-content;z-index:20;
}
.dropdown-menu li a{
  display:block;padding:.75rem 1rem;color:var(--secondary);
  white-space:nowrap;text-decoration:none;transition:background-color .2s;
}
.dropdown-menu li a:hover,.dropdown-menu li a:focus{background:var(--hover)}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}

/* Hamburger – (JS-knap med <span>) */
.hamburger{
  display:none;background:none;border:0;padding:.75rem;line-height:0;cursor:pointer;user-select:none
}
.hamburger span{
  display:block;width:28px;height:3px;background:var(--secondary);
  margin:6px 0;border-radius:2px;transition:transform .2s, opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ==========================
   VIDEO HERO
========================== */
.video-container{position:relative;width:100%;height:70vh;overflow:hidden}
.video-container video{width:100%;height:100%;object-fit:cover;display:block}
.video-side-overlay{
  position:absolute;inset:0 auto 0 70%;width:30%;height:100%;
  background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:5
}
.side-overlay-content{text-align:center;padding:2rem;color:var(--primary);font-size:1.2rem}
.overlay-list{list-style:none;margin:0;padding:0}
.overlay-list li{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
.icon-wrapper svg{width:24px;height:24px;fill:var(--primary)}

/* Tekst + CTA over video */
.video-text{
  position:absolute;top:20%;left:5%;display:flex;flex-direction:column;gap:1rem;
  max-width:420px;padding:1rem;color:var(--primary);text-shadow:0 2px 8px rgba(0,0,0,.7);z-index:10
}
.video-text img{margin:auto}
.cta-knap{
  display:inline-block;padding:.6rem 1.5rem;border-radius:999px;background:var(--primary);
  color:var(--secondary);font-size:1rem;font-weight:bold;text-decoration:none;transition:background .3s
}
.cta-knap:hover{background:var(--hover)}
.video-text .cta-knap{position:static;top:auto}

/* ==========================
   GALLERY GRID
========================== */
.gallery{
  display:grid;grid-template-columns:repeat(4, 260px)!important;gap:2rem;
  padding:1.3rem;justify-content:center;margin:var(--section-spacing-lg) auto;
}
.gallery-item{
  position:relative;overflow:hidden;width:260px;height:260px;
  border:3px solid var(--secondary);box-shadow:0 6px 15px rgba(0,0,0,.1);
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);opacity:0;transition:transform .3s, opacity .5s, filter .5s;
}
.gallery-item img.lazy{filter:blur(10px)}
.gallery-item img.loaded{opacity:1;filter:blur(0)}
.gallery-item:hover img{transform:scale(1.05)}

/* Overlay label + tommestok */
.tekst-overlay{
  position:absolute;inset:auto 0 0 0;display:flex;align-items:center;
  width:100%;height:3rem;padding-left:2.5rem;background:var(--primary);color:var(--secondary);
  font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-top:3px solid var(--secondary);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.2);
}
.tekst-overlay::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Cstyle%3Etext%7Bfont-family%3A Arial%2C sans-serif%3B font-size%3A 10px%3B fill%3A %23222%3B font-weight%3A bold%3B%7D line%7Bstroke%3A %23222%3B stroke-width%3A 1%3B%7D%3C/style%3E%3Cline x1='0' y1='0' x2='0' y2='24' /%3E%3Cline x1='12' y1='0' x2='12' y2='24' /%3E%3Cline x1='24' y1='0' x2='24' y2='24' /%3E%3Cline x1='36' y1='0' x2='36' y2='24' /%3E%3Cline x1='48' y1='0' x2='48' y2='24' /%3E%3Cline x1='60' y1='0' x2='60' y2='24' /%3E%3Cline x1='72' y1='0' x2='72' y2='24' /%3E%3Cline x1='84' y1='0' x2='84' y2='24' /%3E%3Cline x1='96' y1='0' x2='96' y2='24' /%3E%3Cline x1='108' y1='0' x2='108' y2='24' /%3E%3Cline x1='6' y1='0' x2='6' y2='16' /%3E%3Cline x1='18' y1='0' x2='18' y2='16' /%3E%3Cline x1='30' y1='0' x2='30' y2='16' /%3E%3Cline x1='42' y1='0' x2='42' y2='16' /%3E%3Cline x1='54' y1='0' x2='54' y2='16' /%3E%3Cline x1='66' y1='0' x2='66' y2='16' /%3E%3Cline x1='78' y1='0' x2='78' y2='16' /%3E%3Cline x1='90' y1='0' x2='90' y2='16' /%3E%3Cline x1='102' y1='0' x2='102' y2='16' /%3E%3Cline x1='114' y1='0' x2='114' y2='16' /%3E%3Cline x1='3' y1='0' x2='3' y2='10' /%3E%3Cline x1='9' y1='0' x2='9' y2='10' /%3E%3Cline x1='15' y1='0' x2='15' y2='10' /%3E%3Cline x1='21' y1='0' x2='21' y2='10' /%3E%3Cline x1='27' y1='0' x2='27' y2='10' /%3E%3Cline x1='33' y1='0' x2='33' y2='10' /%3E%3Cline x1='39' y1='0' x2='39' y2='10' /%3E%3Cline x1='45' y1='0' x2='45' y2='10' /%3E%3Cline x1='51' y1='0' x2='51' y2='10' /%3E%3Cline x1='57' y1='0' x2='57' y2='10' /%3E%3Cline x1='63' y1='0' x2='63' y2='10' /%3E%3Cline x1='69' y1='0' x2='69' y2='10' /%3E%3Cline x1='75' y1='0' x2='75' y2='10' /%3E%3Cline x1='81' y1='0' x2='81' y2='10' /%3E%3Cline x1='87' y1='0' x2='87' y2='10' /%3E%3Cline x1='93' y1='0' x2='93' y2='10' /%3E%3Cline x1='99' y1='0' x2='99' y2='10' /%3E%3Cline x1='105' y1='0' x2='105' y2='10' /%3E%3Cline x1='111' y1='0' x2='111' y2='10' /%3E%3Cline x1='117' y1='0' x2='117' y2='10' /%3E%3Ctext x='0' y='40'%3E0%3C/text%3E%3Ctext x='12' y='40'%3E1%3C/text%3E%3Ctext x='24' y='40'%3E2%3C/text%3E%3Ctext x='36' y='40'%3E3%3C/text%3E%3Ctext x='48' y='40'%3E4%3C/text%3E%3Ctext x='60' y='40'%3E5%3C/text%3E%3Ctext x='72' y='40'%3E6%3C/text%3E%3Ctext x='84' y='40'%3E7%3C/text%3E%3Ctext x='96' y='40'%3E8%3C/text%3E%3Ctext x='108' y='40'%3E9%3C/text%3E%3C/svg%3E") repeat-x left bottom/120px 48px;
  animation:moveMarks 5s linear infinite;pointer-events:none;opacity:1
}
@keyframes moveMarks{from{background-position:0 bottom}to{background-position:-120px bottom}}

/* ==========================
   ABOUT US
========================== */
.about-us{background:var(--bg);padding:var(--section-spacing-lg) 20px;margin:var(--section-spacing-lg) 0}
.about-flex{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--section-spacing-md);
  max-width:1200px;margin:0 auto;
}
.about-flex.reverse{flex-direction:row-reverse}
.about-text{flex:1 1 50%}
.about-text h2{font-size:2.2rem;color:var(--primary);margin:0 0 1rem}
.about-text h3{font-size:2rem;color:var(--primary);margin:1rem 0}
.about-text p{margin:0 0 1rem;font-size:1.05rem;color:var(--secondary)}
.about-image{flex:1 1 45%}
.about-image img{width:100%;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}

/* ==========================
   KONTAKT (forside)
========================== */
.kontakt-wrapper{
  display:flex;gap:3.8rem;max-width:900px;margin:.5rem auto 0;padding:2rem;
  background:var(--secondary);border-radius:10px;color:var(--primary);
}
.kontakt-formular,.kontakt-info{flex:1;min-width:280px}
.kontakt-formular h2{margin-bottom:1.4rem;font-size:1.9rem;font-weight:700;color:var(--primary)}
.kontakt-formular label{display:block;margin-bottom:.4rem;font-size:1rem;font-weight:600;color:var(--primary)}
.kontakt-formular input,.kontakt-formular textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--primary);
  border-radius:10px;font-size:1rem;transition:border-color .3s;
}
.kontakt-formular input:focus,.kontakt-formular textarea:focus{
  border-color:var(--primary);box-shadow:0 0 5px rgba(246,134,17,.4);outline:none;
}
.kontakt-formular textarea{min-height:140px;resize:vertical}
.submit-btn{
  margin-top:1.5rem;padding:.85rem 2.2rem;border-radius:8px;border:1px solid var(--primary);
  background:var(--text);color:var(--primary);font-weight:700;font-size:1.15rem;cursor:pointer;
}
.submit-btn:hover{background:var(--bg)}
.kontakt-info{
  padding:0 2.5rem;border-radius:10px;background:var(--primary);
  color:var(--secondary);font-size:1.05rem;line-height:1.5;
}
.kontakt-info h2{margin-bottom:1.2rem;font-size:1.8rem;font-weight:700;color:var(--text)}
.kontakt-info a{color:var(--text);text-decoration:underline;font-weight:600}

/* Trustpilot */
.trustpilot-placeholder{
  display:flex;justify-content:center;align-items:center;margin:3.5rem auto;
  width:100%;max-width:360px;height:70px;border-radius:10px;
}
.trustpilot-placeholder img{max-height:50px;object-fit:contain}

/* ==========================
   GOOGLE MAPS
========================== */
.google-map-section{
  padding:var(--section-spacing-lg) 1rem;background:var(--bg);
  text-align:center;margin-top:var(--section-spacing-lg);
}
.google-map-section h2{margin-bottom:2rem;font-size:2rem;color:var(--text)}
#map{
  display:block;margin:0 auto -4rem;width:100%;max-width:950px;height:300px;
  border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* ==========================
   FOOTER
========================== */
.site-footer{
  background:var(--secondary);color:var(--text-light);
  padding:var(--section-spacing-md) 20px var(--section-spacing-lg);
  margin-top:var(--section-spacing-lg);position:relative;
}
.footer-container{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;
  max-width:1200px;margin:auto;
}
.footer-logo-column img{max-width:150px;padding-top:1.5rem}
.footer-section{flex:1 1 180px;display:flex;flex-direction:column;gap:8px;color:var(--primary)}
.footer-section h3,.footer-section h4{margin-bottom:10px;color:var(--primary)}
.footer-section a{color:var(--primary);text-decoration:none}
.footer-section a:hover{color:var(--hover);text-decoration:underline}
.footer-section ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.social-links{display:flex;gap:15px;margin-top:10px}
.social-links i{font-size:24px}
.social-links i:hover{color:var(--hover)}
.footer-icons{
  display:flex;gap:10px;position:absolute;bottom:15px;right:20px;
}
.footer-icons a{
  width:35px;height:35px;border-radius:50%;background:var(--primary);
  color:#fff;text-align:center;line-height:35px;font-size:16px;text-decoration:none;opacity:.8;
}
.footer-icons a:hover{background:var(--hover);opacity:1}
.footer-bottom{
  margin-top:20px;padding-top:10px;border-top:1px solid var(--primary);
  text-align:center;font-size:.85rem;color:var(--primary);
}

/* ==========================
   BYGGERI – SPECIFIK (undersider)
========================== */
body.side{background:var(--bg)}

/* Hero */
body.side .image-container{position:relative;height:400px}
body.side .image-container img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block
}
body.side .image-container>.overlay{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2;padding:0 1rem
}
body.side .image-container>.overlay h1{
  margin:0;color:#fff;line-height:1.1;font-size:clamp(32px,6vw,70px)
}

/* Indhold */
body.side .byggeri-wrapper{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:3rem;max-width:1200px;margin:2rem auto;padding:0 1rem
}
body.side .byggeri-box{
  flex:2 1 640px;max-width:800px;background:var(--bg);color:var(--text);border-radius:12px
}
body.side .byggeri-box h2{margin:0 0 .8rem;font-size:2.2rem;color:var(--primary)}
body.side .byggeri-box p{margin:0 0 1rem;font-size:1.05rem;line-height:1.6;color:var(--secondary)}

body.side .kontakt-wrapper{
  position:sticky;top:2rem;flex:1 1 320px;max-width:360px;padding:1.2rem;border-radius:10px;
  background:var(--secondary);color:var(--primary)
}
body.side .kontakt-formular{width:100%;font-size:.6rem}
body.side .kontakt-formular h2{margin:0 0 .8rem;font-weight:700;font-size:1.1rem;white-space:nowrap}
body.side .kontakt-formular label{display:block;margin:0 0 .25rem;font-weight:600;font-size:.65rem}
body.side .kontakt-formular input,
body.side .kontakt-formular textarea{
  box-sizing:border-box;width:100%;padding:.45rem .7rem;border:1px solid var(--primary);
  border-radius:6px;font:inherit;font-size:.65rem;transition:border-color .3s
}
body.side .kontakt-formular textarea{min-height:110px;resize:vertical}
body.side .submit-btn{
  margin-top:1rem;padding:.6rem 1.5rem;border:1px solid var(--primary);
  border-radius:9999px;background:var(--text);color:var(--primary);font-weight:700;font-size:.8rem;cursor:pointer
}
body.side .submit-btn:hover,body.side .submit-btn:focus{background:var(--bg)}
body.side .form-row{display:flex;flex-wrap:wrap;gap:1.5rem}
body.side .form-row .form-col{flex:1;min-width:120px}

/* Bottom bar */
.bottom-bar{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  min-height:75px;width:100%;padding:0 1rem;margin:0 0 4rem;background:var(--secondary);
  color:#fff;font-weight:700;font-size:clamp(18px,3vw,30px)
}
.bottom-bar span{color:var(--primary)}

/* ==========================
   JS-styret dropdown (class .active)
========================== */
.dropdown.active .dropdown-menu{display:block}

/* ==========================
   Google Map fallback-boks
========================== */
.map-fallback{
  max-width:950px;margin:1rem auto 0;background:#fff;color:var(--text);
  border-radius:12px;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.1)
}
.map-fallback .map-help a{text-decoration:underline}

/* ==========================
   OVERLAY-LOGO SKJUL (≤768)
========================== */
@media (max-width:768px){
  .video-side-overlay img[alt*="søgaard" i],
  .video-text img[alt*="søgaard" i],
  body.side .image-container>.overlay img[alt*="søgaard" i]{display:none !important}
  .video-side-overlay img[src*="sogaard"],
  .video-side-overlay img[src*="soegaard"],
  .video-text img[src*="sogaard"],
  .video-text img[src*="soegaard"],
  body.side .image-container>.overlay img[src*="sogaard"],
  body.side .image-container>.overlay img[src*="soegaard"]{display:none !important}
}

/* ==========================
   KONTAKT-INFO (orange boks – venstre)
========================== */
.kontakt-info{
  background:var(--primary);color:var(--secondary);padding:1rem 1.5rem;border-radius:10px;
  display:flow-root;text-align:left;overflow-wrap:anywhere;container-type:inline-size
}
.kontakt-info>:first-child{margin-top:0}
.kontakt-info>:last-child{margin-bottom:0}
.kontakt-info h2{
  margin:0 0 .5rem 0;white-space:nowrap;word-break:keep-all;line-height:1.05;
  font-size:clamp(1.25rem,8cqi,4rem)
}
@media (max-width:480px){.kontakt-info{padding:1rem}}

/* ==========================
   NAV (uden JS): burger + klik-dropdowns
========================== */
/* Skjul checkboxes visuelt (til no-JS toggles) */
.menu-toggle,.nav-toggle{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap
}

/* Hamburger (label for #menu-toggle) – CSS-variant med .line */
.hamburger .line{
  position:absolute;left:10px;right:10px;height:3px;background:var(--secondary);
  border-radius:2px;transform-origin:center;transition:transform .2s, opacity .2s, top .2s
}
.hamburger .line:nth-child(1){top:14px}
.hamburger .line:nth-child(2){top:22.5px}
.hamburger .line:nth-child(3){top:31px}
#menu-toggle:checked + .hamburger .line:nth-child(1){transform:translateY(8px) rotate(45deg)}
#menu-toggle:checked + .hamburger .line:nth-child(2){opacity:0}
#menu-toggle:checked + .hamburger .line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Dropdown: label der ligner link (til klik-dropdowns) */
.nav-link-like{
  display:block;padding:1rem 1.5rem;color:var(--secondary);
  font-weight:700;text-decoration:none;cursor:pointer;user-select:none
}
.nav-link-like:hover,.nav-link-like:focus{background:var(--hover)}

/* Klik-dropdowns (checkbox-styret) */
.dropdown.click .dropdown-menu{display:none}
.dropdown.click .nav-toggle:checked ~ .dropdown-menu{display:block}

/* ==========================
   MEDIA SKELET (mobile-first)
========================== */

/* ===== 0–480px: små mobiler ===== */
@media (max-width:480px){
  /* Nav (no-JS burger via #menu-toggle) */
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .main-header nav .nav-list{display:none;flex-direction:column;gap:0}
  #menu-toggle:checked ~ nav .nav-list{display:flex}
  .nav-list>li{width:100%}
  .nav-list>li>a{padding:1rem;border-top:1px solid rgba(0,0,0,.08);text-align:left}

  /* Dropdowns (mobil: stakket) */
  .dropdown-menu{position:static;display:none;box-shadow:none;border-top:1px solid rgba(0,0,0,.08);width:100%}
  .dropdown.active .dropdown-menu{display:block}           /* JS-variant */
  .dropdown.click .nav-toggle:checked ~ .dropdown-menu{display:block} /* no-JS */

  /* Hero / video */
  .video-container{height:56vh}
  .video-side-overlay{inset:auto 0 0 0;width:100%;height:auto;padding:1rem;background:rgba(0,0,0,.6)}
  .side-overlay-content{font-size:0.95rem}
  .video-text{top:auto;bottom:1rem;left:1rem;right:1rem;max-width:unset;text-align:left;}

  /* Galleri (kolonne defineres samlet i ≤1024px-blokken nedenfor) */

  /* Kontakt (forside) */
  .kontakt-wrapper{
    flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;
    width:100%;max-width:330px;margin-inline:auto
  }
  .kontakt-formular,.kontakt-info{width:100%;max-width:320px;margin:0 auto}
  .submit-btn{width:100%}

  /* Footer – logo centreres */
  .footer-container{flex-direction:column;text-align:center}
  .footer-logo-column{align-self:center;text-align:center}
  .footer-logo-column img{display:block;margin:0 auto}

  /* Undersider */
  body.side .image-container{height:240px}
  body.side .image-container>.overlay h1{font-size:2rem}
  body.side .byggeri-wrapper{flex-direction:column;gap:2rem;margin:1rem auto}
  body.side .kontakt-wrapper{position:static;max-width:100%;width:100%}

  /* Kontakt-knapper (runde, centrerede) */
  .top-header{flex-wrap:wrap}
  .top-header .contact-buttons{
    display:grid;grid-template-columns:1fr;justify-items:center;gap:.75rem;width:100%;margin-top:.5rem
  }
  .top-header .contact-buttons .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.9rem 1.2rem;border-radius:9999px;background:var(--primary);color:var(--secondary);
    width:auto;min-width:240px;max-width:90vw;text-decoration:none;font-weight:700;line-height:1.1
  }
}

/* ===== 481–768px: mobiler + små tablets ===== */
@media (min-width:481px) and (max-width:768px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .main-header nav .nav-list{display:none;flex-direction:column;gap:0}
  #menu-toggle:checked ~ nav .nav-list{display:flex}
  .dropdown-menu{position:static;display:none;border-top:1px solid rgba(0,0,0,.08)}
  .dropdown.active .dropdown-menu{display:block}
  .dropdown.click .nav-toggle:checked ~ .dropdown-menu{display:block}

  .video-container{height:60vh}
  .video-side-overlay{inset:auto 0 0 0;width:100%;height:auto;padding:1rem}
  .side-overlay-content{font-size:1.1rem}
  .video-text{top:10%;left:6%;max-width:420px}

  /* Galleri (kolonne defineres samlet i ≤1024px-blokken nedenfor) */

  .kontakt-wrapper{flex-direction:column;align-items:center;gap:2rem;padding:1.5rem}
  .kontakt-formular,.kontakt-info{width:100%;max-width:450px;margin:0 auto}
  .submit-btn{width:100%}

  .footer-container{flex-direction:column;text-align:center}

  body.side .image-container{height:320px}
  body.side .overlay h1{font-size:2.5rem}
  body.side .byggeri-wrapper{flex-direction:column;gap:2.5rem}

  /* Kontakt-knapper */
  .top-header .contact-buttons{
    display:grid;grid-template-columns:1fr;justify-items:center;gap:.9rem
  }
  .top-header .contact-buttons .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.9rem 1.2rem;border-radius:9999px;background:var(--primary);color:var(--secondary);
    width:auto;min-width:240px;max-width:90vw
  }
}

/* ===== 769–1024px: tablets + små laptops ===== */
@media (min-width:769px) and (max-width:1024px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .main-header nav .nav-list{display:none;flex-direction:column;gap:0}
  #menu-toggle:checked ~ nav .nav-list{display:flex}

  .video-container{height:65vh}
  .video-side-overlay{left:60%;width:40%}
  .side-overlay-content{font-size:1.2rem}
  .video-text{top:15%;left:5%}

  /* Galleri (kolonne defineres samlet i ≤1024px-blokken nedenfor) */

  body.side .image-container{height:320px}
  body.side .overlay h1{font-size:3rem}
  body.side .byggeri-wrapper{flex-direction:row;gap:3rem}
  body.side .kontakt-wrapper{top:1rem;max-width:300px}
}

/* ===== ≥1025px: desktops ===== */
@media (min-width:1025px){
  .hamburger{display:none}
  .main-header nav .nav-list{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap}
  .dropdown-menu{position:absolute;top:100%;left:0;display:none}
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{display:block}

  .video-container{height:70vh}
  .video-side-overlay{left:70%;width:30%}

  .gallery{grid-template-columns:repeat(auto-fit, minmax(260px,1fr));gap:2rem}
}

/* ===== Store desktops ===== */
@media (min-width:1441px){
  .video-container{height:72vh}
  .about-flex{max-width:1200px;margin-inline:auto}
}

/* ===== Interaktion/tilgængelighed ===== */
@media (hover:none) and (pointer:coarse){
  .btn{padding:.6rem 1rem}
  .nav-list>li>a{padding:1.1rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .tekst-overlay::before{animation:none}
  .hamburger .line{transition:none}
}

/* ===== Print ===== */
@media print{
  .video-container,.video-side-overlay,.video-text,.hamburger{display:none !important}
  a{color:black;text-decoration:underline}
}

/* ===== Footer: mobil-centrering også på undersider ===== */
@media (max-width:768px){
  body.side .footer-container{flex-direction:column;text-align:center}
  body.side .footer-logo-column{align-self:center;text-align:center}
  body.side .footer-logo-column a{display:inline-block}
  body.side .footer-logo-column img{display:block;margin:0 auto}
}

/* ===== Galleri: ens proportioner og 1 kolonne på ≤1024px ===== */
@media (max-width:1024px){
  .gallery{grid-template-columns:1fr !important;gap:1rem;justify-content:stretch;justify-items:stretch;}
  .gallery-item{width:100% !important;aspect-ratio:4 / 3;height:auto !important;overflow:hidden;}
  .gallery-item img{width:100% !important;height:100% !important;object-fit:cover; display:block;}
}

/* ===== Mobil (≤480px): tlf. i bottom bar må ikke brydes ===== */
@media (max-width: 480px){
  /* dækker både link, <span class="phone"> og evt. andet span omkring nummeret */
  .bottom-bar a[href^="tel:"],
  .bottom-bar .phone,
  .bottom-bar span{
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
}

/* ===== Små tablets (481–768px): samme regel ===== */
@media (min-width: 481px) and (max-width: 768px){
  .bottom-bar a[href^="tel:"],
  .bottom-bar .phone,
  .bottom-bar span{
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }