/* Shared base for Baerli-Softwaerli and all product pages.
   Each product only sets its own --accent via a body class. */
:root{--ink:#111111;--bg:#FAFAFA;--muted:#5f5f5f;--line:#e4e4e4;--accent:#111111;--accent-ink:#FFFFFF}
body.ftb{--accent:#F28C28;--accent-ink:#111111} /* File Transfer Baerli = orange */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--ink)}
header{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
header a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700}
header img{width:36px;height:36px}
header .by{font-weight:400;color:var(--muted);font-size:.9rem}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:24px}
.hero{text-align:center;padding:10vh 0 6vh}
.hero img{width:140px;height:140px}
.hero h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:24px 0 8px}
.badge{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:4px 14px;border-radius:999px;font-size:.9rem}
.lead{color:var(--muted);font-size:1.1rem}
.apps{margin-top:6vh;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.app-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#F28C28;color:#111;font-weight:700;text-decoration:none}
.app-chip img{width:32px;height:32px;border-radius:8px}
.app-chip:hover{filter:brightness(1.05)}
h1{line-height:1.2}
h2{margin-top:2em;font-size:1.25rem}
.todo{background:#fff3cd;padding:0 4px;border-radius:3px}
footer{border-top:1px solid var(--line);padding:20px 24px;text-align:center;font-size:.9rem;color:var(--muted)}
footer nav a{margin:0 10px;color:var(--muted)}
footer p{margin:.4em 0}
.tags{list-style:none;padding:0;margin:20px 0 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tags li{border:2px solid var(--accent);border-radius:999px;padding:3px 12px;font-weight:600;font-size:.9rem}
.note{color:var(--muted);font-size:.9rem;margin-top:4px}