/* fold.css — the folding header and footer bar (fold.js, owner 2026-10-31, an option); tokens of site.css, both themes. Only active
   with html.fold-on (set by fold.js when fold-config.js switches it on). Identical copy in friendly-apps-home and site.
   2.3.1: the brand box (brand menu) is kept in the folded bar like the brand.
   2.4.0: Lleu in the footer or floating on its top edge.
   2.5.1: with room the Lleu bubble sits on the footer's top edge.
   version: 2.26.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
.fold-on header.top{position:sticky;top:0;z-index:40;transition:box-shadow .2s ease}
.fold-on header.top .wrap{transition:none}
.fold-on header.top[data-folded]{box-shadow:0 2px 12px rgb(0 0 0 / .08)}
.fold-on header.top[data-folded]>.wrap{flex-wrap:nowrap}
.fold-on header.top[data-folded]>.wrap>:not([data-fold-keep]):not(.fold-toggle):not(.lm-row):not(.dock-account):not(.dock-explain):not(.fa-theme-btn):not(.lang-menu):not(.lang):not(.gw-help-btn):not(.fa-act-btn){display:none}   /* 2.21.0: the controls top right stay */
.fold-dock{display:flex;gap:var(--s2,.5rem);align-items:center}
.fold-on header.top[data-folded] .fold-dock{margin-left:var(--s2,.5rem)}
.fold-dock:empty,.fold-dock:not(:has(.fold-copy:not([hidden]))){display:none}
.fold-dock .cta{min-height:36px;padding:0 var(--s3,.75rem);font-size:var(--t-small)}
.fold-dock .cta.ghost{margin-left:0}
.fold-toggle{display:none;min-height:40px;min-width:44px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.fold-toggle span{width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
/* 2.1.0: ☰ only when not even "Mehr" fits — it stands where the menu stands */
.fold-on header.top[data-burger] .fold-toggle{display:inline-flex}
.fold-on header.top[data-burger] nav[data-nav]{display:none!important}
.fold-on header.top:not([data-folded]) .fold-dock{display:none}
.fold-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fold-footbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 12px rgb(0 0 0 / .08)}
.fold-footbar .wrap{padding-block:.35rem;justify-content:flex-end}
.fold-dock .cta{white-space:nowrap}
/* 1.6.0: what shows in a small bar is decided by the snap-in sizes (snap.js, rules in fold.json) */
@media (prefers-reduced-motion:reduce){.fold-on header.top,.fold-on header.top .wrap{transition:none}}
.fold-spacer{display:block;margin:0;padding:0;border:0;overflow:hidden}
/* 1.2.0: the pop-down menu under the folded bar (☰) */
.fold-pop{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgb(0 0 0 / .12);max-height:70vh;overflow-y:auto}
.fold-pop-list{list-style:none;margin:0 auto;padding:.5rem var(--s4,1rem);max-width:var(--wrap,72rem);display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.25rem var(--s4,1rem)}
.fold-pop-list ul{list-style:none;margin:0;padding:0 0 0 .75rem}
.fold-pop a{display:flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;border-radius:var(--r)}
.fold-pop a:hover,.fold-pop a:focus-visible{background:var(--sunken)}
.fold-pop a[aria-current]{font-weight:700}
.fold-pop a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fold-pop-head{display:block;padding-top:.5rem;font-size:var(--t-small);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fold-toggle[aria-expanded="true"] span{background:transparent;box-shadow:none;position:relative}
.fold-toggle[aria-expanded="true"] span::before,.fold-toggle[aria-expanded="true"] span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.fold-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.fold-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
/* 1.3.0: drill-down — branches open their level, a trail leads back */
.fold-pop-trail{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0 auto;padding:.5rem var(--s4,1rem) 0;max-width:var(--wrap,72rem);color:var(--muted)}
.fold-pop-trail button{min-height:36px;padding:0 .5rem;border:0;border-radius:var(--r);background:none;color:var(--link);font:inherit;cursor:pointer}
.fold-pop-trail .fold-pop-back{border:1px solid var(--border);color:var(--text);margin-right:.5rem}
.fold-pop-trail .fold-pop-crumb+.fold-pop-crumb::before{content:"›";margin-right:.5rem;color:var(--muted)}
.fold-pop-trail [aria-current]{color:var(--text);font-weight:700}
.fold-pop-list li{display:flex;align-items:center;gap:.5rem}
.fold-pop-list a,.fold-pop-branch{flex:1 1 auto}
.fold-pop-branch{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 .5rem;border:0;border-radius:var(--r);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.fold-pop-branch small{color:var(--muted)}
.fold-pop-branch:hover,.fold-pop-branch:focus-visible{background:var(--sunken)}
.fold-pop-branch:focus-visible,.fold-pop-trail button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fold-pop-open{flex:none!important;font-size:var(--t-small);color:var(--link)!important;padding:0 .5rem}
.fold-pop a{padding:0 .5rem}
.fold-pop-more{text-decoration:underline dotted;color:var(--muted)!important}
/* 1.4.0: side rails — left the page menu, right the tools, as icons (wide screens, while folded) */
.fold-rails header.top[data-folded]>.wrap>:not([data-fold-keep]):not(.brand):not(.brand-box):not(.dock-explain):not(.lang-menu):not(.lang):not(.lm-row):not(.dock-account):not(.fa-theme-btn):not(.gw-help-btn):not(.fa-act-btn){display:none!important}   /* 2.5.3: the language stays (owner 2026-11-01); 2.21.0: every control top right stays */   /* 2.5.3: the language stays (owner 2026-11-01) */
.fold-rail{position:fixed;top:50%;z-index:45;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:20px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 10px 30px rgb(16 42 67 / .14),0 1px 0 rgb(255 255 255 / .5) inset;transform:translateY(-50%);animation:fold-rail-in .28s cubic-bezier(.2,.8,.2,1)}
.fold-rail[hidden]{display:none}
.fold-rail-left{left:14px;--from:-24px}
.fold-rail-right{right:14px;--from:24px}
@keyframes fold-rail-in{from{opacity:0;transform:translate(var(--from),-50%)}to{opacity:1;transform:translate(0,-50%)}}
.fold-rail-item{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:transparent;color:var(--muted);
  text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.fold-rail-item:hover,.fold-rail-item:focus-visible,.fold-rail-item[aria-expanded="true"]{background:var(--sunken);color:var(--text)}
.fold-rail-item:active{transform:scale(.94)}
.fold-rail-item[aria-current]{color:var(--on-action);background:var(--action)}
.fold-rail-item[aria-current]::before{content:"";position:absolute;left:-9px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--accent)}
.fold-rail-right .fold-rail-item[aria-current]::before{left:auto;right:-9px}
.fold-rail-cta{color:var(--accent-text)}
.fold-rail-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fold-rail-item .icon{display:block}
.icon-glyph{font:700 20px/1 var(--sans,system-ui);display:block}
.fold-rail-tip{position:absolute;top:50%;left:calc(100% + 12px);transform:translate(-4px,-50%);white-space:nowrap;padding:6px 10px;border-radius:10px;
  background:var(--action);color:var(--on-action);font-size:var(--t-small);font-weight:600;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.fold-rail-right .fold-rail-tip{left:auto;right:calc(100% + 12px);transform:translate(4px,-50%)}
.fold-rail-item:hover .fold-rail-tip,.fold-rail-item:focus-visible .fold-rail-tip{opacity:1;transform:translate(0,-50%)}
.fold-rail-item[aria-expanded="true"] .fold-rail-tip{opacity:0}
.fold-rail-account{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--border)}
.fold-rail-account>*{max-width:44px}
.fold-fly{position:fixed;z-index:46;width:min(22rem,calc(100vw - 120px));max-height:min(70vh,560px);overflow-y:auto;padding:8px 6px;border:1px solid var(--border);
  border-radius:18px;background:var(--surface);box-shadow:0 18px 48px rgb(16 42 67 / .2);animation:fold-fly-in .2s cubic-bezier(.2,.8,.2,1)}
.fold-fly[hidden]{display:none}
.fold-fly-left{left:84px;--from:-10px}
.fold-fly-right{right:84px;--from:10px}
@keyframes fold-fly-in{from{opacity:0;transform:translateX(var(--from))}to{opacity:1;transform:none}}
.fold-fly-head{margin:4px 10px 6px;font-size:var(--t-small);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fold-fly .fold-pop-list{display:block;padding:0 4px}
.fold-fly .fold-pop-trail{padding:0 4px 4px}
.fold-fly-langs [aria-disabled]{color:var(--muted);cursor:default}
.fold-fly-langs [aria-current]{font-weight:700}
@media (prefers-reduced-motion:reduce){.fold-rail,.fold-fly{animation:none}.fold-rail-item,.fold-rail-tip{transition:none}}
.fold-rail-account:empty{display:none}
.fold-fly a{display:flex;align-items:center;min-height:40px;padding:0 .6rem;border-radius:10px;color:var(--text);text-decoration:none}
.fold-fly a:hover,.fold-fly a:focus-visible{background:var(--sunken)}
.fold-fly a[aria-current]{font-weight:700}
.fold-fly .fold-pop-branch{width:100%;border-radius:10px}
.fold-fly .nav-tag,.fold-fly small{margin-left:auto;padding-left:.5rem;font-size:var(--t-small);color:var(--muted)}
.fold-rail-moved{width:44px;height:44px;min-width:0;margin:0;border-radius:14px}
/* 1.5.0: on screen = another look (nothing hidden, nothing blinks) */
.fold-rail-item[data-onscreen]:not([aria-current]){color:var(--accent-text);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.fold-rail-item[data-onscreen]:not([aria-current])::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.fold-pop a[data-onscreen]{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* 1.5.0: the layout at the bottom (phones by default) — the rails become one bar for the thumb */
.fold-bottom .fold-rail{top:auto;bottom:10px;transform:none;flex-direction:row;padding:6px;--from:0px;animation-name:fold-rail-up}
.fold-bottom .fold-rail-left{left:10px;right:auto;max-width:calc(60vw - 16px);overflow-x:auto}
.fold-bottom .fold-rail-right{right:10px;left:auto}
.fold-bottom .fold-rail-account{flex-direction:row;padding:0 0 0 6px;border-top:0;border-left:1px solid var(--border)}
.fold-bottom .fold-rail-tip{left:50%;top:auto;bottom:calc(100% + 10px);transform:translate(-50%,4px)}
.fold-bottom .fold-rail-item:hover .fold-rail-tip,.fold-bottom .fold-rail-item:focus-visible .fold-rail-tip{transform:translate(-50%,0)}
.fold-bottom .fold-rail-item[aria-current]::before{left:12px;right:12px;top:auto;bottom:-7px;width:auto;height:3px}
@keyframes fold-rail-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fold-fly-bottom{left:10px!important;right:10px!important;top:auto!important;bottom:76px;width:auto}
.fold-pop-layout{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0 auto;padding:.5rem var(--s4,1rem) .75rem;max-width:var(--wrap,72rem);border-top:1px solid var(--border);color:var(--muted);font-size:var(--t-small)}
.fold-pop-layout button{min-height:36px;padding:0 .6rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.fold-pop-layout button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fold-bottom .fold-rail{animation:none}}
/* 1.6.0: snap-in states (snap.js): full · compact · icon · label · hide */
[data-snap-state="hide"]{display:none!important}
[data-snap-state="compact"]{font-size:var(--t-small)!important;padding-inline:.6rem!important;min-height:36px}
[data-snap-state="icon"]{font-size:0!important;gap:0!important;min-width:40px;padding-inline:.5rem!important;justify-content:center}
[data-snap-state="icon"] .icon{font-size:20px;display:block}
[data-snap-state="icon"]::after{display:none}
[data-snap-state="label"] .icon,[data-snap-state="label"] .snap-icon{display:none}
:not([data-snap-state="icon"])>.snap-icon{display:none}
/* signed in (session.js): no "sign-in" hint at workshops */
[data-signed-in] .nav-signin .nav-tag{display:none}
/* 1.8.0: the footer sticks to the bottom — short pages: at the window's bottom; long pages: slim while the page goes on, full at its end */
.fold-foot-on body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.fold-foot-on body>main{flex:1 0 auto;width:100%;box-sizing:border-box}
.fold-foot-on body>*{flex-shrink:0}
.fold-foot-on body>footer{position:sticky;bottom:0;z-index:38}
.fold-foot-mark{height:0;margin:0;padding:0}
footer[data-folded]{box-shadow:0 -2px 12px rgb(0 0 0 / .06)}
footer[data-folded] .wrap{flex-wrap:nowrap;overflow:visible;white-space:nowrap}
footer[data-folded] .wrap>:not(.dock-pi){min-width:0;overflow:hidden;text-overflow:ellipsis}
.fold-footbar{bottom:var(--fold-foot,0px)}
.fold-bottom .fold-rail{bottom:calc(var(--fold-foot,0px) + 10px)}
.fold-fly-bottom{bottom:calc(var(--fold-foot,0px) + 76px)}
/* legal.js: imprint, privacy, terms in the design of the page */
.legal-view{max-width:var(--wrap,72rem);margin-inline:auto;padding:var(--s5,1.5rem) var(--s4,1rem) var(--s6,2rem);box-sizing:border-box;width:100%}
.legal-view:focus{outline:none}
.legal-back{margin:0 0 var(--s4,1rem)}
.legal-back a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:1px solid var(--border);border-radius:999px;color:var(--text);text-decoration:none;font-size:var(--t-small)}
.legal-back a:hover,.legal-back a:focus-visible{background:var(--sunken)}
.legal-text{max-width:70ch;line-height:1.65}
.legal-text h1{font-size:var(--t-h1,2rem);margin:0 0 var(--s4,1rem)}
.legal-text h2,.legal-text h3{font-size:var(--t-h3,1.25rem);margin:var(--s5,1.5rem) 0 var(--s2,.5rem)}
.legal-text nav{margin-top:var(--s5,1.5rem);display:flex;gap:.75rem}
.legal-text a{color:var(--link)}
/* 2.0.0: the platform's controls in their places — "i" in the header (right), π in the footer (left), Lleu as a chat agent bottom right */
.dock-explain{display:inline-flex;align-items:center}
.dock-explain .gx-float{position:static!important;left:auto!important;bottom:auto!important;width:40px;height:40px;border-radius:10px;box-shadow:none}
.dock-explain .gx-float+.gx-ask{position:absolute!important;left:auto!important;right:0;top:calc(100% + 6px);bottom:auto!important}
.dock-pi{display:inline-flex;align-items:center;margin-right:var(--s3,.75rem)}
.dock-pi .pi.gw-docked{margin:0}
.dock-pi .pi.gw-docked summary{width:32px;height:32px;font-size:18px;border-radius:999px;opacity:.75}
.dock-pi .pi.gw-docked summary:hover,.dock-pi .pi.gw-docked[open] summary{opacity:1}
.dock-pi .pi.gw-docked .pi-menu{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
.dock-lleu{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--fold-foot,0px) + 16px);z-index:41}
.fold-bottom .dock-lleu{bottom:calc(var(--fold-foot,0px) + 76px)}
.dock-lleu:empty{display:none}
.dock-lleu button.gw-seed{position:static!important;width:56px;height:56px;border-radius:50%;box-shadow:0 10px 28px rgb(16 42 67 / .22);transition:transform .15s ease}
.dock-lleu button.gw-seed:hover{transform:translateY(-2px)}
.dock-lleu button.gw-seed>svg{width:26px;height:26px}
.dock-lleu button.gw-seed:not([aria-expanded="true"]):has(>.lleu-bubble)>svg:not(.lleu-bubble){display:none}
.dock-lleu button.gw-seed[aria-expanded="true"]>.lleu-bubble{display:none}
@media (prefers-reduced-motion:reduce){.dock-lleu button.gw-seed{transition:none}}
.fold-on header.top[data-folded] nav[data-nav]{font-size:var(--t-small)}
/* 2.1.0: in the one-line folded bar the menu stands next to the brand and may shrink (the phone rule of nav.css gives it its own line
   only in the open header) — nav.js then moves items into "Mehr", ☰ comes only when not even "Mehr" fits */
.fold-on header.top[data-folded]>.wrap{flex-wrap:nowrap!important}
.fold-on header.top[data-folded] nav[data-nav]{order:0;flex:1 1 0;min-width:0}
/* 2.2.0: page buttons that passed under the bar are part of the menu — the matching item is marked, a new entry keeps the accent */
nav[data-nav] a[data-snapped]{color:var(--accent-text)!important;font-weight:700}
nav[data-nav] .nav-snapped>a{color:var(--accent-text)}
/* 2.2.0: margins align to the logo (--fold-edge, its left edge) */
.fold-pop-list,.fold-pop-trail,.fold-pop-layout{max-width:none!important;padding-left:var(--fold-edge,16px)!important;padding-right:var(--fold-edge,16px)!important}
.legal-view{max-width:none;padding-left:var(--fold-edge,16px);padding-right:var(--fold-edge,16px)}
.dock-pi:empty,.dock-explain:empty{display:none}
/* 2.3.0: π and Lleu follow the layout — in the right rail (side) or the bottom bar (bottom) as rail items; their menus open where there is room */
.fold-rail-manage{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--border)}
.fold-bottom .fold-rail-manage{flex-direction:row;padding:0 0 0 6px;border-top:0;border-left:1px solid var(--border)}
.fold-rail-manage:empty{display:none}
.fold-rail .pi.gw-docked{margin:0}
.fold-rail .pi.gw-docked summary{width:44px;height:44px;border-radius:14px;font-size:20px;opacity:1}
.fold-rail-right .pi.gw-docked .pi-menu{top:auto;bottom:0;left:auto;right:calc(100% + 14px)}
.fold-bottom .fold-rail .pi.gw-docked .pi-menu{right:0;left:auto;bottom:calc(100% + 14px);top:auto}
.fold-rail button.gw-seed{position:static!important;width:44px;height:44px;border-radius:14px;box-shadow:none}
.fold-rail button.gw-seed:not([aria-expanded="true"]):has(>.lleu-bubble)>svg:not(.lleu-bubble){display:none}
.fold-rail button.gw-seed[aria-expanded="true"]>.lleu-bubble{display:none}
/* 2.4.0 (owner 2026-10-31): Lleu lives as a speech bubble in the footer on the right (opposite π), or floats on the footer's top edge */
[data-lleu-place="footer"] footer .dock-lleu{position:static;margin-left:auto;flex:none;z-index:auto}
[data-lleu-place="footer"] footer .dock-lleu button.gw-seed{width:40px;height:40px;box-shadow:none;border:1px solid var(--border)}
[data-lleu-place="footer"] footer .dock-lleu button.gw-seed>svg{width:20px;height:20px}
[data-lleu-place="footer"] footer[data-folded] .dock-lleu button.gw-seed{width:34px;height:34px}
[data-lleu-place="float"] .dock-lleu{bottom:calc(var(--g-foot-h,56px) - 24px)}
[data-lleu-place="float"] .dock-lleu button.gw-seed{width:48px;height:48px}
/* 2.5.1 (owner 2026-10-31): with enough room Lleu's bubble lives a bit larger on the footer's top edge — half above, half inside — and goes
   with the footer; on small screens it stays inside the footer */
@media (min-width:601px) and (min-height:561px){
  [data-lleu-place="footer"] footer .dock-lleu{position:absolute;top:-28px;right:max(16px,calc((100% - 68rem) / 2 + 16px));margin:0;display:block;line-height:0;z-index:39}
  [data-lleu-place="footer"] footer .dock-lleu button.gw-seed,[data-lleu-place="footer"] footer[data-folded] .dock-lleu button.gw-seed{width:56px;height:56px;border:0;
    box-shadow:0 8px 22px rgb(16 42 67 / .22)}
  [data-lleu-place="footer"] footer .dock-lleu button.gw-seed>svg{width:26px;height:26px}
  [data-lleu-place="footer"] footer .wrap{padding-right:calc(var(--s4) + 64px)}
}
/* 2.5.2 (owner 2026-10-31: the bubble vanished when the footer became one line): the slim footer clips its parts, never Lleu's bubble or π */
footer[data-folded] .wrap>.dock-lleu,footer[data-folded] .wrap>.dock-pi{overflow:visible!important;min-width:auto}
.fold-rail-line{display:block;height:1px;margin:4px 6px;background:var(--border)}
.fold-bottom .fold-rail-line{width:1px;height:auto;margin:6px 4px}
/* 2.6.0 (owner 2026-11-01): "Oben" — the rails integrate at the top as one band right under the header */
.fold-band .fold-rail{bottom:auto;transform:none;flex-direction:row;padding:6px;animation:none}
.fold-band .fold-rail-left{left:14px;right:auto;max-width:calc(100vw - 260px);overflow-x:auto}
.fold-band .fold-rail-right{right:14px;left:auto}
.fold-band .fold-rail-account{flex-direction:row;padding:0 0 0 6px;border-top:0;border-left:1px solid var(--border)}
.fold-band .fold-rail-line{width:1px;height:auto;margin:6px 4px}
.fold-band .fold-rail-tip{left:50%;top:calc(100% + 10px);bottom:auto;transform:translate(-50%,-4px)}
.fold-band .fold-rail-item:hover .fold-rail-tip,.fold-band .fold-rail-item:focus-visible .fold-rail-tip{transform:translate(-50%,0)}
.fold-band header.top nav[data-nav],.fold-band .lm-row.lm-pin{display:none!important}
.fold-band .fold-rail-lang{display:none}   /* the header shows the language right above: not twice */
/* 2.7.0: the table of contents of the page (left rail "Inhalt") */
.fold-fly:has(.fold-toc){width:min(22rem,calc(100vw - 120px))}
.fold-fly .fold-pop-list.fold-toc{display:block!important;max-height:min(70vh,560px);overflow:auto;margin:0!important;padding:0!important;list-style:none;max-width:none!important}
.fold-fly .fold-toc li{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.fold-toc li a{display:block;padding:6px 10px;border-radius:8px;color:var(--text);text-decoration:none;line-height:1.3}
.fold-toc li a:hover{background:var(--sunken)}.fold-toc li a[data-onscreen]{font-weight:700;color:var(--accent-text,var(--text));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fold-toc .fold-toc-l1 a{font-weight:700}.fold-toc .fold-toc-l3 a{padding-left:24px;font-size:.92em;color:var(--muted)}
.fold-fly-band{top:auto}
/* 2.9.0 (owner 2026-11-01: "frame" means visibly focused): while the rails show, the part they mark stands out — lifted on a surface with
   an accent ring and a soft shadow — and the other parts of the page step back (dimmed, until the pointer or the keyboard reaches them) */
main section[id],main article[id],main [id]{transition:box-shadow .2s ease,border-color .2s ease}
/* 2.12.0 (owner 2026-11-01): the navigated element gets the same orange frame the cards show (card.css: accent edge) — a card or widget its
   own edge in accent, a section a ring with room around it; it is not lifted */

@media (prefers-reduced-motion:reduce){.fold-rails main section[id],.fold-rails main article[id]{transition:none}}
/* 2.11.0: the entry of the navigated element (rail, table of contents) is marked strongly — the light mark only follows the scrolling */
.fold-rail a[data-navigated]{color:var(--on-action,#fff)!important;background:var(--accent,#fb683e)!important}
.fold-toc a[data-navigated]{font-weight:700;color:var(--on-action,#fff)!important;background:var(--accent,#fb683e)!important}
.fold-fly .fold-toc li a{display:flex!important;align-items:center;gap:8px}.fold-toc li a .icon{flex:none;width:18px;height:18px;color:var(--accent,currentColor)}
.fold-toc .fold-toc-l3 a .icon{width:12px;height:12px;color:var(--muted)}.fold-toc li a[data-navigated] .icon{color:inherit}
/* 2.13.0 (owner 2026-11-01): the left menu — deeper levels inside the rail, its opener on top; with room it grows to show the labels */
.fold-rail-parts{display:flex;flex-direction:column;gap:6px}
.fold-band .fold-rail-parts,.fold-bottom .fold-rail-parts{flex-direction:row}
.fold-rail-has-kids::before{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);opacity:.55}
.fold-rail-opener{box-shadow:inset 0 -2px 0 var(--accent,#fb683e)}
.fold-rail-wide .fold-rail-left{max-height:calc(100vh - 140px);overflow-y:auto}
.fold-rail-wide .fold-rail-left .fold-rail-item{width:auto;min-width:200px;justify-content:flex-start;gap:10px;padding:0 12px}
.fold-rail-wide .fold-rail-left .fold-rail-tip{position:static;opacity:1;visibility:visible;transform:none;background:none;box-shadow:none;color:inherit;padding:0;
  font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;pointer-events:none}
/* 2.14.0 (owner 2026-11-01): top and bottom jumps; a menu at the top or bottom never slides under the header or the footer */
.fold-rail-up .icon{transform:rotate(-90deg)}.fold-rail-down .icon{transform:rotate(90deg)}
.fold-bottom .fold-rail{bottom:calc(var(--g-foot-h,0px) + 10px)!important}
.fold-band .fold-rail{max-height:calc(100vh - var(--g-foot-h,0px) - 90px)}
/* 2.15.0 (owner 2026-11-01): the page's state strip of the platform (public / signed-in / private) sits on the footer's top edge as tabs —
   no "ON AIR" any more; the lock opens the page's access settings; the login name only where nothing else shows who is signed in */
.gw-onair.fa-air{position:fixed!important;top:auto!important;right:auto!important;left:50%!important;bottom:var(--g-foot-h,0px)!important;transform:translateX(-50%)!important;
  z-index:44!important;display:flex!important;align-items:flex-end;gap:3px;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  background:none!important;box-shadow:none!important;border:0!important;animation:none!important}
.fa-air>*{display:inline-flex!important;align-items:center;gap:6px;min-height:28px;padding:3px 12px!important;border-radius:10px 10px 0 0!important;
  font:600 .78rem/1.2 system-ui,sans-serif;color:#fff!important;background:#5b6b7b;box-shadow:0 -2px 8px rgb(16 42 67 / .15)}
.gw-air-public.fa-air>*{background:#c62828}.gw-air-signed-in.fa-air>*{background:#9a5b00}.gw-air-private.fa-air>*{background:#5b6b7b}
.fa-air .gw-air-lock{cursor:pointer}.fa-air .gw-air-lock:focus-visible,.fa-air .fa-air-who:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.fa-air .fa-air-who{cursor:pointer;border:0;font:inherit}
.fa-air [hidden]{display:none!important}
@media print{.gw-onair{display:none!important}}

/* 2.27.0: Menüposition Links / Rechts — both rails in one column on that side; the page menu above, the tools below */
.fold-rail-col{position:fixed;top:50%;z-index:45;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 140px);transform:translateY(-50%)}
.fold-rail-col[hidden]{display:none}
.fold-rail-col-left{left:14px}
.fold-rail-col-right{right:14px;align-items:flex-end}
.fold-rail-col>.fold-rail{position:static;transform:none;animation:none;min-height:0}
.fold-rail-col>.fold-rail-right{flex:none}
.fold-rail-col-left .fold-rail-right .fold-rail-tip{left:calc(100% + 12px);right:auto}
.fold-rail-col-left .fold-rail-right .fold-rail-item[aria-current]::before{left:-9px;right:auto}
.fold-rail-col-right .fold-rail-left .fold-rail-tip{left:auto;right:calc(100% + 12px)}
.fold-rail-col-right .fold-rail-left .fold-rail-item[aria-current]::before{left:auto;right:-9px}
.fold-rail-col-right .fold-rail-wide .fold-rail-left .fold-rail-item,.fold-rail-wide .fold-rail-col-right .fold-rail-left .fold-rail-item{flex-direction:row-reverse}
/* 2.27.0: a long page menu never leaves the screen — the rail scrolls inside (it stood from y −235 to 992 on the site) */
.fold-rails:not(.fold-band):not(.fold-bottom) .fold-rail-left{max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.fold-rail-col>.fold-rail-left{max-height:none;flex:0 1 auto}
/* 2.28.0: a frame that cannot leave the header or footer is drawn inside */
/* 2.29.0 (owner 2026-11-01): the folded header keeps the row of pages (Werkstätten …) — logo-menu fits it to the room */
.fold-on header.top[data-folded] .lm-row{min-width:0}
/* 2.32.0 (owner 2026-11-01): the folded header thins out only its own row — the logo menu (its grid carries .wrap) stays the same panel */
.legal-view h1:focus{outline:none}   /* 2.32.0: the reader lands on the heading, the frame marks the text (legal.js 1.2.0) */
/* 2.34.0 (owner 2026-11-01): header and footer keep their size when they fold (only parts step back), the page does not bounce — what is
   docked stays one object at one place; the page's own pull part (pull.js) takes the pull at the top and past the end */
html{overscroll-behavior-y:none}
.fold-mono text{font-family:var(--sans,system-ui)}
/* legal.js 1.3.0: the § of the legal links on small footers */
.fa-legal-sign{display:none}
.fa-legal-small{position:relative}
.fa-legal-small .fa-legal-sign{display:inline-grid;place-items:center;min-width:44px;height:44px;touch-action:manipulation;position:relative;z-index:1;padding:0 10px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text);font:700 1.05rem/1 var(--sans,system-ui);cursor:pointer}
.fa-legal-small .fa-legal-sign[aria-expanded="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.fa-legal-small .fa-legal-sign:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fa-legal-small>ul{display:none!important}
.fa-legal-small.fa-legal-open>ul{display:flex!important;flex-direction:column;gap:2px;position:fixed;bottom:calc(100% + 8px);left:8px;z-index:2147482000;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgb(16 42 67 / .18);white-space:nowrap}
.fa-legal-small.fa-legal-open>ul a{display:block;padding:8px 12px;border-radius:10px}
/* 2.35.0: a snapped icon-only control shows its sign only — the language button's name (and its kept width) steps back */
[data-snap-state="icon"] .lang-label{display:none!important}
/* 2.35.0 (owner 2026-11-01, nothing moves): in the bottom layout the footer stands fixed at the very bottom and the bar right above it */
.fold-bottom body>footer{position:fixed!important;left:0;right:0;bottom:0;z-index:38}
/* 2.36.0 (owner 2026-11-01): ONE frame for every framed object — the same coral line, the same small space around the object, the same
   rounding; it never switches its form (no inner frame at the page edges any more: the page keeps room above the first object instead) */
:root{--frame-w:2px;--frame-gap:5px;--frame-r:14px}
[data-nav-focus]{position:relative;z-index:1;outline:var(--frame-w) solid var(--accent,#fb683e)!important;outline-offset:var(--frame-gap)!important;
  border-radius:var(--frame-r)!important;background-color:var(--surface)!important;box-shadow:0 0 0 var(--frame-gap) var(--surface),0 8px 24px rgb(16 42 67 / .12)!important}
/* 2.37.0 (owner 2026-11-01): less space outside, and the framed object lives in a card — the card's ground fills the small space up to the frame */
main>:first-child,.legal-view>:first-child{margin-top:calc(var(--frame-gap) + var(--frame-w) + 4px)}
@media print{[data-nav-focus]{outline:none!important}}
section[data-nav-focus]{border-color:transparent!important}   /* the separator line of a framed section steps back — one line only */
/* 2.38.0 (owner 2026-11-01): the sign-in (the account dock) stays in the folded header — the header keeps its size, there is room */
.fold-rail-account>a.fold-rail-item{display:none}   /* 2.38.0: the header shows the sign-in itself — not a second time in the rail */
/* 2.13.0 (owner 2026-11-01): legal stands on the right of the footer (links or §), π stays on the left; an open π lies over every bar
   (its footer's layer rises while it is open, like the § list) */
body>footer .wrap:has(a[data-legal]){display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2,8px) var(--s4,16px)}
body>footer nav:has(a[data-legal]){margin-inline-start:auto}
body>footer:has(details[data-gwydion-pi][open]){z-index:2147482000!important}
body>footer nav:has(a[data-legal]){display:flex;justify-content:flex-end;align-items:center}
body>footer nav:has(a[data-legal])>ul{margin-inline-start:auto}
/* 2.14.0 (owner 2026-11-01): an object that already carries a coloured stripe on its left shows its selection there — no frame around it
   (the cards in the sheets, the principles); the stripe turns to the accent and a little wider */
html.fa-pager main>.fa-sheet [data-nav-focus],.principles>li[data-nav-focus]{outline:none!important;box-shadow:none!important;border-left-color:var(--accent,#fb683e)!important;border-left-width:4px!important;border-left-style:solid!important}
html.fa-pager main>.fa-sheet>section[data-nav-focus]{border-color:var(--border)!important;border-left-color:var(--accent,#fb683e)!important}
/* 2.15.0: the lock and the page's state in the footer on the left (fold.js 2.40.0) — a coloured pill like the § and Lleu on the right */
.gw-onair.fa-air.fa-air-foot{position:static!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:auto!important;align-items:center;gap:4px;order:-1;flex:0 0 auto}
.fa-air.fa-air-foot>*{min-height:32px;padding:2px 12px!important;border-radius:999px!important;box-shadow:none;font-size:.8rem}
.fa-air.fa-air-foot .gw-air-lock{padding:2px 10px!important}
.fa-air.fa-air-foot .gw-air-lock svg{width:16px;height:16px}
@media (max-width:600px),(max-height:500px) and (pointer:coarse){.fa-air.fa-air-foot>*{min-height:32px;font-size:.78rem}.fa-air.fa-air-foot .fa-air-who{display:none!important}}
/* 2.15.0: one pill — lock first, then the state word, the pill in the state's colour */
.gw-onair.fa-air.fa-air-foot{border-radius:999px!important;padding:0 6px!important;gap:0;min-height:32px;color:#fff}
.gw-air-public.fa-air.fa-air-foot{background:#c62828!important}.gw-air-signed-in.fa-air.fa-air-foot{background:#9a5b00!important}.gw-air-private.fa-air.fa-air-foot{background:#5b6b7b!important}
.fa-air.fa-air-foot>*{background:transparent!important;padding:2px 6px!important;min-height:32px}
.fa-air.fa-air-foot .gw-air-lock{order:-1;padding-right:0!important}
/* 2.16.0 (owner 2026-11-01: the "i" appeared at the bottom right over legal while scrolling): the explain switch belongs in the header on the
   right — it stays there when the header folds and never floats */
.dock-explain .gx-float,.dock-explain button.g-docked-explain{position:static!important;inset:auto!important;transform:none!important;margin:0!important;z-index:auto!important}
/* 2.17.0 (owner 2026-11-01: the icon menu on the left did not look good): the side rail as a calm column of tiles — stronger signs, the
   section on screen marked (tint + bar), the sub-menu hint a dot inside the tile, the up/down arrows small between two hairlines */
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left{gap:4px;padding:8px 6px;border-radius:18px}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-parts{display:flex;flex-direction:column;gap:4px;padding:4px 0;border-block:1px solid var(--border)}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-line{display:none}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item{width:44px;height:44px;border-radius:12px;color:color-mix(in srgb,var(--text) 78%,var(--muted))}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item svg{width:22px;height:22px;stroke-width:2}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-text,var(--accent))}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item:is([data-gw-card],[aria-current]){background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text,var(--accent))}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item:is([data-gw-card],[aria-current])::after{content:"";position:absolute;left:-7px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-has-kids::before{right:5px;bottom:5px;width:5px;height:5px;border:0;border-radius:50%;background:currentColor;transform:none;opacity:.6}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left :is(.fold-rail-up,.fold-rail-down){height:28px;color:var(--muted)}
.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left :is(.fold-rail-up,.fold-rail-down) svg{width:16px;height:16px}
@media (forced-colors:active){.fold-rails:not(.fold-bottom):not(.fold-band) .fold-rail-left .fold-rail-item:is([data-gw-card],[aria-current]){outline:2px solid Highlight}}
/* 2.18.0 (legal.js 1.5.0): the legal text in full view is one layer over everything — nothing behind it scrolls or opens */
html.gw-legal-open,html.gw-legal-open body{overflow:hidden!important}
html.gw-legal-open body main,html.gw-legal-open.fa-pager body main{display:none!important}
html.gw-legal-open .legal-view{position:fixed;left:0;right:0;top:0;bottom:0;z-index:30;max-width:none;margin:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--bg,#fff);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
html.gw-legal-open .legal-view>*{max-width:70ch;margin-inline:auto}
html.gw-legal-open .legal-view .legal-back{position:sticky;top:0;z-index:1;margin:0 auto 12px;padding:8px 0;background:var(--bg,#fff)}
html.gw-legal-open .legal-view .legal-back a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:999px;font-weight:600;text-decoration:none}
html.gw-legal-open :is(.fold-rail-left,.fold-rail-col,.fa-pager-bar,.fa-board,.fa-edge,.fa-act-panel,.gw-folder-pop,.carousel-bar,.fa-pull,.fa-pull-ground,.gw-path-side){display:none!important}
/* 2.24.0 (owner 2026-11-01: Lleu did not work on the privacy page): Lleu, his button, the tools, the object menu of a long press and the
   notices stay with a legal text and stand above it (before they were hidden — the long-press menu opened invisibly) */
html.gw-legal-open :is(.fold-rail-right,[data-gwydion-seed],.dock-lleu){z-index:39!important}
html.gw-legal-open .lleu-panel{z-index:1001!important}
html.gw-legal-open :is(.gw-refmenu,.fa-notice){z-index:1002!important}
html.gw-legal-open .legal-view{padding-bottom:calc(max(32px,env(safe-area-inset-bottom)) + 96px)}
/* 2.19.0 (legal.js 1.6.0, owner 2026-11-01): the legal text opens in the page — header and footer stay, the text scrolls between them;
   the plain explanation in levels above it */
html.gw-legal-open body>footer{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:38}
html.gw-legal-open header.top{position:relative;z-index:40}
.legal-explain{margin:0 auto 18px;padding:14px 16px;border:1px solid var(--border);border-left:4px solid var(--accent,#fb683e);border-radius:14px;background:var(--surface,#fff)}
.legal-explain h2{margin:0 0 8px;font-size:1.05rem}
.legal-explain p{margin:.35em 0;max-width:62ch}.legal-explain .legal-gap{margin:.2em 0}
.legal-explain[data-level="1"] p{font-size:1.15rem;line-height:1.7}
.legal-levels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.legal-levels button{min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface,#fff);color:var(--text);font:600 .85rem/1 var(--sans,system-ui);cursor:pointer}
.legal-levels button:disabled{opacity:.4;cursor:default}
.legal-level-now{padding:4px 10px;border-radius:999px;background:var(--action);color:var(--on-action);font-weight:700;font-size:.85rem}
.legal-draft{display:inline-block;padding:3px 8px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:.8rem}
.legal-binding-note{margin-top:10px!important;color:var(--muted);font-size:.85rem}
/* 2.19.0 (owner 2026-11-01: the error question opened under the header or the footer and could not be answered): the question about an
   error report stands in the middle, the page behind is dimmed and does not take presses — it is answered with yes or no (or a reload) */
.gwydion-report{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;
  z-index:2147483200!important;width:min(480px,calc(100vw - 24px))!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;margin:0!important}
html:has(.gwydion-report:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:2147483100;background:rgb(16 42 67 / .5)}
/* the education ladder (levels.js) in any levelled box */
.lv-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.lv-stepper button{min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface,#fff);color:var(--text);font:600 .85rem/1 var(--sans,system-ui);cursor:pointer}
.lv-stepper button:disabled{opacity:.4;cursor:default}.lv-stepper button:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.lv-now{padding:6px 12px;border-radius:999px;background:var(--action);color:var(--on-action);font-weight:700;font-size:.85rem}
.lv-note{margin:0 0 8px;padding:6px 10px;border-radius:8px;background:var(--info-bg,#e5eef4);color:var(--info,#2c5b7a);font-size:.82rem}
.lv-hint{flex-basis:100%;color:var(--muted);font-size:.8rem}
/* 2.20.0 (view.js 1.0.0, owner 2026-11-01: a further menu point, not a pop-up): a view in the page between the header and the bars */
html.gw-view-open,html.gw-view-open body{overflow:hidden!important}
html.gw-view-open body main,html.gw-view-open.fa-pager body main{visibility:hidden!important;pointer-events:none!important}   /* hidden, not removed: the sheets and the menu keep their state under the view */
html.gw-view-open :is(.fa-pager-bar,.fa-board,.fa-edge,.fa-pull,.fa-pull-ground,.carousel-bar){display:none!important}
.gw-view{position:fixed;left:0;right:0;top:0;bottom:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg,#fff);
  padding:8px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));box-sizing:border-box}
.gw-view>*{max-width:min(100rem,100%);margin-inline:auto}
.gw-view-back{position:sticky;top:0;z-index:1;margin:0 auto 10px;padding:6px 0;background:var(--bg,#fff)}
.gw-view-back button{min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface,#fff);color:var(--text);font:600 .9rem/1 var(--sans,system-ui);cursor:pointer}
.gw-view .pr-inview,.gw-view .fb-inview{position:static!important;transform:none!important;animation:none!important;width:auto!important;max-width:900px;max-height:none!important;margin:0 auto;box-shadow:none!important;border-width:1px!important;border-color:var(--border)!important}
/* 2.20.0 (owner 2026-11-01: much room on the screen is to be used — optimal visibility): on large screens the type grows with the
   window (16 px at 1500 px up to 20 px), so the page fills the space readably instead of floating small in the middle */
@media (min-width:1500px){html{font-size:clamp(16px,calc(8px + .55vw),20px)}}
.gw-view>*{max-width:min(72rem,100%)!important}
.fold-rails:not(.fold-bottom):not(.fold-band) .gw-view{padding-left:max(88px,env(safe-area-inset-left));padding-right:max(88px,env(safe-area-inset-right))}
.gw-view :is(h1,h2):focus{outline:none}
/* 2.22.0 (owner 2026-11-01: in a sub-menu on the left the parent and its entries must stand apart): the parent is a tinted tile with a
   frame and a line below it; its entries stand indented, a little smaller, joined by a guide line on their left */
.fold-rails:not(.fold-bottom) .fold-rail-left .fold-rail-back{height:30px;color:var(--muted)}
.fold-rails:not(.fold-bottom) .fold-rail-left .fold-rail-opener{background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-text,var(--accent));margin-bottom:10px;overflow:visible}
.fold-rails:not(.fold-bottom) .fold-rail-left .fold-rail-opener::before{content:"";position:absolute;left:6px;right:6px;bottom:-7px;height:1.5px;border-radius:2px;background:color-mix(in srgb,var(--accent) 40%,var(--border));top:auto;width:auto}
.fold-rails:not(.fold-bottom) .fold-rail-left .fold-rail-opener~.fold-rail-section{width:38px;height:38px;margin-left:6px;border-radius:0 10px 10px 0;box-shadow:inset 2px 0 0 color-mix(in srgb,var(--accent) 35%,var(--border))}
.fold-rails:not(.fold-bottom) .fold-rail-left .fold-rail-opener~.fold-rail-section svg{width:19px!important;height:19px!important}
.fold-rail-wide .fold-rail-left .fold-rail-opener~.fold-rail-section{width:auto;min-width:180px;padding-left:16px}
/* 2.23.0 (fold.js 2.44.0): the explanation depth in the page menu */
.fold-fly-depth .fold-pop-branch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.fold-fly-depth .fold-pop-branch small{font-weight:400;font-size:.72rem;color:var(--muted)}
.fold-fly-hint{margin:8px 4px 0;font-size:.78rem;color:var(--muted)}
/* 2.24.1: the closed seed hides its own sign only once the speech bubble is there (fold.js 2.45.1) */
/* 2.25.0 (1018c-Q872 a): on a phone-wide window the footer is calm — the lock pill shows only its lock (the state word stays for screen
   readers), and with Lleu there the round feedback bubble steps back (feedback stays in the account menu and in the help) */
@media (max-width:600px){
  .gw-onair.fa-air.fa-air-foot{padding:0!important;min-width:32px;justify-content:center}
  .fa-air.fa-air-foot>:not(.gw-air-lock){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0!important}
  .fa-air.fa-air-foot .gw-air-lock{padding:2px 8px!important}
  html:has(button[data-gwydion-seed]) body>footer .fb-open{display:none!important}
}
/* 2.26.0 (owner 2026-11-02): on a phone the footer's buttons are one family — lock, § and Lleu as round 40px buttons on the same calm
   surface, the footer itself without a band of its own */
@media (max-width:600px){
  html.fold-bottom body>footer{background:transparent!important;border-top:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.fold-bottom body>footer .wrap{align-items:center}
  html.fold-bottom body>footer .dock-lleu button.gw-seed,html.fold-bottom body>footer .fa-legal-small .fa-legal-sign,html.fold-bottom .gw-onair.fa-air.fa-air-foot,
  html.fold-bottom body>footer details[data-gwydion-pi]>summary{
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;box-sizing:border-box;
    display:inline-flex!important;align-items:center;justify-content:center;box-shadow:0 4px 14px rgb(16 42 67 / .18)!important}
  html.fold-bottom body>footer .dock-lleu button.gw-seed,html.fold-bottom body>footer .fa-legal-small .fa-legal-sign,html.fold-bottom body>footer details[data-gwydion-pi]>summary{
    border:1px solid color-mix(in srgb,#fff 55%,var(--border))!important;background:color-mix(in srgb,var(--surface,#fff) 72%,transparent)!important;
    -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px)}
  html.fold-bottom body>footer .dock-lleu button.gw-seed>svg{width:20px!important;height:20px!important}
}
@media (max-width:600px) and (prefers-color-scheme:dark){
  html.fold-bottom body>footer .dock-lleu button.gw-seed,html.fold-bottom body>footer .fa-legal-small .fa-legal-sign{border-color:rgb(255 255 255 / .14)!important}
}