:root { --bg:#fff; --fg:#0a0a0a; --muted:#6b6b6b; --line:#0a0a0a; }
@media (prefers-color-scheme: dark) { :root { --bg:#0a0a0a; --fg:#fff; --muted:#a0a0a0; --line:#fff; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.8 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace; }
a { color:inherit; text-underline-offset:3px; }
.wrap { max-width:1040px; margin:0 auto; padding:0 40px; }
.wrap.narrow { max-width:680px; }
.narrow-col { max-width:680px; }
header.top { padding:40px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; }
header.top .brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
header.top svg { width:32px; height:32px; }
.lang { display:flex; gap:10px; font-size:14px; font-weight:400; }
.lang a { text-decoration:none; color:var(--muted); }
.lang a.cur { color:var(--fg); font-weight:700; border-bottom:1px solid var(--fg); }
.lang a:hover { color:var(--fg); }
.lang span { color:var(--muted); }
.hero { padding:96px 0 112px; display:grid; gap:80px; grid-template-columns:1fr auto; align-items:center; }
.hero-text svg { width:112px; height:112px; margin:0 0 20px -12px; display:block; }
h1 { font-size:clamp(36px,7vw,56px); line-height:1.1; margin:0 0 28px; letter-spacing:-0.04em; }
.lead { font-size:19px; margin:0 0 40px; max-width:30em; }
.badge { display:inline-block; border:1px solid var(--line); padding:12px 20px; font-weight:700; }
.small { font-size:14px; margin:18px 0 0; }
section { border-top:1px solid var(--line); padding:88px 0; }
h2 { font-size:21px; margin:0 0 32px; }
ul.sq { list-style:none; padding:0; margin:0; display:grid; gap:26px; }
ul.sq li { display:flex; gap:14px; }
ul.sq li::before { content:""; flex:none; width:10px; height:10px; background:var(--fg); margin-top:9px; }
.muted { color:var(--muted); }
.price { display:grid; gap:24px; grid-template-columns:1fr 1fr; margin-top:40px; }
.card { border:1px solid var(--line); padding:32px 28px; }
.card.hi { border-width:3px; padding:30px 26px; }
.card b { display:block; font-size:15px; margin-bottom:8px; }
.card .p { display:block; font-size:30px; font-weight:700; line-height:1.3; margin-bottom:8px; }
.card .muted { display:block; font-size:15px; line-height:1.6; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; justify-items:start; gap:64px; padding:64px 0 72px; } section { padding:64px 0; } .phone-box { justify-self:center; } }
@media (max-width:520px) { .wrap { padding:0 24px; } .price { grid-template-columns:1fr; } .hero { padding-top:48px; } header.top { padding-top:28px; } footer .foot { padding:40px 0 64px; } }
footer { margin-top:16px; }
footer .foot { border-top:1px solid var(--line); padding:48px 0 88px; font-size:15px; display:flex; flex-wrap:wrap; gap:14px 36px; }
article { padding:72px 0 40px; }
article h1 { font-size:32px; margin:0 0 20px; }
article h2 { margin:48px 0 16px; font-size:19px; }
article p, article li { max-width:42em; }

/* ---------- Telefon-Mockup (Android, generisch) ---------- */
.phone-box { display:flex; justify-content:center; }
.phone { position:relative; width:272px; height:566px; background:#111; border:7px solid #1d1d1d; border-radius:38px;
  box-shadow:0 0 0 1px #5a5a5a, 0 30px 60px rgba(0,0,0,.28); }
.phone::before { content:""; position:absolute; right:-10px; top:120px; width:3px; height:56px; background:#3a3a3a; border-radius:2px; }
.phone::after  { content:""; position:absolute; right:-10px; top:196px; width:3px; height:84px; background:#3a3a3a; border-radius:2px; }
.screen { position:absolute; inset:0; overflow:hidden; border-radius:31px; background:#0a0a0a; color:#fff;
  font:10.5px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace; }
.hole { position:absolute; top:9px; left:50%; width:9px; height:9px; margin-left:-4.5px; background:#000; border-radius:50%; z-index:5; box-shadow:0 0 0 1px #1d1d1d; }
.p-status { height:30px; padding:9px 16px 0; display:flex; justify-content:space-between; font-size:9px; opacity:.9; }
.p-status i { display:inline-block; width:14px; height:7px; border:1px solid #fff; border-radius:2px; position:relative; margin-top:2px; }
.p-status i::after { content:""; position:absolute; inset:1px 5px 1px 1px; background:#fff; }
.p-bar { display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid #fff; }
.p-burger { width:18px; height:16px; border:1px solid #fff; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2.5px; }
.p-burger i { display:block; width:8px; height:1px; background:#fff; }
.p-date { flex:1; text-align:right; font-weight:700; font-size:9.5px; line-height:1; }
.p-body { position:absolute; top:62px; bottom:0; left:0; right:0; display:flex; flex-direction:column; }
.p-text { flex:0 0 66%; padding:12px 12px; white-space:pre-wrap; overflow:hidden; font-size:11px; line-height:1.7; }
.p-nl { padding:7px 12px 0; border-top:1px solid #fff; font-weight:700; }
.p-notes { padding:6px 12px; white-space:pre-wrap; font-size:11px; line-height:1.7; }
.ph { color:#9a9a9a; }
.caret { display:inline-block; width:1px; height:1.1em; background:#fff; vertical-align:text-bottom; margin-left:1px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.p-file { position:absolute; left:12px; right:12px; bottom:16px; border:1px solid #fff; background:#0a0a0a; padding:7px 10px; display:flex; gap:8px; align-items:center;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.p-file.on { opacity:1; transform:none; }
.p-file b { width:8px; height:8px; background:#fff; flex:none; }
.p-file span { color:#9a9a9a; }
.p-menu { position:absolute; inset:0; background:#0a0a0a; transform:translateX(-102%); transition:transform .4s ease; z-index:3; padding-top:30px; display:flex; flex-direction:column; }
.p-menu.on { transform:none; }
.p-mh { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid #fff; font-weight:700; }
.p-mh i { border:1px solid #fff; width:18px; height:16px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:9px; }
.p-li { padding:7px 12px; border-bottom:1px solid #1d1d1d; }
.p-li b { display:block; font-size:10px; }
.p-li small { opacity:.6; font-size:9px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-li.act { background:#fff; color:#0a0a0a; }
.p-mf { margin-top:auto; padding:10px 12px; border-top:1px solid #fff; }
.p-mf div { border:1px solid #fff; padding:7px; text-align:center; }