/* ===== Kranzuschs KI-Werft — Apple HIG (iOS/macOS) Theme ================== */
:root{
  /* Tint (Marke) */
  --tint:#2d5589;
  --tint-d:#1d3a5f;
  --primary:#2d5589;        /* Alias (Bestand) */
  --primary-d:#1d3a5f;
  --on-primary:#ffffff;

  /* System-Hintergründe (Light, grouped) */
  --bg:#f2f2f7;             /* systemGroupedBackground */
  --surface:#ffffff;        /* secondarySystemGroupedBackground */
  --surface-2:#ffffff;
  --fill:rgba(118,118,128,.12);   /* tertiarySystemFill — Buttons/Felder */
  --fill-2:rgba(118,118,128,.20);

  /* Labels */
  --on-surface:#1c1c1e;
  --label:#1c1c1e;
  --muted:rgba(60,60,67,.6);      /* secondaryLabel */
  --muted-2:rgba(60,60,67,.3);    /* tertiaryLabel */
  --separator:rgba(60,60,67,.16); /* separator */
  --outline:rgba(60,60,67,.22);

  /* Radien (squircle-nah) */
  --radius-xl:18px;
  --radius-l:14px;
  --radius-m:12px;
  --radius-s:10px;

  /* Schatten (sehr dezent) */
  --e1:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --e2:0 6px 20px rgba(0,0,0,.10);

  /* Default-Akzent (je Ebene überschrieben) */
  --accent:#2d5589;
  --accent-c:rgba(45,85,137,.12);
}

/* Akzent je Ebene = Apple System Colors (Icon-Kacheln, Settings-Stil) */
.lvl-server{ --accent:#007aff; --accent-c:rgba(0,122,255,.12); }
.lvl-team  { --accent:#34c759; --accent-c:rgba(52,199,89,.16); }
.lvl-db    { --accent:#5856d6; --accent-c:rgba(88,86,214,.12); }
.lvl-table { --accent:#ff9500; --accent-c:rgba(255,149,0,.16); }
.lvl-file  { --accent:#ff2d55; --accent-c:rgba(255,45,85,.12); }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--label);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
  min-height:100vh;
}
a{ color:var(--tint); text-decoration:none; }
.ti{ vertical-align:middle; line-height:1; }
.btn .ti{ font-size:18px; }
.btn-sm .ti{ font-size:16px; }

/* ---- Utilities ---- */
.wrap{ max-width:none; margin:0; padding:24px 26px 90px; }
.flex{ display:flex; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gap{ gap:12px; } .gap-s{ gap:8px; }
.grow{ flex:1 1 auto; min-width:0; }
.muted{ color:var(--muted); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden{ display:none !important; }
.mt{ margin-top:14px; } .mb{ margin-bottom:14px; } .mb-s{ margin-bottom:8px; }

/* Typo (Apple-Skala) */
h1,h2,h3{ color:var(--label); margin:.2em 0 .5em; }
h1{ font-size:2rem; font-weight:700; letter-spacing:-.025em; }
h2{ font-size:1.45rem; font-weight:600; letter-spacing:-.02em; }
h3{ font-size:1.6rem; font-weight:700; letter-spacing:-.026em; }   /* Large Title */
.lead{ color:var(--muted); font-size:1rem; font-weight:400; letter-spacing:-.01em; margin:0 0 1.2rem; }

/* ---- Navigation Bar (translucent, Apple) ---- */
.appbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  height:54px; padding:0 20px; background:rgba(248,248,250,.8);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator); }
.appbar .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.appbar .brand img{ height:30px; border-radius:7px; }
.appbar .brand b{ color:var(--label); font-weight:600; font-size:1rem; line-height:1; letter-spacing:-.02em; }
.appbar .brand small{ color:var(--muted); font-size:.7rem; }
.appbar .spacer{ flex:1; }
.chip-user{ background:var(--fill); color:var(--label); border-radius:999px; padding:.32rem .7rem;
  font-weight:500; font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem; }

/* ---- Buttons (Apple) ---- */
.btn{ --b:var(--tint); display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:38px; padding:0 16px; border:none; border-radius:var(--radius-m); font:inherit; font-weight:590;
  font-size:.94rem; letter-spacing:-.01em; cursor:pointer; background:var(--b); color:#fff; text-decoration:none;
  transition:filter .15s, transform .1s, background .15s; }
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:scale(.97); filter:brightness(.93); }
.btn.accent{ --b:var(--accent); }
.btn-tonal{ background:var(--accent-c); color:var(--accent); font-weight:600; }
.btn-tonal:hover{ filter:none; opacity:.82; }
.btn-outline{ background:var(--fill); color:var(--tint); }
.btn-outline:hover{ filter:none; background:var(--fill-2); }
.btn-text{ background:transparent; color:var(--tint); padding:0 10px; font-weight:500; }
.btn-text:hover{ background:var(--fill); }
.btn-sm{ height:32px; padding:0 12px; font-size:.85rem; border-radius:var(--radius-s); }
.btn-danger{ background:#ff3b30; } .btn-danger:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.fab{ position:fixed; right:24px; bottom:24px; z-index:25; height:52px; padding:0 22px; border-radius:var(--radius-l);
  background:var(--tint); color:#fff; border:none; font:inherit; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--e2); }
.fab:hover{ filter:brightness(1.05); }

/* ---- Felder (Apple filled) ---- */
.field{ position:relative; margin-bottom:12px; }
.field input, .field-input{ width:100%; height:46px; border:none; background:var(--fill);
  border-radius:var(--radius-s); padding:14px 14px 0; font:inherit; color:var(--label); }
.field label{ position:absolute; left:14px; top:14px; color:var(--muted); pointer-events:none; transition:.15s; font-size:.95rem; }
.field input:focus{ outline:2px solid var(--tint); outline-offset:0; }
.field input:focus + label, .field input:not(:placeholder-shown) + label{ top:5px; font-size:.7rem; color:var(--muted); }
.inp{ width:100%; height:44px; border:none; background:var(--fill); border-radius:var(--radius-s);
  padding:0 14px; font:inherit; color:var(--label); }
.inp::placeholder{ color:var(--muted-2); }
.inp:focus{ outline:2px solid var(--tint); outline-offset:0; background:#fff; }

/* ---- Breadcrumb (dezent) ---- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; font-size:.92rem; margin:.1rem 0 1.1rem; }
.crumbs a{ color:var(--tint); font-weight:500; padding:.15rem .45rem; border-radius:7px; }
.crumbs a:hover{ background:var(--fill); }
.crumbs .sep{ color:var(--muted-2); }
.crumbs .cur{ color:var(--muted); font-weight:500; padding:.15rem .45rem; }

/* ---- Grid + Karten (Apple) ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.m-card{ position:relative; display:flex; align-items:center; gap:14px; background:var(--surface);
  border-radius:var(--radius-xl); padding:16px; box-shadow:var(--e1); color:inherit; text-decoration:none;
  border:.5px solid var(--separator); transition:transform .15s ease, box-shadow .15s ease; }
.m-card:hover{ transform:translateY(-1px); box-shadow:var(--e2); }
.m-card:active{ transform:scale(.99); }
.m-card .leading{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:#fff; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.m-card .leading .ti{ font-size:21px; }
.m-card .body{ min-width:0; flex:1 1 auto; }
.m-card .title{ font-weight:600; font-size:1.03rem; color:var(--label); line-height:1.3; letter-spacing:-.02em; }
.m-card .sub{ color:var(--muted); font-size:.82rem; font-weight:400; letter-spacing:-.01em; }
.m-card .trailing{ margin-left:auto; color:var(--muted-2); display:flex; }
.m-card .trailing .ti{ font-size:18px; }

/* Karten-Kennzahlen */
.m-card .metas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.m-card .meta{ display:inline-flex; align-items:center; gap:.25rem; font-size:.76rem; font-weight:500;
  color:var(--muted); background:var(--fill); border-radius:7px; padding:3px 8px; line-height:1.4; white-space:nowrap; }
.m-card .meta .ti{ font-size:14px; color:var(--accent); }
.m-card .meta.strong{ color:var(--accent); background:var(--accent-c); font-weight:600; }

.chip{ display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.16rem .55rem; font-size:.74rem; font-weight:600; }
.chip-accent{ background:var(--accent); color:#fff; }
.chip-soft{ background:var(--accent-c); color:var(--accent); }

/* Karten ein-/ausblenden */
.card-wrap{ position:relative; }
.card-wrap.is-hidden .m-card{ opacity:.5; }
.card-hide{ position:absolute; top:8px; right:8px; z-index:4; margin:0; }
.card-hide button{ border:none; background:rgba(118,118,128,.14); color:var(--muted); width:28px; height:28px;
  border-radius:8px; cursor:pointer; display:grid; place-items:center; padding:0; transition:background .15s, color .15s; }
.card-hide button:hover{ background:rgba(118,118,128,.28); color:var(--label); }
.card-hide .ti{ font-size:16px; }

/* Panel (Formular-Karte) */
.panel{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--e1); padding:18px; border:.5px solid var(--separator); }

/* ---- Banner/Messages (dezent) ---- */
.banner{ border-radius:var(--radius-m); padding:.7rem .9rem; margin-bottom:12px; font-weight:500; font-size:.92rem; border:none; }
.banner.info{ background:rgba(0,122,255,.10); color:#0040a0; }
.banner.success{ background:rgba(52,199,89,.14); color:#1c7a3f; }
.banner.error,.banner.danger{ background:rgba(255,59,48,.12); color:#b3261e; }
.banner.warning{ background:rgba(255,149,0,.14); color:#9a5b00; }

/* ---- Datei-Liste ---- */
.toolbar{ position:sticky; top:54px; z-index:10; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:rgba(242,242,247,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:.6rem 0; margin-bottom:.5rem; }
.file-row{ display:flex; align-items:center; gap:13px; background:var(--surface); border-radius:var(--radius-l);
  padding:11px 14px; margin-bottom:8px; box-shadow:var(--e1); border:.5px solid var(--separator); transition:box-shadow .15s, transform .15s; }
.file-row:hover{ box-shadow:var(--e2); transform:translateY(-1px); }
.file-ic{ width:42px; height:42px; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:.72rem;
  background:var(--accent); color:#fff; flex:0 0 auto; }
.file-ic.pdf{ background:#ff3b30; color:#fff; } .file-ic.img{ background:#34c759; color:#fff; }
.file-name{ font-weight:500; word-break:break-all; line-height:1.3; font-size:.95rem; letter-spacing:-.01em; }
.file-meta{ color:var(--muted); font-size:.78rem; }

/* Login */
.login-bg{ min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:var(--bg); }
.login-card{ background:var(--surface); border-radius:22px; box-shadow:0 10px 40px rgba(0,0,0,.12);
  border:.5px solid var(--separator); padding:2.2rem; width:100%; max-width:400px; }
.login-card .logo{ display:block; margin:0 auto .8rem; max-width:200px; }
.login-card h1{ text-align:center; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:.1rem 0 0; }
.login-card .sub{ text-align:center; color:var(--muted); margin-bottom:1.4rem; font-size:.92rem; }

/* Linear progress */
.bar{ height:6px; border-radius:999px; background:var(--fill); overflow:hidden; margin:.45rem 0; }
.bar > i{ display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .4s; }
.act{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--e1); padding:.9rem 1rem; border:.5px solid var(--separator); }
.del-link{ background:none; border:none; color:#ff3b30; font:inherit; font-weight:500; cursor:pointer; padding:.2rem .4rem; }
.del-link:hover{ text-decoration:underline; }

@media (max-width:560px){ .wrap{ padding:18px 14px 90px; } h3{ font-size:1.4rem; } .appbar{ padding:0 14px; } }

/* ===== Portal-Shell mit Seitenleiste ===================================== */
.shell{ display:flex; align-items:flex-start; min-height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; width:248px; flex:0 0 248px; z-index:40;
  display:flex; flex-direction:column; overflow-y:auto;
  background:rgba(248,248,250,.86); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-right:.5px solid var(--separator); }
.side-brand{ display:flex; align-items:center; gap:.6rem; padding:16px 16px 12px; text-decoration:none; }
.side-brand img{ height:30px; border-radius:7px; }
.side-brand b{ display:block; color:var(--label); font-weight:600; font-size:.98rem; letter-spacing:-.02em; line-height:1.15; }
.side-brand small{ color:var(--muted); font-size:.7rem; }
.side-nav{ padding:4px 10px; display:flex; flex-direction:column; gap:2px; }
.side-cap{ color:var(--muted-2); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:12px 10px 4px; }
.side-link{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none;
  color:var(--label); font-size:.92rem; font-weight:500; letter-spacing:-.01em; }
.side-link .ti{ font-size:20px; color:var(--muted); flex:0 0 auto; }
.side-link:hover{ background:rgba(118,118,128,.10); }
.side-link.active{ background:var(--accent-c); color:var(--tint); }
.side-link.active .ti{ color:var(--tint); }
.side-link .ext{ margin-left:auto; font-size:14px; color:var(--muted-2); }
.side-foot{ margin-top:auto; padding:12px 10px 16px; display:flex; flex-direction:column; gap:10px; border-top:.5px solid var(--separator); }
.side-user{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px; }

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:30; height:54px; display:flex; align-items:center; gap:10px; padding:0 20px;
  background:rgba(248,248,250,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator); }
.topbar .spacer{ flex:1; }
.icon-btn{ display:inline-grid; place-items:center; width:38px; height:38px; border:none; background:transparent;
  border-radius:10px; cursor:pointer; color:var(--label); }
.icon-btn:hover{ background:rgba(118,118,128,.12); }
.side-toggle{ display:inline-grid; }
.side-backdrop{ display:none; }
@media (min-width:861px){
  .sidebar{ transition:flex-basis .2s ease; }
  /* Eingeklappt = schmale Icon-Leiste */
  html.side-collapsed .sidebar{ flex-basis:66px; width:66px; }
  html.side-collapsed .side-brand{ justify-content:center; padding:16px 0 12px; gap:0; }
  html.side-collapsed .side-brand span{ display:none; }
  html.side-collapsed .side-cap{ display:none; }
  html.side-collapsed .side-link{ justify-content:center; padding:9px 0; }
  html.side-collapsed .side-link span, html.side-collapsed .side-link .ext{ display:none; }
  html.side-collapsed .side-foot{ padding:10px 6px 16px; }
  html.side-collapsed .side-user{ display:none; }
}

@media (max-width:860px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(0,0,0,.2); }
  .shell.side-open .sidebar{ transform:translateX(0); }
  .side-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:35; }
  .shell.side-open .side-backdrop{ display:block; }
  .side-toggle{ display:inline-grid; }
}

/* Header-Markenzeichen (Brücke) */
.topbar-brand{ display:inline-flex; align-items:center; color:var(--label); }
.topbar-brand .bridge{ height:24px; width:auto; display:block; }

/* ===== MD-Editor (Dateinavigation) ====================================== */
.md-list{ display:flex; flex-direction:column; gap:8px; }
.md-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--surface); border:.5px solid var(--separator);
  border-radius:var(--radius-l); padding:10px 12px; box-shadow:var(--e1); transition:box-shadow .15s; }
.md-row:hover{ box-shadow:var(--e2); }
.md-main{ display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--label); }
.md-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
.md-ic.folder{ background:rgba(0,122,255,.12); color:#007aff; }
.md-ic.doc{ background:rgba(12,166,120,.14); color:#0ca678; }
.md-ic .ti{ font-size:20px; }
.md-name{ font-weight:600; font-size:.98rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-name small{ display:block; font-weight:400; color:var(--muted); font-size:.78rem; }
.icon-btn.danger:hover{ background:rgba(255,59,48,.12); color:#ff3b30; }
.inp-sm{ height:32px; border:1px solid var(--separator); border-radius:8px; padding:0 8px; font:inherit; font-size:.82rem; background:#fff; color:var(--label); max-width:100%; }
.md-filter, .md-presets{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.preset-chip{ display:inline-flex; align-items:center; gap:2px; background:var(--fill); border-radius:999px; padding:2px 4px 2px 12px; font-size:.82rem; }
.preset-chip a{ color:var(--tint); text-decoration:none; font-weight:500; }
.preset-chip .px{ border:none; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; padding:0; }
.preset-chip .px:hover{ background:rgba(255,59,48,.12); color:#ff3b30; }
.md-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-left:auto; }
.md-counts{ display:flex; gap:6px; align-items:center; }
.cnt{ min-width:22px; text-align:center; border-radius:999px; padding:2px 8px; font-size:.76rem; font-weight:700; }
.c-neu{ background:#fff3cd; color:#8a6500; }
.c-arbeit{ background:#dbe7ff; color:#1d4ed8; }
.c-erledigt{ background:#d6f5e0; color:#0b7a43; }
.st-sel{ height:32px; border-radius:8px; border:1px solid transparent; padding:0 8px; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; }
.st-neu{ background:#fff3cd; color:#8a6500; }
.st-in_arbeit{ background:#dbe7ff; color:#1d4ed8; }
.st-erledigt{ background:#d6f5e0; color:#0b7a43; }
.md-rename{ display:none; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.md-rename .rn-input{ flex:1 1 auto; min-width:0; height:36px; font-size:.98rem; font-weight:500; }
.md-row.editing .md-main,
.md-row.editing > .md-meta,
.md-row.editing > .md-counts,
.md-row.editing > .icon-btn{ display:none; }
.md-row.editing .md-rename{ display:flex; }
.md-grip{ cursor:grab; color:var(--muted-2); display:inline-grid; place-items:center; width:20px; height:30px; flex:0 0 auto; }
.md-grip:active{ cursor:grabbing; }
.md-grip .ti{ font-size:18px; }
.md-row:hover .md-grip{ color:var(--muted); }
.md-row.dragging{ opacity:.45; }
.drop-hot{ outline:2px dashed var(--tint); outline-offset:2px; background:var(--accent-c) !important; }
.crumbs a.drop-hot{ outline:2px dashed var(--tint); outline-offset:1px; border-radius:6px; }
.modal-bg{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.35); display:grid; place-items:center; padding:1rem; }
.modal-card{ background:var(--surface); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); border:.5px solid var(--separator); padding:1.6rem; width:100%; max-width:460px; }
.move-tree{ max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.move-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; border-radius:10px; padding:8px 10px; font:inherit; font-size:.92rem; color:var(--label); cursor:pointer; }
.move-item:hover:not(:disabled){ background:var(--fill); }
.move-item:disabled{ color:var(--muted-2); cursor:default; }
.move-item .ti{ color:var(--tint); font-size:18px; flex:0 0 auto; }
.move-item .mt-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.move-item .mt-mark{ color:var(--muted-2); }
.move-item .mt-count{ margin-left:auto; background:var(--fill); color:var(--muted); border-radius:999px; padding:1px 9px; font-size:.74rem; font-weight:700; min-width:20px; text-align:center; flex:0 0 auto; }
.md-revview{ width:100%; min-height:55vh; border:.5px solid var(--separator); border-radius:var(--radius-l); padding:14px 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; line-height:1.5; background:var(--surface); color:var(--label); resize:vertical; }
.EasyMDEContainer .CodeMirror{ border-radius:0 0 var(--radius-l) var(--radius-l); border-color:var(--separator); min-height:58vh; }
.EasyMDEContainer .editor-toolbar{ border-radius:var(--radius-l) var(--radius-l) 0 0; border-color:var(--separator); }
.editor-preview, .editor-preview-side{ background:var(--surface-2); }
.presence{ display:inline-flex; align-items:center; }
.presence .ava{ width:26px; height:26px; border-radius:50%; background:var(--accent-c); color:var(--tint);
  display:grid; place-items:center; font-size:.66rem; font-weight:700; border:2px solid var(--surface); margin-left:-6px; }
.presence .ava:first-child{ margin-left:0; }
.presence .ava.me{ background:var(--tint); color:#fff; }
#micbtn.rec{ background:#ff3b30 !important; color:#fff !important; border-color:#ff3b30 !important; animation:micpulse 1.2s infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.45); } 50%{ box-shadow:0 0 0 7px rgba(255,59,48,0); } }
.dictating{ opacity:.45; }
.lbl{ display:block; font-size:.82rem; color:var(--muted); font-weight:600; margin:0 0 4px; }
.CodeMirror img{ max-width:100%; height:auto; border-radius:8px; }
.editor-preview img,.editor-preview-side img{ max-width:100%; height:auto; border-radius:8px; }
/* Bild inline im Editor (CodeMirror-Widget) + Zieh-Griff zum Skalieren */
.cm-img{ display:inline-block; position:relative; max-width:100%; vertical-align:bottom;
  margin:2px 0; border-radius:8px; box-shadow:0 1px 5px rgba(0,0,0,.14); }
.cm-img img{ display:block; width:100%; height:auto; border-radius:8px; pointer-events:none; }
.cm-img:hover{ outline:2px solid rgba(45,85,137,.5); outline-offset:2px; }
.cm-img-h{ position:absolute; right:-6px; bottom:-6px; width:16px; height:16px; cursor:nwse-resize;
  background:#2d5589; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.35);
  touch-action:none; z-index:5; }
.cm-img-h:hover{ transform:scale(1.15); }

/* --- Badges: Bilder/Anhänge in Liste + Kopfzeile --- */
.md-badges{ display:inline-flex; gap:6px; align-items:center; flex:0 0 auto; }
.md-badge{ display:inline-flex; align-items:center; gap:3px; font-size:.74rem; font-weight:700; color:var(--muted);
  background:var(--fill); border-radius:999px; padding:2px 8px; }
.md-badge i{ font-size:14px; }
.hdr-badges{ display:inline-flex; gap:8px; align-items:center; }
.hdr-badge{ display:inline-flex; align-items:center; gap:4px; font-size:.8rem; font-weight:700; color:var(--tint);
  background:var(--fill); border-radius:999px; padding:3px 10px; }
.hdr-badge i{ font-size:15px; }

/* --- Dock-Panels: Anhänge + Diskussion --- */
.dock-panels{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; align-items:start; }
@media (max-width:900px){ .dock-panels{ grid-template-columns:1fr; } }
.attach-panel,.chat-panel{ border:1px solid var(--separator); border-radius:var(--radius-l); background:var(--surface); overflow:hidden; }
.panel-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; font-weight:600; color:var(--label); border-bottom:1px solid var(--separator); }
.panel-head i{ color:var(--tint); }
.attach-list{ display:flex; flex-direction:column; }
.att-item{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--separator); }
.att-item:last-child{ border-bottom:none; }
.att-ic{ font-size:20px; color:var(--tint); flex:0 0 auto; }
.att-name{ font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-size{ font-size:.78rem; flex:0 0 auto; }
.att-by{ font-size:.78rem; margin-left:auto; flex:0 0 auto; }
.att-empty{ padding:14px; font-size:.85rem; }

/* --- Chat --- */
.chat-panel.collapsed .chat-log,.chat-panel.collapsed .chat-input{ display:none; }
.chat-toggle{ cursor:pointer; user-select:none; }
.chat-chev{ transition:transform .15s; color:var(--muted); }
.chat-panel.collapsed .chat-chev{ transform:rotate(-90deg); }
.chat-log{ max-height:320px; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ max-width:85%; }
.chat-msg.mine{ align-self:flex-end; }
.chat-meta{ font-size:.72rem; color:var(--muted); }
.chat-meta b{ color:var(--label); }
.chat-msg.mine .chat-meta{ text-align:right; }
.chat-text{ display:inline-block; background:var(--fill); border-radius:12px; padding:7px 12px; margin-top:2px;
  white-space:pre-wrap; word-break:break-word; }
.chat-msg.mine .chat-text{ background:var(--tint); color:#fff; }
.chat-msg.mine .chat-text a{ color:#fff; text-decoration:underline; }
.chat-input{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--separator); position:relative; }
.chat-input .inp{ flex:1; }

/* Chat: Datei-/Bild-Anhänge */
.chat-file-img img{ max-width:220px; max-height:220px; border-radius:10px; margin-top:4px; display:block; }
.chat-msg.mine .chat-file-img{ display:block; margin-left:auto; width:fit-content; }
.chat-file{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; padding:7px 11px; border-radius:10px;
  background:var(--fill); max-width:260px; }
.chat-file i{ font-size:20px; color:var(--tint); flex:0 0 auto; }
.chat-file .cf-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:560; }
.chat-file .cf-size{ font-size:.74rem; color:var(--muted); margin-left:auto; flex:0 0 auto; }
.chat-msg.mine .chat-file{ background:rgba(255,255,255,.22); }

/* Chat: Mentions */
.mention{ color:var(--tint); font-weight:600; background:rgba(45,85,137,.10); border-radius:5px; padding:0 3px; }
.chat-msg.mine .mention{ color:#fff; background:rgba(255,255,255,.22); }
.mention.mention-me,.mention-me{ background:#ffd84d; color:#6b5200; }
.chat-msg.mentions-me{ border-left:3px solid #ffb300; padding-left:8px; }
.mention-box{ position:absolute; left:14px; bottom:54px; z-index:30; min-width:180px; max-height:200px; overflow:auto;
  background:var(--surface); border:1px solid var(--separator); border-radius:10px; box-shadow:0 6px 22px rgba(0,0,0,.16); }
.mention-item{ padding:7px 12px; cursor:pointer; font-weight:540; }
.mention-item.active,.mention-item:hover{ background:var(--tint); color:#fff; }

/* --- Chat-Fenster im Editor: angedockt rechts / schwebend / aus --- */
.editor-shell{ display:flex; gap:14px; align-items:flex-start; }
.editor-main{ flex:1; min-width:0; }
.editor-main > .attach-panel{ margin-top:14px; }
.editor-shell.chat-mode-hidden .chat-dock{ display:none; }

.chat-dock{ display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--separator); border-radius:var(--radius-l); background:var(--surface); }
/* Angedockt: fixiertes rechtes Panel; Top/Höhe setzt JS, damit Kopf, Verlauf UND Eingabezeile
   immer komplett sichtbar bleiben. Rechts wird Platz für den Editor reserviert. */
.editor-shell.chat-mode-dock{ padding-right:388px; }
.editor-shell.chat-mode-dock .chat-dock{ position:fixed; right:14px; width:360px; z-index:20;
  top:160px; height:calc(100vh - 180px); }
.chat-dock-head{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-weight:600; color:var(--label);
  border-bottom:1px solid var(--separator); flex:0 0 auto; }
.chat-dock-head > i{ color:var(--tint); }
.chat-dock-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-dock-head .icon-btn{ flex:0 0 auto; }
.chat-presence{ flex:0 0 auto; }
.chat-presence .ava{ width:22px; height:22px; font-size:.6rem; }
.chat-presence .live-dot{ width:8px; height:8px; border-radius:50%; background:#34c759; margin-right:5px; flex:0 0 auto;
  animation:livepulse 1.6s infinite; }
@keyframes livepulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(52,199,89,.5); } 50%{ box-shadow:0 0 0 5px rgba(52,199,89,0); } }

/* Roter Erwähnungs-Zähler am Profil-Knopf (auch in der schmalen Icon-Leiste sichtbar) */
.side-link{ position:relative; }
.side-badge{ position:absolute; top:5px; right:9px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#ff3b30; color:#fff; font-size:.7rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.35); }
html.side-collapsed .side-link .side-badge{ display:flex; right:8px; top:3px; }

/* Toaster (Live-Benachrichtigungen, z. B. Erwähnungen) — überall sichtbar */
.toast-wrap{ position:fixed; right:18px; bottom:18px; z-index:2000; display:flex; flex-direction:column; gap:10px;
  max-width:min(360px, calc(100vw - 36px)); }
.toast{ display:flex; align-items:flex-start; gap:10px; background:var(--surface); color:var(--label);
  border:1px solid var(--separator); border-radius:14px; padding:12px 14px; box-shadow:0 12px 34px rgba(0,0,0,.22);
  opacity:0; transform:translateY(12px); transition:opacity .22s, transform .22s; }
.toast.in{ opacity:1; transform:none; }
.toast.out{ opacity:0; transform:translateY(12px); }
.toast > i{ color:var(--tint); font-size:22px; flex:0 0 auto; margin-top:1px; }
.toast .toast-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.toast .toast-b b{ font-size:.9rem; }
.toast .toast-b span{ font-size:.82rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast .toast-x{ background:none; border:none; font-size:18px; line-height:1; color:var(--muted-2); cursor:pointer;
  flex:0 0 auto; padding:0 2px; }
.toast .toast-x:hover{ color:var(--muted); }
@media (max-width:560px){ .toast-wrap{ left:12px; right:12px; bottom:12px; max-width:none; } }

/* Editor-Modus-Anzeige: Bearbeiten / Vorschau / Geteilt */
.mode-badge{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; border-radius:999px;
  padding:4px 11px; line-height:1; white-space:nowrap; }
.mode-edit{ background:#daf5e3; color:#1d7a44; }
.mode-view{ background:#e3efff; color:#1f5fb3; }
.mode-split{ background:#efe3ff; color:#6b3fb3; }
.EasyMDEContainer.is-preview{ outline:2px solid rgba(31,95,179,.40); border-radius:6px; }
.EasyMDEContainer.is-preview .editor-toolbar{ background:#e8f0fb; }
.EasyMDEContainer.is-split{ outline:2px solid rgba(107,63,179,.40); border-radius:6px; }
.EasyMDEContainer.is-split .editor-toolbar{ background:#f1e8fb; }

/* Status-/Verantwortlich-/Wunschdatum-Leiste im geöffneten Dokument */
.doc-metabar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; padding:8px 12px;
  background:var(--surface); border:1px solid var(--separator); border-radius:12px; }
.dmb-label{ font-size:.8rem; color:var(--muted); font-weight:600; }
.dmb-label:not(:first-child){ margin-left:6px; }
.dmb-saved{ margin-left:auto; font-size:.8rem; color:#1d7a44; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.chat-dock .chat-log{ flex:1; max-height:none; }
.chat-dock .chat-input{ flex:0 0 auto; }

.chat-dock.floating{ position:fixed; flex:none; z-index:1000; width:360px; height:520px; top:90px; right:20px;
  resize:both; box-shadow:0 18px 50px rgba(0,0,0,.30); }
.chat-dock.floating .chat-dock-head{ cursor:move; }

.chat-launcher{ position:fixed; right:20px; bottom:20px; z-index:1000; width:54px; height:54px; border-radius:50%;
  background:var(--tint); color:#fff; border:none; box-shadow:0 8px 24px rgba(0,0,0,.30); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.chat-launcher:hover{ filter:brightness(1.08); }

@media (max-width:900px){
  .editor-shell{ flex-direction:column; }
  .editor-shell.chat-mode-dock{ padding-right:0; }
  .editor-shell.chat-mode-dock .chat-dock{ position:static; width:100%; height:460px; top:auto; right:auto; }
  .chat-dock.floating{ position:fixed; left:8px; right:8px; width:auto; top:auto; bottom:8px; height:62vh; resize:none; }
}

/* Zentraler Chat-Raum (volle Höhe) + Raum-Auswahl */
.chat-room{ display:flex; flex-direction:column; height:calc(100vh - 285px); min-height:340px;
  border:1px solid var(--separator); border-radius:var(--radius-l); background:var(--surface); overflow:hidden; margin-top:12px; }
.chat-room .chat-log{ flex:1; max-height:none; }
.chat-room .chat-input{ flex:0 0 auto; }
.chat-rooms-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.room-chip{ display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:999px;
  background:var(--fill); color:var(--label); font-weight:560; font-size:.86rem; border:1px solid transparent; }
.room-chip:hover{ background:var(--fill-2); }
.room-chip.active{ background:var(--tint); color:#fff; }
.room-chip.add{ background:transparent; border:1px dashed var(--outline); color:var(--muted); cursor:pointer; }
.room-chip.add:hover{ color:var(--tint); border-color:var(--tint); }
/* Fremd-Cursor im Editor */
.rcaret{ display:inline-block; width:2px; height:1.15em; margin:0 -1px; vertical-align:text-bottom; position:relative; }
.rcaret > i{ position:absolute; left:-1px; top:-1.15em; font-style:normal; font-size:10px; line-height:1.4; font-weight:600;
  white-space:nowrap; padding:0 4px; border-radius:4px 4px 4px 0; color:#fff; pointer-events:none; z-index:5; }

/* ===== Welcome-/Launcher-Seite ========================================== */
.welcome-bg{ min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:var(--bg); }
.welcome-card{ background:var(--surface); border-radius:28px; box-shadow:0 16px 50px rgba(0,0,0,.12);
  border:.5px solid var(--separator); padding:2.6rem 2.4rem; width:100%; max-width:520px; text-align:center; }
.welcome-bridge{ height:84px; width:auto; color:var(--tint); display:block; margin:0 auto 1rem; }
.welcome-card h1{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:.2rem 0 0; }
.welcome-card .sub{ color:var(--muted); margin:.15rem 0 1.4rem; font-size:.92rem; }
.welcome-hint{ color:var(--muted); font-size:.95rem; margin:0 0 1.2rem; }
.welcome-login{ max-width:340px; margin:0 auto; }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(132px,1fr)); gap:14px; }
.tile{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:var(--surface); border:.5px solid var(--separator); border-radius:20px; box-shadow:var(--e1);
  text-decoration:none; color:var(--label); transition:transform .15s ease, box-shadow .15s ease; }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--e2); }
.tile .ti{ font-size:38px; color:var(--tint); }
.tile span{ font-weight:600; font-size:.92rem; letter-spacing:-.01em; padding:0 8px; text-align:center; line-height:1.25; }

/* „Coming soon"-Hero (Platzhalter-Apps) */
.coming{ max-width:640px; margin:6vh auto 0; text-align:center; padding-bottom:2rem; }
.coming-icon{ width:76px; height:76px; border-radius:20px; margin:0 auto 16px; display:grid; place-items:center;
  background:var(--accent-c); color:var(--tint); box-shadow:var(--e1); }
.coming-icon .ti{ font-size:40px; }
.coming-badge{ display:inline-block; background:var(--accent-c); color:var(--tint); font-weight:600;
  font-size:.76rem; padding:4px 12px; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; }
.coming h2{ font-size:1.8rem; margin:.5rem 0 .35rem; letter-spacing:-.02em; }
.coming-lead{ color:var(--muted); font-size:1.04rem; line-height:1.55; margin:0 auto 1.8rem; max-width:520px; }
.coming-list{ display:grid; gap:10px; text-align:left; }
.coming-item{ display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:.5px solid var(--separator); border-radius:var(--radius-l); padding:14px 16px; box-shadow:var(--e1); }
.coming-item .ti{ font-size:22px; color:var(--tint); flex:0 0 auto; margin-top:1px; }
.coming-item b{ display:block; font-weight:600; font-size:.98rem; }
.coming-item span{ color:var(--muted); font-size:.88rem; }