/* mobile-menu 1.0.1: the one phone menu of the network (brief of 11 Nov 2026).
   Structure and behaviour are the module's; colours, fonts and radii come from the site through --mm-* tokens
   (config "theme", written onto [data-mm]). A missing token falls back to the values below.
   The language box and its items take the entries' type tokens on purpose (ruling of 10 Nov 2026: the language
   selector has no type of its own); keep it that way, never add --mm-lang-font/size/weight tokens. */

/* A2: the toggle box. Hidden from the breakpoint up (the adapter's style tag shows it below). */
.mm-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin: 0;
  padding: .45rem .75rem;
  box-sizing: border-box;
  background: var(--mm-toggle-bg, transparent);
  color: var(--mm-toggle-ink, currentColor);
  border: var(--mm-toggle-border-width, 1.5px) solid var(--mm-toggle-line, currentColor);
  border-radius: var(--mm-toggle-radius, 6px);
  box-shadow: var(--mm-toggle-shadow, none);
  font-family: var(--mm-toggle-font, inherit);
  font-size: var(--mm-toggle-size, .95rem);
  font-weight: var(--mm-toggle-weight, 600);
  line-height: 1;
  letter-spacing: var(--mm-toggle-tracking, normal);
  text-transform: var(--mm-toggle-transform, none);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}
.mm-toggle:focus-visible { outline: 2px solid var(--mm-focus, currentColor); outline-offset: 2px; }
.mm-icon { position: relative; display: inline-block; width: 18px; height: 14px; flex: none; }
.mm-icon > span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform .18s ease, opacity .18s ease, top .18s ease; }
.mm-icon > span:nth-child(1) { top: 0; }
.mm-icon > span:nth-child(2) { top: 6px; }
.mm-icon > span:nth-child(3) { top: 12px; }
.mm-toggle[aria-expanded="true"] .mm-icon > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mm-toggle[aria-expanded="true"] .mm-icon > span:nth-child(2) { opacity: 0; }
.mm-toggle[aria-expanded="true"] .mm-icon > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
/* Both labels share one grid cell, so the box keeps its size (and its spot) open and closed. */
.mm-label { display: inline-grid; text-align: center; }
.mm-label::before { content: attr(data-mm-sizer); grid-area: 1 / 1; visibility: hidden; height: 0; overflow: hidden; }
.mm-label > span { grid-area: 1 / 1; }

/* A3: the full-screen panel, from the header's bottom edge (--mm-top, measured at open) to the bottom of the screen.
   Opaque; it scrolls itself only when the screen is too short (ruling of 11 Nov 2026). */
.mm-panel {
  position: fixed;
  top: var(--mm-top, 0px);
  left: 0;
  right: 0;
  height: calc(100vh - var(--mm-top, 0px));
  height: calc(100dvh - var(--mm-top, 0px));
  z-index: var(--mm-z, 80);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: var(--mm-pad-top, .25rem) var(--mm-pad-x, 1.25rem) calc(var(--mm-widget-clear, 4.75rem) + env(safe-area-inset-bottom, 0px));
  background: var(--mm-bg, #fff);
  color: var(--mm-ink, #111);
  border-top: var(--mm-panel-border-top, 0);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}
.mm-panel[hidden] { display: none; }
/* 1.0.1: hidden on html only (it propagates to the viewport, so the page does not scroll); body gets clip, which
   does not make body a scroll container. With hidden on body a sticky header stuck to body and left the screen when
   the menu opened mid-page (wohnsitzausland.com, 11 Nov 2026). */
html.mm-lock { overflow: hidden; }
html.mm-lock body { overflow: clip; }

/* A4: entries, left-aligned, one divider style. */
.mm-nav { flex: none; }
.mm-list, .mm-sub, .mm-lang-grid { list-style: none; margin: 0; }
.mm-list { padding: 0; }
.mm-list > li, .mm-sub > li, .mm-lang-grid > li { margin: 0; padding: 0; }
.mm-list > li::before, .mm-sub > li::before, .mm-lang-grid > li::before, .mm-list > li::marker { content: none; }
.mm-item { border-bottom: var(--mm-line-width, 1px) solid var(--mm-line, rgba(0, 0, 0, .14)); }
.mm-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: var(--mm-item-pad-y, 1rem) 0;
  box-sizing: border-box;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--mm-ink, #111);
  font-family: var(--mm-font, inherit);
  font-size: var(--mm-size, 1.0625rem);
  font-weight: var(--mm-weight, 600);
  line-height: var(--mm-leading, 1.35);
  letter-spacing: var(--mm-tracking, normal);
  text-transform: var(--mm-transform, none);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.mm-link:hover, .mm-sublink:hover, .mm-lang-item:hover { color: var(--mm-ink-hover, var(--mm-ink-active, var(--mm-ink, #111))); text-decoration: none; }
.mm-link[aria-current="page"], .mm-item.is-current > .mm-acc { color: var(--mm-ink-active, var(--mm-ink, #111)); }
.mm-link:focus-visible, .mm-sublink:focus-visible, .mm-lang-item:focus-visible, .mm-lang-toggle:focus-visible, .mm-cta:focus-visible { outline: 2px solid var(--mm-focus, currentColor); outline-offset: -2px; }
.mm-chev { flex: none; transition: transform .16s ease; }
.mm-acc[aria-expanded="true"] .mm-chev, .mm-lang-toggle[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }

/* Accordion: sub-entries under a divider, the same line between each of them. */
.mm-sub { padding: var(--mm-sub-pad-top, .25rem) 0 var(--mm-sub-pad-bottom, .5rem) var(--mm-sub-indent, .5rem); border-top: var(--mm-line-width, 1px) solid var(--mm-line, rgba(0, 0, 0, .14)); }
.mm-sub[hidden], .mm-lang-grid[hidden] { display: none; }
.mm-sub > li + li { border-top: var(--mm-line-width, 1px) solid var(--mm-line, rgba(0, 0, 0, .14)); }
.mm-sublink, .mm-lang-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: var(--mm-sub-pad-y, .75rem) var(--mm-sub-pad-x, .5rem);
  color: var(--mm-sub-ink, var(--mm-ink, #111));
  font-family: var(--mm-sub-font, var(--mm-font, inherit));
  font-size: var(--mm-sub-size, 1rem);
  font-weight: var(--mm-sub-weight, 500);
  line-height: var(--mm-leading, 1.35);
  letter-spacing: var(--mm-sub-tracking, var(--mm-tracking, normal));
  text-transform: var(--mm-sub-transform, none);
  text-decoration: none;
  border-radius: var(--mm-sub-radius, 6px);
}
.mm-sublink[aria-current="page"] { color: var(--mm-ink-active, var(--mm-ink, #111)); }

/* Footer of the panel: language box, then the one button. margin-top auto puts both at the bottom of a tall screen. */
.mm-foot { margin-top: auto; padding-top: 1.5rem; flex: none; }

/* A5: the language box. Its own bordered, rounded, full-width box; open = two-column grid. Type = the entries' type. */
.mm-lang { border: var(--mm-lang-border-width, 1.5px) solid var(--mm-lang-line, var(--mm-line, rgba(0, 0, 0, .14))); border-radius: var(--mm-lang-radius, 12px); background: var(--mm-lang-bg, transparent); }
.mm-lang-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .8rem 1rem;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  color: var(--mm-ink, #111);
  font-family: var(--mm-font, inherit);
  font-size: var(--mm-size, 1.0625rem);
  font-weight: var(--mm-weight, 600);
  line-height: var(--mm-leading, 1.35);
  letter-spacing: var(--mm-tracking, normal);
  text-transform: var(--mm-transform, none);
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.mm-lang-current { display: inline-flex; align-items: center; gap: .6rem; }
.mm-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem .5rem;
  padding: var(--mm-sub-pad-top, .25rem) .5rem var(--mm-sub-pad-bottom, .5rem);
  border-top: var(--mm-line-width, 1px) solid var(--mm-line, rgba(0, 0, 0, .14));
}
.mm-lang-item[aria-current="page"] { color: var(--mm-ink-active, var(--mm-ink, #111)); background: var(--mm-lang-current-bg, rgba(0, 0, 0, .06)); }
.mm-flag.mm-flag { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.mm-flag.mm-flag--trigger { width: 20px; height: 20px; }
.mm-flag svg { display: block; width: 100%; height: 100%; }

/* A6: exactly one button, full width, the site's solid primary style. */
.mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 1rem 0 0;
  padding: .85rem 1.25rem;
  box-sizing: border-box;
  background: var(--mm-cta-bg, #111);
  color: var(--mm-cta-ink, #fff);
  border: var(--mm-cta-border, 0);
  border-radius: var(--mm-cta-radius, 8px);
  box-shadow: var(--mm-cta-shadow, none);
  font-family: var(--mm-cta-font, var(--mm-font, inherit));
  font-size: var(--mm-cta-size, 1.0625rem);
  font-weight: var(--mm-cta-weight, 700);
  line-height: 1.2;
  letter-spacing: var(--mm-cta-tracking, normal);
  text-transform: var(--mm-cta-transform, none);
  text-decoration: none;
  text-align: center;
}
.mm-cta:hover { background: var(--mm-cta-bg-hover, var(--mm-cta-bg, #111)); color: var(--mm-cta-ink, #fff); text-decoration: none; }
.mm-foot > .mm-cta:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .mm-icon > span, .mm-chev { transition: none; } }