/* Ruby Beta 1.0 · Design wie Ruby 4.x */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/PlusJakartaSans-400-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Oxanium-700.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Oxanium-800.woff2) format('woff2')}

:root{--bg:#F7F5FC;--surface:#FFFFFF;--line:#ECE8F5;--line2:#E4DFF2;--fg:#1A1530;--muted:#5E5873;--accent:#6B2FD6;--accent-ink:#FFFFFF;--accent-soft:#EEE7FF;--accent-strong:#4F1FA8;--lage:#1A1530;--lage-ink:#CFC8E6;--chip:#F1EDFA;--ok:#17663A;--ok-soft:#E7F6EC;--warn:#7A4B00;--warn-soft:#FFF4DB;--bad:#B42318;--bad-soft:#FDECEA;--overlay:rgba(26,21,48,.45);--shadow:0 1px 2px rgba(26,21,48,.05);--f-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#13101C;--surface:#1C1828;--line:#2A2440;--line2:#342D4C;--fg:#F2EFFA;--muted:#ABA4C0;--accent:#B794FF;--accent-ink:#160F2A;--accent-soft:#2A2142;--accent-strong:#D4BFFF;--lage:#2A2142;--lage-ink:#CFC8E6;--chip:#262036;--ok:#5BE08E;--ok-soft:#14301F;--warn:#F5C451;--warn-soft:#33270A;--bad:#FF8A80;--bad-soft:#3A1616;--overlay:rgba(0,0,0,.6);--shadow:none;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#13101C;--surface:#1C1828;--line:#2A2440;--line2:#342D4C;--fg:#F2EFFA;--muted:#ABA4C0;--accent:#B794FF;--accent-ink:#160F2A;--accent-soft:#2A2142;--accent-strong:#D4BFFF;--lage:#2A2142;--lage-ink:#CFC8E6;--chip:#262036;--ok:#5BE08E;--ok-soft:#14301F;--warn:#F5C451;--warn-soft:#33270A;--bad:#FF8A80;--bad-soft:#3A1616;--overlay:rgba(0,0,0,.6);--shadow:none;color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;font-weight:700;cursor:pointer}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}
h1{font-size:24px;font-weight:800}h2{font-size:19px;font-weight:800}h3{font-size:16px;font-weight:800}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}.mono{font-family:var(--f-mono)}.b{font-weight:800}.nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:10px}.grow{flex:1;min-width:0}.right{margin-left:auto}
.gap4{gap:4px}.gap6{gap:6px}.gap14{gap:14px}.gap18{gap:18px}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Kopf */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 24px;height:60px}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--fg)}
/* Wortmarke wie in der Präsentation: RUBY mit Funkelstern, darunter BY PURPLE STARS */
.rlogo{--rs:21px;--bs:7.5px;display:inline-flex;flex-direction:column;align-items:flex-start;font-family:Oxanium,var(--f-ui);color:var(--fg)}
.rlogo .rw{position:relative;font-weight:800;font-size:var(--rs);letter-spacing:.05em;line-height:.9;padding-right:.4em}
.rlogo .spark{position:absolute;right:0;top:-.14em;width:.34em;height:.34em;fill:var(--accent)}
.rlogo .by{margin-top:.3em;padding-left:.12em;font-weight:700;font-size:var(--bs);letter-spacing:.22em;line-height:1;color:var(--accent)}
.logo small{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:500;background:var(--chip);padding:2px 7px;border-radius:6px;letter-spacing:0}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav a{padding:8px 13px;border-radius:10px;color:var(--muted);font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.nav a.on{background:var(--accent-soft);color:var(--accent-strong)}
.cnt{font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 7px}
.me{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{background:none;border:0;border-radius:10px;padding:8px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.iconbtn:hover,.iconbtn.on{background:var(--chip);color:var(--fg)}
.devbar{background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:700;padding:5px 24px;text-align:center}

/* Seite */
.page{padding:20px 24px 60px;max-width:1700px;margin:0 auto}
.page.narrow{max-width:760px}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cols{display:flex;gap:18px;align-items:flex-start}
.listcol{width:400px;flex:none;display:flex;flex-direction:column;gap:10px;position:sticky;top:76px;max-height:calc(100vh - 92px)}
.detcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.card.pad0{padding:0;overflow:hidden}
.lage{background:var(--lage);color:#fff;border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:16px}
.lage b{font-size:22px;font-weight:800;display:block;line-height:1.1}.lage span{font-size:12px;color:var(--lage-ink);font-weight:600}
.lage .bar{flex:1;min-width:200px;max-width:340px;margin-left:auto}
.bar .t{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;display:flex;gap:2px}
.bar .t i{display:block;height:100%}
.bar small{display:block;font-size:12px;color:var(--lage-ink);margin-top:6px;font-weight:600}
.h3{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* Liste */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:auto;flex:1;min-height:0}
.r{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--fg);font-weight:400}
.r:last-child{border-bottom:0}
.r:hover{background:var(--chip)}.r.on{background:var(--accent-soft)}
.r .n{font-weight:700}.r .s{font-size:12px;color:var(--muted)}
.r .e{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.av{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.av.lg{width:56px;height:56px;font-size:19px}

/* Bausteine */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--chip);color:var(--muted);white-space:nowrap;border:0}
button.chip{cursor:pointer}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.acc{background:var(--accent-soft);color:var(--accent-strong)}.chip.solid{background:var(--accent);color:var(--accent-ink)}
.chip.sug{background:transparent;border:1.5px dashed var(--accent);color:var(--accent-strong)}
.chip.test{background:var(--warn-soft);color:var(--warn);font-family:var(--f-mono);font-size:10px;padding:1px 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;padding:9px 15px;border-radius:11px;border:1.5px solid var(--line2);background:var(--surface);color:var(--fg);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.bad{color:var(--bad);border-color:var(--bad-soft)}
.btn.sm{font-size:13px;padding:6px 11px;border-radius:9px}
.btn.wide{width:100%;padding:13px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{padding:9px 13px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;font-size:14px;white-space:nowrap}
.tabs a.on{color:var(--accent-strong);border-color:var(--accent)}
dl.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;margin:0}
dl.kv dt{color:var(--muted);font-weight:600;font-size:14px}dl.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.src{font-size:10px;font-weight:700;color:var(--muted);background:var(--chip);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.src.person{color:var(--ok);background:var(--ok-soft)}
.hint{border-radius:12px;padding:10px 13px;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:flex-start;background:var(--chip);color:var(--muted)}
.hint.warn{background:var(--warn-soft);color:var(--warn)}.hint.ok{background:var(--ok-soft);color:var(--ok)}.hint.acc{background:var(--accent-soft);color:var(--accent-strong)}.hint.bad{background:var(--bad-soft);color:var(--bad)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
.tw{overflow-x:auto}

/* Formular */
.fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.fl>label,.lbl{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.fl>label .src{margin-left:auto}
.fl.miss>label{color:var(--bad)}
.in,input.in,select.in,textarea.in{border:1.5px solid var(--line2);border-radius:11px;padding:10px 12px;background:var(--surface);color:var(--fg);font-size:15px;width:100%;min-width:0}
.in:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{min-height:90px;resize:vertical}
.fl.miss .in{border-color:var(--bad)}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:1px 0 0}
.toggle{appearance:none;width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;flex:none;margin:0;vertical-align:middle}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.toggle:checked{background:var(--accent)}.toggle:checked::after{left:19px}
.toggle:disabled{opacity:.5}
.pick{display:flex;flex-wrap:wrap;gap:7px}
.pick button{border:1.5px solid var(--line2);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:700;font-size:14px;cursor:pointer;color:var(--fg)}
.pick button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pick button.inc{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-strong)}
.pick.lic button{font-family:var(--f-mono);min-width:54px}
.suggest{position:relative}
.suggest .drop{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 30px rgba(26,21,48,.18);z-index:40;max-height:260px;overflow:auto}
.suggest .drop div{padding:9px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.suggest .drop div:hover,.suggest .drop div.on{background:var(--accent-soft)}
.thumb{width:120px;height:80px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:12px;font-weight:700;border:1.5px dashed var(--line2);cursor:pointer;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.days .wd{font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.days button{border:1.5px solid var(--line2);background:var(--surface);border-radius:10px;padding:8px 0;font-weight:700;cursor:pointer;color:var(--muted);font-size:13px}
.days button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.days button.we:not(.on){background:var(--chip)}
.prog{height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.prog i{display:block;height:100%}

/* Fenster */
.ov{position:fixed;inset:0;background:var(--overlay);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.sheet{background:var(--surface);border-radius:20px;width:min(720px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.sheet.wide{width:min(1000px,100%)}
.sheet .sh{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet .sb{padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.sheet .sf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--bad);color:#fff}

/* Login und Handy */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.authbox{width:min(420px,100%);display:flex;flex-direction:column;gap:16px}
.authbox .logo{justify-content:center;margin-bottom:6px}
.authbox .rlogo{--rs:44px;--bs:12px}
.mob{max-width:560px;margin:0 auto;padding:16px 16px 180px}
.sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mfoot{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(14px + env(safe-area-inset-bottom));z-index:15}
.mfoot .in2{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.bnav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:15}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--muted);padding:6px 14px;border-radius:12px;position:relative}
.bnav a.on{color:var(--accent-strong);background:var(--accent-soft)}
.bnav a .dot{position:absolute;top:4px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.steps{display:flex;gap:5px}.steps i{flex:1;height:5px;border-radius:99px;background:var(--line2)}.steps i.on{background:var(--accent)}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--fg);font-weight:400}
.sec .chev{margin-left:auto;color:var(--muted);font-size:18px}
.okdot{width:24px;height:24px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.pt{display:flex;gap:10px;font-size:14px;line-height:1.45}
.pt b.ic{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.sig{width:100%;height:190px;border:1.5px dashed var(--line2);border-radius:14px;background:#fff;touch-action:none;display:block}
.contract{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--chip);border-radius:12px;padding:14px;max-height:45vh;overflow:auto}
.qr svg{width:150px;height:150px;background:#fff;border-radius:10px;padding:6px}

@media (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .cols{flex-direction:column}.listcol{width:100%;position:static;max-height:none}.rows{max-height:none}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .top{gap:10px;padding:0 12px}.top .logo small{display:none}
  .page{padding:14px 14px 60px}
  dl.kv{grid-template-columns:minmax(0,1fr)}dl.kv dt{margin-top:4px;font-size:12px}
  .lage{gap:16px;padding:12px 16px}.lage b{font-size:19px}
  .ov{padding:0;align-items:flex-end}.sheet{border-radius:20px 20px 0 0;max-height:94vh}
}
@media (max-width:600px){.nav a{padding:8px 9px;font-size:13px}.iconbtn .lbl2{display:none}}

/* Bewertung */
.stars{color:#C98A00;font-weight:800;white-space:nowrap}.stars .off{color:var(--line2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stars{color:#F2C75C}}
:root[data-theme="dark"] .stars{color:#F2C75C}
.sp{display:inline-flex;gap:2px}.sp button{border:0;background:none;font-size:24px;line-height:1;padding:2px 3px;color:var(--line2);cursor:pointer}
.sp button.on{color:#E9B949}