/* RAUMRISS · Hub, Systemmonitor und ALIVEVISUAL-Menü an der Mac-Menüleiste.
   Maße in em = pt der echten Apps; --pt rechnet sie auf die Größe des Bildschirms um. */
@font-face{font-family:"Space Mono";src:url("fonts/SpaceMono-Regular.ttf");font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Bold.ttf");font-weight:700;font-display:swap}

.bildschirm{--pt:.62px}
.desk{--pt:.9px}
.mac-panel[hidden]{display:none!important}
.mac-panel{position:absolute;left:auto;top:26px;z-index:58;font-size:calc(12*var(--pt));text-align:left;letter-spacing:0;line-height:1.3}
.bildschirm .mac-panel{top:24px}
.mac-panel button{font:inherit;color:inherit;cursor:pointer}
.mb-sym[aria-expanded="true"]{background:rgba(255,255,255,.22)}

/* ---------- Roadie Systemmonitor (330 pt, helles Popover) ---------- */
.mon{width:calc(330*var(--pt));padding:calc(12*var(--pt));border-radius:calc(14*var(--pt));background:rgba(246,244,241,.9);color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:0 0 0 .5px rgba(0,0,0,.2),0 14px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:calc(8*var(--pt))}
.mon-kopf{display:flex;align-items:baseline;gap:calc(6*var(--pt))}
.mon-kopf b{font-size:calc(17*var(--pt));font-weight:700}
.mon-kopf span{font-size:calc(12*var(--pt));color:rgba(0,0,0,.5)}
.mon-kopf em{margin-left:auto;font-style:normal;font-size:calc(11*var(--pt));color:rgba(0,0,0,.5)}
.mon-sek{background:rgba(255,255,255,.55);border-radius:calc(10*var(--pt));padding:calc(8*var(--pt)) calc(10*var(--pt));display:flex;flex-direction:column;gap:calc(4*var(--pt));min-width:0}
.mon-titel{display:flex;justify-content:space-between;font-size:calc(11.5*var(--pt));font-weight:600}
.mon-titel b{font-weight:600;color:rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.mon canvas{width:100%;height:calc(40*var(--pt));display:block}
.mon-zwei canvas{height:calc(26*var(--pt))}
.mon-leg{display:flex;gap:calc(14*var(--pt));font-size:calc(10.5*var(--pt));color:rgba(0,0,0,.6)}
.mon-leg i,.mon-proz i{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.4em}
.mon-leg b{font-weight:500;font-variant-numeric:tabular-nums}
.mon-proz{display:flex;align-items:center;gap:calc(8*var(--pt));font-size:calc(12*var(--pt));padding:1px 0}
.mon-proz i{width:1.1em;height:1.1em;border-radius:.3em;margin:0}
.mon-proz span{flex:1}
.mon-proz b{font-weight:400;font-variant-numeric:tabular-nums}
.mon-zwei{display:grid;grid-template-columns:1fr 1fr;gap:calc(10*var(--pt))}
.mon small{font-size:calc(10.5*var(--pt));color:rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.mon-bar{display:block;height:calc(6*var(--pt));border-radius:calc(9*var(--pt));background:rgba(0,0,0,.08);overflow:hidden}
.mon-bar i{display:block;height:100%;border-radius:calc(9*var(--pt));background:#26221e}
.mon-disk{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(12*var(--pt))}
.mon-disk small{font-size:.9em}
.mon-knoepfe{display:flex;gap:calc(8*var(--pt))}
.mon-knoepfe button{flex:1;border:0;border-radius:calc(99*var(--pt));padding:calc(6*var(--pt)) calc(10*var(--pt));font-size:calc(12*var(--pt));font-weight:600;background:rgba(0,0,0,.07)}
.mon-knoepfe button:last-child{flex:none;width:3em}
.mon-knoepfe .primaer{background:#26221e;color:#fff}
.mon-hinweis{margin:0;font-size:calc(10*var(--pt));color:rgba(0,0,0,.45);text-align:center}

/* ---------- ALIVENINE Hub (klappt von oben auf, Maße aus dem Hub-Bild) ---------- */
.hub{width:calc(1322*var(--pt));max-width:calc(100% - 12px);max-height:calc(100% - 34px);overflow:auto;border-radius:0 0 calc(18*var(--pt)) calc(18*var(--pt));background:rgba(22,22,26,.8);backdrop-filter:blur(34px) saturate(150%);-webkit-backdrop-filter:blur(34px) saturate(150%);color:#eeebe4;
  font-family:"Space Mono",ui-monospace,monospace;box-shadow:0 calc(30*var(--pt)) calc(80*var(--pt)) rgba(0,0,0,.6),0 0 0 1px #262626;transform-origin:top right;animation:hubAuf .32s cubic-bezier(.3,1.2,.5,1)}
@keyframes hubAuf{from{opacity:0;transform:translateY(-12px) scale(.98)}}
.hub-kopf{display:flex;align-items:center;gap:calc(16*var(--pt));padding:calc(16*var(--pt)) calc(24*var(--pt));border-bottom:1px solid #262626}
.hub-logo{width:calc(44*var(--pt));height:calc(44*var(--pt));border-radius:calc(10*var(--pt));background:#1d1d1d;border:1px solid #333;display:grid;place-items:center;color:#eeebe4}
.hub-logo svg{width:calc(26*var(--pt));height:calc(26*var(--pt))}
.hub-logo svg circle{fill:#ff3d7f}
.hub-marke{font-family:"Instrument Sans",sans-serif;font-size:calc(26*var(--pt));font-weight:700;letter-spacing:calc(-.01*var(--pt));line-height:1}
.hub-marke em{font-style:normal;font-weight:400}
.hub-marke .i,.vis-kopf .i{position:relative}
.hub-marke .i i,.vis-kopf .i i{position:absolute;left:50%;top:.08em;width:.3em;height:.3em;margin-left:-.15em;border-radius:50%;background:#ff3d7f}
.hub-kopf small{display:block;margin-top:calc(6*var(--pt));font-size:calc(8.5*var(--pt));color:#7a7a7a}
.hub-platz{flex:1}
.hub-kopf button{height:calc(34*var(--pt));min-width:calc(126*var(--pt));padding:0 calc(18*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #3a3a3a;background:#191919;font-size:calc(9.5*var(--pt))}
.hub-kopf button.breit{min-width:calc(208*var(--pt))}
.hub-kopf .mond{min-width:calc(34*var(--pt));width:calc(34*var(--pt));padding:0;font-size:calc(15*var(--pt))}
.hub-kopf button:hover,.hub-reiter button:hover,.hub-raster button:hover,.hub-breit:hover,.hub-karte button:hover{border-color:#ff3d7f}
.hub-status{background-color:rgba(8,8,8,.88)!important;margin:calc(16*var(--pt)) calc(24*var(--pt));height:calc(130*var(--pt));border-radius:calc(14*var(--pt));border:1px solid #2a2a2a;background:#0f0f0f radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/calc(6*var(--pt)) calc(6*var(--pt));display:flex;align-items:center;gap:calc(30*var(--pt));padding:0 calc(24*var(--pt))}
.hub-zahlen{display:flex;gap:calc(70*var(--pt))}
.hub-zahlen b{display:block;font-size:calc(30*var(--pt));font-weight:700;line-height:1}
.hub-zahlen small{display:block;margin-top:calc(10*var(--pt));font-size:calc(9*var(--pt));color:#8a8a8a}
.pink{color:#ff3d7f}
.hub-punkte{display:flex;gap:calc(6*var(--pt));flex-wrap:wrap;margin-left:auto;max-width:calc(440*var(--pt))}
.hub-punkt{display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--pt));width:calc(13*var(--pt))}
.hub-punkt i{width:calc(12*var(--pt));height:calc(12*var(--pt));border-radius:50%;background:var(--c);opacity:.8}
.hub-punkt.glimmt i{opacity:1;box-shadow:0 0 calc(10*var(--pt)) calc(2*var(--pt)) var(--c)}
.hub-punkt.leer i{background:none;border:1.5px solid var(--c)}
.hub-punkt.laedt i{transform:scale(1.5);opacity:1;box-shadow:0 0 calc(14*var(--pt)) calc(3*var(--pt)) var(--c)}
.hub-punkt i{transition:transform .15s,box-shadow .15s}
.hub-punkt small{font-size:calc(7*var(--pt));color:#9a9a9a;white-space:nowrap}
.hub-meldung{width:calc(230*var(--pt))}
.hub-meldung b{display:block;font-size:calc(9.5*var(--pt))}
.hub-meldung small{display:block;margin-top:calc(6*var(--pt));font-size:calc(8.5*var(--pt));color:#8a8a8a}
.hub-reiter{display:flex;gap:calc(8*var(--pt));padding:0 calc(24*var(--pt));flex-wrap:wrap}
.hub-reiter button{height:calc(30*var(--pt));padding:0 calc(18*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #333;background:#181818;font-size:calc(9.5*var(--pt))}
.hub-reiter button.an{border-color:#ff3d7f;color:#fff}
.hub-inhalt{padding:calc(14*var(--pt)) calc(24*var(--pt))}
.hub-start{display:grid;grid-template-columns:516fr 406fr 318fr;gap:calc(17*var(--pt));min-height:calc(470*var(--pt))}
.hub-modul{background:rgba(27,27,27,.86);border:1px solid #2b2b2b;border-radius:calc(14*var(--pt));padding:calc(16*var(--pt)) calc(17*var(--pt));display:flex;flex-direction:column;gap:calc(10*var(--pt));min-width:0}
.hub-modul h5{margin:0 0 calc(4*var(--pt));display:flex;justify-content:space-between;align-items:baseline;font-family:"Instrument Sans",sans-serif;font-size:calc(14*var(--pt));font-weight:700}
.hub-modul h5 span{font-family:"Space Mono",monospace;font-size:.57em;font-weight:400;color:#6a6a6a}
.leise{margin:0;font-size:calc(8.5*var(--pt));color:#7a7a7a}
.hub-unten{margin-top:auto;display:flex;gap:calc(10*var(--pt));justify-content:flex-end}
.hub-unten button{height:calc(32*var(--pt));padding:0 calc(30*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #2e2e2e;background:none;font-size:calc(9*var(--pt));color:#555}
.hub-notizen{flex:1;min-height:calc(200*var(--pt));border:1px solid #333;border-radius:calc(10*var(--pt));padding:calc(10*var(--pt));overflow:auto}
.hub-notizen p{margin:0 0 calc(6*var(--pt));font-size:calc(9.5*var(--pt))}
.hub-modul input{height:calc(34*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #333;background:#181818;color:#eeebe4;font:inherit;font-size:calc(9.5*var(--pt));padding:0 calc(12*var(--pt));outline:none}
.hub-modul input:focus{border-color:#ff3d7f}
.hub-spalte{display:flex;flex-direction:column;gap:calc(17*var(--pt))}
.hub-raster{display:grid;grid-template-columns:1fr 1fr;gap:calc(9*var(--pt))}
.hub-raster button{height:calc(32*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #333;background:#181818;font-size:calc(9*var(--pt))}
.hub-raster button.an{border-color:#ff3d7f;color:#fff}
.hub-zahl{display:flex;align-items:center;gap:calc(20*var(--pt));margin-bottom:calc(8*var(--pt))}
.hub-zahl b{font-size:calc(22*var(--pt))}
.hub-zahl span{font-size:calc(8.5*var(--pt));color:#bbb}
.hub-zeile{display:flex;align-items:center;gap:calc(10*var(--pt));border:0;background:none;padding:calc(6*var(--pt)) 0;font-size:calc(9.5*var(--pt));text-align:left}
.hub-zeile i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.hub-zeile span{margin-left:auto;color:#666}
.hub-breit{margin-top:auto;height:calc(34*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #333;background:#181818;font-size:calc(9.5*var(--pt))}
.hub-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(290*var(--pt)),1fr));gap:calc(14*var(--pt))}
.hub-karte{background:#1b1b1b;border:1px solid #2b2b2b;border-radius:calc(14*var(--pt));padding:calc(14*var(--pt)) calc(16*var(--pt));display:flex;flex-direction:column;gap:calc(7*var(--pt))}
.hub-k-kopf{display:flex;align-items:center;gap:calc(10*var(--pt))}
.hub-k-kopf i{width:calc(12*var(--pt));height:calc(12*var(--pt));border-radius:50%;background:var(--c);box-shadow:0 0 calc(8*var(--pt)) var(--c)}
.hub-k-kopf span{font-family:"Instrument Sans",sans-serif;font-size:calc(15*var(--pt))}
.hub-k-kopf em{margin-left:auto;font-style:normal;font-size:calc(8.5*var(--pt));color:#777}
.hub-karte small{font-size:calc(8.5*var(--pt));color:#8a8a8a}
.hub-karte p{margin:0;font-size:calc(9*var(--pt));color:#9fd8a8}
.hub-karte p.warn{color:#ff3d7f}
.hub-karte ul{margin:0;padding:0 0 0 calc(14*var(--pt));font-size:calc(8.5*var(--pt));color:#bbb;line-height:1.5}
.hub-karte button{align-self:flex-start;height:calc(30*var(--pt));padding:0 calc(16*var(--pt));border-radius:calc(10*var(--pt));border:1px solid #333;background:#181818;font-size:calc(9*var(--pt))}
.hub-leer{padding:calc(60*var(--pt)) calc(20*var(--pt));text-align:center;color:#8a8a8a}
.hub-leer b{font-family:"Instrument Sans",sans-serif;font-size:calc(16*var(--pt));color:#eeebe4}
.hub-leer p{font-size:calc(9.5*var(--pt))}
.hub-fuss{display:flex;justify-content:space-between;padding:calc(12*var(--pt)) calc(24*var(--pt)) calc(16*var(--pt));border-top:1px solid #262626;font-size:calc(8.5*var(--pt));color:#6a6a6a}

/* ---------- ALIVEVISUAL: Menü der App ---------- */
.vis-menue{width:calc(230*var(--pt));padding:calc(6*var(--pt));border-radius:calc(10*var(--pt));background:rgba(18,18,17,.94);color:#eeebe4;font-family:"Instrument Sans",sans-serif;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px rgba(238,235,228,.12),0 calc(14*var(--pt)) calc(40*var(--pt)) rgba(0,0,0,.5)}
.vis-kopf{padding:calc(6*var(--pt)) calc(10*var(--pt)) calc(8*var(--pt));font-size:calc(14*var(--pt))}
.vis-kopf b{font-weight:700}
.vis-menue button{display:block;width:100%;text-align:left;border:0;background:none;padding:calc(5*var(--pt)) calc(10*var(--pt));border-radius:calc(6*var(--pt));font-size:calc(12.5*var(--pt));text-transform:lowercase}
.vis-menue button:hover{background:#ff3d7f;color:#fff}
.vis-menue button.an::before{content:"✓";position:absolute;margin-left:-1em}
.vis-menue button{position:relative;padding-left:calc(22*var(--pt))}
.vis-unter > button::after{content:"›";float:right;opacity:.6}
.vis-liste{display:none;margin:calc(2*var(--pt)) 0 calc(4*var(--pt)) calc(12*var(--pt));border-left:1px solid rgba(238,235,228,.12)}
.vis-unter:hover .vis-liste,.vis-unter:focus-within .vis-liste{display:block}
.vis-menue hr{border:0;border-top:1px solid rgba(238,235,228,.1);margin:calc(5*var(--pt)) calc(8*var(--pt))}
.vis-menue p{margin:0;padding:calc(4*var(--pt)) calc(10*var(--pt)) calc(6*var(--pt));font-size:calc(10*var(--pt));color:rgba(238,235,228,.45);font-family:"Space Mono",monospace}

/* ALIVEVISUAL als Hintergrundbild und im Fenster */
.vis-wand{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none}
.vis-an .tapete,.vis-an .desk-tapete{opacity:0}
.vis-rahmen{position:relative;flex:1;min-height:300px;background:#000;border-radius:0 0 12px 12px;overflow:hidden}
.vis-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:640px){
  .bildschirm{--pt:.5px}
  .desk{--pt:.6px}
  .hub{width:auto;left:6px;right:6px!important}
  .hub-start{grid-template-columns:1fr}
  .hub-status{background-color:rgba(8,8,8,.88)!important;height:auto;flex-wrap:wrap;padding:calc(14*var(--pt))}
  .hub-punkte{margin-left:0}
  .mon{width:calc(330*var(--pt))}
}

.hub-modul h5 small{flex:1;margin-left:calc(40*var(--pt));font-family:"Space Mono",monospace;font-size:calc(8.5*var(--pt));font-weight:400;color:#777}
.hub-projekte{display:flex;flex-direction:column;gap:calc(4*var(--pt))}
.hub-projekt{display:flex;align-items:center;gap:calc(24*var(--pt));border:1px solid transparent;background:none;border-radius:calc(14*var(--pt));padding:calc(10*var(--pt)) calc(18*var(--pt));text-align:left}
.hub-projekt.an{background:#262626;border-color:#333}
.hub-projekt em{width:calc(70*var(--pt));font-style:normal;font-size:calc(9*var(--pt));color:#8a8a8a}
.hub-projekt.an em{color:#ff3d7f}
.hub-projekt b{display:block;font-family:"Instrument Sans",sans-serif;font-size:calc(16*var(--pt));font-weight:700;letter-spacing:-.01em;color:#eeebe4}
.hub-projekt small{display:block;margin-top:calc(4*var(--pt));font-size:calc(8.5*var(--pt));color:#777}
.hub-unten button:not([disabled]){color:#ccc;border-color:#3a3a3a}

/* Roadie im Dunkelmodus, wie auf Max' Mac: dunkles Glas, Abschnitte mit feiner Kante */
.mon{background:rgba(34,30,40,.72);color:#fff;box-shadow:0 0 0 .5px rgba(255,255,255,.18),0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%)}
.mon-kopf{align-items:center}
.mon-kopf span,.mon-kopf em{color:rgba(255,255,255,.6)}
.mon-rund{width:calc(30*var(--pt));height:calc(30*var(--pt));border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:calc(13*var(--pt))}
.mon-sek{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:calc(14*var(--pt));padding:calc(10*var(--pt)) calc(12*var(--pt))}
.mon-titel{font-size:calc(13*var(--pt));color:rgba(255,255,255,.75)}
.mon-titel b{color:#fff}
.mon-sym{font-style:normal;margin-right:calc(8*var(--pt));opacity:.7}
.mon canvas{background:rgba(255,255,255,.06);border-radius:calc(10*var(--pt))}
.mon-leg{color:rgba(255,255,255,.55)}
.mon-leg span:first-child{color:#e8743b}
.mon-proz{font-size:calc(13*var(--pt));color:#fff}
.mon-proz b.rot{color:#ff5f57}
.mon-ico{width:calc(18*var(--pt));height:calc(18*var(--pt));display:grid;place-items:center;color:rgba(255,255,255,.7)}
.mon-ico svg{width:100%;height:100%}
.mon-app{width:100%;height:100%;border-radius:calc(4*var(--pt));display:grid;place-items:center;font-size:calc(9*var(--pt));font-weight:800}
.mon small{color:rgba(255,255,255,.55)}
.mon-bar{background:rgba(255,255,255,.1)}
.mon-bar i{background:#fff}
.mon-knoepfe button{background:rgba(255,255,255,.1);color:#fff}
.mon-knoepfe .primaer{background:#fff;color:#111}
.mon-hinweis{color:rgba(255,255,255,.4)}

/* Am Handy ist die Menüleiste schmal: nur Symbole, keine Uhr und keine GB */
@media (max-width:640px){
  .mb-rechts{gap:2px}
  .mb-sym .gb,.menue .uhr{display:none}
  .menue b,.desk-menue b{font-size:0}
}