/* ==========================================================================
   Orgawork – Markenschicht (nach dem Brandsheet)
   Farben, Schrift, Radien, Schatten, Knöpfe, Seitenleiste.
   Liegt über app.css und überschreibt nur das Erscheinungsbild, nicht das Layout.
   Schriften liegen auf orgawork.de selbst (kein Abruf bei Google → keine IP-Übertragung).
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
  /* Markenfarben */
  --night: #2A1B45;      /* Dark Night: Text, Überschriften, Navigation */
  --coral: #F76A58;      /* Vibrant Coral: CTA, aktive Zustände, Badges */
  --plum: #5C2A66;       /* Deep Plum: Hover, Links, Akzentlinien */
  /* abgeleitete Töne (Ergänzung) */
  --coral-soft: #FEEDEA;
  --coral-line: #FBC3BA;
  --plum-soft: #F4EDF6;
  --plum-line: #E2D2E7;
  --night-2: #4A3D63;

  /* App-Tokens auf die Marke gelegt */
  --bg: #F8F9FA;
  --panel: #FFFFFF;
  --panel-2: #F6F5F9;
  --ink: var(--night);
  --ink-2: var(--night-2);
  --muted: #6E6780;
  --line: #E2E4E8;
  --line-2: #EEEFF3;
  --accent: var(--coral);
  --accent-ink: var(--plum);
  --accent-soft: var(--plum-soft);
  --danger: #C2362B;
  --danger-soft: #FCEBE9;
  --shadow: 0 4px 20px rgba(42, 27, 69, .05);
  --shadow-lg: 0 16px 48px rgba(42, 27, 69, .16);
  --r: 12px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-head: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font);
  color: var(--ink);
}

/* ---------- Schrift ---------- */
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .dr-title, .md-title, .kc-title, .pr-head h2, .mt-title, .brand b, .wordmark { font-family: var(--font-head); font-weight: 600; letter-spacing: -.005em; color: var(--night); }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h4 { font-family: var(--font); }
b, strong { font-weight: 600; }
a { color: var(--plum); }
::selection { background: var(--coral-soft); color: var(--night); }

/* ---------- Logo ---------- */
.logo { width: 34px; height: 34px; flex: none; display: block; background: none; border-radius: 0; }
.logo::after { content: none; }
.brand { gap: 12px; padding: 0 8px; }
.brand b { font-size: 19px; line-height: 1.1; }
.brand small { font-size: 11.5px; }

/* ---------- Flächen ---------- */
#main { padding: 32px 32px 64px; }
.card { border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow); }
.card-h { padding: 16px 16px 8px; }
.card-b { padding: 8px 16px 16px; }
.mbox, .auth-card, .md-box { border-radius: 12px; box-shadow: var(--shadow-lg); }
.mbox { padding: 24px; gap: 16px; }
#modal { background: rgba(42, 27, 69, .38); }
#toast { background: var(--night); border-radius: 8px; }
.note.info { background: var(--plum-soft); color: var(--plum); }

/* ---------- Knöpfe ---------- */
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn { border-radius: 8px; padding: 7px 14px; font-weight: 500; border: 1px solid var(--night); background: #fff; color: var(--night); transition: background .12s, color .12s, border-color .12s; }
.btn:hover { background: var(--plum-soft); border-color: var(--plum); color: var(--plum); }
.btn.sm { border-radius: 8px; padding: 4px 10px; border-color: var(--line); }
.btn.sm:hover { border-color: var(--plum-line); }
.btn.pri { background: var(--coral); border: 1px solid var(--coral); color: #fff; font-weight: 600; }
.btn.pri:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--plum-soft); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: default; }
.btn:focus-visible, .inp:focus-visible, .mv-chip:focus-visible, a:focus-visible { outline: 3px solid rgba(247, 106, 88, .35); outline-offset: 2px; }
.btn.done-btn { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.done-btn:hover { background: #15803d; border-color: #15803d; color: #fff; }

/* ---------- Eingaben ---------- */
.inp, select.inp, textarea.inp { border-radius: 8px; border-color: var(--line); padding: 8px 12px; }
.inp:focus { outline: 3px solid rgba(247, 106, 88, .18); border-color: var(--coral); }
.toggle input, input[type=checkbox], input[type=radio] { accent-color: var(--coral); }
.seg { border-radius: 8px; }
.seg button { border-radius: 6px; }
.seg button.on { color: var(--night); font-weight: 600; box-shadow: 0 1px 3px rgba(42, 27, 69, .12); }
.chk:checked { background: var(--coral); border-color: var(--coral); }

/* ---------- Badges & Markierungen ---------- */
.badge { background: var(--coral); }
.badge.soft { background: var(--line-2); color: var(--ink-2); }
.tag.info { background: var(--plum-soft); color: var(--plum); }
.day.today { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.grp-h.today { color: var(--coral); }
.kc-dh.today b, .kc-mcell.today .kc-mnum span { background: var(--coral); }
.kc-day.today { background: rgba(247, 106, 88, .035); }
.pm.on { background: var(--plum-soft); }
.pm.unread { border-left-color: var(--coral); }
.pm.unread .pm-subj { color: var(--plum); }
.pf.on { background: var(--plum-soft); color: var(--plum); }
.pf b { color: var(--coral); }
.vote.on { background: var(--coral-soft); border-color: var(--coral-line); color: var(--plum); }

/* ---------- Seitenleiste in Dark Night ---------- */
#side { background: var(--night); border-right: 0; color: rgba(255, 255, 255, .82); padding: 24px 16px; gap: 24px; }
#side .brand b { color: #fff; }
#side .brand small, #side .muted, #side .small { color: rgba(255, 255, 255, .6); }
#side .nav { gap: 2px; }
#side .nav a { color: rgba(255, 255, 255, .78); padding: 8px 12px; border-radius: 8px; position: relative; }
#side .nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#side .nav a.on { background: rgba(247, 106, 88, .16); color: #fff; font-weight: 600; }
#side .nav a.on::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); }
#side .nav .ic { opacity: .9; }
#side .side-sec h4 { color: rgba(255, 255, 255, .5); }
#side .side-sec h4 a { color: rgba(255, 255, 255, .5); }
#side .toggle:hover { background: rgba(255, 255, 255, .06); }
#side .svc-line { color: rgba(255, 255, 255, .55); }
#side .svc-line.ok { color: #86efac; }
#side .team-line { color: #86efac; }
#side .team-line.err { color: #fca5a5; }
#side .side-foot { border-top-color: rgba(255, 255, 255, .12); }
#side .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
#side .btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
#side .btn.danger { color: #fca5a5; }
#side .z-w.on { color: var(--night); }
#side .z-w.on .muted, #side .z-w.on .small { color: var(--muted); }
#side .z-w .btn { color: var(--night); border-color: var(--line); background: #fff; }
#side::-webkit-scrollbar { width: 8px; }
#side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 8px; }

/* ---------- Anmeldung ---------- */
.auth-wrap { background: radial-gradient(circle at 15% 10%, rgba(247, 106, 88, .14), transparent 45%), radial-gradient(circle at 90% 90%, rgba(92, 42, 102, .14), transparent 45%), var(--bg); }
.auth-card { padding: 32px 32px 24px; }
.auth-card .brand { padding: 0; }
.auth-card .brand .logo { width: 40px; height: 40px; }
.auth-card .brand b { font-size: 22px; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  #main { padding: calc(66px + env(safe-area-inset-top)) 16px 90px; }
  .mtab.on { color: var(--coral); }
  .mtab i { background: var(--coral); }
  #mtop .mt-title { color: var(--night); }
  #side { padding-top: calc(24px + env(safe-area-inset-top)); }
}