/* Shared mobile shell. Page-specific motion stays in its own component. */
.mobile-menu__backdrop { display:none; }
@media (max-width:960px) {
  :root { --gutter:clamp(1.25rem,4.5vw,2rem); --header-height:calc(4.25rem + env(safe-area-inset-top,0px)); }
  html.has-mobile-menu { overflow:hidden; overscroll-behavior:none; }
  .page .site-header { padding-top:env(safe-area-inset-top,0px); }
  .page .site-header__inner {
    width:100%; max-width:none; margin:0; gap:1rem;
    padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
  }
  .page .site-header .brand { flex:0 0 auto; min-height:44px; }
  .page .site-header .brand__wordmark-panel { width:5rem; height:3.3rem; }
  .page .site-header .brand__logo--wordmark { top:-1.955rem; left:-1.4rem; width:7.75rem; height:auto; }
  .page .mobile-menu { flex:0 0 auto; margin-left:auto; }
  .page .mobile-menu__trigger {
    width:44px; min-width:44px; height:44px; min-height:44px; margin-right:-10px; padding:10px;
    justify-content:center; gap:0; border:0; background:transparent; box-shadow:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .page .mobile-menu__label { display:none; }
  .page .mobile-menu__icon { flex:0 0 24px; width:24px; }
  .page .mobile-menu__trigger:focus-visible { outline:2px solid var(--brand-blue); outline-offset:4px; border-radius:.2rem; }
  .mobile-menu[open] .mobile-menu__backdrop {
    display:block; position:fixed; inset:var(--header-height) 0 0; z-index:1001;
    background:#141d3538; touch-action:none;
  }
  .page .mobile-menu__panel {
    inset:var(--header-height) 0 auto auto; width:min(100%,28rem);
    height:calc(100vh - var(--header-height)); height:calc(100dvh - var(--header-height));
    padding:clamp(1.25rem,3dvh,2rem) max(var(--gutter),env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
    gap:0; overflow-y:auto; overscroll-behavior:contain;
    scroll-padding-block:1.25rem; background:var(--brand-paper);
    box-shadow:-1.5rem 0 4rem #19213b12;
  }
  .page .mobile-menu__panel > * { flex-shrink:0; }
  .mobile-menu__eyebrow { margin:0 0 1rem; padding-inline:.75rem; font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-muted); }
  .page .mobile-nav { display:grid; margin:0; gap:.125rem; }
  .page .mobile-menu__panel .mobile-nav a {
    display:flex; align-items:center; min-height:clamp(48px,7dvh,60px);
    padding:.45rem .75rem; border:0; border-radius:.5rem;
    font-family:var(--font-display); font-size:clamp(1.5rem,5.5vw,1.875rem);
    font-weight:400; line-height:1.2; letter-spacing:-.035em;
  }
  .mobile-nav strong { font-weight:inherit; }
  .page .mobile-menu__panel .mobile-nav a[aria-current="page"] { color:var(--brand-blue); background:#e5e9fa; box-shadow:inset 3px 0 var(--brand-blue); }
  .page .mobile-menu__panel .mobile-nav a:hover { color:var(--brand-blue); background:#e5e9fa; }
  .page .mobile-menu__actions { gap:.25rem; margin-top:auto; padding-top:1.5rem; }
  .page .mobile-menu__actions .button { width:100%; min-height:52px; font-size:.9375rem; }
  .mobile-menu__contact { display:flex; align-items:center; justify-content:center; min-height:44px; color:var(--brand-muted); font-size:.875rem; }
  .page .mobile-menu__claim { margin:.25rem 0 0; font-family:var(--font-sans); font-size:.75rem; line-height:1.5; letter-spacing:0; text-transform:none; text-align:center; color:var(--brand-muted); }
  .page .mobile-menu__panel a:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }
  .page a.button { min-width:0; max-width:100%; white-space:normal; }
  .page :is(input,select,textarea) { font-size:max(1rem,16px); }
  .page .legal-page :is(p,li,a) { overflow-wrap:anywhere; }
  .page .legal-page h1 { font-size:clamp(2.25rem,8vw,3.5rem); line-height:1.1; overflow-wrap:anywhere; }
  .page .legal-page article section + section { margin-top:2rem; }
  .page .not-found { min-height:0; padding-block:calc(var(--header-height) + 2.5rem) 3.5rem; }
  .page .not-found h1 { font-size:clamp(2.6rem,10vw,4rem); }
}
@media (max-width:960px) and (max-height:560px) {
  .page .mobile-menu__panel { padding-top:1rem; }
  .mobile-menu__eyebrow { margin-bottom:.5rem; }
  .page .mobile-menu__panel .mobile-nav a { min-height:44px; font-size:1.5rem; }
  .page .mobile-menu__actions { padding-top:1rem; }
}
@media (max-width:960px) and (prefers-reduced-motion:no-preference) {
  .mobile-menu[open] .mobile-menu__panel { animation:mobile-panel-in 300ms cubic-bezier(.22,.61,.36,1) both; }
  .mobile-menu[open] .mobile-nav a { animation:mobile-link-in 260ms ease-out both; }
  .mobile-menu[open] .mobile-nav a:nth-child(2) { animation-delay:25ms; }
  .mobile-menu[open] .mobile-nav a:nth-child(3) { animation-delay:50ms; }
  .mobile-menu[open] .mobile-nav a:nth-child(4) { animation-delay:75ms; }
  .mobile-menu[open] .mobile-nav a:nth-child(5) { animation-delay:100ms; }
  .mobile-menu[open] .mobile-nav a:nth-child(6) { animation-delay:125ms; }
}
@keyframes mobile-panel-in { from { opacity:0; translate:18px 0; } to { opacity:1; translate:0 0; } }
@keyframes mobile-link-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Keep the signature scroll sequences, sized for a phone viewport. */
@media (max-width:1099px) and (prefers-reduced-motion:no-preference) {
  .page--home .section--problems.is-cinematic-problems.is-liquid-problems {
    height:280svh; min-height:280svh;
  }
  .page--leistungen .leistungen-story.is-scroll-ready { height:190svh; }
}
@media (max-width:680px) and (prefers-reduced-motion:no-preference) {
  html.js .page--home .section--problems.is-cinematic-problems.is-liquid-problems .problem-list[data-reveal] .problem-row {
    width:calc(100% - 2.5rem); min-height:0; gap:1.1rem; padding:1.4rem;
  }
  .page--home .section--problems.is-cinematic-problems.is-liquid-problems .problem-row h3 { font-size:2rem; }
  .page--home .section--problems.is-cinematic-problems.is-liquid-problems .problem-row p { font-size:.9375rem; line-height:1.55; }
}
@media (max-width:380px) and (max-height:650px) and (prefers-reduced-motion:no-preference) {
  html.js .page--home .section--problems.is-cinematic-problems.is-liquid-problems .problem-list[data-reveal] .problem-row {
    gap:.85rem; padding:1.1rem;
  }
  .page--home .section--problems.is-cinematic-problems.is-liquid-problems .problem-row h3 { font-size:1.8rem; }
}