/* Shared by every page: colour tokens (light and dark), type, header, buttons, footer, consent banner, text pages.
   The editor's own layout stays in index.html. */
:root{
  --bg:#F6F1FE; --surface:#FFFFFF; --fg:#1E1530; --muted:#6B5F82; --line:#E3D7FA;
  --accent:#9548F6; --accent-ink:#FFFFFF; --stage:#EDE3FD; --dot:#DCCBFA; --mask:#9548F6; --danger:#C2265A;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#130D1F; --surface:#1D1530; --fg:#F1EBFC; --muted:#A99BC4;
  --line:#332750; --accent:#AF7BFA; --accent-ink:#170A2C; --stage:#0C0815; --dot:#241A3A; --mask:#AF7BFA; --danger:#FF7AA2; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#130D1F; --surface:#1D1530; --fg:#F1EBFC; --muted:#A99BC4;
  --line:#332750; --accent:#AF7BFA; --accent-ink:#170A2C; --stage:#0C0815; --dot:#241A3A; --mask:#AF7BFA; --danger:#FF7AA2; color-scheme:dark }

*{box-sizing:border-box}
html{color-scheme:light}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:16px 28px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1320px;margin:0 auto 14px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .title{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;margin:0}
.brand .title span{font-weight:600;color:var(--accent)}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.applink{font-size:12.5px;font-weight:500;color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.applink:hover{border-color:var(--accent)}
.about a,.foot a{color:var(--accent)}
.foot{max-width:68ch;margin:0 auto;padding:20px 0 32px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:4px}
.foot p{margin:0}
.linkbtn{font:inherit;color:var(--accent);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.consent{position:fixed;left:16px;bottom:16px;z-index:20;max-width:360px;background:var(--surface);color:var(--fg);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18);display:grid;gap:10px;font-size:13.5px}
.consent p{margin:0;color:var(--muted)}
@media (max-width:880px){ .consent{left:12px;right:12px;max-width:none;bottom:calc(var(--tb-h, 96px) + 12px)} }   /* above the bottom toolbar */
.btn{font:inherit;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--fg);
  padding:8px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:focus-visible,.tile:focus-within,input:focus-visible,.seg label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row .btn{flex:1;justify-content:center}

/* The privacy badge in the editor header; it opens a short explanation. */
.trust{position:relative}
.trustbtn{font:inherit;font-size:12.5px;font-weight:500;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;cursor:pointer;white-space:nowrap}
.trustbtn:hover,.trustbtn[aria-expanded="true"]{border-color:var(--accent)}
.trustbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trustinfo{position:absolute;left:0;top:calc(100% + 8px);z-index:15;width:min(340px, calc(100vw - 32px));background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18);display:grid;gap:8px;font-size:13.5px}
.trustinfo p{margin:0;color:var(--muted)}
.trustinfo a{color:var(--accent)}

/* About: crawlable intro, how-to and FAQ below the editor. */
.about{max-width:68ch;margin:48px auto 0;padding:0 0 48px;color:var(--fg);font-size:15px;line-height:1.6}
.about h1{font-family:var(--display);font-size:clamp(24px,4vw,34px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin:0 0 12px}
.about h2{font-family:var(--display);font-size:22px;margin:32px 0 8px}
.about h3{font-size:16px;margin:20px 0 4px}
.about p,.about li{color:var(--muted);margin:0}
.about li strong,.about li em{color:var(--fg)}
.about ol{padding-left:20px;margin:0;display:grid;gap:6px}
.about ul{padding-left:20px;margin:0;display:grid;gap:6px}
.about section{scroll-margin-top:16px}
.about address{font-style:normal;color:var(--muted)}

/* Phones: every control at least 44 x 44 px. */
@media (max-width:700px){
  .btn{min-height:44px}
  .applink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
  .brand{align-items:center}
  .foot a,.linkbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .trustbtn{min-height:44px}
  .trust .long{display:none}
}

/* Text pages (privacy, impressum): the logo links home. */
.brand a.title{color:inherit;text-decoration:none}
.page{margin-top:24px}
.page section{display:grid;gap:10px}
a.btn{text-decoration:none}
.consent a{color:var(--accent)}