:root{
  --blue:#2563EB; --ink:#0F172A; --slate:#475569; --line:#E5E7EB;
  --bg:#FFFFFF; --bg-soft:#F5F7FA;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg-soft);
  line-height:1.62; -webkit-font-smoothing:antialiased }
header.bar{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line) }
/* Volle Breite: Logo und Zurueck-Link stehen ganz links – wie in der App. */
header.bar .in{ padding:13px 22px; display:flex; align-items:center; gap:10px }
header.bar a.back{ color:var(--slate); text-decoration:none; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px }
header.bar a.back:hover{ color:var(--ink) }
.logo{ width:26px; height:26px; border-radius:7px; background:var(--blue); display:grid; place-items:center; flex:none }
header.bar .lang{ margin-left:auto; display:flex; gap:4px; font-size:13px }
header.bar .lang a{ color:var(--slate); text-decoration:none; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; border:1px solid transparent }
header.bar .lang a:hover{ color:var(--ink) }
header.bar .lang a[aria-current="true"]{ color:var(--blue); border-color:var(--line); background:var(--bg) }
.doc{ max-width:760px; margin:0 auto; padding:34px 22px 72px }
h1{ font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.02em; margin:6px 0 4px; font-weight:700 }
.updated{ color:var(--slate); font-size:14px; margin:0 0 26px }
h2{ font-size:1.2rem; margin:34px 0 8px; letter-spacing:-.01em; font-weight:650 }
h3{ font-size:1.02rem; margin:20px 0 6px; font-weight:650 }
p,li{ color:#1f2937 }
a{ color:var(--blue) }
ul{ padding-left:20px } li{ margin:4px 0 }
.note{ background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412; border-radius:12px;
  padding:12px 16px; font-size:14px; margin:18px 0 }
.todo{ background:#EFF6FF; border:1px dashed #93C5FD; color:#1E3A8A; border-radius:6px;
  padding:1px 7px; font-size:.92em; white-space:nowrap }
table.lic{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14px }
table.lic th, table.lic td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top }
table.lic th{ color:var(--slate); font-weight:600 }
footer.docfoot{ border-top:1px solid var(--line); margin-top:46px; padding-top:20px;
  color:var(--slate); font-size:13px; display:flex; gap:16px; flex-wrap:wrap; align-items:center }
footer.docfoot a{ color:var(--slate); text-decoration:none }
footer.docfoot a:hover{ color:var(--ink) }
footer.docfoot .sp{ flex:1 }
@media (prefers-color-scheme: dark){
  :root{ --ink:#F3F4F6; --slate:#9BA1AC; --line:#252B36; --bg:#0B0E13; --bg-soft:#0B0E13 }
  body{ background:#0B0E13 }
  header.bar{ background:rgba(11,14,19,.72) }
  p,li{ color:#D1D5DB }
  .note{ background:#3b2a12; border-color:#7c4a1e; color:#fde3c4 }
  .todo{ background:#12233f; border-color:#2f5b93; color:#bcd6ff }
}