/* nav.css — the page menu and the dock places of the header (PLAN-1031-menues-laschen M1); an identical copy in friendly-apps-home and
   site, like site.css — change both together. Static markup from scripts/menu.py (menu.json), behaviour from nav.js.
   Menu: one line. Without script it scrolls sideways and a disclosure ("Werkstätten") opens on focus or hover; with nav.js the items that
   do not fit move into "Mehr" at the end (priority+). menu.json "wrap": true lets the line wrap instead.
   Docks: .dock-account (the account control, right end of the header) and .dock-tabs (a fixed vertical tab rail at the left edge, empty
   until publish fills it, no space while empty). Light and dark follow the colour roles of site.css.
   1.1.0 (owner 2026-10-31): the selected page is marked clearly (a tinted pill with an accent line); menu items carry icons where there is room.
   1.2.0 (owner 2026-10-31): the selected page by an accent line under the item instead of a round area that was cut off.
   version: 1.6.1 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */

/* header row: brand, menu, language, account — one row; the menu takes the rest of the width */
header.top .wrap{flex-wrap:nowrap}
header.top .brand{flex:0 1 auto;min-width:0}
header.top .brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.top .lang{flex:none;margin-left:0}
header.top nav[data-nav]{flex:1 1 0;min-width:0;position:relative}

/* the menu line */
nav[data-nav] .nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--s4);white-space:nowrap;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:4px;margin:-4px}
nav[data-nav] .nav-list>li{flex:none}
nav[data-nav][data-nav-ready] .nav-list{overflow:hidden}
nav[data-nav][data-nav-wrap] .nav-list{flex-wrap:wrap;overflow:visible;white-space:normal}
nav[data-nav] .nav-own-first{border-left:1px solid var(--border);padding-left:var(--s4)}

/* disclosure buttons ("Werkstätten", "Mehr") look like the menu links */
nav[data-nav] .nav-toggle{display:inline-flex;align-items:center;gap:6px;margin:0;padding:var(--s2) 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--t-small);line-height:inherit;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
nav[data-nav] .nav-toggle::after{content:"";flex:none;width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-25%) rotate(45deg);transition:transform var(--dur)}
nav[data-nav] .nav-toggle[aria-expanded="true"]::after{transform:translateY(20%) rotate(-135deg)}
nav[data-nav] .nav-toggle:hover,nav[data-nav] .nav-toggle[aria-expanded="true"]{color:var(--text)}

/* the panels; without script: fixed at their place (not clipped by the scrolling line), open on focus or hover */
nav[data-nav] .nav-sub{display:none;position:fixed;z-index:50;flex-direction:column;gap:0;margin:4px 0 0;padding:var(--s1);list-style:none;
  min-width:12rem;max-width:min(20rem,calc(100vw - 32px));white-space:normal;text-align:start;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 24px #0000002e}
nav[data-nav]:not([data-nav-ready]) [data-nav-drop]:is(:hover,:focus-within)>.nav-sub{display:flex}
nav[data-nav][data-nav-ready] .nav-sub{position:absolute;top:100%}
nav[data-nav][data-nav-ready] .nav-toggle[aria-expanded="true"]+.nav-sub{display:flex}
nav[data-nav] .nav-sub.nav-end,nav[data-nav] .nav-more-list{right:0}
nav[data-nav] .nav-sub>li{display:block}
nav[data-nav] .nav-sub a{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s3);border-radius:6px;
  color:var(--text);text-transform:none;letter-spacing:0;font-size:var(--t-base)}
nav[data-nav] .nav-sub a:hover{background:var(--sunken)}
nav[data-nav] .nav-sub a[aria-current="page"]{font-weight:700}
nav[data-nav] .nav-tag{flex:none;padding:0 8px;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.6;background:var(--warn-bg);color:var(--warn)}
nav[data-nav] .nav-sub:empty{display:none!important}

/* inside "Mehr": moved items as rows, a moved disclosure opens in place */
nav[data-nav] .nav-more-list .nav-toggle{display:flex;width:100%;justify-content:space-between;min-height:40px;padding:0 var(--s3);
  color:var(--text);text-transform:none;letter-spacing:0;font-size:var(--t-base);border-radius:6px}
nav[data-nav] .nav-more-list .nav-toggle:hover{background:var(--sunken)}
nav[data-nav] .nav-more-list .nav-sub{position:static;margin:0 0 0 var(--s3);padding:0 0 0 var(--s1);min-width:0;max-width:none;
  border:0;border-left:2px solid var(--border);border-radius:0;box-shadow:none}
nav[data-nav] .nav-more-list .nav-own-first{border-left:0;padding-left:0;border-top:1px solid var(--border);margin-top:var(--s1);padding-top:var(--s1)}

/* the account dock at the right end; a long name is shortened visibly, the full text on hover (title), focus and click (the menu) */
.dock-account{display:flex;align-items:center;gap:var(--s2);flex:0 1 auto;min-width:0;max-width:min(14rem,40vw)}
.dock-account:empty{display:none}
.dock-account>*{flex:none}
.dock-account details.gw-dock-account{flex:0 1 auto;min-width:0;max-width:100%}
.dock-account details.gw-dock-account summary,.dock-account a.gw-dock-account{max-width:100%}
.dock-account .gw-dock-name{white-space:nowrap}
.dock-account [data-clipped]{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
.dock-account summary:focus-visible{height:auto;min-height:40px}
.dock-account summary:focus-visible [data-clipped]{white-space:normal;overflow:visible;overflow-wrap:anywhere}
header.top .brand>[data-clipped]{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}

/* the tab rail at the left edge (filled by publish: Lleu, π); a vertical stack, rounded on the right side only */
.dock-tabs{position:fixed;left:0;top:96px;z-index:42;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:0}
.dock-tabs:empty{display:none}
.dock-tabs>*{margin:0}
.dock-tabs .pi.gw-docked{margin:0}
.dock-tabs button.gw-seed.gw-docked,.dock-tabs .pi.gw-docked summary{border-radius:0 10px 10px 0;border-left-width:0;box-shadow:0 2px 8px #00000026}
.dock-tabs .pi.gw-docked .pi-menu{top:0;bottom:auto;left:calc(100% + 6px);right:auto;max-height:calc(100dvh - 112px)}
.dock-tabs .gw-dock-menu{top:0;left:calc(100% + 6px);right:auto}

/* phone: the menu gets its own line under brand, language and account (still one line, priority+) */
@media (max-width:34rem){
  header.top .wrap{flex-wrap:wrap;row-gap:0;column-gap:var(--s3)}
  header.top .brand,header.top .brand-box{flex:1 1 0;min-width:40px;max-width:none}
  .dock-account{max-width:45vw}
  header.top nav[data-nav]{order:9;flex:1 0 100%}
  .dock-tabs{top:auto;bottom:16px}
  .dock-tabs .pi.gw-docked .pi-menu{top:auto;bottom:0}
}
@media print{.dock-tabs,nav[data-nav] .nav-more{display:none!important}}
/* 1.2.0 (owner 2026-10-31: the round areas did not fit and were cut off): the selected page — bold, the icon in the accent colour and an
   accent line right under the item, inside its own box (no area, no negative margin, nothing cut off); hover changes the colour only */
nav[data-nav] .nav-list>li>a{display:inline-flex;align-items:center;gap:6px;padding:.3rem 0;transition:color var(--dur,.15s),box-shadow var(--dur,.15s)}
nav[data-nav] .nav-list>li>a:hover{color:var(--text);box-shadow:inset 0 -2px 0 var(--border)}
nav[data-nav] .nav-list>li>a[aria-current="page"]{color:var(--text);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
nav[data-nav] .nav-sub a[aria-current="page"]{font-weight:700;box-shadow:inset 3px 0 0 var(--accent);padding-left:.5rem}
/* 1.1.0: icons in the menu (fold.js puts them in, the snap-in sizes show them where there is room) */
nav[data-nav] .nav-icon{width:18px;height:18px;flex:none;opacity:.85}
nav[data-nav] [aria-current="page"] .nav-icon{opacity:1;color:var(--accent-text)}
nav[data-nav] [data-snap-state="label"] .nav-icon{display:none}
/* 1.3.0 (owner 2026-10-31): the brand menu — the square of the logo is its button, the list opens left under it (Grundsätze, Mitmachen;
   on another domain Home first); the name stays the link home. Without script it opens on focus or hover. */
header.top .brand-box{position:relative;display:flex;align-items:center;gap:var(--s2);flex:0 1 auto;min-width:0}
header.top .brand-mark{position:relative;display:inline-flex;align-items:center;flex:none;margin:-4px;padding:4px;border:0;border-radius:8px;
  background:none;color:inherit;cursor:pointer}
header.top .brand-mark picture img{display:block;width:32px;height:auto}
header.top .brand-mark::after{content:"";position:absolute;right:-1px;bottom:1px;width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  opacity:.55;transform:rotate(45deg);transition:transform var(--dur)}
header.top .brand-mark[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
header.top .brand-mark:hover,header.top .brand-mark[aria-expanded="true"]{background:var(--sunken)}
header.top .brand-mark:focus-visible{outline:2px solid var(--action);outline-offset:2px}
header.top .brand-sub{display:none;position:absolute;top:100%;left:-4px;z-index:60;flex-direction:column;margin:6px 0 0;padding:var(--s1);list-style:none;
  min-width:12rem;max-width:min(20rem,calc(100vw - 32px));background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:0 8px 24px #0000002e;font-weight:400}
header.top .brand-box:not([data-nav-ready]):is(:hover,:focus-within)>.brand-sub,
header.top .brand-box[data-nav-ready] .brand-mark[aria-expanded="true"]~.brand-sub{display:flex}
header.top .brand-sub>li{display:block}
header.top .brand-sub a{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s3);border-radius:6px;color:var(--text);
  text-decoration:none;font-size:var(--t-base)}
header.top .brand-sub a:hover{background:var(--sunken)}
header.top .brand-sub a:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
header.top .brand-sub .icon{flex:none;width:20px;height:20px;color:var(--muted,currentColor)}
/* 1.4.0 (owner 2026-10-31): on a child domain the brand is a breadcrumb — Friendly-Apps › dev-pe (an area of its own); on a phone
   only the area stays, the parent is behind the square of the logo */
header.top .brand-root{flex:none;color:var(--muted);font-weight:600;text-decoration:none;white-space:nowrap}
header.top .brand-root:hover{color:var(--text);text-decoration:underline}
header.top .brand-sep{flex:none;color:var(--muted);margin:0 -2px}
@media (max-width:34rem){header.top .brand-root,header.top .brand-sep{display:none}}
.fold-on header.top[data-folded] .brand-root{font-size:var(--t-small)}
/* 1.4.1 (owner 2026-10-31, the smallest view): the legal links close together, in as few lines as fit */
@media (max-width:34rem){footer nav ul{gap:0 var(--s3)}footer nav a{padding-block:6px}}
/* 1.5.0 (owner 2026-10-31: the bars must not become two lines): header and footer one line; legal links that do not fit fold into "§ Rechtliches" */
header.top .wrap{flex-wrap:nowrap}
footer .wrap{flex-wrap:nowrap}
footer .wrap>*{flex:none}
footer .wrap>[data-i18n="foot.made"]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
footer nav[aria-label]{position:relative;flex:1 1 auto;min-width:0}
footer nav[aria-label] ul{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.legal-toggle{display:none;min-height:32px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--t-small);cursor:pointer}
.legal-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
footer nav[data-legal-folded] .legal-toggle{display:inline-flex;align-items:center}
footer nav[data-legal-folded] ul{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:45;flex-direction:column;gap:0;overflow:visible;min-width:12rem;
  padding:var(--s1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 -8px 24px #0000002a}
footer nav[data-legal-folded] .legal-toggle[aria-expanded="true"]+ul{display:flex}
footer nav[data-legal-folded] ul a{display:flex;min-height:36px;align-items:center;padding:0 var(--s3)}
footer nav[data-legal-folded],footer[data-folded] .wrap>nav[data-legal-folded]{overflow:visible!important}
/* 1.6.0 (owner 2026-10-31): with an on-screen keyboard open, the edited field stays visible — footer and Lleu's bubble step back */
/* 1.6.1: never while Lleu is open — his bubble lives in the footer and his window is tied to it (hiding it closed him) */
html[data-keyboard]:not([data-lleu-open]) body>footer,html[data-keyboard]:not([data-lleu-open]) .fold-footbar{visibility:hidden}