/* OS Panel Entertain – Shell «OS Panel 2030 · Spital-Ton» (DESIGN-2030.md)
 * Tag (Standard): helles, klares Tageslicht – warmes Weiss, helles Milchglas, dunkle Schrift, OSP-Violett als dezente Klammer.
 * Nacht (html.night, 21–07): dunkel-warm, gedimmt. Fotos: Alltag, Natur, Tageslicht. */
:root{--fs:1;--acc:#8b3ee2;--acc2:#6f2bc0;--accs:rgba(139,62,226,.10);
  --bg:#f3f1ed;--paper:#fbfaf8;--card:#ffffff;--ink:#1b2027;--ink2:rgba(27,32,39,.66);--line:rgba(27,32,39,.11);
  --chrome:rgba(255,255,255,.76);--cline:rgba(27,32,39,.08);
  --glass:rgba(255,255,255,.7);--glass2:rgba(255,255,255,.62);--glass3:rgba(27,32,39,.055);--gline:rgba(255,255,255,.9);--blur:28px;
  --ok:#1f8a5b;--warm:#b8650f;--bad:#c2412d;
  --shadow:0 18px 44px rgba(32,40,52,.14),0 2px 6px rgba(32,40,52,.06);--ease:cubic-bezier(.2,.7,.2,1)}
html.night{--acc2:#c7a4ee;--accs:rgba(199,164,238,.12);--bg:#08070a;--paper:#141117;--card:#17141a;--ink:#f1ebe2;--ink2:rgba(241,235,226,.64);--line:rgba(255,236,210,.12);
  --chrome:rgba(18,15,20,.55);--cline:rgba(255,236,210,.13);
  --glass:rgba(18,15,20,.5);--glass2:rgba(255,240,220,.06);--glass3:rgba(255,240,220,.1);--gline:rgba(255,236,210,.13);--ok:#b9d9a8;--warm:#f0c27a;--bad:#ff9a8a;
  --shadow:0 24px 60px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2)}
/* Spiel-Bühne: Module sind als ruhige, dunkle Fokusfläche gebaut → dort gelten tagsüber die dunklen Glas-Werte (Rückwärtskompatibel) */
html:not(.night) .osp-stage{--ink:#f4f6f9;--ink2:rgba(244,246,249,.68);--line:rgba(255,255,255,.14);--glass:rgba(22,26,33,.42);--glass2:rgba(255,255,255,.08);--glass3:rgba(255,255,255,.14);--gline:rgba(255,255,255,.17);--ok:#7ee2b8;--warm:#ffd27a;--bad:#ff9a8a;--acc2:#b98cf2;color:#fff}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:calc(20px*var(--fs));overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:disabled{cursor:default}
#app{height:100%;position:relative;overflow:hidden}
.lt{display:block}.dk{display:none}html.night .lt{display:none}html.night .dk{display:block}
.osp-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.osp-glass{background:var(--glass2);border:1px solid var(--gline);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.osp-num{font-variant-numeric:tabular-nums}

/* Hintergrund */
.osp-bd{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--bg)}
.osp-bd-img{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:osp-kb 70s ease-in-out infinite alternate}
.osp-bd-scrim{position:absolute;inset:0}
/* Tag: Startseite – Landschaft schimmert rechts oben durch wie ein Fenster, links ruhiges Weiss */
.osp-bd.home .osp-bd-img{inset:-3% -3% 30% 18%;filter:saturate(1.02);background-position:center 40%}
.osp-bd.home .osp-bd-scrim{background:linear-gradient(90deg,var(--bg) 18%,rgba(243,241,237,.9) 34%,rgba(243,241,237,.42) 62%,rgba(243,241,237,.12) 100%),linear-gradient(180deg,rgba(243,241,237,.1) 0,rgba(243,241,237,.25) 34%,var(--bg) 66%)}
/* Tag: Welt – helles Milchglas über dem Weltfoto */
.osp-bd.world .osp-bd-img{inset:-8%;filter:blur(46px) saturate(1.1) brightness(1.04)}
.osp-bd.world .osp-bd-scrim{background:linear-gradient(180deg,rgba(243,241,237,.62) 0,rgba(243,241,237,.82) 40%,rgba(243,241,237,.9) 100%)}
/* Bühne: dunkle, ruhige Fläche (Module legen meist eigenes Bild darüber) */
.osp-bd.mod{background:#0b0f14}
.osp-bd.mod .osp-bd-img{filter:blur(44px) brightness(.32) saturate(1.05);inset:-8%}
html.night .osp-bd.home .osp-bd-img{inset:-8%;filter:blur(44px) brightness(.22) saturate(.8) sepia(.15)}
html.night .osp-bd.home .osp-bd-scrim{background:radial-gradient(1200px 700px at 20% 10%,rgba(80,90,130,.12),transparent 70%)}
html.night .osp-bd.world .osp-bd-img{filter:blur(46px) brightness(.26) saturate(.7) sepia(.18)}
html.night .osp-bd.world .osp-bd-scrim{background:linear-gradient(180deg,rgba(8,7,10,.2),rgba(8,7,10,.55))}
html.night .osp-bd.mod .osp-bd-img{filter:blur(44px) brightness(.22) saturate(.8) sepia(.15)}
@keyframes osp-kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-1%,-.6%,0)}}

/* Glas-Leiste (hell am Tag) */
.osp-top{position:absolute;z-index:30;top:8px;left:24px;right:24px;height:72px;border-radius:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4px;
  background:var(--chrome);border:1px solid var(--cline);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);box-shadow:0 8px 26px rgba(32,40,52,.10);color:var(--ink)}
html.night .osp-top{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.osp-top-l{display:flex;align-items:center;gap:14px;min-width:0}
.osp-top-r{display:flex;gap:6px;justify-content:flex-end}
.osp-ttl{font-size:1.2em;font-weight:500;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:900px}
.osp-back{height:64px;padding:0 26px 0 16px;border-radius:20px;background:var(--glass3);display:flex;align-items:center;gap:8px;font-size:1em;font-weight:500;transition:background .3s}
.osp-back:active,.osp-ctl:active{background:var(--accs)}
.osp-back-ic{font-size:1.5em;display:flex;color:var(--acc)}
html.night .osp-back-ic{color:inherit}
.osp-ctl{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:30px;color:inherit;opacity:.85;transition:background .3s}
.osp-stage{position:absolute;z-index:2;top:88px;left:0;right:0;bottom:0;overflow:hidden}
.osp-app.is-full .osp-stage{top:0}
/* fullBleed: nur schwebender Zurück-Knopf (Freiraum links oben 230×120 px) */
.osp-float{position:absolute;z-index:30;top:24px;left:24px}
.osp-float .osp-back{height:84px;padding:0 30px 0 20px;border-radius:26px;background:rgba(255,255,255,.88);color:#1b2027;border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(0,0,0,.22);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html.night .osp-float .osp-back{background:rgba(18,15,20,.62);color:var(--ink);border-color:var(--gline)}

/* Startseite */
.osp-home{position:absolute;inset:0;z-index:2;padding:40px 64px 30px;display:flex;flex-direction:column;color:var(--ink)}
.osp-home-top{display:flex;align-items:center;justify-content:space-between;height:72px}
.osp-brand{display:flex;align-items:center;gap:20px;font-size:22px;font-weight:400;letter-spacing:.02em}
/* Logo-SVG hat 1000×1000 mit Inhalt bei y 357–644 → Rahmen schneidet zu, Höhe 46px */
.osp-logo{position:relative;display:block;height:46px;width:150px;overflow:hidden}
.osp-logo img{position:absolute;height:160px;width:160px;left:-5px;top:-57px;max-width:none}
.osp-brand-t{padding-left:20px;border-left:1px solid var(--line);line-height:34px;color:var(--ink2)}
.osp-meta{display:flex;align-items:center;gap:16px}
.osp-ctls{display:flex;gap:6px;padding:4px;border-radius:26px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:0 6px 20px rgba(32,40,52,.08)}
html.night .osp-ctls{box-shadow:none}
.osp-hello{margin-top:22px}
.osp-clock{font-size:calc(128px*var(--fs));font-weight:200;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.osp-date{font-size:1.35em;font-weight:300;color:var(--ink2);margin-top:14px}
.osp-welcome{font-size:1.05em;font-weight:300;color:var(--ink2);margin-top:8px}
.osp-chips{position:absolute;right:64px;top:170px;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.osp-chip{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:0 26px;border-radius:999px;font-size:1em;font-weight:400;color:var(--ink);background:var(--glass);box-shadow:0 8px 24px rgba(32,40,52,.10);animation:osp-in 1s var(--ease) both}
html.night .osp-chip{box-shadow:none}
.osp-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(31,138,91,.14);flex:none;animation:osp-breathe 3.2s ease-in-out infinite}
.osp-chip.warm .osp-dot{background:var(--warm);box-shadow:0 0 0 4px rgba(184,101,15,.14)}
html.night .osp-dot{box-shadow:0 0 12px var(--ok)}html.night .osp-chip.warm .osp-dot{box-shadow:0 0 12px var(--warm)}
@keyframes osp-breathe{50%{opacity:.45}}
.osp-cards{margin-top:auto;height:calc(574px - (var(--fs) - 1)*250px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.osp-card{position:relative;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);text-align:left;color:var(--ink);background:var(--card);isolation:isolate;animation:osp-rise 1.1s var(--ease) both;animation-delay:calc(var(--i)*.09s);transition:transform .5s var(--ease)}
.osp-card:active{transform:scale(.985)}
.osp-card-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;animation:osp-kb 50s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-9s)}
.osp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.5);z-index:2;pointer-events:none}
.osp-card-in{position:absolute;left:12px;right:12px;bottom:12px;min-height:calc(232px*var(--fs));padding:22px 24px 22px;border-radius:22px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.osp-card-hd{display:flex;align-items:center;gap:14px}
.osp-card-ic{width:52px;height:52px;border-radius:50%;background:var(--accs);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;flex:none}
.osp-card h2{margin:0;font-size:1.9em;font-weight:400;letter-spacing:-.01em}
.osp-card p{margin:12px 0 0;font-size:1em;font-weight:400;color:var(--ink2);line-height:1.4}
.osp-tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.osp-tags span{font-size:1em;padding:5px 14px;border-radius:999px;background:rgba(27,32,39,.06);color:var(--ink2)}
html.night .osp-card,html.night .osp-mod{background:#111}
html.night .osp-card-img,html.night .osp-mod-img{filter:brightness(.5) saturate(.7) sepia(.14)}
html.night .osp-card-in,html.night .osp-mod-glass{background:rgba(18,15,20,.58);border-color:rgba(255,236,210,.12)}
html.night .osp-card::before,html.night .osp-mod::before{border-color:rgba(255,236,210,.1)}
html.night .osp-card-ic,html.night .osp-mod-ic{background:rgba(255,240,220,.08);color:var(--acc2)}
html.night .osp-tags span{background:rgba(255,240,220,.08)}
/* Fusszeile: Zimmer + Pflege-Hinweis (ruhig, ohne medizinische Daten) */
.osp-foot{display:flex;align-items:center;gap:36px;margin-top:20px;min-height:40px;font-size:1em;color:var(--ink2)}
.osp-foot>span{display:flex;align-items:center;gap:12px}
.osp-foot-ic{font-size:26px;display:flex;color:var(--acc)}
html.night .osp-foot-ic{color:var(--acc2)}
.osp-foot-room{color:var(--ink);font-weight:500}
@keyframes osp-rise{from{opacity:0;transform:translateY(34px)}}
@keyframes osp-in{from{opacity:0;transform:translateY(-8px)}}

/* Welt-Ansicht */
.osp-world{position:absolute;inset:0;z-index:2;padding:130px 64px 56px;display:flex;flex-direction:column;color:var(--ink)}
.osp-world-head{max-width:1100px;animation:osp-rise 1s var(--ease) both;display:flex;flex-direction:column}
.osp-world-ic{width:72px;height:72px;border-radius:50%;background:var(--accs);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:38px}
html.night .osp-world-ic{color:var(--acc2)}
.osp-world-head h1{margin:22px 0 8px;font-size:calc(80px*var(--fs));font-weight:300;letter-spacing:-.02em;line-height:1}
.osp-world-head p{margin:0;font-size:1.3em;font-weight:300;color:var(--ink2);line-height:1.45}
.osp-mods{margin-top:auto;display:grid;gap:28px;height:calc(560px - (var(--fs) - 1)*200px)}
.osp-mods.n1{grid-template-columns:minmax(0,680px)}
.osp-mods.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.osp-mods.n3{grid-template-columns:repeat(3,1fr)}
.osp-mods.n4{grid-template-columns:repeat(4,1fr)}
.osp-mod{position:relative;border-radius:30px;overflow:hidden;text-align:left;color:var(--ink);background:var(--card);isolation:isolate;box-shadow:var(--shadow);animation:osp-rise 1.1s var(--ease) both;animation-delay:calc(.15s + var(--i)*.07s);transition:transform .5s var(--ease)}
.osp-mod:active{transform:scale(.985)}
.osp-mod::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.5);z-index:3;pointer-events:none}
.osp-mod-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-1;transition:transform 1.2s var(--ease)}
.osp-mod-glass{position:absolute;left:12px;right:12px;bottom:12px;min-height:calc(160px*var(--fs));border-radius:22px;padding:22px 20px 22px 22px;display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.osp-mod-ic{width:60px;height:60px;border-radius:50%;background:var(--accs);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:30px;flex:none}
.osp-mod-txt{flex:1;min-width:0}
.osp-mod h3{margin:0 0 6px;font-size:1.5em;font-weight:500;letter-spacing:-.005em}
.osp-mod p{margin:0;font-size:1em;font-weight:400;color:var(--ink2);line-height:1.38}
.osp-mod-go{font-size:30px;color:var(--ink2);flex:none}
.osp-mod-live{position:absolute;left:18px;top:18px;right:18px;display:flex}
.osp-mod-live .osp-chip{min-height:56px;padding:0 20px;font-size:1em}
.osp-empty{font-size:1.2em;color:var(--ink2)}
/* Welt mit Abschnitten (z.B. Spiele & Rätsel: Rätsel · Karten & Brett · Aufbau) */
.osp-world.grouped{padding:116px 64px 44px}
.osp-world.grouped .osp-world-head{flex-direction:row;align-items:center;gap:24px;max-width:none}
.osp-world.grouped .osp-world-head h1{margin:0 0 6px;font-size:calc(60px*var(--fs))}
.osp-world.grouped .osp-world-head p{font-size:1.15em}
.osp-groups{flex:1;min-height:0;margin-top:26px;display:flex;gap:40px}
.osp-group{flex:var(--cols) 1 0;min-width:0;display:flex;flex-direction:column;animation:osp-rise 1s var(--ease) both}
.osp-group-t{margin:0 0 16px;padding:0 4px 12px;font-size:1em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line)}
.osp-ggrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}
.osp-ggrid.solo{grid-template-rows:minmax(0,1fr)}
.osp-mod.compact{border-radius:26px}
.osp-mod.compact .osp-mod-glass{left:10px;right:10px;bottom:10px;min-height:0;padding:16px 16px 16px 16px;gap:14px;border-radius:18px;align-items:flex-start}
.osp-mod.compact .osp-mod-ic{width:52px;height:52px;font-size:26px}
.osp-mod.compact h3{font-size:1.3em;margin:4px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osp-mod.compact p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.osp-ggrid.solo .osp-mod.compact p{-webkit-line-clamp:4}
.osp-mod.compact .osp-mod-live{left:12px;top:12px;right:12px}
.osp-mod.compact .osp-mod-live .osp-chip{min-height:52px;padding:0 18px}

/* Knöpfe, Modal, Toast */
.osp-btn{height:64px;padding:0 32px;border-radius:20px;background:var(--glass3);border:1px solid var(--line);color:inherit;font-weight:500;letter-spacing:.005em;transition:background .3s,transform .2s}
.osp-btn:active{transform:scale(.98)}
.osp-btn.primary{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
html.night .osp-btn.primary{background:#efe7dc;color:#111;border-color:#efe7dc}
.osp-modal{position:fixed;inset:0;background:rgba(27,32,39,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:80;animation:osp-fade .35s both}
.osp-modal-box{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(40px) saturate(1.2);-webkit-backdrop-filter:blur(40px) saturate(1.2);color:#1b2027;border-radius:32px;padding:40px 44px 34px;max-width:760px;width:90%;line-height:1.5;box-shadow:0 30px 80px rgba(20,26,34,.3);animation:osp-pop .45s var(--ease) both}
html.night .osp-modal{background:rgba(4,6,10,.5)}
html.night .osp-modal-box{color:var(--ink);background:rgba(20,17,22,.86);border-color:var(--gline)}
.osp-modal-box h2{font-weight:500;font-size:1.6em;letter-spacing:-.005em}
.osp-modal-box p,.osp-modal-box li{color:rgba(27,32,39,.74);font-weight:400}
html.night .osp-modal-box p,html.night .osp-modal-box li{color:rgba(241,235,226,.78);font-weight:300}
.osp-modal-box .osp-btn{color:#1b2027;background:rgba(27,32,39,.06);border-color:rgba(27,32,39,.12)}
.osp-modal-box .osp-btn.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
html.night .osp-modal-box .osp-btn{color:var(--ink);background:rgba(255,240,220,.1);border-color:var(--gline)}
html.night .osp-modal-box .osp-btn.primary{background:#efe7dc;color:#111;border-color:#efe7dc}
.osp-modal-row{display:flex;gap:14px;justify-content:flex-end;margin-top:26px}
@keyframes osp-fade{from{opacity:0}}
@keyframes osp-pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.osp-toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,20px);opacity:0;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:#1b2027;padding:18px 32px;border-radius:999px;font-weight:500;transition:.5s var(--ease);z-index:85;box-shadow:0 18px 44px rgba(20,26,34,.25)}
html.night .osp-toast{background:rgba(24,22,28,.72);border-color:var(--gline);color:var(--ink);font-weight:400}
.osp-toast.on{opacity:1;transform:translate(-50%,0)}
.osp-err{padding:40px;text-align:center}
/* Lichtschimmer (ersetzt Konfetti) */
.osp-shimmer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden;background:radial-gradient(900px 520px at 50% 30%,rgba(255,246,225,.22),transparent 70%);animation:osp-glow 2.4s ease-out both}
.osp-shimmer::after{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14) 45%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.14) 55%,transparent);transform:skewX(-14deg);animation:osp-sweep 2.2s cubic-bezier(.4,.1,.2,1) both}
@keyframes osp-glow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes osp-sweep{to{left:110%}}
@media (prefers-reduced-motion:reduce){.osp-bd-img,.osp-card-img{animation:none}}

/* 01.10.: Logo, Einstellungen und Uhr entfernt (OS Panel zeigt sie bereits) */
.osp-home{padding-top:48px}
.osp-home .osp-cards{flex:none;height:calc(560px - (var(--fs) - 1)*240px);width:100%;margin:auto 0}
.osp-home .osp-chips:empty{display:none}
.osp-home .osp-chips{margin-bottom:20px}
.osp-hello-min{margin-bottom:8px}

/* 02.10.: alle 4 Glas-Schilder gleich hoch, Texte gekürzt statt umgebrochen */
.osp-home .osp-card-in{min-height:0;height:calc(232px*var(--fs));box-sizing:border-box;display:flex;flex-direction:column}
.osp-home .osp-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.osp-home .osp-tags{flex-wrap:nowrap;overflow:hidden;margin-top:auto}
.osp-home .osp-tags span{white-space:nowrap}