:root{
  --bg:#0a0a0b; --bg-2:#111114; --bg-3:#17171c; --bg-4:#1f1f26;
  --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.14);
  --text:#f3f3f5; --text-dim:#a8a8b3; --text-faint:#6a6a76;
  --brand:#c8a45a; --brand-2:#e3c07a;
  --green:#3fcf8e; --red:#f25c5c; --orange:#f5a623; --blue:#6aa9ff;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7f9; --bg-2:#ffffff; --bg-3:#fbfbfd; --bg-4:#f1f1f4;
    --border:rgba(0,0,0,0.08); --border-2:rgba(0,0,0,0.14);
    --text:#13131a; --text-dim:#5b5b66; --text-faint:#8b8b96;
    --brand:#8a6a1d; --brand-2:#a8842a;
    --shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(0,0,0,0.18);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
a:hover{border-bottom-color:var(--brand-2)}
code{font-family:var(--mono);font-size:.9em;background:var(--bg-4);padding:1px 6px;border-radius:6px;border:1px solid var(--border)}
kbd{font-family:var(--mono);font-size:.85em;background:var(--bg-4);padding:2px 7px;border-radius:6px;border:1px solid var(--border-2);box-shadow:0 1px 0 var(--border)}
hr{border:none;border-top:1px solid var(--border);margin:2.5rem 0}
::selection{background:var(--brand);color:#000}

/* ───── Top bar ───── */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:.7rem 1.1rem;
  display:flex;align-items:center;gap:.9rem;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.brand-mark{
  width:30px;height:30px;display:grid;place-items:center;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-name{font-size:.98rem}
.brand-sub{color:var(--text-faint);font-weight:400;font-size:.86rem;margin-left:.2rem}
.topbar-spacer{flex:1}
.lang{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--text-dim)}
.lang a{
  display:inline-block;padding:.25rem .55rem;border-radius:7px;
  color:var(--text-dim);border:1px solid transparent;
}
.lang a.active{background:var(--bg-3);color:var(--text);border-color:var(--border)}

/* ───── Sprachwechsler-Dropdown (JS-Enhancement von nav.lang) ───── */
.langswitch{position:relative;font-size:.85rem}
.langswitch-btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;font:inherit;line-height:1;
  background:var(--bg-3);color:var(--text);
  border:1px solid var(--border);border-radius:9px;padding:.35rem .55rem;
  transition:border-color .15s,background .15s;
}
.langswitch-btn:hover{border-color:var(--border-2);background:var(--bg-4)}
.langswitch.open .langswitch-btn{border-color:var(--border-2);background:var(--bg-4)}
.langswitch-btn .langname{font-weight:600;color:var(--text)}
.langswitch-btn .chev{width:14px;height:14px;color:var(--text-faint);flex:0 0 auto;transition:transform .18s ease}
.langswitch.open .chev{transform:rotate(180deg)}
.langswitch .flag{
  width:22px;height:15px;border-radius:3px;overflow:hidden;flex:0 0 auto;
  display:inline-flex;box-shadow:0 0 0 1px var(--border);
}
.langswitch .flag svg{width:100%;height:100%;display:block}
.langswitch-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:198px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:.3rem;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  max-height:min(72vh,440px);overflow:auto;
}
.langswitch.open .langswitch-menu{opacity:1;visibility:visible;transform:translateY(0)}
.langswitch-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.46rem .5rem;border-radius:8px;
  color:var(--text-dim);border-bottom:1px solid transparent;
}
.langswitch-item:hover{background:var(--bg-3);color:var(--text);border-bottom-color:transparent}
.langswitch-item .langname{flex:1;color:inherit;font-weight:500}
.langswitch-item.active{color:var(--text);background:var(--bg-3)}
.langswitch-item.active .langname{font-weight:600}
.langswitch-item .check{width:15px;height:15px;color:var(--brand-2);opacity:0;flex:0 0 auto}
.langswitch-item.active .check{opacity:1}
@media (prefers-reduced-motion:reduce){
  .langswitch-btn,.langswitch .chev,.langswitch-menu{transition:none}
}
.menubtn{
  display:none;
  appearance:none;background:var(--bg-3);border:1px solid var(--border);
  color:var(--text);border-radius:9px;padding:.45rem .6rem;cursor:pointer;
}
@media (max-width:900px){
  .menubtn{display:inline-flex}
  .brand-sub{display:none}
}

/* ───── Shell ───── */
.shell{max-width:1180px;margin:0 auto;padding:1.3rem 1.1rem 5rem;display:grid;grid-template-columns:240px 1fr;gap:2.6rem}
@media (max-width:900px){.shell{grid-template-columns:1fr;gap:0;padding-top:.6rem}}

/* ───── TOC ───── */
.toc{
  position:sticky;top:65px;align-self:start;max-height:calc(100vh - 80px);
  overflow:auto;padding-right:.5rem;
}
@media (max-width:900px){
  .toc{
    position:fixed;inset:0 0 0 0;top:0;left:0;
    background:color-mix(in srgb,var(--bg) 96%,transparent);
    backdrop-filter:blur(18px);
    z-index:60;padding:5rem 1.4rem 2rem;
    transform:translateX(-100%);transition:transform .2s ease-out;
    max-height:none;
  }
  .toc.open{transform:translateX(0)}
}
.toc-title{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:.4rem 0 .6rem;
}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:s}
.toc ol > li{counter-increment:s;margin:0}
.toc a{
  display:block;padding:.32rem 0 .32rem .15rem;
  color:var(--text-dim);font-size:.93rem;
  border-bottom:none;border-left:2px solid transparent;padding-left:.7rem;
  transition:color .12s, border-color .12s, background .12s;border-radius:0 6px 6px 0;
}
.toc a:hover{color:var(--text);background:color-mix(in srgb,var(--bg-3) 60%,transparent)}
.toc a.active{color:var(--text);border-left-color:var(--brand)}
.toc ul{list-style:none;padding:0 0 .2rem .7rem;margin:.1rem 0 .25rem;border-left:1px dashed var(--border)}
.toc ul a{font-size:.86rem;color:var(--text-faint);padding-left:.7rem}

/* ───── Content ───── */
main{min-width:0}
.hero{
  background:
    radial-gradient(60% 80% at 80% 10%,color-mix(in srgb,var(--brand) 25%,transparent) 0%,transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.2rem 1.6rem;margin-bottom:2rem;
  position:relative;overflow:hidden;
}
.hero h1{font-size:clamp(1.9rem,4.8vw,2.7rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 .55rem}
.hero p{color:var(--text-dim);font-size:1.05rem;max-width:560px;margin:0}
.hero .meta{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:var(--text-faint)}
.hero .pill{background:var(--bg-4);border:1px solid var(--border);padding:.3rem .7rem;border-radius:99px}

section{margin:3.2rem 0;scroll-margin-top:80px}
section > h2{
  font-size:clamp(1.4rem,3vw,1.8rem);letter-spacing:-.015em;
  margin:0 0 .25rem;display:flex;align-items:baseline;gap:.6rem;
}
section > h2 .num{color:var(--brand);font-feature-settings:"tnum" 1;font-weight:600}
section > .lede{color:var(--text-dim);margin:0 0 1.4rem;font-size:1.02rem;max-width:62ch}
section h3{font-size:1.12rem;letter-spacing:-.01em;margin:2rem 0 .55rem}
section h4{font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text-faint);margin:1.4rem 0 .45rem;font-weight:600}
section p{margin:0 0 .85rem;color:var(--text);max-width:68ch}
section ul, section ol{margin:0 0 1rem;padding-left:1.4rem;color:var(--text);max-width:64ch}
section li{margin:.3rem 0}
section li::marker{color:var(--text-faint)}

/* ───── Cards ───── */
.card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem 1.2rem;
  box-shadow:var(--shadow);
  margin:.9rem 0;
}
.card h4{margin-top:0;color:var(--text)}
.card .badge{
  display:inline-block;font-family:var(--mono);font-size:.78rem;
  background:var(--bg-4);border:1px solid var(--border);
  padding:.18rem .55rem;border-radius:6px;color:var(--text-dim);
  margin-left:.45rem;vertical-align:middle;
}

.setting-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem;margin:1rem 0}
.setting{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.05rem 1.15rem;
}
.setting .name{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.35rem}
.setting .name strong{font-size:1rem;letter-spacing:-.005em}
.setting .name code{font-size:.78rem;color:var(--text-faint);background:transparent;border:none;padding:0}
.setting .range{font-family:var(--mono);font-size:.78rem;color:var(--text-faint);margin-top:.6rem}
.setting p{margin:.3rem 0;color:var(--text-dim);font-size:.93rem;max-width:none}

/* ───── Callouts ───── */
.callout{
  display:flex;gap:.8rem;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:.95rem 1.1rem;margin:1.1rem 0;
  background:var(--bg-2);
}
.callout .ico{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.callout .body{min-width:0}
.callout .body strong{display:block;margin-bottom:.18rem}
.callout p{margin:0;color:var(--text-dim)}
.callout.tip   {border-color:color-mix(in srgb,var(--blue) 35%,var(--border))}
.callout.tip .ico{background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue)}
.callout.warn  {border-color:color-mix(in srgb,var(--orange) 38%,var(--border));background:color-mix(in srgb,var(--orange) 5%,var(--bg-2))}
.callout.warn .ico{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange)}
.callout.danger{border-color:color-mix(in srgb,var(--red) 40%,var(--border));background:color-mix(in srgb,var(--red) 5%,var(--bg-2))}
.callout.danger .ico{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.callout.ok    {border-color:color-mix(in srgb,var(--green) 38%,var(--border))}
.callout.ok .ico{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}

/* ───── Screenshot placeholders ───── */
.shot{
  position:relative;background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--bg-4) 90%,transparent) 0 14px,
      color-mix(in srgb,var(--bg-3) 90%,transparent) 14px 28px);
  border:1px dashed var(--border-2);border-radius:var(--radius);
  min-height:180px;display:grid;place-items:center;
  margin:1.1rem 0;padding:1.2rem;color:var(--text-faint);
  text-align:center;font-size:.88rem;
}
.shot.tall{min-height:320px}
.shot.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;padding:0}
.shot.row .ph{min-height:180px;background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--bg-4) 90%,transparent) 0 14px,
      color-mix(in srgb,var(--bg-3) 90%,transparent) 14px 28px);
  border-radius:var(--radius);display:grid;place-items:center;padding:1rem}
.shot strong{display:block;color:var(--text);font-weight:600;margin-bottom:.25rem;font-size:.92rem}
.shot small{display:block;color:var(--text-faint);font-size:.78rem}

/* ───── Real screenshots ───── */
figure.screenshot{margin:1.3rem 0;text-align:center}
figure.screenshot img{max-width:300px;width:100%;height:auto;border-radius:20px;border:1px solid var(--border-2);box-shadow:var(--shadow)}
figure.screenshot figcaption{color:var(--text-faint);font-size:.8rem;margin-top:.55rem}
.screenshot-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin:1.3rem 0}
.screenshot-pair figure{margin:0;text-align:center}
.screenshot-pair img{max-width:280px;width:100%;height:auto;border-radius:20px;border:1px solid var(--border-2);box-shadow:var(--shadow)}
.screenshot-pair figcaption{color:var(--text-dim);font-size:.85rem;margin-top:.55rem}
.screenshot-pair figcaption strong{color:var(--text)}

/* ───── Numbered steps ───── */
.steps{counter-reset:step;list-style:none;padding:0;margin:1rem 0}
.steps > li{
  counter-increment:step;
  position:relative;padding:1rem 1.1rem 1rem 3.2rem;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  margin:.55rem 0;
}
.steps > li::before{
  content:counter(step);
  position:absolute;left:.95rem;top:.95rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#000;font-weight:700;font-size:.85rem;
  display:grid;place-items:center;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--brand) 50%,transparent);
}
.steps > li strong{display:block;margin-bottom:.15rem}
.steps > li p{margin:.15rem 0 0;color:var(--text-dim)}

/* ───── Status mode table ───── */
.modes{display:grid;grid-template-columns:1fr;gap:.55rem;margin:1rem 0}
.mode{display:grid;grid-template-columns:140px 1fr;gap:.7rem;align-items:start;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem}
.mode .lbl{display:flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem}
.mode .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.mode p{margin:0;color:var(--text-dim);font-size:.92rem}
.dot.brand{background:var(--brand)}
.dot.green{background:var(--green)}
.dot.orange{background:var(--orange)}
.dot.gray{background:var(--text-faint)}
@media (max-width:560px){.mode{grid-template-columns:1fr}.mode .lbl{margin-bottom:.2rem}}

/* ───── Footer ───── */
footer{
  margin-top:5rem;padding-top:2rem;border-top:1px solid var(--border);
  color:var(--text-faint);font-size:.86rem;text-align:center;
}
footer a{color:var(--text-dim)}

/* ───── Print ───── */
@media print{
  .topbar,.toc,.menubtn,.osswitch{display:none}
  .shell{grid-template-columns:1fr;padding:0}
  .hero{background:none;border:none}
  section{break-inside:avoid}
  /* Auf Papier beide OS-Varianten zeigen, damit nichts fehlt. */
  .os-android{display:block !important}
}

/* ───── iOS/Android-Umschalter (OS-spezifische Anleitungen) ───── */
.osswitch{display:inline-flex;gap:3px;background:var(--bg-3);border:1px solid var(--border);border-radius:9px;padding:3px;margin:.2rem 0 1rem}
.osswitch__btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:.85rem;font-weight:600;line-height:1;padding:.42rem .95rem;border-radius:7px;cursor:pointer;transition:background .15s,color .15s}
.osswitch__btn:hover{color:var(--text)}
.osswitch__btn.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#1a1305}
.os-android{display:none}
body[data-os="android"] .os-android{display:block}
body[data-os="android"] .os-ios{display:none}