/* ==========================================================================
   MaeliOS Kobold   -   usr/lib/desk.css
   --------------------------------------------------------------------------
   Variablen, Leiste und Desktop-Icons. Fenster, Menues, Dialoge und die
   Minefeld-Klassen kommen aus system.css.
   ========================================================================== */

/* Das Aussehen des Desktops. Die Werte muessen auf #desktop stehen:
   system.css setzt seine Retro-Vorgaben ebenfalls auf #desktop, und eine
   ID-Regel schlaegt :root. Ohne das saehe der Desktop nach Windows 95 aus. */
:root, #desktop{
  --ui-face:#f2f3f5;      --ui-face-2:#e6e8eb;
  --ui-light:#ffffff;     --ui-shadow:#cfd3d8;   --ui-dark:#c3c8ce;
  --ui-body:#ffffff;      --ui-text:#1f2328;     --ui-dim:#7a828a;
  --ui-sel-bg:#2ec27e;    --ui-sel-fg:#ffffff;
  --ui-title-bg:#3b4046;  --ui-title-fg:#f5f6f7;
  --ui-title-bg-off:#e4e7ea; --ui-title-fg-off:#6d757d;
  --ui-bevel:0px;         --ui-frame:1px;        --ui-radius:10px;
  --ui-title-h:34px;      --ui-drop:0 10px 28px rgba(0,0,0,.24);
  --ui-accent:#2ec27e;    --ui-leiste:40px;
  --ui-font:"Inter","Segoe UI","Noto Sans",Ubuntu,Cantarell,system-ui,sans-serif;
  --ui-fs:13px;
  --ui-icon-fg:#ffffff;   --ui-icon-shadow:rgba(0,0,0,.55);
  --ui-icon-bg-sel:#2ec27e; --ui-icon-fg-sel:#ffffff;
  --ui-border-color:rgba(0,0,0,.14);
  --ui-surface-1:#f2f3f5; --ui-surface-2:#e6e8eb;
}

html,body{ height:100%; margin:0; overflow:hidden;
  font-family:var(--ui-font); font-size:var(--ui-fs); }

/* ------------------------------------------------------------- Desktop */
#desktop{
  position:fixed; inset:0; display:none; overflow:hidden;
  background:var(--ui-desktop, linear-gradient(135deg,#6d28d9 0%,#4338ca 45%,#1d4ed8 100%));
  color:var(--ui-text);
}
#desktop.on{ display:block; }

/* Handy: groessere Trefferflaechen in der Titelzeile */
@media (max-width:640px){
  .win .tbar{ padding:2px 8px; }
  .win .tbar .ttl{ font-size:14px; }
  .win .tbtn{ width:30px; height:30px; line-height:27px; font-size:14px; }
}

/* ---------------------------------------------------------------- Leiste */
#panel{
  position:absolute; left:0; right:0; bottom:0; height:var(--ui-leiste); z-index:6000;
  display:flex; align-items:center; gap:6px; padding:0 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.22)),var(--ui-panel,#2f3236);
  color:var(--ui-panel-fg,#e9ebee); font-size:12.5px;
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -6px 24px rgba(0,0,0,.45);
}
#panel .pstart{
  display:flex; align-items:center; gap:7px; padding:5px 12px; border-radius:8px;
  font-weight:600; cursor:default; user-select:none;
}
#panel .pstart:hover{ background:var(--ui-panel-hover,#3d4247); }
#panel .pstart .logo{
  width:14px; height:14px; border-radius:3px; display:inline-block;
  background:var(--ui-accent,#2ec27e);
}
#panel .pwins{ display:flex; gap:4px; overflow:hidden; flex:0 1 auto; }
#panel .mwin{
  max-width:190px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  padding:5px 12px; border-radius:8px; cursor:default;
  background:rgba(255,255,255,.07); border-bottom:2px solid transparent;
}
#panel .mwin:hover{ background:var(--ui-panel-hover,#3d4247); }
#panel .mwin.aktiv{ box-shadow:inset 0 -2px 0 var(--ui-accent,#2ec27e); font-weight:600; }
#panel .psp{ flex:1; }
#panel .tray .t{ padding:5px 10px; border-radius:8px; cursor:default; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- Fensterknöpfe */
.win .tbar .mbtns{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.win .tbtn{
  width:22px; height:22px; line-height:19px; text-align:center; cursor:default;
  border-radius:50%; border:0; font-size:12px;
  background:rgba(255,255,255,.12); color:inherit;
}
.win .tbtn:hover{ background:rgba(255,255,255,.26); }
.win .tbtn.close:hover{ background:#e0554c; color:#fff; }
.win:not(.aktiv) .tbtn{ background:rgba(0,0,0,.08); }
.win .tbar{ padding:0 6px 0 12px; }
.win .tbar .ttl{ font-size:13px; text-align:center; }
.win .tbtn.voll{ font-size:14px; }

/* ------------------------------------------------------------ Vollbild */
/* Das Fenster nimmt die ganze Flaeche ein; Leiste und andere Fenster
   verschwinden. Die Fullscreen-API blendet zusaetzlich die Browserleiste
   aus. Ohne API bleibt derselbe Zustand als Rahmen-Vollbild bestehen. */
#desktop.voll #panel{ display:none; }
#desktop.voll .win:not(.voll){ display:none; }
#desktop.voll .win.voll,
.win:fullscreen{
  left:0!important; top:0!important;
  width:100%!important; height:100%!important;
  border:0; border-radius:0; padding:0; box-shadow:none;
}
#desktop.voll .win.voll .tbar,
.win:fullscreen .tbar{ border-radius:0; cursor:default; }
.win.voll .rz{ display:none; }

/* Kiosk: Spiele laufen im Vollbild ohne Titelzeile, Menue und Statuszeile.
   Zwei Schwebeknoepfe halten Menue und Ausstieg erreichbar. */
.win.kiosk .tbar,
.win.kiosk .mbar,
.win.kiosk .status{ display:none; }
.win.kiosk > .body{ padding:0; }
.kiosksteuer{
  display:none; position:absolute; top:10px; right:10px; z-index:80; gap:6px;
}
.win.kiosk .kiosksteuer{ display:flex; }
.kiosksteuer button{
  width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font:16px/1 var(--ui-font); color:#fff;
  background:rgba(10,14,18,.58); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:.72; touch-action:manipulation;
}
.kiosksteuer button:hover,
.kiosksteuer button:focus-visible{ opacity:1; background:rgba(10,14,18,.82); }
.kiosksteuer button:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; }

.popup .pkopf{
  padding:6px 10px 2px; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ui-dim);
}

/* ------------------------------------------------------------ Icons */
#deskicons{ position:absolute; inset:0; z-index:1; }
.dic{
  position:absolute; width:108px; padding:6px 2px; text-align:center;
  cursor:default; outline:none; border-radius:10px; user-select:none; touch-action:none;
}
.dic.zieh{ opacity:.85; z-index:2; }
.dic .dicimg{ height:52px; display:flex; align-items:center; justify-content:center; }
.dic .dicimg svg{ width:52px; height:52px; }
.dic:hover .dicimg{ transform:translateY(-1px); }
.dic .diclab{
  font-size:calc(var(--ui-fs) - 1px); line-height:1.2; padding:1px 4px; display:inline-block;
  max-width:104px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  border-radius:5px; color:var(--ui-icon-fg); text-shadow:1px 1px 0 var(--ui-icon-shadow);
}
.dic.sel .diclab{ background:var(--ui-icon-bg-sel); color:var(--ui-icon-fg-sel); text-shadow:none; }

/* ------------------------------------------------------------- Dialoge */
.dlgover{
  position:absolute; inset:0; z-index:7000; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,20,.35);
}
.dlgover .dlgfenster{
  background:var(--ui-face); color:var(--ui-text); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); padding:16px 18px; min-width:320px; max-width:min(460px,90vw);
}
.dlgover .dlgtitel{ font-weight:600; margin-bottom:10px; }
.dlgover .dlgtext{ line-height:1.45; white-space:pre-wrap; }
.dlgover input{
  width:100%; box-sizing:border-box; margin-top:10px; padding:7px 9px;
  border:1px solid var(--ui-border-color); border-radius:7px;
  font:inherit; color:inherit; background:var(--ui-body);
}

/* Hinweis-Einblendung */
.maeli-hinweis{
  position:fixed; right:18px; bottom:calc(var(--ui-leiste) + 12px); z-index:8000;
  max-width:min(380px, calc(100vw - 36px));
  padding:10px 14px; border-radius:10px; background:rgba(30,34,39,.95); color:#eef1f4;
  border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--ui-accent);
  box-shadow:0 12px 34px rgba(0,0,0,.45); font-size:12.5px; line-height:1.35;
  overflow-wrap:anywhere; white-space:pre-line; transition:opacity .35s ease;
}
.maeli-hinweis.fehler{ border-left-color:#e0554c; }
.maeli-hinweis.klickbar{ cursor:pointer; }
.maeli-hinweis.klickbar:hover{ background:rgba(40,46,53,.98); }
.maeli-hinweis.klickbar:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; }

/* ---------------------------------------------------- Erscheinungsbild */
.thkopf{ font-weight:600; font-size:calc(var(--ui-fs) + 1px); margin:0 0 10px; }
.thraster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:20px; }
.thkarte{
  border:1px solid var(--ui-border-color); border-radius:calc(var(--ui-radius) * .8);
  padding:10px; cursor:default; background:var(--ui-body); outline:none;
}
.thkarte:hover{ border-color:var(--ui-accent); }
.thkarte.an{ border-color:var(--ui-accent); box-shadow:0 0 0 2px var(--ui-accent) inset; }
.thkarte:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px; }
.thpunkte{ display:flex; gap:6px; margin-bottom:9px; }
.thpunkt{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.22); }
.thname{ font-size:calc(var(--ui-fs) - 1px); }
.thzeile{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.thlab{ flex:0 0 130px; }
.thschalter{ width:18px; height:18px; margin:0; accent-color:var(--ui-accent); }
.thzeile input[type=range]{ flex:1; min-width:120px; accent-color:var(--ui-accent); }
.thwert{ flex:0 0 56px; text-align:right; font-variant-numeric:tabular-nums; }
.thfuss{
  display:flex; align-items:center; gap:14px; margin-top:22px;
  border-top:1px solid var(--ui-border-color); padding-top:14px; flex-wrap:wrap;
}
.thhinweis{ color:var(--ui-dim); font-size:calc(var(--ui-fs) - 1px); }

/* ------------------------------------------------------------ Startmenü */
/* Anmutung wie das Startmenü von Linux Mint/Cinnamon: dunkles Glas, Kopf
   mit Benutzer, Suchfeld, links die Gruppen, rechts die Programme, unten
   Sprache und die Aktionen. Die Akzentfarbe kommt aus dem Thema. */
.startmenue{
  position:absolute; z-index:6500;
  width:460px; max-width:calc(100vw - 20px);
  max-height:calc(100% - var(--ui-leiste) - 24px);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:16px; border:1px solid rgba(255,255,255,.10);
  background:rgba(24,28,33,.92); color:#eef1f4;
  font-family:var(--ui-font);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  animation:smAuf .16s cubic-bezier(.2,.9,.25,1);
}
@keyframes smAuf{
  from{ opacity:0; transform:translateY(10px) scale(.99); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .startmenue{ animation:none; } }

.smkopf{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(46,194,126,.32),rgba(46,194,126,0) 70%);
}
.smbild{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--ui-accent),#1d976c); color:#08130e;
}
.smbild svg{ width:22px; height:22px; }
.smwer{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.smwer b{ font-size:14px; font-weight:600; }
.smwer span{ font-size:11.5px; color:#a9b3bd; }

.smsuch{ padding:10px 14px 6px; }
.smsuch input{
  width:100%; box-sizing:border-box; padding:9px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.35);
  color:#eef1f4; font:inherit; font-size:13px; outline:none;
}
.smsuch input::placeholder{ color:#8b949c; }
.smsuch input:focus{ border-color:var(--ui-accent); box-shadow:0 0 0 3px rgba(46,194,126,.18); }
.smsuch input::-webkit-search-cancel-button{ filter:invert(.8); }

.smrumpf{ display:flex; min-height:0; flex:1 1 auto; }
.smgruppen{
  width:170px; flex:0 0 170px; padding:8px; overflow:auto;
  border-right:1px solid rgba(255,255,255,.07);
}
.smgruppe{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  font-size:12.5px; color:#cfd6dd; cursor:default; user-select:none; outline:none;
}
.smgruppe svg{ width:20px; height:20px; flex:0 0 20px; opacity:.95; }
.smgruppe:hover, .smgruppe:focus-visible{ background:rgba(255,255,255,.07); }
.smgruppe.an{ background:var(--ui-accent); color:#08130e; font-weight:600; }
.smgruppe.an svg{ opacity:1; }

.smliste{ flex:1; min-width:0; overflow:auto; padding:8px; }
.smpunkt{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px;
  cursor:default; user-select:none; outline:none;
}
.smicon{ flex:0 0 28px; }
.smicon svg{ width:28px; height:28px; display:block; }
.smtext{ min-width:0; }
.smtext b{
  display:block; font-size:13px; font-weight:500;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.smtext span{ display:block; font-size:11px; color:#98a2ac; }
.smpunkt:hover, .smpunkt:focus-visible{ background:var(--ui-accent); color:#08130e; }
.smpunkt:hover .smtext span,
.smpunkt:focus-visible .smtext span{ color:rgba(8,19,14,.7); }
.smleer{ padding:18px 12px; font-size:12.5px; color:#8b949c; }

.smsprachen{ display:flex; gap:6px; padding:0 10px 8px; }
.smsprachen .sp{
  padding:4px 10px; border-radius:8px; border:0; cursor:default;
  font:inherit; font-size:11.5px; color:#b8c1c9; background:rgba(255,255,255,.06);
}
.smsprachen .sp:hover{ background:rgba(255,255,255,.12); color:#fff; }
.smsprachen .sp.an{ background:var(--ui-accent); color:#08130e; font-weight:600; }

.smfuss{
  display:flex; gap:6px; padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.18);
}
.smfuss .smfk{
  flex:1; padding:8px 6px; border-radius:9px; border:0; cursor:default;
  font:inherit; font-size:12px; color:#cfd6dd; background:transparent;
}
.smfuss .smfk:hover{ background:rgba(255,255,255,.09); color:#fff; }
.smfuss .smfk.aus:hover{ background:#c0504a; color:#fff; }

/* Schmaler Bildschirm: Gruppen als waagerechte Reihe ueber der Liste */
@media (max-width:560px){
  .startmenue{ width:calc(100vw - 16px); max-height:calc(100% - var(--ui-leiste) - 16px); }
  .smrumpf{ flex-direction:column; }
  .smgruppen{
    width:auto; flex:0 0 auto; display:flex; gap:4px; overflow-x:auto;
    padding:8px; border-right:0; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .smgruppe{ flex:0 0 auto; padding:7px 10px; }
  .smliste{ flex:1 1 auto; }
}

/* -------------------------------------------------------------- Aus */
#aus{
  position:fixed; inset:0; z-index:99999; background:#000; padding:2.2vmin 2.4vmin;
  font-family:var(--mono,monospace); color:var(--vga-bgreen,#55ff55);
  font-size:min(calc(100vh / 32), calc(100vw / 74)); cursor:default;
}
#aus pre{ margin:0; white-space:pre-wrap; }
/* Die Startanimation liegt ueber dem Desktop, aber unter dem Ausschaltbild */
#splash{ z-index:99998; }

/* ----------------------------------------- Hintergrund und Sicherung */
.hgraster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px; margin-bottom:16px;
}
.hgpos{ display:flex; flex-direction:column; }
.hgkachel{
  height:64px; border-radius:9px; border:2px solid transparent; cursor:default; outline:none;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.hgkachel.an{ border-color:var(--ui-accent); }
.hgkachel:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px; }
.hgname{ font-size:11px; color:var(--ui-dim); margin-top:4px; text-align:center; }
.hgeigen{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.hgvorschau{
  width:96px; height:56px; flex:0 0 auto; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--ui-dim);
  border:1px solid var(--ui-border-color); background-color:var(--ui-body);
  background-size:cover; background-position:center;
}
.hgvorschau.leer{ opacity:.4; }
.hgvorschau.an{ border-color:var(--ui-accent); box-shadow:0 0 0 2px var(--ui-accent); }
.hgzeile{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

/* ------------------------------------------- Ausfahrt und Strom aus */
#ausfahrt{
  position:fixed; inset:0; z-index:99998; background:#000; padding:2.2vmin 2.4vmin;
  font-family:var(--mono,monospace); color:var(--vga-bgreen,#55ff55);
  font-size:min(calc(100vh / 32), calc(100vw / 74)); cursor:default;
}
#ausfahrt pre{ margin:0; white-space:pre-wrap; }
#ausfahrt .strom{
  position:absolute; inset:0; background:#dfe6ee; opacity:0; pointer-events:none;
  transform:scale(1,1);
}
#ausfahrt.power pre{ opacity:0; transition:opacity .12s linear; }
#ausfahrt.power .strom{ animation:stromAus .7s ease-in forwards; }
@keyframes stromAus{
  0%   { opacity:1; transform:scale(1,1); }
  45%  { opacity:1; transform:scale(1,.006); }
  72%  { opacity:1; transform:scale(.012,.006); }
  100% { opacity:0; transform:scale(0,0); }
}
@media (prefers-reduced-motion:reduce){
  #ausfahrt.power .strom{ animation:none; opacity:0; }
}

/* -------------------------------------------------- Wer ist online? */
/* Oben rechts: kleine Anzeige, klappt auf Klick zur Namensliste auf. */
#online{
  position:fixed; top:10px; right:12px; z-index:5; width:auto; min-width:118px;
  font-family:var(--ui-font); font-size:12px; color:var(--ui-panel-fg,#e9ebee);
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.28)),var(--ui-panel,#2f3236);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  user-select:none;
}
#online .on-kopf{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:6px 11px; border:0; background:transparent; color:inherit;
  font:inherit; cursor:pointer; text-align:left;
}
#online .on-kopf:hover{ background:rgba(255,255,255,.08); }
#online .on-punkt{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:#5be07a; box-shadow:0 0 0 3px rgba(91,224,122,.16);
}
#online.allein .on-punkt{ background:#c9d1d9; box-shadow:0 0 0 3px rgba(201,209,217,.12); }
#online .on-zahl{ font-weight:700; font-variant-numeric:tabular-nums; }
#online .on-wort{ opacity:.62; }
#online .on-koerper{ display:none; padding:2px 8px 8px; }
#online.offen .on-koerper{ display:block; }
#online.offen{ min-width:216px; }
#online .on-leute{ max-height:196px; overflow:auto; margin:2px 0 6px; }
#online .on-person{
  display:flex; align-items:center; gap:7px; padding:3px 4px; border-radius:7px;
}
#online .on-person.ich{ background:rgba(255,255,255,.07); }
#online .on-p{
  width:16px; text-align:right; opacity:.42; font-size:10.5px;
  font-variant-numeric:tabular-nums;
}
#online .on-n{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#online .on-n em{ font-style:normal; opacity:.5; }
#online .on-z{ opacity:.42; font-size:10.5px; white-space:nowrap; }

/* Chat-Schalter: im aufgeklappten Kasten ganz oben, immer einen Klick weit
   weg. Aus = der Chat holt keine neuen Zeilen und meldet nichts. */
#online .on-chat{
  display:flex; align-items:center; gap:9px;
  margin:0 0 6px; padding:6px 4px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#online .on-chat-wort{ flex:1; font-size:11.5px; opacity:.75; }
#online .on-chat-stand{ font-size:10.5px; opacity:.5; min-width:18px; text-align:right; }
#online .on-schalter{
  position:relative; width:34px; height:18px; flex:0 0 auto; padding:0;
  border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.42); cursor:pointer;
  transition:background .16s,border-color .16s;
}
#online .on-schalterknopf{
  position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:#9aa7b2; transition:transform .16s,background .16s;
}
#online .on-schalter[aria-checked="true"]{
  background:rgba(91,224,122,.30); border-color:rgba(91,224,122,.5);
}
#online .on-schalter[aria-checked="true"] .on-schalterknopf{
  transform:translateX(16px); background:#8ff0a8;
}
#online .on-schalter:focus-visible{ outline:2px solid var(--ui-accent,#2ec27e); outline-offset:2px; }
#online .on-aus{
  font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 5px; border-radius:999px;
  background:rgba(255,140,120,.16); border:1px solid rgba(255,140,120,.3); color:#ffbdae;
}
#online .on-aus[hidden]{ display:none; }
#online .on-person.stumm .on-n{ opacity:.55; }
#online .on-mehr, #online .on-leer{ padding:4px; opacity:.45; font-size:11px; }
#online .on-form{ display:flex; gap:6px; align-items:center; }
#online .on-feld{
  flex:1; min-width:0; padding:4px 7px; border-radius:7px;
  border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.28);
  color:inherit; font:inherit; font-size:11.5px;
}
#online .on-feld:focus{ outline:0; border-color:var(--ui-accent,#2ec27e); }
#online .on-ok{
  padding:4px 10px; border-radius:7px; border:0; cursor:pointer;
  background:var(--ui-accent,#2ec27e); color:#08210f; font:inherit; font-size:11.5px; font-weight:700;
}
#online .on-ok:hover{ filter:brightness(1.08); }
#online .on-hinweis{ margin-top:6px; font-size:10px; opacity:.38; line-height:1.3; }
@media (max-width:520px){
  #online{ top:6px; right:8px; }
  #online.offen{ min-width:186px; }
}