/* ==========================================================
   WESTKERN V14.3 – Responsive Layer
   Wird absichtlich als LETZTES Stylesheet geladen.
   ========================================================== */

html,
body{
  width:100%;
  max-width:100%;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

.wk-container,
.wk-hero-copy,
.wk-page-hero-copy,
.wk-region-copy,
.wk-region-right,
.wk-copy,
.wk-head > *,
.wk-section-intro > *,
.wk-split > *,
.wk-project-grid > *,
.wk-software-grid > *{
  min-width:0;
}

.wk-hero-title,
.wk-page-hero-copy h1,
.wk-section-intro h2,
.wk-head h2,
.wk-copy h2,
.wk-project-tile h3{
  overflow-wrap:break-word;
  word-break:normal;
}

@media(max-width:1180px){
  .wk-menu-link{padding-inline:6px;font-size:.77rem}
  .wk-menu-link svg{display:none}

  .wk-audience,
  .wk-services{grid-template-columns:repeat(3,minmax(0,1fr))}

  .wk-software-grid,
  .wk-craft-grid{grid-template-columns:1fr}

  .wk-footer-grid{
    grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
    gap:28px;
  }
}

@media(max-width:1000px){
  .wk-menu,
  .wk-contact{display:none}

  .wk-mobile{
    display:block;
    flex:none;
  }

  .wk-menu.open{
    display:block;
    position:fixed;
    z-index:110;
    top:68px;
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100dvh - 82px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:#071722;
    box-shadow:0 24px 50px rgba(0,0,0,.36);
  }

  .wk-menu.open>ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
  }

  .wk-menu.open .wk-menu-link{
    width:100%;
    padding:11px 12px;
  }

  .wk-menu.open .wk-menu-link svg{display:block}

  .wk-menu.open .wk-mega{
    display:none;
    position:static;
    width:auto;
    max-width:none;
    grid-template-columns:1fr;
    margin-top:6px;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
  }

  .wk-menu.open .wk-has-mega.mobile-open .wk-mega{
    display:grid;
  }

  .wk-menu.open .wk-mega-intro{display:none}

  .wk-menu.open .wk-mega{
    padding:8px;
    border-radius:14px;
  }

  .wk-menu.open .wk-mega-grid{
    grid-template-columns:1fr;
    gap:2px;
  }

  /*
   * V14.5 zentriert die Desktop-Karten mit min-height:82px.
   * Auf Mobil wäre das zu hoch. Hier bewusst kompakt zurücksetzen.
   */
  .wk-menu.open .wk-mega-item{
    min-height:0;
    grid-template-columns:28px minmax(0,1fr);
    gap:9px;
    padding:8px 10px;
    border-radius:10px;
  }

  .wk-menu.open .wk-mega-item>span{
    min-height:0;
    justify-content:center;
  }

  .wk-menu.open .wk-mega-item i{
    width:27px;
    height:27px;
    border-radius:8px;
    font-size:.7rem;
  }

  .wk-menu.open .wk-mega-item strong{
    font-size:.78rem;
    line-height:1.18;
  }

  .wk-menu.open .wk-mega-item small{
    margin-top:2px;
    font-size:.65rem;
    line-height:1.3;
  }

  .wk-menu.open .wk-mega-featured{
    padding-block:9px;
  }

  .wk-menu.open .wk-service-main-link b{
    margin-left:auto;
    transition:transform .18s ease;
  }

  .wk-menu.open .wk-has-mega.mobile-open .wk-service-main-link b{
    transform:rotate(180deg);
  }

  html.wk-mobile-menu-open,
  html.wk-mobile-menu-open body{
    overflow:hidden;
  }

  .wk-hero-grid,
  .wk-region-grid,
  .wk-practical-grid,
  .wk-project-grid,
  .wk-final-grid,
  .wk-head,
  .wk-page-hero-grid,
  .wk-split,
  .wk-split.reverse,
  .wk-section-intro,
  .wk-cta-band-inner{
    grid-template-columns:1fr;
  }

  .wk-split.reverse>.wk-image-panel{order:0}
  .wk-region-top{grid-template-columns:1fr}

  .wk-principles,
  .wk-why-grid,
  .wk-steps,
  .wk-strip-grid,
  .wk-projects,
  .wk-feature-grid,
  .wk-project-list,
  .wk-pricing-grid,
  .wk-number-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .wk-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .wk-footer-bottom{
    grid-template-columns:1fr;
    align-items:start;
  }

  .wk-footer-bottom>span:nth-child(2){text-align:left}
  .wk-footer-bottom nav{flex-wrap:wrap}
}


@media(max-width:900px){
  .page-home .wk-hero-grid{
    min-height:auto;
    padding-bottom:0;
  }

  .page-home .wk-hero-device{
    position:relative;
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
    margin:28px 0 0;
    padding:0;
    overflow:hidden;
  }

  .page-home .wk-monitor{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    aspect-ratio:auto;
    margin:0;
    padding:6px;
    border-radius:15px;
    transform:none;
    box-shadow:0 18px 38px rgba(0,0,0,.24);
  }

  .page-home .wk-monitor video.wk-monitor-video{
    display:block;
    visibility:visible;
    opacity:1;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
  }

  .page-home .wk-monitor img.wk-monitor-fallback,
  .page-home .wk-laptop{
    display:none;
  }
}

@media(max-width:760px){
  :root{--container:min(1240px,calc(100% - 28px))}
  .wk-section{padding:58px 0}

  .wk-nav{
    min-height:64px;
    gap:10px;
  }

  .wk-header .wk-container{width:min(1240px,calc(100% - 20px))}

  .wk-brand{
    min-width:0;
    gap:9px;
  }

  .wk-brand-mark{
    width:41px;
    height:32px;
  }

.wk-brand-name{font-size:1.05rem}
  .wk-brand-slogan{display:none}

  .wk-mobile{
    width:42px;
    height:42px;
  }

  .wk-menu.open{
    top:62px;
    left:8px;
    right:8px;
    max-height:calc(100dvh - 72px);
    padding:8px;
    border-radius:14px;
  }

  .wk-menu.open>ul{
    gap:1px;
  }

  .wk-menu.open .wk-menu-link{
    min-height:42px;
    padding:8px 10px;
    font-size:.76rem;
  }

  .wk-menu.open .wk-menu-link svg{
    width:15px;
    height:15px;
  }

  .wk-menu.open .wk-service-nav-main{
    line-height:1.1;
  }

  .wk-menu.open .wk-service-nav-current{
    margin-top:2px;
    font-size:.62rem;
    line-height:1.15;
  }

  .wk-hero{min-height:auto}

  .wk-hero-grid{
    min-height:auto;
    padding:34px 0 0;
  }

  .page-home .wk-hero-device{
    margin-bottom:0;
    padding-bottom:0;
  }

  .wk-hero-bg{
    background:
      linear-gradient(90deg,rgba(7,23,34,.97),rgba(7,23,34,.88) 58%,rgba(7,23,34,.62)),
      url("/assets/img/hero-bg.webp") 58% center/cover no-repeat;
  }

  .wk-hero-title{
    font-size:clamp(2.28rem,10vw,3.1rem);
    line-height:1.02;
  }

  .wk-title-line{white-space:normal}

  .wk-hero-copy p{
    margin-top:18px;
    font-size:.95rem;
  }

  .wk-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:23px;
  }

  .wk-actions .wk-btn{
    width:100%;
    justify-content:center;
  }

  .wk-benefits{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:22px;
  }

  .wk-hero-device{
    width:100%;
    min-width:0;
    min-height:0;
    margin-top:28px;
    overflow:hidden;
  }

  .wk-monitor{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:16/9;
    padding:6px;
    border-radius:15px;
    transform:none;
    box-shadow:0 18px 38px rgba(0,0,0,.24);
  }

  .wk-monitor video,
  .wk-monitor img{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    border-radius:10px;
    object-fit:cover;
  }

  .wk-laptop{display:none}

  .wk-strip-grid,
  .wk-audience,
  .wk-services,
  .wk-software-cards,
  .wk-projects,
  .wk-principles,
  .wk-why-grid,
  .wk-steps,
  .wk-feature-grid,
  .wk-project-list,
  .wk-pricing-grid,
  .wk-number-grid,
  .wk-card-links,
  .wk-mini-stats{
    grid-template-columns:1fr;
  }

  .wk-strip article{
    padding:22px 18px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .wk-strip article:last-child{border-bottom:0}

  .wk-strip-grid,
  .wk-strip article,
  .wk-strip article>div{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .wk-strip h3,
  .wk-strip p{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .wk-head{
    gap:18px;
    align-items:start;
  }

  .wk-head .wk-btn{justify-self:start}
  .wk-section-intro{gap:16px}

  .wk-region-grid,
  .wk-craft-grid,
  .wk-practical-grid,
  .wk-software-grid,
  .wk-project-grid{
    gap:30px;
  }

  .wk-region-top{gap:12px}
  .wk-map{min-height:300px}

  .wk-region-info article,
  .wk-region-places{padding:16px}

  .wk-region-places ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-practical{grid-template-columns:1fr}

  .wk-final-grid{
    min-height:auto;
    padding:50px 0;
    gap:24px;
  }

  .wk-final .wk-btn-primary{min-width:0}

  .wk-page-hero-grid{
    min-height:auto;
    padding:46px 0;
    gap:28px;
  }

  .wk-page-hero-copy h1{
    font-size:clamp(2.25rem,10vw,3.35rem);
    line-height:1.02;
  }

  .wk-page-hero-copy>p{
    margin-top:16px;
    font-size:.95rem;
  }

  .wk-page-hero-media,
  .wk-page-hero-media img{
    min-height:230px;
  }

  .wk-page-hero-media{border-radius:20px}
  .wk-image-panel img{min-height:260px}

  .wk-cta-band{padding:46px 0}
  .wk-cta-band-inner{gap:20px}

  .wk-footer-grid{
    grid-template-columns:1fr;
    gap:34px;
    padding:52px 0 36px;
  }

  .wk-footer-bottom{
    gap:12px;
    padding:18px 0 22px;
  }

  .wk-footer-bottom nav{gap:10px 16px}
  .page-home #ablauf.wk-section{padding-bottom:50px}
}


@media(max-width:520px){
  :root{--container:min(1240px,calc(100% - 22px))}
  .wk-section{padding:50px 0}

  h2{font-size:clamp(1.85rem,8.5vw,2.45rem)}

  .wk-eyebrow,
  .wk-kicker{
    font-size:.66rem;
    letter-spacing:.12em;
  }

  .wk-region-places ul{grid-template-columns:1fr}

  .wk-page-hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .wk-page-hero-actions .wk-btn{
    width:100%;
    justify-content:center;
  }

  .wk-demo-teaser{padding:23px 18px}

  .wk-demo-teaser-action,
  .wk-demo-teaser-action .wk-btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .page-home .wk-monitor video.wk-monitor-video{
    display:none!important;
  }

  .page-home .wk-monitor img.wk-monitor-fallback{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}