:root { color-scheme: light; --ink:#102238; --muted:#526b82; --line:#bfd0df; --blue:#0b5c95; --blue2:#073b62; --paper:#f6f9fc; --card:#fff; --accent:#e8782f; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font:16px/1.55 "Segoe UI",Arial,sans-serif; }
body { margin:0; min-width:300px; }
a { color:#005ea8; text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:#9b3d00; }
.page { display:grid; grid-template-columns:250px minmax(0,1100px); align-items:start; gap:28px; padding:20px; }
.sidebar { position:sticky; top:0; min-height:calc(100vh - 40px); padding:18px 14px; border:1px solid var(--line); border-radius:12px; background:#eaf2f8; }
.brand { display:flex; gap:11px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; font-size:1.12rem; }
.brand img { width:46px; height:46px; }
.nav-toggle { width:100%; margin:18px 0 8px; padding:8px; border:1px solid #8aa7bf; border-radius:6px; background:white; cursor:pointer; }
.site-nav { display:grid; gap:4px; }
.site-nav a { padding:7px 9px; border-radius:5px; color:var(--ink); text-decoration:none; }
.site-nav a[aria-current="page"], .site-nav a:hover { background:#cfe1ee; }
.language { display:flex; gap:6px; margin-top:18px; }
.language button { padding:6px 9px; border:1px solid #8aa7bf; border-radius:5px; background:white; cursor:pointer; }
.language button.is-active { background:var(--blue2); color:white; }
body.nav-collapsed .page { grid-template-columns:70px minmax(0,1100px); }
body.nav-collapsed .sidebar { padding:12px 8px; }
body.nav-collapsed .brand span, body.nav-collapsed .site-nav, body.nav-collapsed .language { display:none; }
.content { min-width:0; padding-bottom:40px; }
.hero { position:relative; overflow:hidden; padding:34px; border-radius:16px; color:white; background:linear-gradient(130deg,var(--blue2),var(--blue)); box-shadow:0 12px 30px #17385420; }
.hero::after { content:""; position:absolute; width:260px; height:260px; right:-70px; top:-80px; border:35px solid #ffffff18; border-radius:50%; }
.eyebrow { margin:0 0 5px; color:#c9e8ff; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
h1 { margin:.1em 0 .25em; font-size:clamp(2rem,5vw,4.2rem); line-height:1.03; }
h2 { margin-top:1.7em; line-height:1.2; }
h3 { margin-bottom:.3em; }
.lead { max-width:760px; font-size:1.15rem; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.button { display:inline-block; padding:10px 14px; border:1px solid #fff8; border-radius:7px; background:white; color:var(--blue2); font-weight:700; text-decoration:none; }
.button.secondary { background:transparent; color:white; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0; }
.card { padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 4px 13px #1636540b; }
.card > :first-child { margin-top:0; }
.notice { padding:13px 15px; border-left:5px solid var(--accent); background:#fff4e9; }
.notice.policy { border-left-color:#9b1c1c; background:#fff0f0; }
.screenshot { display:block; width:100%; max-width:1040px; height:auto; border:1px solid var(--line); border-radius:10px; }
.download-list { display:grid; gap:11px; max-width:780px; }
.download { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:9px; background:white; }
code { overflow-wrap:anywhere; }
table { border-collapse:collapse; width:auto; max-width:100%; background:white; }
th,td { padding:2px; border:1px solid var(--line); text-align:left; vertical-align:top; }
th { cursor:pointer; background:#dce9f3; }
td.number { text-align:right; }
.footer { margin-top:36px; padding:16px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; }
.lang-en { display:none; }
html[data-language="en"] .lang-de { display:none; }
html[data-language="en"] .lang-en { display:block; }
@media (max-width:760px) { .page,.page body.nav-collapsed { grid-template-columns:1fr; padding:10px; } .sidebar { position:relative; min-height:0; } body.nav-collapsed .page { grid-template-columns:1fr; } body.nav-collapsed .brand span { display:inline; } .hero { padding:24px 18px; } .download { align-items:flex-start; flex-direction:column; } }
@media (min-width:1500px) { .page { grid-template-columns:270px minmax(0,1320px); } }