/* widget-home.css — the iPad's widget home (widget-home.js 0.1.0, 1018c-Q904 A+B): pages of rounded widgets between the header and the floating dock,
   page dots above the dock, the part opened big out of its widget as a dialog. Light and dark from the site's tokens; blur with a solid fallback.
   0.2.0 (1018c-Q904): the cards of Lleu and „Mehr“ as widgets; Lleu opened big fills the dialog and scrolls inside himself.
   version: 0.2.0 · created 2026-11-02 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
:root{--gw-w-bg:var(--surface,#fff);--gw-w-edge:color-mix(in srgb,var(--text,#102a43) 10%,transparent);--gw-w-shadow:0 1px 2px rgb(16 42 67 / .06),0 10px 28px rgb(16 42 67 / .10);
  --gw-w-item:color-mix(in srgb,var(--text,#102a43) 5%,var(--surface,#fff));--gw-w-scrim:rgb(16 42 67 / .30)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="whiteboard"]){--gw-w-edge:color-mix(in srgb,#fff 12%,transparent);
  --gw-w-shadow:0 1px 2px rgb(0 0 0 / .3),0 12px 30px rgb(0 0 0 / .35);--gw-w-item:color-mix(in srgb,#fff 6%,var(--surface,#162f4a));--gw-w-scrim:rgb(0 0 0 / .5)}}
:root[data-theme="dark"],:root[data-theme="tafel"]{--gw-w-edge:color-mix(in srgb,#fff 12%,transparent);--gw-w-shadow:0 1px 2px rgb(0 0 0 / .3),0 12px 30px rgb(0 0 0 / .35);
  --gw-w-item:color-mix(in srgb,#fff 6%,var(--surface,#162f4a));--gw-w-scrim:rgb(0 0 0 / .5)}
/* main stays laid out but unseen: the menus read its parts from it (fold.js counts only parts with a box) */
html.gw-widgets main{visibility:hidden!important;position:fixed!important;left:0!important;top:0!important;width:100%!important;height:0!important;overflow:hidden!important;pointer-events:none!important;z-index:-1!important}
html.gw-widgets,html.gw-widgets body{overflow:hidden;height:100%;overscroll-behavior:none}
html.gw-widgets .fa-board,html.gw-widgets .fa-edge,html.gw-widgets .fa-pager-bar{display:none!important}
.gw-wh{position:fixed;top:var(--sheet-top,64px);bottom:var(--sheet-bottom,90px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);z-index:3;
  display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif}
.gw-wh[hidden]{display:none}
.gw-wh-pages{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
html.gw-zoomed .gw-wh-pages{touch-action:auto}   /* zoomed in, the finger pans the zoom freely */
.gw-wh-pages.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.gw-wh-track{display:flex;height:100%;will-change:transform}   /* moved by widget-home.js page by page (transform), never by free scrolling */
.gw-wh-page{flex:0 0 100%;box-sizing:border-box;display:grid;align-content:center;justify-content:center}
/* the dots above the dock, in a small capsule like the iPad's */
.gw-wh-dots{flex:none;align-self:center;display:flex;align-items:center;gap:0;height:24px;margin:2px 0 4px;padding:0 6px;border-radius:12px;
  background:color-mix(in srgb,var(--surface,#fff) 60%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gw-wh-dots[hidden]{display:none}
.gw-wh-dot{position:relative;width:20px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.gw-wh-dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--text,#102a43) 28%,transparent);transition:background-color .2s}
.gw-wh-dot[aria-current]::after{background:var(--text,#102a43)}
.gw-wh-dot:focus-visible{outline:2px solid var(--focus,#2563eb);outline-offset:-2px;border-radius:8px}
/* a widget */
.gw-widget{position:relative;min-width:0;min-height:0;border-radius:22px;background:var(--gw-w-bg);border:.5px solid var(--gw-w-edge);box-shadow:var(--gw-w-shadow);
  color:var(--text,#102a43);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.gw-widget:active{transform:scale(.985)}
.gw-widget.is-open{visibility:hidden}
.gw-widget-body{position:absolute;inset:0;box-sizing:border-box;padding:16px 18px 14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.gw-widget-h{display:flex;align-items:center;gap:8px;margin:0 46px 10px 0;font-size:1.05rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.gw-widget-h svg{flex:none;width:22px;height:22px;color:var(--accent-text,var(--accent,#fb683e))}
.gw-widget-p,.gw-widget-p *{margin:0;font-size:.92rem;line-height:1.4;color:var(--muted,#486581)}
.gw-widget-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gw-widget-items li{min-width:0;font-size:.88rem;line-height:1.3;color:var(--text,#102a43)}
.gw-widget-items li *{margin:0;font-size:inherit;line-height:inherit}
.gw-widget-items li h3,.gw-widget-items li h4,.gw-widget-items li strong,.gw-widget-items li b{font-weight:650}
.gw-widget-items li p{color:var(--muted,#486581)}
.gw-widget-items li time{font-variant-numeric:tabular-nums;color:var(--muted,#486581);margin-right:4px}
.gw-widget-items li span:first-child:not(:only-child){display:inline-block;margin-right:6px;font-size:.75rem;font-weight:600;color:var(--muted,#486581)}
.gw-widget[data-size="l"] .gw-widget-items{gap:8px}
.gw-widget[data-size="l"] .gw-widget-items li{padding:9px 12px;border-radius:14px;background:var(--gw-w-item)}
.gw-widget[data-size="l"] .gw-widget-items li h3,.gw-widget[data-size="l"] .gw-widget-items li h4{display:block;font-size:.95rem}
.gw-widget[data-size="s"] .gw-widget-h{font-size:.95rem;margin-right:40px}
.gw-widget-more{position:absolute;right:16px;bottom:10px;margin:0;font-size:.75rem;font-weight:600;color:var(--muted,#486581)}
.gw-widget-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gw-widget-open:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:-3px}
.gw-widget .gw-widget-q{top:10px;right:10px;z-index:2}
/* the part opened big out of its widget */
.gw-wh-scrim{position:fixed;inset:0;z-index:60;background:var(--gw-w-scrim);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.gw-wh-scrim{background:color-mix(in srgb,var(--gw-w-scrim) 160%,transparent)}}
.gw-wh-dlg{position:fixed;z-index:61;top:calc(var(--sheet-top,64px) + 8px);bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--vv-gap,0px));
  left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));max-width:1100px;margin-inline:auto;display:flex;flex-direction:column;
  border-radius:26px;background:var(--surface,#fff);color:var(--text,#102a43);border:.5px solid var(--gw-w-edge);box-shadow:0 30px 80px rgb(16 42 67 / .32);overflow:hidden;transform-origin:0 0;outline:none}
.gw-wh-dlg-bar{position:relative;flex:none;display:flex;align-items:center;justify-content:flex-end;min-height:48px;padding:6px 10px 0;cursor:grab;touch-action:none}
html[data-ctl-side="left"] .gw-wh-dlg-bar{justify-content:flex-start}
.gw-wh-grab{position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,var(--text,#102a43) 22%,transparent)}
.gw-wh-close{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--text,#102a43) 8%,transparent);color:var(--text,#102a43);cursor:pointer}
.gw-wh-close:hover{background:color-mix(in srgb,var(--text,#102a43) 14%,transparent)}
.gw-wh-close:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.gw-wh-dlg:focus-visible{box-shadow:0 0 0 3px var(--focus,#2563eb),0 30px 80px rgb(16 42 67 / .32)}
.gw-wh-dlg-body{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 clamp(18px,3vw,36px) 28px}
.gw-wh-dlg-body>*{position:relative;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;transform:none!important}
.gw-wh-dlg-body>*>.gw-lp-mark{display:none!important}   /* its „?“ stands in the bar */
.gw-wh-dlg-bar .gw-wh-q{position:relative;top:auto;right:auto;opacity:1;margin-inline:6px;width:40px;height:34px;font-weight:700;color:var(--muted,#486581)}
html[data-ctl-side="left"] .gw-wh-dlg-bar .gw-wh-q{order:2}
@media (prefers-reduced-transparency:reduce){.gw-wh-dots,.gw-wh-scrim{-webkit-backdrop-filter:none;backdrop-filter:none}.gw-wh-dots{background:var(--surface,#fff)}}
@media (prefers-reduced-motion:reduce){.gw-widget{transition:none}.gw-widget:active{transform:none}.gw-wh-dot::after{transition:none}}
@media (prefers-contrast:more){.gw-widget,.gw-wh-dlg{border:1px solid var(--text,#102a43)}.gw-wh-dot::after{background:var(--muted,#486581)}.gw-wh-dot[aria-current]::after{background:var(--text,#102a43)}}
@media (forced-colors:active){.gw-widget,.gw-wh-dlg,.gw-wh-dots{border:1px solid CanvasText}.gw-wh-dot::after{background:GrayText;forced-color-adjust:none}.gw-wh-dot[aria-current]::after{background:Highlight}}
/* 0.2.0: Lleu opened big takes the whole dialog, his panel scrolls itself */
.gw-wh-dlg-body:has(>.gw-card-lleu){display:flex;flex-direction:column;overflow:hidden}
.gw-wh-dlg-body>.gw-card-lleu{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.gw-wh-dlg-body>.gw-card>.gw-card-head{margin-top:2px}