/* Nordwerk v56 – isolierte, stabile Frontend-Komponenten
   Navigation, Aktionsleiste, Aktions-Pop-up und mobile Service-Center-Korrekturen. */

[hidden]{display:none!important}

/* Aktionsleiste */
.site-action-bar-v56{
  position:relative;
  z-index:92;
  background:var(--action-bg,#6f9700);
  color:var(--action-color,#fff);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.site-action-bar-v56__inner{
  width:min(1460px,calc(100% - 36px));
  min-height:48px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:.92rem;
}
.site-action-bar-v56__inner strong{
  flex:0 0 auto;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:6px 9px;
  border:1px solid currentColor;
  border-radius:999px;
}
.site-action-bar-v56__inner>span{font-weight:700;text-align:center}
.site-action-bar-v56__inner>a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 12px;
  color:inherit;
  border:1px solid currentColor;
  border-radius:999px;
  font-weight:800;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.site-action-bar-v56__inner>a:hover{background:var(--action-color,#fff);color:var(--action-bg,#6f9700);transform:translateY(-1px)}

/* Header */
.site-header-v56{
  position:sticky!important;
  top:0;
  z-index:100!important;
  background:color-mix(in srgb,var(--header,#fff) 96%,transparent)!important;
  border-bottom:1px solid var(--line,#dedede)!important;
  backdrop-filter:blur(16px);
}
.site-header-v56__inner{
  position:relative;
  width:min(1880px,calc(100% - 32px))!important;
  min-height:88px!important;
  margin:auto;
  display:grid!important;
  grid-template-columns:minmax(230px,320px) minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
}
.site-brand-v56{min-width:0}
.site-brand-v56 .brand-logo{
  width:min(100%,320px)!important;
  height:auto!important;
  max-height:72px;
  object-fit:contain;
  object-position:left center;
}
.site-menu-toggle-v56{display:none!important}
.site-nav-v56{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.15vw,22px);
  font-size:clamp(.78rem,.78vw,.94rem);
  font-weight:750;
}
.site-nav-v56__link,
.site-nav-v56__trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text,#171717);
  font:inherit;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s ease;
}
.site-nav-v56__link:hover,
.site-nav-v56__trigger:hover,
.site-nav-v56__link.active,
.site-nav-v56__dropdown.active>.site-nav-v56__trigger{color:var(--accent,#6f9700)}
.site-nav-v56__link::after,
.site-nav-v56__trigger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.site-nav-v56__link:hover::after,
.site-nav-v56__link.active::after,
.site-nav-v56__dropdown.active>.site-nav-v56__trigger::after{transform:scaleX(1)}
.site-nav-v56__icon{display:none!important}
.site-nav-v56__dropdown{position:relative;display:flex;align-items:center}
.site-nav-v56__chevron{
  width:7px;
  height:7px;
  margin-left:3px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.site-nav-v56__dropdown.open .site-nav-v56__chevron,
.site-nav-v56__dropdown:hover .site-nav-v56__chevron,
.site-nav-v56__dropdown:focus-within .site-nav-v56__chevron{transform:translateY(2px) rotate(225deg)}
.site-nav-v56__submenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:12;
  width:210px;
  padding:8px;
  display:grid;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  border:1px solid var(--line,#ddd);
  border-radius:12px;
  background:var(--surface,#fff);
  box-shadow:0 22px 60px rgba(0,0,0,.18);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.site-nav-v56__dropdown:hover>.site-nav-v56__submenu,
.site-nav-v56__dropdown:focus-within>.site-nav-v56__submenu,
.site-nav-v56__dropdown.open>.site-nav-v56__submenu{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.site-nav-v56__submenu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 11px;
  border-radius:8px;
  color:var(--text,#171717)!important;
  font-size:.9rem;
  font-weight:750;
}
.site-nav-v56__submenu a:hover{background:var(--surface-2,#f4f4f1);color:var(--accent,#6f9700)!important}
.site-nav-v56__submenu a>span{width:18px;color:var(--accent,#6f9700);text-align:center;font-weight:900}
html[data-theme="dark"] .site-nav-v56__submenu{background:#111;border-color:#303030}
html[data-theme="dark"] .site-nav-v56__submenu a{color:#f3f3f3!important}
html[data-theme="dark"] .site-nav-v56__submenu a:hover{background:#222}
.site-header-actions-v56{justify-self:end}

/* Pop-up */
body.action-popup-open{overflow:hidden}
.action-popup-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:99980!important;
  background:rgba(0,0,0,.62)!important;
  backdrop-filter:blur(5px);
}
.action-popup{
  position:fixed!important;
  z-index:99990!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(560px,calc(100vw - 40px))!important;
  max-width:560px!important;
  max-height:calc(100dvh - 40px);
  overflow:auto;
  padding:38px!important;
  border:1px solid var(--line,#ddd)!important;
  border-top:4px solid var(--popup-accent,var(--accent,#6f9700))!important;
  border-radius:20px!important;
  background:var(--surface,#fff)!important;
  color:var(--text,#171717)!important;
  box-shadow:0 35px 110px rgba(0,0,0,.44)!important;
  pointer-events:auto!important;
}
.action-popup h2{
  margin:10px 0 17px;
  font-size:clamp(2rem,4vw,3.4rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
.action-popup p{margin-bottom:24px;line-height:1.65;color:var(--muted,#666)}
.action-popup-icon{width:44px!important;height:44px!important;margin-bottom:18px;border-radius:50%!important;background:color-mix(in srgb,var(--popup-accent,var(--accent,#6f9700)) 18%,transparent)!important;color:var(--popup-accent,var(--accent,#6f9700))!important}
.action-popup-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line,#ddd)!important;
  border-radius:50%;
  background:var(--surface-2,#f4f4f1)!important;
  color:var(--text,#171717)!important;
  font-size:1.35rem!important;
  line-height:1;
  cursor:pointer;
}
.action-popup-actions-v56{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.action-popup-actions-v56 .btn{position:relative;z-index:2;width:100%;min-height:52px;pointer-events:auto!important}
.action-popup-dismiss-v56{
  min-height:52px;
  padding:0 17px;
  border:1px solid var(--line,#ddd);
  border-radius:14px;
  background:var(--surface-2,#f4f4f1);
  color:var(--text,#171717);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

/* Service-Center: keine abgeschnittenen Karten oder Texte */
.service-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.service-category-grid a{min-width:0!important;overflow:hidden}
.service-category-grid strong{display:block;min-width:0;overflow-wrap:anywhere;word-break:normal;hyphens:auto}

@media(max-width:1450px){
  .site-header-v56__inner{grid-template-columns:minmax(220px,280px) minmax(0,1fr) auto;gap:16px}
  .site-header-actions-v56 .social-v28{display:none!important}
}

@media(max-width:1180px){
  .site-action-bar-v56__inner{width:min(100% - 24px,900px);padding:8px 0;flex-wrap:wrap;gap:8px 12px;line-height:1.35}
  .site-action-bar-v56__inner>span{flex:1 1 420px}
  .site-header-v56__inner{
    width:calc(100% - 24px)!important;
    min-height:82px!important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
  }
  .site-brand-v56 .brand-logo{width:min(320px,72vw)!important;max-height:66px}
  .site-header-actions-v56{display:none!important}
  .site-menu-toggle-v56{
    position:relative;
    z-index:1002;
    display:grid!important;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:0!important;
    border-radius:12px;
    background:transparent!important;
    color:#0a92ea!important;
    cursor:pointer;
  }
  .site-menu-toggle-v56__bars,
  .site-menu-toggle-v56__bars::before,
  .site-menu-toggle-v56__bars::after{
    display:block;
    width:29px;
    height:3px;
    border-radius:3px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
  }
  .site-menu-toggle-v56__bars{position:relative}
  .site-menu-toggle-v56__bars::before,.site-menu-toggle-v56__bars::after{content:"";position:absolute;left:0}
  .site-menu-toggle-v56__bars::before{top:-9px}
  .site-menu-toggle-v56__bars::after{top:9px}
  .site-menu-toggle-v56[aria-expanded="true"] .site-menu-toggle-v56__bars{background:transparent}
  .site-menu-toggle-v56[aria-expanded="true"] .site-menu-toggle-v56__bars::before{top:0;transform:rotate(45deg)}
  .site-menu-toggle-v56[aria-expanded="true"] .site-menu-toggle-v56__bars::after{top:0;transform:rotate(-45deg)}
  .site-nav-v56{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    z-index:1001;
    width:min(370px,calc(100vw - 24px));
    max-height:calc(100dvh - 112px);
    overflow:auto;
    display:none;
    padding:13px;
    border:1px solid #2b2b2b;
    border-radius:18px;
    background:rgba(11,11,11,.98);
    box-shadow:0 30px 85px rgba(0,0,0,.5);
    backdrop-filter:blur(18px);
    font-size:1rem;
  }
  .site-nav-v56.open{display:grid;gap:2px;animation:nwNav56In .18s ease-out}
  @keyframes nwNav56In{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
  .site-nav-v56__link,
  .site-nav-v56__trigger{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 13px;
    border-radius:12px;
    color:#f5f5f5!important;
    text-align:left;
    font-size:1rem;
    font-weight:750;
  }
  .site-nav-v56__link::after,.site-nav-v56__trigger::after{display:none}
  .site-nav-v56__link:hover,.site-nav-v56__trigger:hover{background:#1c1c1c;color:#fff!important}
  .site-nav-v56__link.active,.site-nav-v56__dropdown.active>.site-nav-v56__trigger{
    color:var(--accent,#79a900)!important;
    background:#242424;
    box-shadow:inset 3px 0 0 var(--accent,#79a900);
  }
  .site-nav-v56__icon{
    display:grid!important;
    place-items:center;
    flex:0 0 25px;
    width:25px;
    height:25px;
    color:currentColor;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-nav-v56__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .site-nav-v56__dropdown{display:block;width:100%;border-top:1px solid #292929}
  .site-nav-v56__dropdown:first-of-type{margin-top:2px}
  .site-nav-v56__trigger>span:nth-child(2){flex:1;min-width:0}
  .site-nav-v56__chevron{flex:0 0 8px;margin-left:auto}
  .site-nav-v56__submenu{
    position:static;
    width:auto;
    margin:1px 0 8px 39px;
    padding:6px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    border:0;
    border-radius:10px;
    background:#171717;
    box-shadow:none;
  }
  .site-nav-v56__dropdown:hover>.site-nav-v56__submenu,
  .site-nav-v56__dropdown:focus-within>.site-nav-v56__submenu{display:none}
  .site-nav-v56__dropdown.open>.site-nav-v56__submenu{display:grid;gap:2px}
  .site-nav-v56__submenu a{min-height:42px;padding:9px 11px;color:#ddd!important}
  .site-nav-v56__submenu a:hover{background:#242424;color:#fff!important}
  .service-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:620px){
  .site-action-bar-v56__inner{justify-content:flex-start;text-align:left}
  .site-action-bar-v56__inner strong{font-size:.66rem}
  .site-action-bar-v56__inner>span{flex-basis:100%;text-align:left}
  .site-header-v56__inner{min-height:78px!important}
  .site-brand-v56 .brand-logo{width:min(290px,74vw)!important}
  .site-nav-v56{right:0;width:min(360px,calc(100vw - 12px));max-height:calc(100dvh - 96px)}
  .action-popup{
    left:14px!important;
    right:14px!important;
    top:auto!important;
    bottom:14px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 28px)!important;
    transform:none!important;
    padding:30px 26px 24px!important;
    border-radius:16px!important;
  }
  .action-popup h2{font-size:clamp(2rem,11vw,3rem)!important}
  .action-popup-actions-v56{grid-template-columns:1fr}
  .action-popup-dismiss-v56{width:100%}
  .service-category-grid{grid-template-columns:1fr!important}
  .service-category-grid a{min-height:96px!important;padding:18px 20px!important;border-right:0!important}
}

/* NordWerk v57 – Mobile Navigation & Hero-Medien */
.site-menu-toggle-v56::before{content:none!important;display:none!important}

.hero-media{position:relative;overflow:hidden}
.hero-media-carousel,.hero-media-slide{position:absolute;inset:0}
.hero-media-carousel{z-index:0;background:#0b130f}
.hero-media-slide{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s ease}
.hero-media-slide.is-active{opacity:1;visibility:visible}
.hero-media-slide img,.hero-media-slide video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media-slide video{background:#0b130f}
.hero-media-dots{position:absolute;z-index:4;right:clamp(16px,3vw,42px);bottom:clamp(18px,4vw,40px);display:flex;gap:8px}
.hero-media-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.48);box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer;transition:width .2s ease,background .2s ease}
.hero-media-dots button.is-active{width:28px;background:var(--accent,#79a900)}

@media(max-width:620px){
  .site-nav-v56{
    right:8px!important;
    left:auto!important;
    width:min(320px,calc(100vw - 42px))!important;
    max-width:82vw!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .site-nav-v56__link,.site-nav-v56__trigger{
    min-height:52px!important;
    padding:9px 11px!important;
    gap:12px!important;
    font-size:.96rem!important;
  }
  .site-nav-v56__icon{flex-basis:23px!important;width:23px!important;height:23px!important}
  .site-nav-v56__icon svg{width:21px!important;height:21px!important}
  .hero-media-dots{right:14px;bottom:112px}
}

@media(prefers-reduced-motion:reduce){
  .hero-media-slide{transition:none}
}