/* modules.css — modules of the Gwydion 2.0 styleguide (gwydion-designsystem rev 38, styleguide/friendly-apps) on the dev-pe start page:
   hero (hero-text, hero-lead, hero-vis), section bar (tabs with rail-item icons), widget areas as cards (acard look), "shorten visibly".
   1.0.0 (PLAN-1031-tagchef-suche T3, 1018c-Q705 "A, enhanced with modules of C"): the styleguide surfaces (--sg-*) are mixed from this
   site's own colour tokens (site.css 0.5.0, widgets.css themes), so light, dark and the chosen theme follow without new colours.
   Only in project site; site.css stays the identical copy shared with friendly-apps-home.
   version: 1.0.2 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */
:root{--sg-radius-l:16px;--sg-radius-xl:28px;--sg-shadow:0 8px 24px #0000001f;
  --sg-hero:color-mix(in srgb,var(--action) 5%,var(--surface));--sg-tonal:color-mix(in srgb,var(--action) 7%,var(--surface));
  --sg-pill:color-mix(in srgb,var(--action) 16%,var(--surface));--sg-vis:color-mix(in srgb,var(--action) 18%,var(--surface));--tabs-h:72px}
body.ws{overflow-x:hidden}
body.ws .wrap{max-width:1440px;padding-inline:clamp(16px,4vw,64px)}
body.ws main section{padding-block:0}body.ws main section+section{border-top:0}

/* header: the friendly-apps-home markup; the platform dock (Lleu, Pi, account) sits at its end */
header.top .wrap{gap:var(--s3) var(--s5)}
header.top nav{min-width:0}
header.top .brand{min-width:0;max-width:16rem}
.dock{display:flex;align-items:center;gap:var(--s2)}.dock:empty{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .brand picture img{filter:none}}   /* the picture already switches to the dark mark */

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);align-items:stretch;margin-top:var(--s5)}
.hero-text{background:var(--sg-hero);border-radius:var(--sg-radius-xl);padding:clamp(24px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center;min-height:300px;min-width:0}
.hero .display{font-weight:700;font-size:clamp(2.25rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 var(--s5);overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
.hero-lead{font-size:var(--t-h3);line-height:1.4;color:var(--text);margin:0 0 var(--s5);max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0}.hero-cta .cta.ghost{margin-left:0;background:var(--surface)}
.hero-vis{position:relative;overflow:hidden;border-radius:var(--sg-radius-xl);background:var(--sg-vis);min-height:240px;display:grid;place-items:center}
.blob{position:absolute;border-radius:50%;animation:drift 9s ease-in-out infinite alternate}
.b1{width:46%;aspect-ratio:1;left:-8%;top:-12%;background:color-mix(in srgb,var(--action) 30%,transparent)}
.b2{width:34%;aspect-ratio:1;right:-6%;bottom:-10%;background:color-mix(in srgb,var(--accent) 35%,transparent);animation-duration:11s}
@keyframes drift{to{transform:translate(6%,8%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}
.disc{position:relative;width:min(56%,300px);aspect-ratio:1;border-radius:50%;background:var(--bg);display:grid;place-items:center;box-shadow:var(--sg-shadow)}
.disc picture,.disc img{display:block;width:62%;height:auto;margin:auto}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.hero-text,.hero-vis{min-height:420px}}

/* section bar: styleguide tabs, items with the rail-item icon pill; sticky under the header */
.tabs-bar{position:sticky;top:0;z-index:4;background:var(--bg);padding-block:var(--s2);margin-top:var(--s2)}
.tabs{display:flex;background:var(--sg-tonal);border-radius:999px;padding:var(--s1);gap:var(--s1)}
.tabs a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:56px;padding:0 var(--s3);border-radius:999px;color:var(--text);text-decoration:none;text-transform:none;letter-spacing:0;font-size:var(--t-base);transition:background var(--dur)}
.tabs a:hover{background:color-mix(in srgb,var(--action) 10%,transparent);color:var(--text)}
.tabs a[aria-current]{background:var(--sg-pill);font-weight:700}
.tabs .ic{display:grid;place-items:center;flex:none;color:var(--text)}
#tools,.w-widget{scroll-margin-top:calc(var(--tabs-h) + var(--s4))}

/* widget areas as cards (acard look) */
.w-toolbar{padding:var(--s6) 0 var(--s5)}.w-toolbar h2{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;letter-spacing:-.03em}
.w-widget{background:var(--sg-tonal);border:0;border-radius:var(--sg-radius-xl);box-shadow:none;transition:box-shadow var(--dur)}
.w-widget:hover{box-shadow:inset 0 0 0 2px var(--sg-pill)}
.w-widget-head{border-bottom:1px solid color-mix(in srgb,var(--action) 14%,transparent);padding:var(--s4) var(--s5)}
.w-widget-head h2{font-size:var(--t-base);font-weight:700}
.w-widget .w-content{padding:var(--s5)}
.w-widget .w-empty{background:var(--surface);border-radius:var(--sg-radius-l)}
.w-widget .w-welcome{background:var(--sg-hero);border-radius:0 0 var(--sg-radius-xl) var(--sg-radius-xl)}
.w-section-heading{padding:var(--s7) 0 var(--s5)}

/* footer */
body.ws footer{margin-top:var(--s7)}

/* shorten visibly: one line with an ellipsis and a dotted underline; the full text in the title, on focus and on click or Enter */
.clip,.w-widget-head h2,.w-project-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.w-project-title{display:block;max-width:100%}
[data-clipped]{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
[data-clipped][data-open],a:focus-visible>[data-clipped],[data-clipped]:focus-visible{white-space:normal;overflow:visible;overflow-wrap:anywhere}

/* phone */
@media (max-width:44rem){
  header.top nav ul{gap:0 var(--s3)}
  .hero-text{min-height:0}.hero-vis{min-height:160px}.disc{width:min(40%,160px)}
  .tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--sg-radius-xl)}.tabs a{min-height:44px;font-size:var(--t-small);border-radius:var(--sg-radius-l)}
  :root{--tabs-h:120px}
  .w-widget-head{padding:var(--s3) var(--s4)}.w-widget .w-content{padding:var(--s4)}
}

/* tile pages (owner 2026-10-31): the tile title links to the tile's own page */
.w-widget-head h2 .w-tile-link{color:inherit;text-decoration:none}
.w-widget-head h2 .w-tile-link:hover,.w-widget-head h2 .w-tile-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.w-single-page{padding-block:var(--s5) var(--s7)}.w-single-page h1{margin:var(--s4) 0}
/* small surfaces (owner 2026-10-31): the big logo and the text adapt — the picture becomes a low band, the heading scales with the width */
@media (max-width:40rem){
  .hero .display{font-size:clamp(1.75rem,9vw,2.6rem)}
  .hero-lead{font-size:clamp(1rem,4.4vw,1.25rem)}
  .hero-text{padding:clamp(20px,6vw,40px)}
  .hero-vis{min-height:0;height:clamp(96px,30vw,180px)}
  .disc{width:clamp(72px,22vw,140px);height:auto}
}
.lleu-page-back{margin:var(--s4) 0 0}.lleu-page-back a{font-weight:600;text-decoration:none}.lleu-page-back a:hover{text-decoration:underline}
/* density: compact (owner 2026-10-31) — the styleguide surfaces follow the spacing tokens in the smallest view */
@media (max-width:34rem){:root{--sg-radius-l:12px;--sg-radius-xl:18px;--tabs-h:56px}
  .w-grid{gap:var(--s3)!important}.w-widget-head{padding:var(--s2) var(--s4)!important}.w-widget .w-content{padding:var(--s4)!important}
  .hero{margin-top:var(--s3);gap:var(--s2)}.hero-text{padding:var(--s5);min-height:0}.hero .display{margin-bottom:var(--s4)}.hero-lead{margin-bottom:var(--s4)}}
/* 1.1.0 (owner 2026-10-31): section pages — "Werkstatt" shows everything; a section opens alone under the bar, the hero and the rest step
   back; the bar stands right under the (folded) top bar */
.tabs-bar{top:var(--head-h,0px)}
main[data-tab] .hero,main[data-tab] #workspace-toolbar{display:none}
main[data-tab="workbench"] #widget-main>:not(#workbench),main[data-tab="logbook"] #widget-main>:not(#logbook){display:none}
main[data-tab="workbench"] #tools,main[data-tab="workbench"] #widget-tools,main[data-tab="logbook"] #tools,main[data-tab="logbook"] #widget-tools{display:none}
main[data-tab="tools"] #widget-main{display:none}
main[data-tab] #widget-main>.w-widget{grid-column:1/-1}
main[data-tab] .tabs-bar{margin-top:0}
@media (max-width:34rem){.tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.tabs a{flex-direction:column;gap:2px;min-height:54px;padding:4px;font-size:.72rem}.tabs a .clip{text-overflow:clip}}
/* smallest view (owner 2026-10-31): the header carries the logo already — the big logo picture beside the welcome steps back */
@media (max-width:34rem){.hero-vis{display:none}.hero{grid-template-columns:minmax(0,1fr)}}
/* 1018c-Q756 b: below the logo disc its construction drawing */
.hero-vis .disc:has(.plan){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.hero-vis .disc:has(.plan)>picture:first-child img{width:min(46%,150px);height:auto}
.hero-vis .plan{width:44%;opacity:.85}.hero-vis .plan img{display:block;width:100%;height:auto}