/* site.css — the dev-pe site (seed 1015b-Q37 c), the style sheet of friendly-apps-home rev 2 (1013c-Q86 a) renamed: /style.css is publish's own.
   0.3.0 (Pascal 2026-10-19 "one site in two places"): the ONE style sheet of dev-pe (project site) and friendly-apps.de (project
   friendly-apps-home holds an identical copy) — change both together; the current page in the menu is marked (aria-current).
   0.4.0 (PLAN-1019-link-save carrier 5, 1018c-Q60 a): the News list (#news, news.js) reuses the logbook list .log; host and note muted.
   0.5.0 (1018c-Q619, Q617, owner 2026-10-30 "Friendly Apps hat noch nicht die neue Optik"): the Friendly Apps look of the design system —
   navy, coral #FB683E, Wolke; the new two-leaf mark; Open Sauce One (SIL OFL 1.1, self-hosted in schriften/).
   version: 0.10.0 · created 2026-10-15 by Pascal Ehlig, ITS · edited 2026-10-30 by Pascal Ehlig, ITS */
@font-face{font-family:"Open Sauce One";src:url("schriften/open-sauce-one/OpenSauceOne-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url("schriften/open-sauce-one/OpenSauceOne-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url("schriften/open-sauce-one/OpenSauceOne-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --bg:#f6fafc; --surface:#ffffff; --sunken:#eaf2f7; --border:#d9e6ee; --text:#102a43; --muted:#486581;
  --action:#102a43; --on-action:#ffffff; --link:#c2410c; --focus:#c2410c; --accent:#fb683e; --accent-text:#b03f12; --line:#fb683e;
  --ok:#1e6b45; --ok-bg:#e2f2e8; --warn:#7a5200; --warn-bg:#fbf0d9; --info:#2c5b7a; --info-bg:#e5eef4;
  --sans:"Open Sauce One",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t-small:.8rem; --t-base:1rem; --t-h3:1.25rem; --t-h2:1.5625rem; --t-h1:1.9531rem; --t-display:2.4414rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --r:10px; --dur:180ms;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1d2e; --surface:#162f4a; --sunken:#08172a; --border:#243b53; --text:#eaf4f8; --muted:#9fb3c8;
  --action:#fb683e; --on-action:#0b1d2e; --link:#ff9a7f; --focus:#ff9a7f; --accent:#fb683e; --accent-text:#ff9a7f; --line:#ff9a7f;
  --ok:#7fd1a1; --ok-bg:#163024; --warn:#f0c878; --warn-bg:#33270f; --info:#9cc6e6; --info-bg:#15283a; color-scheme:dark}}
/* owner 2026-11-01: dark and light by choice too (π › Ansicht › Farbe), the choice wins over the system */
:root[data-theme="dark"]{
  --bg:#0b1d2e; --surface:#162f4a; --sunken:#08172a; --border:#243b53; --text:#eaf4f8; --muted:#9fb3c8;
  --action:#fb683e; --on-action:#0b1d2e; --link:#ff9a7f; --focus:#ff9a7f; --accent:#fb683e; --accent-text:#ff9a7f; --line:#ff9a7f;
  --ok:#7fd1a1; --ok-bg:#163024; --warn:#f0c878; --warn-bg:#33270f; --info:#9cc6e6; --info-bg:#15283a; color-scheme:dark}
@media (prefers-reduced-motion: reduce){:root{--dur:0ms}}
/* density (owner 2026-10-31: the empty spaces smaller in the smallest view) — the spacing tokens themselves get a compact step, so every
   part built on them follows; parts with their own sizes take them from here, not from fixed values */
@media (max-width:34rem){:root{ /* density: compact */
  --s2:6px; --s3:8px; --s4:12px; --s5:14px; --s6:16px; --s7:20px; --s8:28px; --r:9px;
  --t-h3:1.125rem; --t-h2:1.375rem; --t-h1:1.6rem; --t-display:2rem }}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--t-base)/1.6 var(--sans)}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s4);top:var(--s4);background:var(--surface);padding:var(--s2) var(--s3);z-index:5}
.wrap{max-width:68rem;margin:0 auto;padding-inline:var(--s4)}
header.top{border-bottom:1px solid var(--border);background:var(--surface)}
header.top .wrap{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-block:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;text-decoration:none;color:var(--text)}
.brand svg{width:32px;height:32px;color:var(--action)}.brand picture img{display:block;width:32px;height:auto}
nav ul{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-size:var(--t-small);text-transform:uppercase;letter-spacing:.06em;padding-block:var(--s2);display:inline-block}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--text);font-weight:700}
.lang{margin-left:auto;display:flex;gap:var(--s1)}
.lang button{min-height:32px;min-width:44px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r);font:inherit;font-size:var(--t-small);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.draft{background:var(--warn-bg);color:var(--warn);font-size:var(--t-small);text-align:center;padding:var(--s2) var(--s4)}
main section{padding-block:var(--s7)}
main section+section{border-top:1px solid var(--border)}
.hero{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s6);align-items:center}
.hero h1{font-size:var(--t-display);line-height:1.15;margin:0 0 var(--s4);text-wrap:balance}
.hero p.lead{font-size:var(--t-h3);color:var(--muted);margin:0 0 var(--s5);max-width:38ch}
.seed{color:var(--line);width:100%;max-width:18rem;justify-self:center}.seed img{display:block;width:100%;height:auto}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);border-radius:var(--r);background:var(--action);color:var(--on-action);text-decoration:none;font-weight:600}
.cta[hidden],main section[hidden]{display:none}
.cta.ghost{background:transparent;color:var(--link);border:1px solid var(--border);margin-left:var(--s2)}
h2{font-size:var(--t-h2);margin:0 0 var(--s2);text-wrap:balance}
.sub{color:var(--muted);margin:0 0 var(--s5);max-width:62ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:var(--s4)}
.card{padding:var(--s4);gap:var(--s2)}   /* the look: card.css */
.card h3{font-size:var(--t-h3);margin:0}
.card p{margin:0;color:var(--muted)}
.pill{align-self:flex-start;font-size:var(--t-small);border-radius:999px;padding:2px var(--s3);font-weight:600}
.pill.live{background:var(--ok-bg);color:var(--ok)}.pill.work{background:var(--warn-bg);color:var(--warn)}.pill.plan{background:var(--info-bg);color:var(--info)}
.example{font-size:var(--t-small);color:var(--accent-text)}
.tools{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.tools li{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--t-small)}
.log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.log li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s3)}
.log time{font-family:var(--mono);font-size:var(--t-small);color:var(--muted);font-variant-numeric:tabular-nums}
.log .gw-logbook{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.log .gw-logbook-entry>:not(time){grid-column:2}
.log .gw-logbook-units{color:var(--muted);font-size:var(--t-small)}
.log .gw-logbook-changes summary{cursor:pointer;color:var(--muted);font-size:var(--t-small)}
.log .gw-logbook-changes ul,.log .gw-logbook-changes ol{padding-left:1.1rem;margin:.4rem 0 0}
.log .gw-logbook-changes li{display:list-item;font-size:var(--t-small)}
.log .gw-logbook-kind{font-family:var(--mono);font-size:var(--t-small);color:var(--muted);margin-right:.5rem}
.news .news-ext,.news .news-host{color:var(--muted)}
.news .news-host{font-size:var(--t-small);margin-left:var(--s2);overflow-wrap:anywhere}
.news .news-note{margin:var(--s1) 0 0;color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--s4);list-style:none;padding:0;margin:0}
.principles li{border-left:3px solid var(--line);padding-left:var(--s3)}
.principles b{display:block}
footer{background:var(--surface);border-top:1px solid var(--border);padding-block:var(--s5);font-size:var(--t-small);color:var(--muted)}
footer .wrap{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
footer nav ul{gap:var(--s4)}
footer nav a{text-transform:none;letter-spacing:0;font-size:var(--t-small)}
@media (max-width:44rem){.hero{grid-template-columns:1fr}.seed{max-width:10rem;order:-1}.log li{grid-template-columns:1fr;gap:0}.log .gw-logbook-entry>:not(time){grid-column:auto}.lang{margin-left:0}}
.card img.icon{width:32px;height:32px;border-radius:6px}.card .tags{font-size:var(--t-small);color:var(--muted)}
.search{display:flex;gap:var(--s2);margin:0 0 var(--s5)}.search input{flex:1;min-height:44px;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit}
.more{margin-top:var(--s4)}
/* 0.8.0 (owner 2026-11-01: on the largest screens the elements were not well distributed): from 1500 px the page grows with the window
   (up to 100rem, 90 % of the width) — card groups spread into more columns (balance.js chooses), texts keep their own measure in ch */
@media (min-width:1500px){.wrap{max-width:min(100rem,90vw)}}
/* 0.8.0: the steps to take part (#join) */
.join-steps{margin:0 0 var(--s4);padding-left:1.4em;display:flex;flex-direction:column;gap:var(--s2);max-width:62ch}.join-steps li{padding-left:.2em}
/* 0.9.0 (owner 2026-11-01: not only dark mode — whiteboard and chalkboard): two more colour ways by choice (π › Ansicht › Farbe) */
:root[data-theme="whiteboard"]{
  --bg:#ffffff; --surface:#ffffff; --sunken:#f3f5f7; --border:#c5cfd8; --text:#111827; --muted:#3b4756;
  --action:#1d4ed8; --on-action:#ffffff; --link:#1d4ed8; --focus:#dc2626; --accent:#1d4ed8; --accent-text:#1d4ed8; --line:#dc2626;
  --ok:#15803d; --ok-bg:#e8f5ec; --warn:#a14b00; --warn-bg:#fdf1e3; --info:#1d4ed8; --info-bg:#e8efff;
  --pencil-rgb:148 163 184; --grid:rgb(var(--pencil-rgb) / .10); --grid-strong:rgb(var(--pencil-rgb) / .18); color-scheme:light}
:root[data-theme="tafel"]{
  --bg:#1f362a; --surface:#284433; --sunken:#182b21; --border:#4a6b57; --text:#f3f1e6; --muted:#cfd8c9;
  --action:#f5e27a; --on-action:#1f362a; --link:#f5e27a; --focus:#f5e27a; --accent:#f5e27a; --accent-text:#f5e27a; --line:#f4c2c2;
  --ok:#b9e4a9; --ok-bg:#223d2c; --warn:#f5e27a; --warn-bg:#3a3a1f; --info:#a9d5f2; --info-bg:#1f3a44;
  --pencil-rgb:243 241 230; --grid:rgb(var(--pencil-rgb) / .06); --grid-strong:rgb(var(--pencil-rgb) / .11); color-scheme:dark}
:root[data-theme="tafel"] body{text-shadow:0 0 .6px rgb(243 241 230 / .35)}
/* 0.9.0: Mitmachen in four levels (join.js) — a level switch, the steps as cards with a hint, Leichte Sprache bigger and airy */
.join-levels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--s4)}
.join-levels-label{margin-right:4px;font-weight:600;color:var(--muted)}
.join-levels button{min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 .9rem/1 var(--sans);cursor:pointer}
.join-levels button[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:transparent}
.join-levels button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.join-draft{display:inline-block;margin:0 0 var(--s3);padding:4px 10px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:var(--t-small)}
.join-intro{max-width:62ch;margin:0 0 var(--s4);font-size:1.05rem}
.join-body .join-steps{list-style:none;counter-reset:js;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s4);max-width:none}
.join-body .join-steps>li{counter-increment:js;position:relative;padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 36px);border:1px solid var(--border);border-radius:var(--r-card,16px);background:var(--surface)}
.join-body .join-steps>li::before{content:counter(js);position:absolute;left:var(--s4);top:var(--s4);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:.9rem}
.join-step-t{margin:0 0 6px;font-size:1.05rem}.join-step-d{margin:0}
.join-step-hint{margin:8px 0 0;padding-left:10px;border-left:3px solid var(--accent);color:var(--muted);font-size:.9rem}
.join-outro{max-width:62ch;margin:var(--s4) 0}
.join-ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.join-lv-leicht,.join-steps.join-lv-leicht{font-size:1.15rem;line-height:1.7}
.join-steps.join-lv-leicht .join-step-t{font-size:1.2rem}
.join-steps.join-lv-experte .join-step-d{font-size:.95rem}
#join>[hidden]{display:none!important}   /* the static text steps aside when join.js draws the levels */
/* 0.10.0 (owner 2026-11-01: whiteboard and chalkboard have no ruling — rather chalk dust and smudge): no grid in these two themes;
   the whiteboard shows faint ghosts of wiped marker, the chalkboard fine chalk dust and wiped streaks (own drawings, no picture files) */
:root[data-theme="whiteboard"] body{background:
  radial-gradient(ellipse 38% 12% at 22% 28%,rgb(71 85 105 / .055),transparent 70%),
  radial-gradient(ellipse 26% 9% at 74% 58%,rgb(29 78 216 / .045),transparent 70%),
  radial-gradient(ellipse 44% 14% at 50% 86%,rgb(71 85 105 / .045),transparent 70%),
  radial-gradient(ellipse 18% 6% at 86% 18%,rgb(220 38 38 / .035),transparent 70%),
  #ffffff;background-attachment:fixed}
:root[data-theme="tafel"] body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .95 0 0 0 0 .92 0 0 0 .09 -.01'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23d)'/%3E%3C/svg%3E"),
  radial-gradient(ellipse 46% 16% at 24% 32%,rgb(243 241 230 / .07),transparent 72%),
  radial-gradient(ellipse 34% 11% at 70% 62%,rgb(243 241 230 / .06),transparent 72%),
  radial-gradient(ellipse 52% 14% at 48% 88%,rgb(243 241 230 / .05),transparent 72%),
  linear-gradient(176deg,rgb(243 241 230 / .025),transparent 40%,rgb(243 241 230 / .03) 70%,transparent),
  #1f362a;background-attachment:fixed}
@media print{:root[data-theme] body{background:#fff}}
.join-lv-1,.join-steps.join-lv-1{font-size:1.15rem;line-height:1.7}.join-steps.join-lv-1 .join-step-t{font-size:1.2rem}.join-steps.join-lv-6 .join-step-d{font-size:.95rem}   /* ISCED 1 bigger and airy (levels.js) */
/* 0.10.1 (owner 2026-11-01: a small white bar at the very bottom): the root carries the page colour too — the bounce at the end of a page shows the page, not white */
html{background:var(--bg)}