@media (min-width: 901px) {
  .main-nav {
    display: flex !important;
  }
}


/* v38 mobile/tablet single content + readable width */
@media (max-width: 900px) {
  .hero-section,
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .container {
    width: min(100% - 24px, 1380px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .hero-copy,
  .section-head,
  .legal-box,
  .detail-card,
  .service-card,
  .focus-card,
  .service-tile,
  .topic-panel,
  .cta-band,
  .faq-item,
  .step-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .legal-box,
  .detail-card,
  .service-card,
  .focus-card,
  .service-tile,
  .topic-panel,
  .cta-band,
  .faq-item,
  .step-card {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .legal-hero {
    padding-bottom: 20px !important;
  }

  .legal-box {
    margin-top: 0 !important;
  }

  h1,
  h2,
  h3,
  p,
  li,
  a,
  span {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .hero-copy h1,
  .section-head h1,
  h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  .section-head h2,
  .cta-band h2,
  .legal-box h2,
  h2 {
    font-size: clamp(28px, 7.4vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
  }

  h3 {
    font-size: clamp(22px, 5.8vw, 30px) !important;
    line-height: 1.2 !important;
  }

  .lead,
  .hero-copy p,
  .section-head p,
  .legal-box p,
  .detail-card p,
  .service-card p,
  .service-tile p,
  .cta-band p,
  .faq-item p,
  p,
  li {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 20px, 1380px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .legal-box,
  .detail-card,
  .service-card,
  .focus-card,
  .service-tile,
  .topic-panel,
  .cta-band,
  .faq-item,
  .step-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .hero-copy h1,
  .section-head h1,
  h1 {
    font-size: clamp(32px, 8.6vw, 42px) !important;
  }
}


/* v40 tablet/mobile professional menu fix */
@media (max-width: 1180px) {
  .header-inner,
  .nav-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .brand {
    justify-self: center !important;
    max-width: 100% !important;
  }

  .brand-image {
    width: clamp(250px, 52vw, 360px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
  }

  .brand-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .header-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
  }

  .header-cta {
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
    min-height: 50px !important;
    padding: 13px 22px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .theme-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  .language-switcher {
    justify-self: center !important;
    margin: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(360px, calc(100vw - 32px)) !important;
    min-height: 50px !important;
    padding: 14px 24px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(8,17,38,.12) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--text) !important;
    font-weight: 900 !important;
    box-shadow: 0 16px 42px rgba(8,17,38,.10) !important;
    cursor: pointer !important;
  }

  .mobile-menu-toggle::after {
    content: "";
    margin-left: 12px;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-menu-toggle[aria-expanded="true"]::after {
    content: "";
    font-size: 24px;
  }

  .main-nav {
    display: none !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(8,17,38,.10) !important;
    box-shadow: 0 22px 60px rgba(8,17,38,.14) !important;
    overflow: visible !important;
  }

  .main-nav.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .main-nav a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 13px 18px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    background: transparent !important;
  }

  .main-nav a.active,
  .main-nav a[aria-current="page"] {
    background: rgba(15,99,255,.12) !important;
    color: var(--blue) !important;
  }

  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    display: none !important;
  }

  .dark-theme .mobile-menu-toggle {
    background: rgba(17,27,45,.96) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
  }

  .dark-theme .main-nav {
    background: rgba(17,27,45,.98) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  .dark-theme .main-nav a {
    color: #ffffff !important;
  }

  .dark-theme .main-nav a.active,
  .dark-theme .main-nav a[aria-current="page"] {
    background: rgba(111,168,255,.20) !important;
    color: #ffffff !important;
  }
}

@media (min-width: 1181px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  .main-nav {
    display: flex !important;
  }
}


/* v41 compact mobile/tablet header */
@media (max-width: 1180px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .nav-wrap,
  .header-inner {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-areas:
      "brand brand"
      "actions lang"
      "menu menu"
      "nav nav" !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 7px 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }

  .brand {
    grid-area: brand !important;
    justify-self: center !important;
    max-width: calc(100vw - 24px) !important;
  }

  .brand-image {
    width: clamp(205px, 44vw, 285px) !important;
    height: auto !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
  }

  .brand-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .header-actions {
    grid-area: actions !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .header-cta {
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    max-width: 150px !important;
  }

  .theme-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    font-size: 17px !important;
  }

  .language-switcher {
    grid-area: lang !important;
    display: inline-flex !important;
    justify-self: start !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: 999px !important;
  }

  .language-switcher a {
    min-width: 36px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .mobile-menu-toggle {
    grid-area: menu !important;
    width: min(280px, calc(100vw - 28px)) !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .mobile-menu-toggle::after {
    margin-left: 10px !important;
    font-size: 16px !important;
  }

  .mobile-menu-toggle[aria-expanded="true"]::after {
    font-size: 22px !important;
  }

  .main-nav {
    grid-area: nav !important;
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .main-nav.open {
    gap: 6px !important;
  }

  .main-nav a {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border-radius: 15px !important;
  }

  .hero-section,
  .section {
    padding-top: 38px !important;
  }
}

@media (max-width: 520px) {
  .nav-wrap,
  .header-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand brand"
      "actions lang"
      "menu menu"
      "nav nav" !important;
    gap: 6px 8px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .brand-image {
    width: clamp(190px, 58vw, 245px) !important;
    border-radius: 16px !important;
  }

  .header-cta {
    max-width: 128px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 9px 13px !important;
    font-size: 13px !important;
  }

  .theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .language-switcher {
    gap: 4px !important;
    padding: 4px !important;
  }

  .language-switcher a {
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  .mobile-menu-toggle {
    width: min(250px, calc(100vw - 24px)) !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
  }
}


/* v42 tablet landscape header spread + lower vertical footprint */
@media (min-width: 768px) and (max-width: 1180px) {
  .site-header,
  .header-shell,
  .header-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .header-inner,
  .nav-wrap {
    display: grid !important;
    grid-template-columns: minmax(220px, 280px) 1fr auto !important;
    grid-template-areas:
      "brand nav actions"
      "brand nav lang" !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 8px !important;
    width: min(1380px, calc(100% - 28px)) !important;
    margin: 0 auto !important;
    padding: 10px 0 8px !important;
    min-height: 0 !important;
  }

  .brand,
  .brand-link,
  .site-brand {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .brand-image {
    width: clamp(210px, 24vw, 280px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .brand-image img,
  .brand img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  .main-nav {
    grid-area: nav !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 24px !important;
  }

  .main-nav a {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .header-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }

  .header-cta {
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .theme-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
  }

  .language-switcher {
    grid-area: lang !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    width: auto !important;
  }

  .language-switcher a {
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .mobile-menu-toggle {
    display: none !important;
  }

  .hero,
  .hero-section,
  .page-hero,
  .section-hero,
  main > section:first-child {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }

  .site-header + main,
  header + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* etwas kompakter für kleine Tablets / große Phones */
@media (min-width: 768px) and (max-width: 980px) {
  .header-inner,
  .nav-wrap {
    grid-template-columns: minmax(180px, 230px) 1fr auto !important;
    column-gap: 12px !important;
  }

  .brand-image {
    width: clamp(180px, 22vw, 230px) !important;
  }

  .main-nav {
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .main-nav a {
    padding: 9px 12px !important;
    font-size: 14px !important;
  }

  .header-cta {
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
}


/* v43 final responsive header polish - mobile/tablet only */

/* Grundschutz für Mobile/Tablet */
@media (max-width: 1180px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-inner,
  .nav-wrap {
    width: min(1380px, calc(100% - 24px)) !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }

  .brand-image img,
  .brand img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(8,17,38,.12) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--text) !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 34px rgba(8,17,38,.10) !important;
    cursor: pointer !important;
  }

  .mobile-menu-toggle::after {
    content: "";
    margin-left: 10px;
    font-size: 16px;
    line-height: 1;
  }

  .mobile-menu-toggle[aria-expanded="true"]::after {
    content: "";
    font-size: 22px;
  }

  .main-nav {
    display: none !important;
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    display: none !important;
  }

  .dark-theme .mobile-menu-toggle {
    background: rgba(17,27,45,.96) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
  }

  .dark-theme .main-nav {
    background: rgba(17,27,45,.98) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  .dark-theme .main-nav a {
    color: #ffffff !important;
  }

  .dark-theme .main-nav a.active,
  .dark-theme .main-nav a[aria-current="page"] {
    background: rgba(111,168,255,.22) !important;
    color: #ffffff !important;
  }
}


/* MOBILE: bis 767px - kompakt, sauber, wenig Höhe */
@media (max-width: 767px) {
  .header-inner,
  .nav-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand brand"
      "cta theme"
      "lang lang"
      "menu menu"
      "nav nav" !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 7px 9px !important;
    padding: 8px 0 9px !important;
  }

  .brand,
  .brand-link,
  .site-brand {
    grid-area: brand !important;
    justify-self: center !important;
    margin: 0 !important;
    max-width: calc(100vw - 28px) !important;
  }

  .brand-image {
    width: clamp(190px, 62vw, 250px) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 17px !important;
  }

  .header-actions {
    display: contents !important;
  }

  .header-cta {
    grid-area: cta !important;
    justify-self: end !important;
    min-height: 39px !important;
    height: 39px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    max-width: 150px !important;
  }

  .theme-toggle {
    grid-area: theme !important;
    justify-self: start !important;
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
  }

  .language-switcher {
    grid-area: lang !important;
    display: inline-flex !important;
    justify-self: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
    width: auto !important;
    border-radius: 999px !important;
  }

  .language-switcher a {
    min-width: 32px !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .mobile-menu-toggle {
    grid-area: menu !important;
    width: min(230px, calc(100vw - 28px)) !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .main-nav {
    grid-area: nav !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(8,17,38,.10) !important;
    box-shadow: 0 18px 48px rgba(8,17,38,.13) !important;
  }

  .main-nav.open {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .main-nav a {
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    border-radius: 15px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .hero,
  .hero-section,
  .page-hero,
  .section-hero,
  main > section:first-child {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }
}