/* =====================================================================
   Radioplan — SINGLE styles.css  (Unified)
   ===================================================================== */

/* ---------- Base ---------- */
:root{
  --rp-bg:#e8e9ef;
  --rp-panel:#0f1623;
  --rp-border:#1f2a3a;
  --rp-ink:#eaf0ff;
  --rp-ink-muted:#b7c5e2;
  --rp-accent:#1f54ff;
  --rp-card:#0d1a2b;
  --rp-card-border:#1b2940;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 system-ui,Segoe UI,Roboto,Arial;
  background:var(--rp-bg);
  color:var(--rp-ink);
}

/* ---------- Header / toolbar ---------- */
.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0f1621;border-bottom:1px solid var(--rp-border)}
.app-header h1{margin:0;font-weight:800}
.app-header h1 span{color:#7fb7ff}
.btn{border-radius:10px;padding:6px 10px;border:1px solid #1d2938;background:#0a0f17;color:#cfe0ff;cursor:pointer}
.btn.ghost{background:#121a27}

/* ---------- Week grid ---------- */
.grid-week{display:grid;gap:12px;grid-template-columns:repeat(7,1fr);padding:12px}
.col{background:var(--rp-panel);border:1px solid var(--rp-border);border-radius:16px;min-height:62vh;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.35)}
.col header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#121a27;border-top-left-radius:16px;border-top-right-radius:16px}
.col .date{color:var(--rp-ink-muted);font-size:12px}
.dropzone{padding:12px;flex:1;border-radius:14px}

/* DnD state */
.dropzone.over{outline:2px dashed rgba(140,168,255,.65);outline-offset:-6px}
.card[draggable="true"]{cursor:grab;user-select:none}
.card.dragging{opacity:.8;cursor:grabbing}

/* ---------- Filter chips ---------- */
.filterbar{ padding:12px; border-radius:14px; background:#0f1623; border:1px solid #22314c; margin:12px; }
.filterbar .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.filterbar .row label{ color:var(--rp-ink-muted); font-size:12px; margin-right:6px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; font-size:12px; color:#e7eeff; border:1px solid transparent; background:#1b2639; cursor:pointer; }
.chip .box{ width:14px; height:14px; border-radius:4px; border:2px solid rgba(255,255,255,.75); }
.chip.active .box{ background:#fff; border-color:#fff; }

/* Farben für Filter (Art) */
[data-group="art"] .chip[data-key="Idee"]{ background:#5b43c7; border-color:#806af7; }
[data-group="art"] .chip[data-key="Moderation"]{ background:#0f66d0; border-color:#3d8cff; }
[data-group="art"] .chip[data-key="Beitrag"]{ background:#0ba3a3; border-color:#20c9c9; }
[data-group="art"] .chip[data-key="Interview"]{ background:#b3261e; border-color:#e05c54; }
[data-group="art"] .chip[data-key="Service"]{ background:#0b854f; border-color:#18b374; }
[data-group="art"] .chip[data-key="Werbung"]{ background:#9d1a1a; border-color:#d34747; }
/* Farben für Filter (Sendung) */
[data-group="sendung"] .chip[data-key="Sachsenlive"]{ background:#5b43c7; border-color:#806af7; }
[data-group="sendung"] .chip[data-key="Morgenwecker"]{ background:#0f66d0; border-color:#3d8cff; }
[data-group="sendung"] .chip[data-key="Sonstige Sendung"]{ background:#6b7280; border-color:#9aa3af; }

/* ---------- Card Skin (V3-kompatibel mit aktuellem Markup) ---------- */
.card{
  position:relative;
  background:var(--rp-card);
  border:1px solid var(--rp-card-border);
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.40);
  border-radius:16px;
  padding:12px 14px 12px 18px;
  display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:start;
  margin:10px 12px; color:#fff;
}
.card.ghost{ border-style:dashed; box-shadow:none; opacity:.95; }
.card .card-bar{ width:6px; border-radius:6px; background:linear-gradient(180deg,#62ff8a,#3bc67a 80%); margin-top:2px; }
.card .card-body{ position:relative; min-width:0; }
/* --- Uhrzeit-Badge modern & dynamisch --- */
.card .card-time-chip{
  position:absolute;
  top:-6px; left:0;
  transform:translateY(-100%);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  backdrop-filter:saturate(1.2);
  transition:background .3s ease,color .3s ease,transform .2s ease;
}

/* Farben für Zeitstatus */
.card-time-chip.is-past   { background:#2d3141; color:#cbd1de; }   /* grau: war schon (>15 min zurück) */
.card-time-chip.is-now    { background:#0d6938; color:#eaffee; }   /* grün: jetzt ± Fenster */
.card-time-chip.is-future { background:#2e4f87; color:#dbe8ff; }   /* blau: kommt erst */
}
.card-title{font-weight:800; font-size:16px; line-height:1.2; word-break:break-word;margin-left:-14px }
.card-meta{ color:#bdc9e3; font-size:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.card-actions{ display:flex; gap:8px; align-items:flex-start; padding-top:2px; }
.card-actions .btn{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:#0f2238; border:1px solid #263b57; color:#cfe0ff;
}
.card-actions .btn:hover{ background:#132a45; }

/* ---------- Fixed-Posts Dialog (lean) ---------- */
dialog#fixedDialog{border:1px solid #22314c;border-radius:14px;background:#0f1623;color:#e9f1ff;width:min(780px,96vw);padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.55)}
#fixedDialog h3{margin:2px 0 12px;font-size:18px;font-weight:800;color:#fff}
#fixedDialog .field{margin-bottom:10px}
#fixedDialog .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#fixedDialog label{display:block;color:#b7c5e2;margin-bottom:4px;font-size:12px}
#fixedDialog input,#fixedDialog textarea{width:100%;background:#0b1320;color:#e9f1ff;border:1px solid #2a3a58;border-radius:10px;padding:8px 10px}
#fixedDialog menu{display:flex;gap:8px;justify-content:flex-end}

/* ---------- Utility ---------- */
.muted{color:var(--rp-ink-muted)}
/* ===== Feste Beiträge – Modal Layout ===== */
.fp-modal { --fp-gap: 16px; --fp-bg: rgba(255,255,255,0.04); --fp-br: 12px; }
.fp-modal .fp-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;          /* links breiter (Text/Anhänge) */
  gap: var(--fp-gap) calc(var(--fp-gap) + 6px);
  align-items: start;
}
.fp-modal .fp-left,
.fp-modal .fp-right { display: grid; gap: var(--fp-gap); }

.fp-modal .field label{
  display:block; font-size:.88rem; opacity:.8; margin-bottom:6px;
}
.fp-modal input[type="text"],
.fp-modal input[type="time"],
.fp-modal input[type="date"],
.fp-modal input[type="search"],
.fp-modal select,
.fp-modal textarea{
  width:100%; background:var(--fp-bg); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--fp-br); padding:10px 12px; color:inherit; outline:none;
}
.fp-modal input[type="time"]{ text-align:center; letter-spacing:.05em; }
.fp-modal textarea{ min-height:130px; resize:vertical; }

.fp-modal .row-2 { display:flex; gap: var(--fp-gap); }
.fp-modal .row-2 .field{ flex:1; }

.fp-modal .weekdays{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px 18px;
}
.fp-modal .weekdays label{ display:flex; align-items:center; gap:10px; }

.fp-modal .attachments{
  border:1px dashed rgba(255,255,255,.14); border-radius: var(--fp-br);
  padding:14px; background:rgba(255,255,255,.03);
}

.fp-modal .footer{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding-top:12px; margin-top:8px; border-top:1px solid rgba(255,255,255,.08);
}
.fp-modal .summary{
  display:flex; flex-wrap:wrap; gap:8px 12px; font-size:.9rem; opacity:.9;
}
.fp-modal .summary .pill{
  padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
}
.fp-modal .btn-danger{
  background:#3b1f24; color:#ffd9de; border:1px solid rgba(255,120,140,.28);
}
.fp-modal .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); }
/* === Feste Beiträge Dialog – Layout Optimierung === */
#fixedDialog.modal {
  --fp-gap: 14px;
  --fp-bg: rgba(255,255,255,0.04);
  --fp-br: 12px;
  color: inherit;
}

#fixedDialog form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap);
  padding: 20px;
  max-width: 820px;
  background: var(--fp-bg);
  border-radius: var(--fp-br);
}

#fixedDialog h3 {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 600;
}

#fixedDialog .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#fixedDialog .field.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fp-gap);
}

#fixedDialog label {
  font-size: .88rem;
  opacity: .8;
}

#fixedDialog input,
#fixedDialog textarea,
#fixedDialog select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--fp-br);
  padding: 8px 10px;
  color: inherit;
  font-size: .95rem;
}

#fixedDialog textarea { resize: vertical; min-height: 90px; }

#fixedDialog .copy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 14px;
}

#fixedDialog .dropzone-file {
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: var(--fp-br);
  padding: 14px;
  text-align: center;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background .2s;
}
#fixedDialog .dropzone-file:hover {
  background: rgba(255,255,255,.06);
}
#fixedDialog .attachments {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: .85rem;
  opacity: .9;
}

/* --- Buttons / Menu --- */
#fixedDialog menu {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}
#fixedDialog menu button {
  border-radius: var(--fp-br);
  padding: 6px 14px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}
#fixedDialog menu .ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: inherit;
}
#fixedDialog menu .primary {
  background: #4c6fff;
  color: white;
}

/* --- Fixed list (unten nach <hr>) --- */
#fixedList {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}
/* === Modernes Design für Wochentage === */
#fixedDialog .copy-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#fixedDialog .copy-grid label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  color: rgba(255,255,255,0.85);
}

#fixedDialog .copy-grid label:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* verstecke die echten Checkboxen */
#fixedDialog .copy-grid input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* aktiver Zustand */
#fixedDialog .copy-grid input[type="checkbox"]:checked + span,
#fixedDialog .copy-grid label:has(input[type="checkbox"]:checked) {
  background: linear-gradient(145deg, #4c6fff, #2a47ff);
  border-color: #4c6fff;
  color: #fff;
  box-shadow: 0 0 8px rgba(76,111,255,0.4);
}

/* optional: kleine Animation beim Klick */
#fixedDialog .copy-grid label:active {
  transform: scale(0.95);
}
#fixedList .fp-item{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; margin-bottom:8px;
}
#fixedList .fp-item__title{ font-weight:600; }
#fixedList .fp-item__meta{ opacity:.8; font-size:.9rem; }
#fixedList .fp-edit{
  border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit; border-radius:10px; padding:6px 10px; cursor:pointer;
}
#fixedList .fp-edit:hover{ background:rgba(255,255,255,.06); }
/* fixedList – einfache Optik */
#fixedList .fp-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 12px; margin:6px 0;
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
}
#fixedList .fp-item__title{ font-weight:600; }
#fixedList .fp-item__meta{ opacity:.8; font-size:.9rem; }
#fixedList .fp-edit{
  border:1px solid rgba(255,255,255,.2);
  background:transparent; color:inherit; border-radius:10px;
  padding:6px 10px; cursor:pointer;
}
#fixedList .fp-edit:hover{ background:rgba(255,255,255,.06); }
/* ==== Mini RTE für feste Beiträge ==== */
.rte-toolbar{
  display:flex; gap:8px; margin:6px 0 8px;
}
.rte-toolbar button{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:6px 10px; cursor:pointer;
  color:inherit; font-weight:600; min-width:36px;
}
.rte-toolbar button:hover{ background: rgba(255,255,255,.10); }
.rte-toolbar button.active{ outline:2px solid #4c6fff; }

.rte-editor{
  min-height:130px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background: rgba(255,255,255,.04);
  line-height:1.4; overflow:auto;
}
.rte-editor:focus{ outline:2px solid #4c6fff55; }

.rte-editor ul, .rte-editor ol{ padding-left:20px; margin:6px 0; }
.rte-editor a{ color:#9fb6ff; text-decoration:underline; }
/* === Beschreibung volle Breite === */
#fixedDialog form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei Spalten für die Felder */
  gap: 16px;
}

#fixedDialog .field.wide {
  grid-column: 1 / -1; /* nimmt beide Spalten ein */
}

#fixedDialog .rte-toolbar {
  display: flex;
  gap: 8px;
  margin: 6px 0 8px;
}

#fixedDialog .rte-editor {
  width: 100%;
  min-height: 130px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  line-height: 1.4;
  overflow: auto;
}
#fixedDialog select{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:8px 10px;
  color:inherit;
  font-size:.95rem;
}
#fixedDialog select:focus{ outline:2px solid #4c6fff55; }

/* ==== Bessere Lesbarkeit für Select-Dropdowns im Fixed-Dialog ==== */
#fixedDialog select {
  width: 100%;
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* kleine Pfeil-Deko */
#fixedDialog select::after {
  content: "▾";
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* hellere Auswahl-Liste */
#fixedDialog select option {
  background-color: #1b1c22;
  color: #fff;
}

/* Hover- & Fokus-Effekt */
#fixedDialog select option:hover,
#fixedDialog select option:focus {
  background-color: #3247ff;
  color: #fff;
}

#fixedDialog select:focus {
  outline: 2px solid #4c6fff;
  border-color: #4c6fff55;
}

/* Optional: hellerer Text für deaktivierte Optionen */
#fixedDialog select option:disabled {
  color: #999;
  background-color: #222;
}
/* ===== Kalender-Header Modernisierung ===== */
.rp-header{
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  backdrop-filter: saturate(1.1) blur(6px);
  background: linear-gradient(180deg, rgba(20,22,28,.75), rgba(20,22,28,.55));
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.rp-brand{
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: .2px;
  background: linear-gradient(90deg,#dfe6ff,#7ea2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-brand span{
  color: #9fb6ff;
  -webkit-text-fill-color: initial;
  background: none;
}

.rp-week{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.rp-actions{
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
}

/* Badge für KW/Datum */
.rp-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-weight: 600; font-size: .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e9eeff;
}

/* Buttons */
.rp-btn{
  --btn-bg: rgba(255,255,255,.08);
  --btn-bd: rgba(255,255,255,.18);
  --btn-fg: #eaefff;

  appearance: none; border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 6px 12px; border-radius: 10px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rp-btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.rp-btn:active{ transform: translateY(1px); }

.rp-btn.primary{
  --btn-bg: linear-gradient(180deg,#5e7aff,#3c57ff);
  --btn-bd: #2a47ff;
  --btn-fg: #fff;
  box-shadow: 0 6px 20px rgba(60,87,255,.35);
}
.rp-btn.primary:hover{ filter: brightness(1.07); }
.rp-btn.subtle{
  --btn-bg: rgba(255,255,255,.05);
  --btn-bd: rgba(255,255,255,.12);
}
.rp-btn.ghost{
  --btn-bg: transparent;
  --btn-bd: rgba(255,255,255,.16);
}

/* Kompakter auf kleinen Screens */
@media (max-width: 820px){
  .rp-header{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rp-brand{ font-size: 1.25rem; }
  .rp-actions{ justify-content: stretch; }
  .rp-actions .rp-btn{ flex: 1 1 auto; text-align: center; }
}
/* --- Segmented Control --- */
.segmented { display:inline-flex; background:rgba(255,255,255,0.05); border-radius:999px; padding:4px; gap:4px; }
.segmented-btn { 
  border:0; background:transparent; color:#cfd6e4; 
  padding:6px 12px; border-radius:999px; font-weight:700; cursor:pointer;
}
.segmented-btn.is-active { background:rgba(255,255,255,0.09); color:#fff; }

/* --- Tagesansicht (Heute + Ideen-Pool) --- */
/* Wir schalten eine Klasse .day-mode an einem Wrapper (siehe JS) */
.day-mode .grid-week { 
  grid-template-columns: 2fr 1fr !important; /* Heute breiter, Pool schmaler */
  gap: 16px;
}
.col.is-hidden { display:none !important; }
.col.is-focus  { outline:2px solid rgba(140,168,255,.45); outline-offset:-2px; }

/* Optional: Badge im Spaltenkopf etwas stärker hervorheben */
.day-mode .col.is-focus header { filter:brightness(1.1); }
<style id="header-toolbar-v2">
  /* Toolbar-Grundlayout */
  .app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .app-header .toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  /* KW-Pill (Label) */
  .app-header .week-label{
    padding:6px 10px; border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#e6edff; font-weight:800; letter-spacing:.2px;
  }

  /* Ghost-Buttons im Header als moderne Pills (nur im Header! nicht global) */
  .app-header .ghost{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:#e6edff;
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:background .15s ease, border-color .15s ease, transform .06s ease;
  }
  .app-header .ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.16); }
  .app-header .ghost:active{ transform:translateY(1px); }

  /* Primäre Aktion (optional für „Neuer Beitrag“) */
  .app-header .ghost.primary{
    background:#4f6df0; border-color:rgba(255,255,255,.22); color:#fff;
  }
  .app-header .ghost.primary:hover{ filter:brightness(1.05); }

  /* Segmented Control (Woche / Tagesansicht) – Style an Bild angelehnt */
  .segmented{
    display:inline-flex; gap:4px; padding:4px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .segmented-btn{
    border:0; background:transparent; color:#cfd6e4;
    padding:8px 14px; border-radius:999px; font-weight:800; cursor:pointer;
    letter-spacing:.2px;
  }
  .segmented-btn:hover{ color:#fff; background:rgba(255,255,255,.08); }
  .segmented-btn.is-active{
    background:#263251; color:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* Kleiner Abstand zwischen linken Nav-Buttons und View-Toggle */
  .app-header .view-toggle-wrap{ display:flex; gap:12px; align-items:center; }
  
.rp-sidebar-style{
  :root{
    --nav-w: 240px;
    --nav-w-collapsed: 72px;
    --nav-bg: linear-gradient(180deg,#0f2740 0%, #0a2036 100%);
    --nav-border: rgba(255,255,255,.08);
    --nav-fg: #cfe3ff;
    --nav-fg-dim: #9fb4d8;
    --nav-accent: #6b8cff;
  }

  /* Body bekommt Platz links für die Nav */
  body.has-rp-nav{ padding-left: var(--nav-w); transition: padding .18s ease; }
  body.has-rp-nav.nav-collapsed{ padding-left: var(--nav-w-collapsed); }

  /* Nav-Container */
  .rp-nav{
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: var(--nav-w);
    background: var(--nav-bg);
    color: var(--nav-fg);
    border-right: 1px solid var(--nav-border);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    display: grid; grid-template-rows: auto 1fr auto;
    transition: width .18s ease;
  }
  body.nav-collapsed .rp-nav{ width: var(--nav-w-collapsed); }

  /* Kopf */
  .rp-nav__brand{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-bottom:1px solid var(--nav-border);
  }
  .rp-nav__brand .logo{
    width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
    background:rgba(255,255,255,.08);
  }
  .rp-nav__brand .name{ font:700 14px/1.1 system-ui; letter-spacing:.3px; }
  body.nav-collapsed .rp-nav__brand .name{ display:none; }

  /* Liste */
  .rp-nav__group{ padding:10px 8px 8px; }
  .rp-nav__title{
    color: var(--nav-fg-dim); font:600 11px/1 system-ui; letter-spacing:.4px;
    padding:6px 14px 6px; text-transform:uppercase;
  }
  body.nav-collapsed .rp-nav__title{ display:none; }

  .rp-nav__list{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
  .rp-nav__item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; margin:0 6px; border-radius:12px;
    color: var(--nav-fg); text-decoration:none; white-space:nowrap;
    border:1px solid transparent; transition:background .15s,border-color .15s;
  }
  .rp-nav__item:hover{ background:rgba(255,255,255,.06); border-color:var(--nav-border); }
  .rp-nav__item.is-active{ background:rgba(107,140,255,.18); border-color:rgba(107,140,255,.35); color:#e7efff; }

  .rp-nav__icon{ width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; opacity:.95;}
  .rp-nav__label{ overflow:hidden; text-overflow:ellipsis; }
  body.nav-collapsed .rp-nav__label{ display:none; }

  /* Footer / Toggle */
  .rp-nav__footer{
    padding:10px; border-top:1px solid var(--nav-border); display:flex; justify-content:flex-end;
  }
  .rp-nav__toggle{
    width:36px; height:36px; border-radius:12px; border:1px solid var(--nav-border);
    background:rgba(255,255,255,.06); color:var(--nav-fg);
    display:grid; place-items:center; cursor:pointer;
  }
  .rp-nav__toggle:hover{ background:rgba(255,255,255,.12); }
  .rp-nav__toggle svg{ transition: transform .18s; }
  body.nav-collapsed .rp-nav__toggle svg{ transform: rotate(180deg); }

  /* Sicherstellen: Modals etc. liegen drüber */
  dialog.modal{ z-index: 1000; }
  
 .chip-group .chip{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.chip-group .chip.is-on{ background:rgba(107,140,255,.25); color:#fff; }
.fp-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; background:rgba(255,255,255,.03);
}
.fp-item .meta{display:flex; gap:6px; flex-wrap:wrap; color:#aab9da; font-size:12px;}
.fp-item .pill{padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);}
.fp-item .act{margin-left:auto; display:flex; gap:6px;}
.comment-list { list-style:none; padding:0; margin:0 0 8px 0; }
.comment-item { background:#f3f4f6; border-radius:10px; padding:6px 10px; margin-bottom:6px; }
.comment-item .meta { font-size:12px; color:#6b7280; margin-bottom:2px; }
.comment-input textarea { width:100%; min-height:60px; resize:vertical; border:1px solid #d1d5db; border-radius:6px; padding:6px; font-family:inherit; }
.comment-input button { margin-top:4px; }
/* === Modal: Sticky-Buttonleiste fix + einzeilig === */
dialog.modal form{
  /* genug Platz, damit die Leiste nie über Inhalt/Attachments liegt */
  padding-bottom: 96px !important;
}

dialog.modal menu{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: nowrap !important;     /* alles in einer Zeile */
  gap: 10px !important;
  margin-top: auto !important;
  padding: 10px 0 12px !important;
  background: linear-gradient(180deg,
              rgba(15,23,42,0) 0%,
              rgba(15,23,42,.85) 40%,
              rgba(15,23,42,1) 100%) !important;
}

/* Falls irgendwas drunter einen höheren z-index setzt: */
#cardModal .dropzone-file,
#cardModal #attachmentList{ z-index: 1; position: relative; }

/* === RTE-Toolbar: immer eine Zeile, horizontal scrollen statt Umbruch === */
#cardModal .rte-toolbar{
  display:flex !important;
  flex-wrap: nowrap !important;     /* kein Umbruch */
  overflow-x: auto !important;      /* bei wenig Platz horizontal scrollen */
  white-space: nowrap !important;
  gap: 8px;
  -ms-overflow-style: none;         /* IE/Edge (alt) */
  scrollbar-width: thin;            /* Firefox */
}
#cardModal .rte-toolbar::-webkit-scrollbar{ height: 6px; }
#cardModal .rte-toolbar button{
  flex: 0 0 auto !important;        /* Buttons schrumpfen nicht */
}
/* === Abstands-Fix NUR für #cardModal === */
#cardModal form{
  /* das riesige padding-bottom aus dem globalen Scroll-Fix übersteuern */
  padding-bottom: 20px !important;
}

/* letztes Feld (Attachments) nicht noch zusätzlich nach unten drücken */
#cardModal .field:last-of-type{
  margin-bottom: 6px !important;
}

/* Dropzone / Liste knapp halten */
#cardModal #dropZone,
#cardModal #attachmentList{
  margin-bottom: 6px !important;
}

/* Menü bleibt sticky, aber ohne extra Luft nach oben/unten */
#cardModal menu{
  position: sticky !important;
  bottom: 0 !important;
  padding: 6px 0 8px !important;
  margin-top: 0 !important;
}
/* --- Korrektur: Menü im Modal soll *unterhalb* bleiben, nicht überlappen --- */
#cardModal menu {
  position: relative !important;
  bottom: auto !important;
  inset: auto !important;
  margin-top: 20px !important;
  padding: 10px 0 0 !important;
  background: transparent !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px;
}

/* Entferne überschüssige Abstände unter dem letzten Feld */
#cardModal .field:last-of-type {
  margin-bottom: 0 !important;
}

/* Der Form-Container darf ruhig scrollbar bleiben */
#cardModal form {
  padding-bottom: 0 !important;
  overflow-y: auto !important;
}
/* Heute-Spalte im Wochenboard hervorheben */
.col.is-today {
  outline: 3px solid #7CB6FF;                 /* klarer, heller Rahmen */
  outline-offset: -2px;
  box-shadow:
    0 0 0 3px rgba(124, 182, 255, 0.18) inset, /* zarte Innenleuchte */
    0 6px 24px rgba(0, 0, 0, 0.25);            /* dezenter Shadow */
  border-radius: 16px;                         /* wie deine Columns */
}

/* Optional: sanfter Schimmer (kannst du weglassen) */
@keyframes todayGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124,182,255,.18) inset, 0 6px 24px rgba(0,0,0,.25); }
  50%      { box-shadow: 0 0 0 3px rgba(124,182,255,.28) inset, 0 6px 24px rgba(0,0,0,.25); }
}
.col.is-today {
  animation: todayGlow 3.2s ease-in-out infinite;
}
 /* äußerer Rahmen für die heutige Spalte (nur Woche) */
.grid-week .col.is-today{
    outline: 2px solid #6b8cff;
    box-shadow: 0 0 0 3px rgba(107,140,255,.18);
    border-radius: 16px;
  }
  /* Markierung der heutigen Spalte (Woche) */
.grid-week .column.is-today,
.grid-week .col.is-today {
  outline: 3px solid #7CB6FF;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(124,182,255,.18) inset, 0 6px 24px rgba(0,0,0,.25);
  border-radius: 16px;
  animation: todayGlow 3.2s ease-in-out infinite;
}
@keyframes todayGlow {
  0%,100% { box-shadow: 0 0 0 3px rgba(124,182,255,.18) inset, 0 0 12px rgba(124,182,255,.25); }
  50%     { box-shadow: 0 0 0 3px rgba(124,182,255,.28) inset, 0 0 18px rgba(124,182,255,.35); }
}
/* ---------- Presence: Wer ist gerade im Tool ---------- */

.presence-box{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:12px;
}

.presence-avatar{
  width:26px;
  height:26px;
  border-radius:999px;
  background:#0b1220;            /* dunkles Blau, passend zum Header */
  color:#e5e7eb;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #020617;       /* dunkler Rand */
  box-shadow:0 0 0 1px rgba(15,23,42,.8),
             0 8px 15px rgba(0,0,0,.55);
  position:relative;
}

.presence-avatar::after{
  content:'';
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:9px;
  height:9px;
  border-radius:999px;
  border:2px solid #020617;
  background:#22c55e;            /* grüner Online-Punkt */
}

/* Du selbst: blauer Ring, sonst alles gleich */
.presence-avatar.self{
  border-color:#3b82f6;
}
/* Einheitliches Styling für das Date-Feld im Card-Modal */
#cardModal input[type="date"] {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
  color: #e9efff;
  font-size: .95rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* kleiner Kalender-Icon-Fix */
#cardModal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .75;
}
#cardModal input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

</style>