/* Aus der freigegebenen Vorschau pruefung/entwuerfe-ui-v2.html uebernommen (nur Vorschau-Rahmen entfernt). Ergaenzungen in app.css. */
/* Light Mode nach GL-014 + GL-021 (Petrol trägt, Gold für Klickbares, kein Blau, kein Grün) */
:root{
  --bg:#F4F2EE; --card:#FFFFFF; --ink:#14110C; --ink2:#3A3322; --ink3:#6B6457;
  --line:rgba(20,17,12,.09); --chip:rgba(20,17,12,.05);
  --petrol:#315757; --petrol-in:#284647; --petrol-t:#2A7370; --petrol-l:#DCE9E8; --petrol-hi:#8CD7D2;
  --gold1:#D9B552; --gold2:#9A7611; --gold-t:#8A6A10; --gold-l:#F6EBC8;
  --orange:#c96a22; --orange-l:#F8E3D1;
  --glass:radial-gradient(ellipse 85% 70% at 15% 0%,rgba(70,150,150,.32),transparent 70%),linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 50%,rgba(0,0,0,.10)),#315757;
  --goldbtn:linear-gradient(180deg,#D9B552,#9A7611);
  --sh:0 0 0 1px rgba(20,17,12,.06),0 3px 6px rgba(20,17,12,.05),0 22px 44px -18px rgba(30,22,8,.28);
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace; --disp:"Sora",Inter,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#E4E0D8;color:var(--ink);font:14.5px/1.5 Inter,system-ui,sans-serif}
button{font:inherit;cursor:pointer}

/* Kopfleiste der App */
.bar{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.nav{display:flex;background:#fff;border-radius:14px;padding:5px;box-shadow:var(--sh);flex:1}
.nav span{flex:1;text-align:center;padding:10px;border-radius:10px;font-weight:600;color:var(--ink2)}
.nav span.on{background:var(--glass);color:#fff}
.search{background:#fff;border-radius:14px;box-shadow:var(--sh);padding:12px 16px;width:250px;color:var(--ink3)}
.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:600;white-space:nowrap}
.btn.gold{background:var(--goldbtn);color:#fff;box-shadow:0 6px 16px -8px rgba(154,118,17,.8)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn.sm{padding:8px 13px;border-radius:10px;font-size:13px}
.head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.head h2{font:300 30px var(--disp);margin:0;letter-spacing:-.01em}
.head .sub{color:var(--petrol-t);font-weight:500}
.card{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:18px 20px}
.lbl{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}

/* Statusleiste (protel Haus-Status + Casablanca Housekeeping) */
.stat{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1.35fr;gap:12px;margin-bottom:16px}
.st{cursor:pointer;transition:transform .15s}
.st:hover{transform:translateY(-2px)}
.st .n{font:300 34px/1.15 var(--disp);margin-top:4px}
.st .n small{font:400 15px Inter;color:var(--ink3)}
.st .s{color:var(--ink3);font-size:12.5px}
.prog{height:6px;border-radius:4px;background:var(--chip);overflow:hidden;margin-top:10px;display:flex}
.prog i{display:block;height:100%}
.st.main{background:var(--glass);color:#fff}.st.main .lbl,.st.main .s,.st.main .n small{color:rgba(255,255,255,.75)}
.st.main .prog{background:rgba(255,255,255,.18)}
.hk{display:flex;gap:14px;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.hk b{font:400 22px var(--disp);display:block;color:var(--ink)}

/* Neu eingegangen */
.inbox{background:var(--gold-l);border:1px solid rgba(154,118,17,.22);border-radius:16px;padding:6px 18px;margin-bottom:16px}
.inbox .r{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid rgba(154,118,17,.15)}
.inbox .r:first-child{border-top:0}
.inbox .t{font:600 11px var(--mono);color:var(--gold-t);width:52px}
.inbox .g{flex:1}

/* Listen */
.main2{display:grid;grid-template-columns:1fr 330px;gap:16px}
.seg{display:flex;gap:4px;background:var(--chip);padding:4px;border-radius:12px;margin-bottom:8px}
.seg span{flex:1;text-align:center;padding:8px;border-radius:9px;font-weight:600;color:var(--ink2);font-size:13.5px}
.seg span b{font:600 11px var(--mono);margin-left:6px;color:var(--ink3)}
.seg span.on{background:#fff;box-shadow:var(--sh);color:var(--ink)}
.row{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:14px;padding:11px 4px;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.room{font:600 12.5px var(--mono);background:var(--petrol-l);color:var(--petrol-in);border-radius:8px;padding:5px 0;text-align:center;position:relative}
.room.none{background:var(--orange-l);color:var(--orange)}
.who b{display:block;font-weight:600}.who small{color:var(--ink3)}
.sig{display:flex;gap:5px;align-items:center}
.ic{width:21px;height:21px;border-radius:50%;display:inline-grid;place-items:center;font:600 10.5px var(--mono)}
.ic.eur{background:var(--orange-l);color:var(--orange)}
.ic.mel{background:#fff;color:var(--petrol-t);box-shadow:inset 0 0 0 1.5px var(--petrol-t)}
.ic.inf{background:var(--chip);color:var(--ink2)}
.src{font:600 10px var(--mono);letter-spacing:.04em;padding:3px 7px;border-radius:6px}
.src.tel{background:var(--gold-l);color:var(--gold-t)}.src.web{background:var(--petrol-l);color:var(--petrol-in)}.src.dir{background:var(--chip);color:var(--ink3)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.d-s{background:var(--petrol-t)}.d-d{background:var(--orange)}.d-g{background:var(--gold1)}
.week .d{display:grid;grid-template-columns:54px 1fr 52px;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.week .d .tr{height:8px;border-radius:5px;background:var(--chip);overflow:hidden}.week .d .tr i{display:block;height:100%;background:var(--gold1)}
.week .d b{font:600 12px var(--mono);text-align:right}
.todo .t{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.todo .t:first-of-type{border-top:0}

/* Belegungsplan */
.planwrap{display:grid;grid-template-columns:1fr 330px;gap:16px}
.tape{display:grid;grid-template-columns:118px repeat(12,1fr);background:#fff;border-radius:18px;box-shadow:var(--sh);overflow:hidden;position:relative}
.tape .dh{height:54px;text-align:center;padding-top:8px;border-left:1px solid var(--line);font-size:11.5px;color:var(--ink3)}
.tape .dh b{display:block;font:400 16px var(--disp);color:var(--ink)}
.tape .dh.we{background:rgba(20,17,12,.03)}
.tape .dh.today b{color:var(--petrol-t);font-weight:600}
.tape .fr{height:26px;border-left:1px solid var(--line);border-top:1px solid var(--line);font:600 11px var(--mono);text-align:center;line-height:26px;color:var(--petrol-t);background:var(--bg)}
.tape .fr.zero{color:var(--orange)}
.tape .frh{height:26px;border-top:1px solid var(--line);font:600 9.5px var(--mono);letter-spacing:.12em;color:var(--ink3);padding:6px 12px;background:var(--bg)}
.tape .cat{grid-column:1/-1;font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);padding:6px 12px;border-top:1px solid var(--line)}
.tape .rh{border-top:1px solid var(--line);padding:0 12px;height:44px;display:flex;align-items:center;gap:8px}
.tape .rh b{font:600 13px var(--mono)}.tape .rh small{color:var(--ink3);font-size:11.5px}
.tape .c{border-left:1px solid var(--line);border-top:1px solid var(--line);height:44px}
.tape .c.we{background:rgba(20,17,12,.022)}
.todayline{position:absolute;top:54px;bottom:0;width:2px;background:var(--gold1);z-index:2;opacity:.9}
.bk{position:absolute;height:32px;border-radius:8px;padding:0 8px 0 11px;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,17,12,.10),0 2px 4px rgba(20,17,12,.06);z-index:3;transition:transform .15s,box-shadow .15s}
.bk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.bk.tel::before{background:var(--gold1)}.bk.web::before{background:var(--petrol-t)}.bk.dir::before{background:#B9B2A6}
.bk.in{background:var(--petrol-l)}
.bk.sel{box-shadow:0 0 0 2px var(--gold1),0 10px 22px -10px rgba(154,118,17,.7)}
.bk:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(20,17,12,.14),0 10px 20px -10px rgba(0,0,0,.35)}
.bk .ic{width:17px;height:17px;font-size:9px;flex:none}
.bk span.nm{overflow:hidden;text-overflow:ellipsis}
.plus{position:absolute;height:32px;border-radius:8px;border:1.5px dashed var(--gold1);background:var(--gold-l);color:var(--gold-t);display:grid;place-items:center;font:600 18px var(--mono);z-index:3}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--ink2);font-size:12.5px;align-items:center}
.legend .sw{display:inline-block;width:18px;height:12px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px var(--line);border-left:4px solid;vertical-align:-1px;margin-right:6px}

/* Seitenfenster */
.panel h3{font:300 22px var(--disp);margin:4px 0 2px}
.panel .meta{color:var(--ink3);font-size:13px;margin-bottom:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;padding:12px 0;border-top:1px solid var(--line)}
.kv span{color:var(--ink3)}
.quote{background:var(--gold-l);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink2);margin:8px 0 12px}
.quote b{display:block;font:600 10px var(--mono);letter-spacing:.12em;color:var(--gold-t);margin-bottom:3px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.acts .btn{text-align:center}
.warn{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--orange);background:var(--orange-l);border-radius:10px;padding:8px 10px;margin-top:6px}

/* Neue Buchung */
.steps{display:flex;gap:6px;margin:6px 0 14px}
.steps span{flex:1;font:600 10px var(--mono);letter-spacing:.08em;text-align:center;padding:6px 0;border-radius:8px;background:var(--chip);color:var(--ink3)}
.steps span.on{background:var(--glass);color:#fff}
.fld{background:var(--bg);border-radius:12px;padding:8px 12px;margin-bottom:8px}
.fld small{display:block;font-size:11px;color:var(--ink3)}
.fld b{font-weight:500}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;justify-content:space-between;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.opt.on{box-shadow:inset 0 0 0 2px var(--gold1)}
.opt small{display:block;color:var(--ink3);font-size:12px}

/* Handy */
.ph h2{font:300 23px var(--disp);margin:0}
.ph .sub{color:var(--petrol-t);font-weight:500;margin-bottom:14px}
.ph .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ph .card{padding:14px 15px}
.ph .row{grid-template-columns:52px 1fr auto;gap:10px}
.ph .tabbar{position:sticky;bottom:-26px;margin:16px -16px -26px;background:#fff;border-top:1px solid var(--line);display:flex;padding:10px 0 18px}
.ph .tabbar span{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--ink3)}
.ph .tabbar span.on{color:var(--petrol-t)}
.hkrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.hkrow:first-child{border-top:0}
.hkrow .rn{font:600 15px var(--mono);width:44px}
.hkrow .w{flex:1}.hkrow .w small{display:block;color:var(--ink3);font-size:12px}
.pill{border:0;border-radius:10px;padding:8px 12px;font-weight:600;font-size:12.5px}