*{box-sizing:border-box}
:root{--ink:#17231f;--muted:#5d6b66;--line:#dcd8cf;--paper:#f6f3ec;--green:#1b3b33;--brass:#856639}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html[lang=de] [lang=en],html[lang=en] [lang=de]{display:none}
.head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;max-width:1120px;margin:0 auto;padding:48px 24px 8px}
.kicker{margin:0 0 6px;color:var(--brass);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
h1{margin:0;font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-.01em}
.lead{margin:12px 0 0;color:var(--muted);font-size:18px;max-width:46em}
.lang{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
main{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:36px 0 8px;border-bottom:1px solid var(--line)}
h2{margin:0 0 6px;font-size:26px}
h3{margin:22px 0 6px;font-size:18px}
.note{margin:4px 0 16px;color:var(--muted);max-width:52em}
.frame{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#141917;box-shadow:0 10px 30px rgba(20,30,26,.18)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.how{margin:6px 0 12px;padding-left:22px}
.how li{margin:4px 0}
code{font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:#ebe6db;padding:1px 6px;border-radius:5px}
.code{display:block;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.row{display:flex;gap:14px;align-items:center;margin:12px 0}
.btn{min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ok{color:var(--green);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:0 0 24px}
.grid figure{margin:0}
.grid img{display:block;width:100%;height:auto;border-radius:10px;background:#e5e0d6}
.plans img{background:#fff;border:1px solid var(--line);object-fit:contain;aspect-ratio:4/3}
figcaption{margin-top:8px;font-weight:600}
figcaption small,.list small{display:block;color:var(--muted);font-weight:400;font-size:13px;overflow-wrap:anywhere}
.list{margin:0 0 24px;padding:0;list-style:none;columns:2 300px;column-gap:28px}
.list li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--line)}
a{color:var(--green);text-underline-offset:3px}
.foot{max-width:1120px;margin:0 auto;padding:28px 24px 56px;color:var(--muted);font-size:14.5px}
button:focus-visible,a:focus-visible,.code:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (max-width:600px){.head{padding:28px 16px 4px}main{padding:0 16px}.foot{padding:24px 16px 48px}.frame{aspect-ratio:3/4;border-radius:12px}.lead{font-size:16.5px}h2{font-size:23px}}
.demo{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;padding:12px max(24px,calc(50% - 536px));background:var(--green);color:#fff;font-size:14.5px}
.demo p{margin:0}
.demo a{color:#fff;font-weight:700;text-decoration:none;padding:11px 0;margin:-11px 0}
.demo a:hover{text-decoration:underline}
.demo a:focus-visible{outline:0;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
@media (max-width:600px){.demo{padding:10px 16px}}