:root{
  --bg:#f3f7fc;--text:#081126;--muted:#4e5d77;--card:#ffffff;--line:rgba(8,17,38,.12);
  --blue:#0f63ff;--red:#ef1f2d;--dark:#071126;--shadow:0 28px 80px rgba(8,17,38,.12);
  --container: min(1500px, calc(100vw - 42px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
radial-gradient(circle at 8% 20%,rgba(15,99,255,.14),transparent 32rem),
radial-gradient(circle at 94% 38%,rgba(239,31,45,.10),transparent 34rem),
linear-gradient(180deg,#f7faff 0%,#eef4fb 100%);color:var(--text);font-weight:600;overflow-x:hidden}
body.dark-theme{--bg:#07101f;--text:#f8fbff;--muted:#dbe6f7;--card:#111b2d;--line:rgba(255,255,255,.16);background:
radial-gradient(circle at 8% 20%,rgba(15,99,255,.22),transparent 32rem),
radial-gradient(circle at 94% 38%,rgba(239,31,45,.18),transparent 34rem),
linear-gradient(180deg,#060b14 0%,#0a1322 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{width:var(--container);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,250,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.dark-theme .site-header{background:rgba(7,12,22,.9)}
.nav-wrap{width:var(--container);margin:auto;display:grid;grid-template-columns:420px minmax(610px,1fr) auto;grid-template-areas:"brand nav actions" ". lang .";align-items:center;gap:10px 24px;padding:14px 0 12px}
.brand{grid-area:brand;display:block}.brand-image{width:360px;height:104px;border-radius:24px;overflow:hidden;background:#02050b;box-shadow:var(--shadow)}.brand-image img{width:100%;height:100%;object-fit:contain;display:block}
.main-nav{grid-area:nav;justify-self:center;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:0 18px 60px rgba(8,17,38,.08)}
.dark-theme .main-nav{background:rgba(17,27,45,.96)}
.main-nav a{min-height:48px;padding:14px 22px;border-radius:999px;color:#111827;font-weight:900;white-space:nowrap}.dark-theme .main-nav a{color:#f7fbff}
.main-nav a.active,.main-nav a:hover{background:rgba(8,17,38,.08)}.dark-theme .main-nav a.active,.dark-theme .main-nav a:hover{background:rgba(255,255,255,.13)}
.header-actions{grid-area:actions;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:230px}
.header-cta,.theme-toggle{min-height:58px;border-radius:999px;border:1px solid var(--line);font-weight:900;box-shadow:0 18px 50px rgba(8,17,38,.10)}
.header-cta{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;background:#081126;color:white;white-space:nowrap}.dark-theme .header-cta{background:#fff;color:#071126}
.theme-toggle{width:58px;background:rgba(255,255,255,.9);cursor:pointer}.dark-theme .theme-toggle{background:#111b2d;color:#ffd166}
.language-switcher{grid-area:lang;justify-self:center;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 18px 50px rgba(8,17,38,.08)}
.dark-theme .language-switcher{background:rgba(17,27,45,.96)}
.language-switcher a{min-width:46px;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900}
.language-switcher a.active,.language-switcher a:hover{background:rgba(15,99,255,.16)}
.hero-section{padding:clamp(72px,8vw,132px) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,.45fr);gap:clamp(36px,6vw,90px);align-items:center}
.eyebrow{display:flex;gap:12px;align-items:center;color:var(--blue);font-size:.86rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900}.eyebrow:before{content:"";width:44px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--blue))}
h1{font-size:clamp(58px,5.4vw,92px);line-height:1.02;letter-spacing:-.06em;margin:22px 0 24px}h2{font-size:clamp(34px,3.2vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0 0 18px}h3{font-size:1.35rem;margin:0 0 12px}
.lead{font-size:clamp(18px,1.3vw,23px);line-height:1.65;color:var(--muted);max-width:850px}.dark-theme .lead{color:#e5edf9}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.button{min-height:58px;padding:16px 28px;border-radius:999px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)}.primary{background:var(--blue);color:#fff}.light{background:rgba(255,255,255,.92);color:#071126}.dark-theme .light{background:rgba(255,255,255,.12);color:#fff}
.topic-panel,.focus-panel,.detail-card,.benefit-box,.step-card,.cta-band,.download-box,.legal-box,.contact-form,.contact-info,.service-tile{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);border-radius:32px}.dark-theme .topic-panel,.dark-theme .focus-panel,.dark-theme .detail-card,.dark-theme .benefit-box,.dark-theme .step-card,.dark-theme .cta-band,.dark-theme .download-box,.dark-theme .legal-box,.dark-theme .contact-form,.dark-theme .contact-info,.dark-theme .service-tile{background:rgba(17,27,45,.94);border-color:rgba(255,255,255,.16);color:#fff}
.topic-panel{padding:34px 40px}.topic-panel h2{font-size:1.7rem;letter-spacing:-.03em}.topic-panel ul,.benefit-box ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px}.topic-panel li,.benefit-box li{color:#14223a;font-weight:900}.dark-theme .topic-panel li,.dark-theme .benefit-box li{color:#f3f7ff}.topic-panel li:before,.benefit-box li:before{content:"";display:inline-block;width:12px;height:12px;margin-right:14px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--blue))}
.section{padding:clamp(62px,7vw,108px) 0}.section-head{margin-bottom:30px}
.focus-panel{padding:42px}.focus-grid,.service-grid,.detail-grid,.process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.focus-card,.service-tile,.detail-card,.step-card{padding:30px}.focus-card span,.service-tile span,.step-card span{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#0f63ff,#6aa2ff);color:#fff;font-weight:900;margin-bottom:20px}
.focus-card{background:rgba(255,255,255,.86);border-radius:26px}.dark-theme .focus-card{background:rgba(17,27,45,.88)}
.focus-card p,.service-tile p,.detail-card p,.step-card p,.cta-band p,.contact-info p,.download-box p,.legal-box p{color:var(--muted);line-height:1.65}.dark-theme .focus-card p,.dark-theme .service-tile p,.dark-theme .detail-card p,.dark-theme .step-card p,.dark-theme .cta-band p,.dark-theme .contact-info p,.dark-theme .download-box p,.dark-theme .legal-box p{color:#dfe8f8}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-tile{display:block;transition:.2s transform}.service-tile:hover{transform:translateY(-4px)}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px}.benefit-box{padding:32px}.internal-links{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}.internal-links a{padding:11px 16px;border-radius:999px;background:rgba(15,99,255,.12);font-weight:900;color:#123464}.dark-theme .internal-links a{background:rgba(111,168,255,.18);color:#fff}
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.step-card{display:flex;gap:16px}.step-card span{flex:0 0 54px}
.cta-band{padding:48px;background:linear-gradient(135deg,#111b2d,#123b78)!important;color:#fff!important}.cta-band p{color:#e7efff!important}.cta-band .eyebrow{color:#8bbcff}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px}.service-mini{display:grid;gap:14px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px}.contact-form,.contact-info{padding:34px}.contact-form{display:grid;gap:18px}.contact-form label{display:grid;gap:8px;font-weight:900}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:18px;padding:14px 16px;font:inherit;background:#fff;color:#071126}.dark-theme .contact-form input,.dark-theme .contact-form select,.dark-theme .contact-form textarea{background:#0b1424;color:#fff;border-color:rgba(255,255,255,.16)}
.site-footer{padding:48px 0;border-top:1px solid var(--line)}.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-links{display:flex;gap:42px;flex-wrap:wrap}.footer-links a{font-weight:900}.copyright-line{margin-top:10px;color:var(--muted);font-weight:700}
.reveal{animation:fadeUp .55s ease both}.delay-1{animation-delay:.1s}@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1160px){
 .nav-wrap{grid-template-columns:1fr auto;grid-template-areas:"brand actions" "lang lang" "nav nav";padding:12px 0}.brand-image{width:min(330px,48vw);height:92px}.main-nav{flex-wrap:wrap}.main-nav a{padding:12px 16px}.language-switcher{width:auto}.hero-grid,.detail-layout,.contact-grid,.two-col{grid-template-columns:1fr}.service-grid,.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}h1{font-size:clamp(42px,8vw,68px)}
}
@media(max-width:760px){
 :root{--container:min(100vw - 24px,1500px)}.nav-wrap{grid-template-columns:1fr;grid-template-areas:"brand" "actions" "lang" "nav";justify-items:center}.brand-image{width:min(310px,92vw);height:86px}.header-actions{justify-content:center}.main-nav{width:100%}.main-nav a{flex:1 1 42%;min-width:132px}.hero-section{padding:44px 0}.hero-grid{gap:24px}.service-grid,.focus-grid,.detail-grid,.process-grid{grid-template-columns:1fr}.actions{display:grid;grid-template-columns:1fr}.button{width:100%}.topic-panel{padding:26px}.footer-grid{align-items:flex-start;flex-direction:column}.footer-links{gap:24px}.contact-form,.contact-info{padding:24px}
}


/* v28 SEO Pro sections */
.seo-pro-box {
  padding: clamp(30px, 4vw, 52px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 5% 5%, rgba(15,99,255,.12), transparent 22rem),
    rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}
.seo-pro-box p {
  max-width: 1100px;
  color: var(--muted);
  font-size: clamp(18px, 1.15vw, 21px);
  line-height: 1.75;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.qa-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(8,17,38,.10);
  box-shadow: 0 16px 44px rgba(8,17,38,.07);
  padding: 26px;
}
.qa-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.22);
}
.qa-card h3 {
  margin-bottom: 10px;
}
.qa-card p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}
.dark-theme .qa-card {
  background: rgba(17,27,45,.94);
  border-color: rgba(255,255,255,.16);
}
.dark-theme .qa-card p {
  color: #dfe8f8;
}
.dark-theme .qa-label {
  color: #7dd3fc;
  background: rgba(56,189,248,.13);
  border-color: rgba(125,211,252,.25);
}
@media (max-width: 760px) {
  .qa-grid {
    grid-template-columns: 1fr;
  }
}

.faq-list {
  display: grid;
  gap: 14px;
  max-width: 1100px;
}
.faq-item {
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(8,17,38,.10);
  box-shadow: 0 14px 40px rgba(8,17,38,.07);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 900;
  color: var(--text);
}
.faq-item p {
  padding: 0 24px 22px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.dark-theme .seo-pro-box,
.dark-theme .faq-item {
  background: rgba(17,27,45,.94);
  border-color: rgba(255,255,255,.16);
}
.dark-theme .seo-pro-box p,
.dark-theme .faq-item p {
  color: #dfe8f8;
}
.dark-theme .faq-item summary {
  color: #ffffff;
}


/* v29 final technical polish */
.contact-form button[disabled] {
  opacity: .74;
  cursor: wait;
}


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

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

.faq-item summary:focus-visible {
  outline: 3px solid #0f63ff;
  outline-offset: 4px;
  border-radius: 8px;
}

.footer-links {
  gap: clamp(24px, 3vw, 48px) !important;
}


/* v31 bugfix: download live text + Microsoft 365 fallback link */
.m365-link-fix {
  padding-top: 20px;
}

/* v34 mobile/tablet navigation cleanup */
@media (max-width: 900px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .brand-image {
    width: clamp(230px, 72vw, 330px) !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;
  }

  .header-cta {
    width: auto !important;
    min-width: 132px !important;
    padding: 14px 22px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

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

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

  .main-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    width: calc(100vw - 28px) !important;
    max-width: 520px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 999px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

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

  .main-nav {
    scrollbar-width: none !important;
  }

  .main-nav a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1 !important;
    scroll-snap-align: start !important;
  }

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

  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    display: none !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;
  }
}

@media (max-width: 520px) {
  .site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-inner {
    gap: 12px !important;
  }

  .brand-image {
    width: clamp(220px, 76vw, 300px) !important;
  }

  .main-nav {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
  }

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


/* v35 mobile/tablet text overflow hard fix */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .container,
  .header-inner,
  .hero-grid,
  .section-head,
  .detail-grid,
  .service-grid,
  .live-flow-grid,
  .topic-panel,
  .cta-band,
  .service-card,
  .detail-card,
  .live-flow-panel,
  .live-flow-step,
  .faq-item {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  h1,
  h2,
  h3,
  .hero-copy h1,
  .hero-section h1,
  .section-head h1,
  .section-head h2,
  .cta-band h2 {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
  }

  p,
  li,
  a,
  span,
  strong,
  .lead,
  .eyebrow,
  .button,
  .pill,
  .tag,
  .chip {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

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

  .section-head h2,
  .cta-band h2 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
  }

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

  .lead,
  .hero-copy p,
  .section-head p,
  .cta-band p,
  .detail-card p,
  .service-card p,
  .live-flow-step p {
    font-size: clamp(16px, 4.4vw, 19px) !important;
    line-height: 1.6 !important;
  }

  .button,
  .header-cta {
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .pill,
  .tag,
  .chip {
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .main-nav {
    max-width: calc(100vw - 22px) !important;
  }

  .main-nav a {
    white-space: nowrap !important;
    max-width: none !important;
  }

  .language-switcher {
    max-width: calc(100vw - 22px) !important;
  }

  .footer-inner,
  .footer-links {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  .hero-copy h1,
  .hero-section h1,
  .section-head h1 {
    font-size: clamp(31px, 8.8vw, 42px) !important;
    line-height: 1.1 !important;
  }

  .section-head h2,
  .cta-band h2 {
    font-size: clamp(27px, 7.6vw, 36px) !important;
    line-height: 1.14 !important;
  }

  .eyebrow {
    font-size: 12px !important;
    letter-spacing: .16em !important;
  }

  .service-card,
  .detail-card,
  .live-flow-step,
  .topic-panel,
  .cta-band {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* v36 mobile/tablet menu grid - no horizontal swipe */
@media (max-width: 900px) {
  .main-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: calc(100vw - 32px) !important;
    max-width: 430px !important;
    padding: 10px !important;
    border-radius: 28px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  .main-nav a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 11px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }

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

  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    display: none !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;
  }
}

@media (max-width: 420px) {
  .main-nav {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .main-nav a {
    font-size: 13.5px !important;
    padding: 10px 8px !important;
  }
}


/* v37 mobile/tablet professional menu + readable content */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    padding: 16px 0 !important;
  }

  .brand-image {
    width: clamp(245px, 78vw, 340px) !important;
    height: auto !important;
  }

  .header-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .language-switcher {
    order: 3 !important;
    margin: 0 !important;
  }

  .mobile-menu-toggle {
    order: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 340px) !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,.92) !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 {
    order: 5 !important;
    display: none !important;
    width: min(100%, 360px) !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;
  }

  .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;
  }

  .container {
    width: min(100% - 28px, 1380px) !important;
  }

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

  .section-head,
  .hero-copy,
  .legal-content,
  .privacy-content,
  .impressum-content,
  .detail-card,
  .service-card,
  .topic-panel,
  .cta-band,
  .faq-item,
  .live-flow-panel,
  .live-flow-step {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

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

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

  .section-head h1,
  .hero-copy h1,
  .hero-section h1,
  h1 {
    font-size: clamp(32px, 8.6vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
  }

  .section-head h2,
  .cta-band h2,
  h2 {
    font-size: clamp(27px, 7.2vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
  }

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

  .button,
  .button.primary,
  .button.light {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hero-actions,
  .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: left !important;
  }

  .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: flex-start !important;
  }
}

@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;
  }
}


/* TABLET HOCHFORMAT / KLEINE TABLETS: 768px bis 980px */
@media (min-width: 768px) and (max-width: 980px) {
  .header-inner,
  .nav-wrap {
    display: grid !important;
    grid-template-columns: minmax(210px, 260px) auto auto !important;
    grid-template-areas:
      "brand actions lang"
      "brand menu menu"
      "nav nav nav" !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 7px !important;
    padding: 8px 0 !important;
  }

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

  .brand-image {
    width: clamp(210px, 28vw, 260px) !important;
    max-width: 260px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

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

  .header-cta {
    min-height: 40px !important;
    height: 40px !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

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

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

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

  .mobile-menu-toggle {
    grid-area: menu !important;
    width: min(280px, calc(100vw - 30px)) !important;
    min-height: 39px !important;
    height: 39px !important;
    padding: 9px 17px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
  }

  .main-nav {
    grid-area: nav !important;
    width: min(330px, calc(100vw - 30px)) !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: 39px !important;
    padding: 9px 14px !important;
    font-size: 13.8px !important;
    line-height: 1.1 !important;
    border-radius: 15px !important;
    text-align: center !important;
    justify-content: center !important;
  }

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


/* TABLET QUERFORMAT / BREITE TABLETS: 981px bis 1180px */
@media (min-width: 981px) and (max-width: 1180px) {
  .header-inner,
  .nav-wrap {
    display: grid !important;
    grid-template-columns: minmax(230px, 300px) 1fr auto !important;
    grid-template-areas:
      "brand nav actions"
      "brand nav lang" !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    padding: 8px 0 !important;
  }

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

  .brand-image {
    width: clamp(220px, 24vw, 300px) !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

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

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

  .main-nav a {
    flex: 0 1 auto !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

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

  .header-cta {
    min-height: 40px !important;
    height: 40px !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

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

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

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

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


/* v44 tablet-only header refinement */
@media (min-width: 768px) and (max-width: 1180px) {

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

  .header-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 320px) 1fr auto !important;
    grid-template-areas:
      "brand spacer actions"
      "nav nav nav" !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    padding: 10px 0 10px !important;
  }

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

  .brand-image {
    width: clamp(220px, 24vw, 300px) !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

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

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

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

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

  .language-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(8,17,38,.08) !important;
    box-shadow: 0 10px 28px rgba(8,17,38,.08) !important;
  }

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

  /* Tablet: kein großes Dropdown-Menü */
  .mobile-menu-toggle {
    display: none !important;
  }

  .main-nav {
    grid-area: nav !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(8,17,38,.08) !important;
    border-radius: 28px !important;
    box-shadow: 0 14px 36px rgba(8,17,38,.08) !important;
    overflow: visible !important;
  }

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

  .main-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 18px !important;
  }

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

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

  /* weniger verschenkter Platz unter dem Header */
  .hero,
  .hero-section,
  .page-hero,
  .section-hero,
  main > section:first-child {
    padding-top: 22px !important;
    margin-top: 0 !important;
  }

  /* Dark mode */
  .dark-theme .language-switcher {
    background: rgba(17,27,45,.96) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.25) !important;
  }

  .dark-theme .main-nav {
    background: rgba(17,27,45,.96) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.25) !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;
  }
}

/* kleineres Tablet / engere Breite */
@media (min-width: 768px) and (max-width: 980px) {
  .main-nav {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  }

  .header-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
  }

  .brand-image {
    width: clamp(210px, 30vw, 270px) !important;
  }
}


/* v46 mobile/tablet compact controls row + working menu layout */
@media (max-width: 980px) {
  .site-header {
    padding: 0 !important;
    margin: 0 !important;
  }

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

  .brand,
  .brand-link,
  .site-brand {
    grid-area: brand !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  .brand-image {
    width: clamp(188px, 58vw, 245px) !important;
    max-width: calc(100vw - 26px) !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }

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

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

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

  .language-switcher {
    grid-area: lang !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(8,17,38,.10) !important;
    box-shadow: 0 10px 26px rgba(8,17,38,.08) !important;
  }

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

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

  .mobile-menu-toggle {
    grid-area: menu !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(235px, calc(100vw - 26px)) !important;
    min-height: 37px !important;
    height: 37px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !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 10px 28px rgba(8,17,38,.08) !important;
    cursor: pointer !important;
  }

  .mobile-menu-toggle::after {
    content: "" !important;
    margin-left: 9px !important;
    font-size: 15px !important;
  }

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

  .main-nav {
    grid-area: nav !important;
    display: none !important;
    width: min(300px, calc(100vw - 26px)) !important;
    max-width: calc(100vw - 26px) !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;
    overflow: visible !important;
  }

  .main-nav.open {
    display: grid !important;
    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;
  }

  .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;
  }

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

  .eyebrow {
    margin-top: 0 !important;
  }

  .dark-theme .language-switcher,
  .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;
  }
}


/* ── Form feedback messages ─────────────────────────────────────────── */
.form-feedback {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  display: none;
}
.form-feedback:not(:empty) { display: block; }
.form-feedback--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.form-feedback--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.req { color: var(--accent, #e05a2b); }


/* Ressourcen checklist polish */
.detail-card ul {
  margin: 18px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.dark-theme .detail-card ul {
  color: #dfe8f8;
}
.cta-band p {
  max-width: 980px;
  color: var(--muted);
}
.dark-theme .cta-band p {
  color: #dfe8f8;
}


/* v31 legal consent */
.privacy-consent {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  font-weight: 700 !important;
  font-size: .92rem;
  line-height: 1.45;
}
.privacy-consent input {
  width: auto !important;
  margin-top: 4px;
  flex: 0 0 auto;
}
.privacy-consent a {
  color: var(--blue);
  text-decoration: underline;
}


/* v38 footer legal links mobile/tablet fix */
@media (max-width: 900px) {
  .site-footer {
    overflow: visible !important;
  }

  .footer-grid {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .footer-links a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* v51 final polish: mobile safe area + stable footer spacing */
@media (max-width: 760px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .site-footer {
    padding-bottom: calc(42px + env(safe-area-inset-bottom)) !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px !important;
  }
}