/* VONSAWEB — mobile logo alignment, 29.10.2026.
   Only header layout is changed; navigation and language scripts are preserved. */

/* Homepage, projects and service pages: equal space on both sides of the brand. */
@media (max-width:1200px) {
  body:not([data-vw-layout]) > .top .nav,
  body.vws-service .vws-header .vws-nav {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:8px;
    align-items:center;
    position:relative;
  }
  body:not([data-vw-layout]) > .top .brand,
  body.vws-service .vws-header .vws-brand {
    grid-column:2;
    grid-row:1;
    justify-self:center;
    justify-content:center;
    position:static;
    inset:auto;
    transform:none;
    width:max-content;
    min-width:0;
    max-width:100%;
    margin:0;
    gap:7px;
    font-size:clamp(18px,5.4vw,24px);
    white-space:nowrap;
  }
  body:not([data-vw-layout]) > .top .menuBtn,
  body.vws-service .vws-header .vws-menu-button {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    margin:0;
    width:44px;
    min-width:44px;
    height:44px;
  }
  body:not([data-vw-layout]) > .top .navlinks,
  body.vws-service .vws-header .vws-links {
    top:100%;
    left:0;
    right:0;
  }
}

/* Keep the existing centered phone header on wider touch layouts, too. */
@media (min-width:768px) and (max-width:1279px) {
  body[data-vw-layout="flow"] .topbar .nav {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:44px 44px;
    gap:8px;
    height:auto;
    min-height:112px;
    padding:8px 0;
  }
  body[data-vw-layout="flow"] .topbar .brand {
    width:100%;
    min-width:0;
    justify-content:center;
    text-align:center;
  }
  body[data-vw-layout="flow"] .topbar .nav-actions {
    width:100%;
    justify-content:center;
    margin:0;
  }
  body[data-vw-layout="flow"] .mobile-menu {
    top:112px;
    max-height:calc(100dvh - 112px);
  }
}
@media (min-width:768px) and (max-width:980px) {
  body[data-vw-layout="builder"] .topbar .nav {
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:10px 0 12px;
  }
  body[data-vw-layout="builder"] .topbar .brand {
    width:100%;
    justify-content:center;
    margin:0;
  }
  body[data-vw-layout="builder"] .topbar .top-actions {
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    margin:0;
  }
}

/* Account: German labels must not widen the 320 px mobile grid. */
body[data-page="account"] :is(.account-layout > *, .stat, .side-link) {
  min-width:0;
  overflow-wrap:anywhere;
}
@media (min-width:981px) {
  body[data-page="account"] .account-layout {
    grid-template-columns:220px minmax(0,1fr);
  }
  body[data-page="account"] .stats {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media (max-width:767px) {
  body[data-page="account"] .account-layout {
    grid-template-columns:minmax(0,1fr);
  }
  body[data-page="account"] :is(.sidebar,.account-content,.stat,.side-link) {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body[data-page="account"] :is(.sidebar,.stats) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
body[data-page="account"] .vw-account-table-scroll {
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
body[data-page="account"] .vw-account-table-scroll:focus-visible {
  outline:2px solid #8ed5ff;
  outline-offset:3px;
}

/* About, prices, contact and confirmation: menu / brand / language. */
@media (max-width:959px) {
  body[data-vw-layout="subpage"] .top .nav {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:8px;
    align-items:center;
    position:relative;
  }
  body[data-vw-layout="subpage"] .top .brand {
    grid-column:2;
    grid-row:1;
    justify-self:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    min-width:0;
    margin:0;
    font-size:clamp(18px,4.8vw,22px);
    gap:8px;
  }
  body[data-vw-layout="subpage"] .top .menu-btn {
    grid-column:1;
    grid-row:1;
    width:44px;
    height:44px;
    padding:0;
    margin:0;
    justify-self:start;
  }
  body[data-vw-layout="subpage"] .top > .nav > .lang {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    width:44px;
    min-height:44px;
    padding:8px 0;
  }
  body[data-vw-layout="subpage"] .top .navlinks {
    top:100%;
    left:0;
    right:0;
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
  }
}

/* AI introduction: full-width centered brand, controls on the second row. */
@media (max-width:980px) {
  body > header.topbar#top {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 44px;
    align-items:center;
    height:auto;
    min-height:112px;
    padding:8px 0;
    gap:8px 12px;
  }
  body > header.topbar#top > .brand {
    grid-column:1/-1;
    grid-row:1;
    justify-self:center;
    justify-content:center;
    width:180px;
    min-width:0;
    max-width:100%;
    margin:0;
  }
  body > header.topbar#top > .menu-toggle {
    grid-column:1;
    grid-row:2;
    justify-self:end;
    margin:0;
    width:44px;
    height:44px;
  }
  body > header.topbar#top > .brand > img {
    height:auto;
    object-fit:contain;
    object-position:center;
  }
  body > header.topbar#top > .header-actions {
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin:0;
  }
  body > header.topbar#top > .main-nav {
    top:100%;
    max-height:calc(100dvh - 136px);
    overflow-y:auto;
  }
}