/* lang-menu.css — the language drop-down (lang-menu.js, owner 2026-10-31); tokens of site.css, both themes. Identical copy in
   friendly-apps-home and site.
   version: 1.5.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-11-01 by Pascal Ehlig, ITS */
.lang[hidden]{display:none}
.lang-menu{position:relative;margin-left:auto}
.lang-current{min-height:44px;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.lang-current::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang-current[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.lang-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:12rem;margin:0;padding:.25rem;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 24px rgb(0 0 0 / .12)}
.lang-list button,.lang-list a{width:100%;min-height:40px;padding:0 .75rem;border:0;border-radius:calc(var(--r) - 2px);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:.75rem}
.lang-list button:hover:not([aria-disabled]),.lang-list button:focus-visible,.lang-list a:hover,.lang-list a:focus-visible{background:var(--sunken)}
.lang-list [aria-current]{font-weight:700}
.lang-list li:first-child{border-bottom:1px solid var(--border);margin-bottom:.25rem;padding-bottom:.25rem}
.lang-list .planned{color:var(--muted);cursor:default}
.lang-soon{font-size:var(--t-small);color:var(--muted)}
.lang-current:focus-visible,.lang-list button:focus-visible,.lang-list a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lang-draft{font-style:italic}
.lang-list{max-height:70vh;overflow-y:auto}
.lang-list a{text-decoration:none;align-items:center}
/* 1.3.0 (owner 2026-11-01: on mini screens the language list scrolled away under the page's parts): on small or low screens the list
   is two columns, fits between header and footer and stands above everything (no inner scrolling for nine languages) */
@media (max-width:34rem),(max-height:520px){
  .lang-list:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;position:fixed;top:calc(var(--head-h,56px) + 4px);
    right:8px;left:auto;width:min(22rem,calc(100vw - 16px));max-height:calc(100dvh - var(--head-h,56px) - var(--g-foot-h,48px) - 16px);z-index:80;overscroll-behavior:contain}
  .lang-list li:first-child{grid-column:1/-1}
  .lang-list button,.lang-list a{min-height:36px;padding:0 .6rem}
}
@media (max-height:520px) and (min-width:560px){.lang-list:not([hidden]){grid-template-columns:repeat(3,minmax(0,1fr));width:min(32rem,calc(100vw - 16px))}}
/* in the columns the word "folgt" steps back — a language still to come stays grey (and says so to screen readers by aria-disabled) */
@media (max-width:34rem),(max-height:520px){.lang-list:not([hidden]) li>*>small{display:none}.lang-list:not([hidden]) li>*>.lang-soon{font-size:.7rem}}

/* 1.5.0: Du / Sie right beside the language */
.lang-list li.lang-has-forms{display:flex;align-items:center;gap:6px}
.lang-list li.lang-has-forms>a,.lang-list li.lang-has-forms>button{flex:1 1 auto}
.lang-forms{display:inline-flex;gap:2px;flex:none;padding-right:6px}
.lang-forms button{min-height:28px;min-width:40px;padding:0 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;cursor:pointer}
.lang-forms button[aria-current="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.lang-forms button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* 1.6.0: the globe before the language; another language's name shows for a moment, softly */
.lang-current{display:inline-flex;align-items:center;gap:6px}
.lang-current .lang-globe{width:18px;height:18px;flex:none}
.lang-label{transition:opacity .25s ease}
.lang-label.lang-other{color:var(--muted);font-style:italic}
@media (prefers-reduced-motion:reduce){.lang-label{transition:none}}
/* 1.7.0: a soft fade when another language is offered */
.lang-label.lang-fade{opacity:0}
/* 1.8.0: the answer to a press on a language in work, across the whole list */
.lang-list .lang-why{grid-column:1/-1;margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--info-bg,#e5eef4);color:var(--info,#2c5b7a);font-size:var(--t-small,.875rem);line-height:1.4;list-style:none}
.lang-list .lang-why a{font-weight:600}
.lang-list .planned{cursor:pointer}