/* Browser-Version */
html:not(.pip) { background: #0f1115; }
html:not(.pip) body { min-height: 100%; }

/* Kopfleiste */
.webbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 20px; background: #0f1115; border-bottom: 1px solid #1f222a; }
.wb-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.wb-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: #2f5bea; }
.wb-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7c8291; }
.wb-status i { width: 6px; height: 6px; border-radius: 50%; background: #50555f; }
.wb-status.on i { background: #3ccf7a; }
.wb-status.off { color: #e0707f; }
.wb-status.off i { background: #e5484d; }
.wb-space { flex: 1; }
.wb-dl { height: 34px; padding: 0 12px; display: grid; place-items: center; border-radius: 8px; color: #c9ccd5; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.wb-dl:hover { background: #1a1d24; color: #fff; }
.webbar button { height: 34px; padding: 0 14px; border-radius: 8px; background: #2f5bea; color: #fff; font-weight: 600; font-size: 12.5px; }
.webbar button:hover:not(:disabled) { background: #3a66f5; }
.webbar button:disabled { background: #1f222a; color: #6d7383; opacity: 1; }

/* Startseite links, rechts bleibt Platz für Beitreten / Handy */
.landing { position: fixed; inset: 56px 0 0 0; overflow-y: auto; padding: clamp(32px, 8vh, 80px) calc(380px + 7vw) 40px clamp(20px, 6vw, 88px); user-select: text; }
.landing > * { max-width: 720px; }
.lp-intro h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; color: #f2f3f6; }
.lp-intro p { margin-top: 12px; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: #9399a8; }

.lp-apps { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px 22px; }
.lp-app { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: #b9bdc8; text-align: center; }
.lp-app .app-ic { width: 52px; height: 52px; border-radius: 14px; }

.lp-cols { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-box { padding: 20px; border-radius: 12px; background: #15171c; border: 1px solid #22252d; }
.lp-box h2 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #eceef3; }
.lp-box p { font-size: 12.5px; line-height: 1.55; color: #9399a8; }
.lp-steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.lp-steps li { counter-increment: s; position: relative; padding-left: 28px; font-size: 12.5px; line-height: 1.5; color: #9399a8; }
.lp-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #c9ccd5; background: #22252d; }
.lp-steps b { color: #eceef3; font-weight: 600; }
.lp-steps code, .lp-box code { font: 600 11.5px Consolas, monospace; padding: 1px 5px; border-radius: 4px; background: #22252d; color: #dfe2e8; }
.lp-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid #22252d; font-size: 11.5px !important; }
.lp-keys { list-style: none; margin: 14px 0 16px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: #b9bdc8; }
.lp-keys kbd { display: inline-block; min-width: 28px; margin-right: 8px; padding: 1px 6px; border-radius: 5px; text-align: center; font: 700 11px var(--font); color: #e6e8ee; background: #22252d; border: 1px solid #2c3039; border-bottom-width: 2px; }
.lp-dlbtn { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; background: #2f5bea; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.lp-dlbtn:hover { background: #3a66f5; }
.lp-dlbtn svg { width: 17px; height: 17px; }
.lp-dlmeta { display: block; margin-top: 8px; font-size: 11px; color: #6d7383; }
.lp-download:target { border-color: #2f5bea; }
.lp-foot { margin-top: 28px; font-size: 11.5px; color: #626877; }

/* Browser-Ansicht: Elemente unter die Kopfleiste, Beitreten rechts statt als Vollbild */
html:not(.pip):not(.app) #hud { top: 68px; }
html:not(.pip):not(.app) .toast { top: 124px; }
html:not(.pip):not(.app) .phonewrap { top: calc(50% + 28px); }
@media (min-width: 1000px) {
  html:not(.pip):not(.app) .joinwrap { inset: 56px 0 0 auto; width: calc(380px + 7vw); background: none; backdrop-filter: none; }
  html:not(.pip):not(.app) .joincard { background: #15171c; border-color: #22252d; box-shadow: none; }
}
@media (max-width: 999px) {
  .landing { padding-right: clamp(20px, 6vw, 88px); }
  .lp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wb-status, .wb-dl { display: none; }
}
html.pip-open .landing { display: none; }

/* Windows-App: nur das Overlay, alles andere durchsichtig */
html.app, html.app body { background: transparent !important; }
html.app .webbar, html.app .landing, html.app .pipnote { display: none !important; }
.pipnote { display: none; position: fixed; inset: 0; place-items: center; text-align: center; color: #c9ccd5; }
.pipnote div { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pipnote b { font-size: 18px; color: #fff; }
.pipnote button { height: 38px; padding: 0 16px; border-radius: 10px; background: #1c1f2a; border: 1px solid var(--line); color: #fff; font-weight: 600; }
html.pip-open .pipnote { display: grid; }
html.pip-open .webbar { display: none; }

/* Schwebendes Fenster */
html.pip, html.pip body { background: #0b0d14; }
html.pip #hud { display: none !important; }
html.pip .phonewrap { position: fixed; inset: 0; transform: none; animation: none; }
html.pip .phone { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
html.pip .screen { border-radius: 0; }
html.pip .island { display: none; }
html.pip .win { width: calc(100% - 20px); max-height: calc(100% - 20px); z-index: 30; }
html.pip .items { grid-template-columns: 1fr 1fr; }
html.pip .welcome .brand, html.pip .joincard .brand { font-size: 32px; }
html.pip .wel-logo { height: 96px; }
html.pip .welcome h2 { margin-top: 16px; }
html.pip .joincard { width: calc(100% - 24px); padding: 26px 18px 20px; }
html.pip .cform { width: calc(100vw - 40px); }
html.pip .toast { top: 12px; max-width: calc(100% - 24px); text-align: center; }