:root {
  --sidebar-width: 250px;
  --primary: #1a3a5c;
  --accent: #4d9fff;
}

html { -webkit-text-size-adjust: 100%; }
body { background: #f0f2f5; font-size: 0.9rem; }

/* ── Dunkelmodus (Bootstrap data-bs-theme + eigene Flächen) ───────────── */
[data-bs-theme="dark"] body { background: #14181d; }
[data-bs-theme="dark"] .topbar { background: #1b2026; border-bottom-color: #2a313a; }
[data-bs-theme="dark"] .card { box-shadow: 0 1px 4px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .card-header { border-bottom-color: #2a313a; }
[data-bs-theme="dark"] .settings-icon { background: rgba(77,159,255,.16); color: #8bc0ff; }
[data-bs-theme="dark"] .health-icon { background: rgba(77,159,255,.16); }
[data-bs-theme="dark"] .badge.bg-light { background-color: #2a313a !important; color: #d6dde6 !important; }
[data-bs-theme="dark"] .doc-thumb { background: #20262e; }
[data-bs-theme="dark"] .contact-logo,
[data-bs-theme="dark"] .news-contactlogo { background: #20262e; }
/* Seitenleiste im Dunkelmodus: dunkle, neutrale Flaeche statt des blauen Tons */
[data-bs-theme="dark"] .sidebar { background: #11151a; border-right: 1px solid #2a313a; }
[data-bs-theme="dark"] .brand-logo { background: #e9eef3; }
[data-bs-theme="dark"] .sidebar-toggle { color: #cdd6e0; }

/* Handbuch: schematische Wireframe-Skizzen (passen sich per currentColor dem Theme an) */
.hb-wire { max-width: 460px; margin: .25rem 0 1.25rem; }
.hb-wire-svg {
  display: block; width: 100%; height: auto;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg, rgba(0,0,0,.02));
  border-radius: 10px; padding: 8px;
}
.hb-wire figcaption {
  font-size: .72rem; color: var(--bs-secondary-color, #6c757d);
  text-align: center; margin-top: .25rem;
}
/* Schnelleres, sauberes Tippen auf Touch-Geräten */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a, button, .btn, .nav-link, [role="button"], [data-bs-toggle] { touch-action: manipulation; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--primary);
  position: fixed; top: 0; left: 0; z-index: 100;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.sidebar-brand {
  color: #fff; font-size: 1rem; font-weight: 700;
  padding: 1rem 1.25rem .85rem;
  display: flex; align-items: center; gap: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand i { font-size: 1.2rem; color: var(--accent); }
.sidebar-brand small {
  font-size: 0.66rem; opacity: 0.6; display: block; margin-top: 2px; font-weight: 500;
}
.brand-logo {
  width: 32px; height: 32px; background: #fff; border-radius: 8px; padding: 3px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-logo img { width: 100%; height: 100%; display: block; }
.public-logo { width: 64px; height: 64px; }

.sidebar-search {
  position: relative; margin: .6rem .8rem .2rem;
}
.sidebar-search i {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.45); font-size: .85rem; pointer-events: none;
}
.sidebar-search input {
  width: 100%; border: none; border-radius: 8px;
  background: rgba(255,255,255,.10); color: #fff;
  padding: .45rem .6rem .45rem 1.9rem; font-size: .85rem;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,.5); }
.sidebar-search input:focus {
  outline: none; background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(77,159,255,.5);
}

.sidebar .nav-section {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  padding: 0.95rem 1rem 0.3rem 1rem; user-select: none;
}

/* Aufklappbare Navigations-Sektion (z. B. "Links") */
.sidebar .nav-section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; cursor: pointer;
}
.sidebar .nav-section-toggle:hover { color: rgba(255,255,255,0.65); }
.sidebar .nav-section-caret { font-size: 0.7rem; transition: transform 0.15s ease; }
.sidebar .nav-section-toggle.collapsed .nav-section-caret { transform: rotate(-90deg); }
.sidebar .nav-collapse.collapsed { display: none; }

.sidebar .nav-link {
  color: rgba(255,255,255,0.70);
  margin: 1px 0.6rem; padding: 0.5rem 0.7rem 0.5rem 1rem;
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.85rem; border-radius: 9px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.sidebar .nav-link > i:first-child {
  width: 18px; text-align: center; font-size: 1rem;
  opacity: 0.85; flex-shrink: 0;
}
.sidebar .nav-link:hover {
  color: #fff; background: rgba(255,255,255,0.08); transform: translateX(2px);
}
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(77,159,255,0.30), rgba(77,159,255,0.12));
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar .nav-link.active > i:first-child { opacity: 1; color: #8fc2ff; }

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.5rem 0 0.75rem;
}
.sidebar-user {
  padding: 0.7rem 1rem 0.6rem;
  display: flex; align-items: center; gap: 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0.35rem;
}
.sidebar-user i { color: rgba(255,255,255,0.6); font-size: 1.3rem; }
.su-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
}
.sidebar-user-link { text-decoration: none; border-radius: 9px; transition: background .15s; }
.sidebar-user-link:hover { background: rgba(255,255,255,0.06); }
.sidebar-user-link.active { background: rgba(255,255,255,0.10); }
.su-avatar-btn {
  position: relative; border: none; background: none; padding: 0;
  flex-shrink: 0; line-height: 0; border-radius: 50%;
}
.su-avatar-btn > i { color: rgba(255,255,255,0.6); font-size: 1.7rem; }
.su-avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .55rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; box-shadow: 0 0 0 2px var(--primary);
}
.su-avatar-btn:hover .su-avatar-edit { opacity: 1; }

/* Avatare allgemein */
/* Einführungs-Kurztour */
.tour-icon i { font-size: 2.6rem; color: var(--primary); }
/* Hervorhebung des aktuell erklärten Menüpunkts (im Sidebar-Kontext sicher) */
.tour-target { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 9px; position: relative; }
.sidebar .nav-link.tour-target, .sidebar-user-link.tour-target { background: rgba(255,255,255,.12); }
/* Popover mit Pfeil + Schaltflächen */
.tour-pop { max-width: 290px; }
.tour-pop .tour-pop-text { font-size: .85rem; }
.tour-pop .tour-pop-foot { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; }
.tour-pop .tour-pop-count { font-size: .7rem; color: var(--bs-secondary-color); }
.tour-dots { display: flex; gap: 6px; justify-content: center; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-border-color); }
.tour-dot.active { background: var(--primary); }

/* Dashboard: Nutzungs-/Statistik-Kacheln */
.usage-num { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--primary); }
[data-bs-theme="dark"] .usage-num { color: #8fc2ff; }
.usage-label { font-size: .72rem; color: var(--bs-secondary-color); margin-top: .25rem; }
.usage-spark { width: 100%; height: 46px; display: block; margin-top: .15rem; }

/* Einheitliche, gleichmaessige Abstaende zwischen den Dashboard-Bereichen.
   Ersetzt den bisherigen Mix aus mt-3/mb-3/mb-4 durch ein konsistentes Gap –
   auch nach dem Umsortieren der Bereiche bleiben die Abstaende gleich. */
#dashSections { display: flex; flex-direction: column; gap: 1rem; }
#dashSections > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Bereichs-Reihenfolge im Anpassen-Dialog: Drag & Drop */
.sec-order-item { cursor: grab; }
.sec-order-item.sec-dragging { opacity: .5; background: var(--bs-primary-bg-subtle); }

/* Terminumfrage-Optionen im Kalender: vorlaeufig = gestrichelter Rahmen */
.fc .poll-option-event {
  background: rgba(108, 117, 125, .08) !important;
  border: 2px dashed #6c757d !important;
}
.fc .poll-option-event:hover { background: rgba(108, 117, 125, .16) !important; }

/* Terminumfragen: als "geht gar nicht" markierte Optionen */
.poll-vetoed { opacity: .55; }
.poll-vetoed .poll-opt-label { text-decoration: line-through; }

/* Dashboard-Kacheln anordnen */
.dash-tile { cursor: default; }
.dash-tile .dash-grip { cursor: grab; color: var(--bs-secondary-color); margin-right: .35rem; }
.dash-tile.dragging { opacity: .45; }
.dash-tile.dragging .card { outline: 2px dashed rgba(77,159,255,.6); }

.cal-owner-av {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -4px; margin-right: 4px; flex-shrink: 0;
}
.cal-owner-ph { background: #e7ebf0; color: #6c757d; font-size: .7rem; }
[data-bs-theme="dark"] .cal-owner-ph { background: #2a313a; color: #aab4c0; }
.avatar-xs { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-placeholder.avatar-xs { font-size: .65rem; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e7ebf0; color: #6c757d;
}
.avatar-placeholder.avatar-lg { font-size: 2.2rem; }
.avatar-placeholder.avatar-sm { font-size: 1rem; }
.sidebar-user .su-name {
  color: rgba(255,255,255,0.9); font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .su-mail {
  color: rgba(255,255,255,0.45); font-size: 0.68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Hauptinhalt ─────────────────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-width); padding: 1.5rem; min-height: 100vh; }
.topbar {
  background: #fff; border-bottom: 1px solid #e0e3e7;
  padding: 0.75rem 1.5rem; margin: -1.5rem -1.5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.topbar h1 { font-size: 1.2rem; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: .6rem; }
.topbar h1 .feedback-open { font-size: .8rem; font-weight: 500; white-space: nowrap; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; }

.sidebar-toggle {
  display: none; background: none; border: none; font-size: 1.4rem;
  color: var(--primary); cursor: pointer; padding: 0 .5rem 0 0;
}

/* ── Auth-Layout (nicht angemeldet) ──────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.auth-card { max-width: 420px; margin: 4rem auto; width: 100%; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border-radius: 0.5rem; }
.card-header { background: #fff; border-bottom: 1px solid #f0f2f5; font-weight: 600; }

/* ── Buttons / Akzent ────────────────────────────────────────────────── */
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: #142e49; border-color: #142e49; }

/* ── FullCalendar ────────────────────────────────────────────────────── */
#calendar { max-width: 100%; }
.fc .fc-button-primary { background-color: var(--primary); border-color: var(--primary); }
.fc .fc-button-primary:not(:disabled):hover { background-color: #142e49; border-color: #142e49; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background-color: var(--accent); border-color: var(--accent); }
.fc-event { cursor: pointer; }

/* Termintitel umbrechen statt abschneiden (Monats-, Wochen-, Tagesansicht) */
.fc .fc-daygrid-event { white-space: normal; align-items: flex-start; }
/* In der Monatsansicht den Titel bei Bedarf unter Punkt/Uhrzeit umbrechen,
   damit er die volle Zellenbreite nutzt statt nur den Reststreifen */
.fc .fc-daygrid-dot-event { flex-wrap: wrap; }
.fc .fc-daygrid-dot-event .fc-event-title { flex: 1 0 100%; }
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-timegrid-event .fc-event-title {
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: normal; line-height: 1.2;
}

.feed-url { font-family: ui-monospace, monospace; word-break: break-all; }

/* ── Dokumentvorschau: links Vorschaubild, rechts Original ───────────── */
.preview-side { width: 240px; flex-shrink: 0; overflow: auto; background: #f8f9fa; }
.preview-main { min-width: 0; }
[data-bs-theme="dark"] .preview-side { background: #1b2026; }
@media (max-width: 768px) {
  /* Auf dem Smartphone untereinander statt nebeneinander */
  #previewBody { flex-direction: column; }
  .preview-side { width: auto; max-height: 30vh; }
}

/* ── Einstellungs-Kacheln ────────────────────────────────────────────── */
.settings-tile { transition: box-shadow 0.15s ease, transform 0.12s ease; }
.settings-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); }
.settings-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: rgba(26,58,92,0.08); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}

/* ── Wochentag-Auswahl (Wiederholung) ────────────────────────────────── */
.weekday-group ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0;
}
.weekday-group li {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid #ced4da; border-radius: 999px;
  padding: .15rem .65rem; font-size: .82rem; user-select: none;
}
.weekday-group li label { margin: 0; cursor: pointer; }
.weekday-group li input { cursor: pointer; margin: 0; }

/* ── Ampel (System Health) ───────────────────────────────────────────── */
.ampel-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}
.ampel-gruen { background: #28c76f; box-shadow: 0 0 6px rgba(40,199,111,.7); }
.ampel-gelb  { background: #ff9f43; box-shadow: 0 0 6px rgba(255,159,67,.7); }
.ampel-rot   { background: #ea5455; box-shadow: 0 0 6px rgba(234,84,85,.8);
               animation: ampelpuls 1.5s ease-in-out infinite; }
@keyframes ampelpuls { 0%,100%{opacity:1} 50%{opacity:.45} }
.sidebar .nav-link > .ampel-dot { margin-right: .25rem; }

.health-card .health-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: rgba(26,58,92,0.08); color: var(--primary);
}
.health-badge { font-size: .75rem; padding: .25rem .55rem; border-radius: 999px; font-weight: 600; }
.health-badge.gruen { background: #d1f3e0; color: #0a5231; }
.health-badge.gelb  { background: #ffeccc; color: #7a4a00; }
.health-badge.rot   { background: #fbd5d5; color: #842029; }

/* ── Drag&Drop-Zone ──────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed #ced4da; border-radius: 12px; padding: 1.25rem;
  text-align: center; cursor: pointer; background: #f8f9fa;
  transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.dz-over { border-color: var(--accent); background: #eef4ff; }
.dropzone .dz-hint { color: #6c757d; font-size: .85rem; line-height: 1.3; }
.dropzone .dz-hint i { font-size: 1.6rem; display: block; }
.dz-preview-img { max-width: 160px; max-height: 120px; object-fit: contain; border-radius: 6px; }

/* ── KI-Datenschutz-Badge (0 grün … 5 rot) ───────────────────────────── */
.priv-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600; line-height: 1;
  padding: .25rem .45rem; border-radius: 6px; color: #fff; white-space: nowrap;
}
.priv-0 { background: #2e7d32; }
.priv-1 { background: #7cb342; }
.priv-2 { background: #f9a825; color: #3a3000; }
.priv-3 { background: #fb8c00; }
.priv-4 { background: #ef5350; }
.priv-5 { background: #c62828; }
.priv-pending { background: #eceef1; color: #6c757d; }
.priv-checking { background: #e7f0fa; color: #1a3a5c; }
.priv-error { background: #fdecea; color: #b71c1c; }

/* ── Dokumente ───────────────────────────────────────────────────────── */
.doc-filter .list-group-item.active { background: var(--primary); border-color: var(--primary); }
/* Kategorienamen immer voll anzeigen (umbrechen statt mit … abschneiden) */
.doc-filter .cat-name { overflow-wrap: break-word; min-width: 0; }
.doc-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  transition: box-shadow .16s ease, transform .12s ease, border-color .16s ease;
}
.doc-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-3px);
  border-color: rgba(77,159,255,.45);
}
/* Kopf: Dateityp-Medium + Name + Vorschau-Badge */
.doc-card-head {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .8rem .85rem; text-decoration: none; color: inherit;
}
.doc-ftype {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: rgba(120,130,145,.14); color: #64748b;
}
.doc-ftype img { width: 100%; height: 100%; object-fit: cover; }
.doc-ext-pdf  .doc-ftype { background: rgba(220,53,69,.13);  color: #e25563; }
.doc-ext-doc  .doc-ftype, .doc-ext-docx .doc-ftype { background: rgba(13,110,253,.13); color: #4d9fff; }
.doc-ext-xls  .doc-ftype, .doc-ext-xlsx .doc-ftype, .doc-ext-csv .doc-ftype { background: rgba(25,135,84,.14); color: #2fb675; }
.doc-ext-ppt  .doc-ftype, .doc-ext-pptx .doc-ftype { background: rgba(253,126,20,.14); color: #fd7e14; }
.doc-ext-png  .doc-ftype, .doc-ext-jpg .doc-ftype, .doc-ext-jpeg .doc-ftype, .doc-ext-gif .doc-ftype { background: rgba(111,66,193,.13); color: #a285e6; }
.doc-head-main { min-width: 0; flex-grow: 1; }
.doc-name {
  font-size: .85rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.doc-meta {
  font-size: .68rem; color: var(--bs-secondary-color); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}
.doc-preview-badge {
  position: absolute; right: .55rem; top: .55rem; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(26,58,92,.9); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
  opacity: 0; transition: opacity .15s;
}
.doc-card:hover .doc-preview-badge { opacity: 1; }
/* Körper: KI-Zusammenfassung */
.doc-card-body { padding: 0 .85rem .35rem; flex-grow: 1; }
.doc-summary {
  margin: 0; font-size: .78rem; line-height: 1.4; color: var(--bs-secondary-color);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-summary.is-placeholder { font-style: italic; opacity: .7; }
/* Fuß: Kategorien, Autor, Aktionen */
.doc-card-foot { padding: .55rem .85rem .65rem; border-top: 1px solid var(--bs-border-color-translucent); }
.doc-card .badge { font-size: .64rem; margin-right: .15rem; }
.doc-actions { display: flex; gap: .55rem; align-items: center; }
.doc-actions a { color: var(--bs-secondary-color); font-size: 1rem; line-height: 1; }
.doc-actions a:hover { color: var(--primary); }
.doc-priv:empty { display: none; }
/* Dokument-Vorschau (Text/CSV/Excel/Word) im rechten Modalbereich */
.doc-preview-html { width: 100%; height: 100%; overflow: auto; background: var(--bs-body-bg); }
.doc-preview-text {
  white-space: pre-wrap; word-break: break-word; margin: 0; padding: 1rem 1.25rem;
  font-size: .85rem; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.doc-preview-doc { padding: 1.25rem 1.5rem; max-width: 820px; margin: 0 auto; }
.doc-preview-doc p { margin: 0 0 .6rem; line-height: 1.55; }
.doc-preview-table { overflow: auto; padding: .5rem; }
.doc-preview-table table { width: auto; font-size: .8rem; }
.doc-preview-table th { background: var(--bs-tertiary-bg, #f1f3f5); position: sticky; top: 0; }

/* ── Kontakte ────────────────────────────────────────────────────────── */
.contact-card { transition: box-shadow .15s, transform .12s; }
.contact-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }

/* Beschreibung in der Kachel kuerzen (ca. 3 Zeilen); "mehr" zoomt die Kachel heran */
.contact-desc { max-height: 4.6em; overflow: hidden; }
.contact-more { text-decoration: none; }
.tile-zoom-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(20, 30, 45, .35);
}
.contact-card.zoomed {
  position: relative; z-index: 1050;
  transform: scale(1.06);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
}
.contact-card.zoomed .contact-desc { max-height: none; overflow: visible; }
.contact-card.zoomed .contact-more { display: none; }
.contact-logo {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background: #f1f3f5; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.contact-logo img { width: 100%; height: 100%; object-fit: contain; }
.contact-logo > i { font-size: 1.7rem; color: var(--primary); opacity: .8; }
.contact-logo.contact-logo-sm { width: 32px; height: 32px; border-radius: 7px; }
.contact-logo.contact-logo-sm > i { font-size: 1.1rem; }
/* Kontaktname: volle Kachelbreite, nur bei echten Langwoertern umbrechen,
   Groesse leicht dynamisch – so bleibt der Titel gut lesbar. */
.contact-name {
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
  line-height: 1.25; font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
}

/* Kategorie-Filter: horizontales Layout (Chips ueber den Kacheln) ------- */
.cat-layout.layout-top > .cat-filter-col,
.cat-layout.layout-top > .cat-content-col {
  flex: 0 0 100%; width: 100%; max-width: 100%;
}
.cat-layout.layout-top .doc-filter {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem;
}
.cat-layout.layout-top .doc-filter .list-group-item {
  width: auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  padding: .25rem .7rem;
}
.cat-layout.layout-top .doc-filter .list-group-item .badge { margin-left: .1rem; }

/* ── Team-Chat (schwebender Button + Slide-in-Panel) ─────────────────── */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1045;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; font-size: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-fab:hover { filter: brightness(1.05); }
.chat-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: #dc3545; color: #fff;
  font-size: .72rem; line-height: 20px; font-weight: 600; text-align: center;
}
.chat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 1046;
  width: 370px; max-width: calc(100vw - 24px); height: min(70vh, 560px);
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.show { display: flex; }

/* KI-Assistent */
.ai-fab {
  position: fixed; right: 20px; bottom: 88px; z-index: 1045;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #7b5cff, #a06bff); color: #fff; font-size: 1.35rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ai-fab:hover { filter: brightness(1.07); }
.ai-fab.ai-pulse { animation: ai-pulse 1.5s ease-out 2; }
@keyframes ai-pulse {
  0% { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 0 rgba(123,92,255,.55); }
  70% { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 14px rgba(123,92,255,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 0 rgba(123,92,255,0); }
}
/* Gelegentliche Hinweis-Sprechblase am KI-Button */
.ai-nudge {
  position: fixed; right: 20px; bottom: 150px; z-index: 1044;
  max-width: 264px; background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .6rem .85rem;
  font-size: .85rem; line-height: 1.35; cursor: pointer;
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.ai-nudge.show { opacity: 1; transform: translateY(0); }
.ai-nudge::after {
  content: ''; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px;
  background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color); transform: rotate(45deg);
}
.ai-nudge-close {
  position: absolute; top: 1px; right: 7px; border: none; background: none;
  font-size: 1.15rem; line-height: 1; color: #9aa2ab; cursor: pointer;
}
.ai-nudge-close:hover { color: var(--bs-body-color); }
.ai-nudge-text { padding-right: .7rem; }
.ai-panel {
  bottom: 152px; width: 560px; max-width: calc(100vw - 24px);
  height: min(80vh, 720px);
}
.ai-msg {
  max-width: 92%; padding: .5rem .7rem; border-radius: 12px; margin: .35rem 0;
  font-size: .9rem; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere;
}
/* Tabellen/Analyse-Antworten duerfen die volle Panelbreite nutzen */
.ai-msg.ai-bot:has(.ai-table-wrap) { max-width: 100%; }
.ai-msg.ai-user { margin-left: auto; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.ai-bot { margin-right: auto; background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-bottom-left-radius: 4px; }
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4;
  animation: ai-blink 1.2s infinite both;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }
.ai-msg p { margin: 0 0 .5rem; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ul, .ai-msg ol { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.ai-msg .ai-h { font-weight: 700; margin: .5rem 0 .3rem; }
.ai-msg code { background: rgba(0,0,0,.06); padding: 0 .25rem; border-radius: 4px; font-size: .85em; }
.ai-msg a { color: inherit; text-decoration: underline; }
.ai-table-wrap { overflow-x: auto; margin: .4rem 0; -webkit-overflow-scrolling: touch; }
.ai-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ai-table th, .ai-table td { border: 1px solid var(--bs-border-color); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.ai-table th { background: var(--bs-tertiary-bg); font-weight: 600; white-space: nowrap; }
.ai-table tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
/* Vorschlags-Chips */
.ai-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .4rem; }
.ai-chip {
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-body-color); border-radius: 999px; padding: .3rem .7rem;
  font-size: .82rem; line-height: 1.2; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.ai-chip:hover { border-color: #7b5cff; background: rgba(123,92,255,.08); }
.ai-msg a.ai-export-btn, .ai-export-btn {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
  background: #1a3a5c; color: #fff !important; text-decoration: none; padding: .4rem .8rem;
  border-radius: 8px; font-size: .85rem; font-weight: 600;
}
.ai-msg a.ai-export-btn:hover, .ai-export-btn:hover { filter: brightness(1.12); color: #fff !important; }

/* Sortierbare Tabellen (Kopf anklickbar, Richtung gespeichert) */
table.js-sortable th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.js-sortable th.sortable:hover { color: var(--primary); }
table.js-sortable th .sort-ind { font-size: .75em; opacity: .45; margin-left: .15rem; }
table.js-sortable th.sort-asc .sort-ind::after { content: "▲"; opacity: 1; }
table.js-sortable th.sort-desc .sort-ind::after { content: "▼"; opacity: 1; }

/* Kachelgröße (nutzerspezifisch, Stufe 1–5) – wirkt ab Desktopbreite */
@media (min-width: 992px) {
  .tile-grid[data-scale="1"] > [class*="col-"] { flex: 0 0 20%; max-width: 20%; }
  .tile-grid[data-scale="2"] > [class*="col-"] { flex: 0 0 25%; max-width: 25%; }
  .tile-grid[data-scale="3"] > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .tile-grid[data-scale="4"] > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .tile-grid[data-scale="5"] > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
/* Zahlenspalten (kurze Werte) nicht umbrechen; Textspalten duerfen umbrechen */
.ai-table td { white-space: nowrap; }
.ai-table td:first-child { white-space: normal; min-width: 8rem; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.chat-back { border: none; background: none; color: inherit; font-size: 1.1rem; padding: 0 .2rem; cursor: pointer; }
.chat-hdr-btn { border: none; background: none; color: var(--primary); font-size: 1.15rem; padding: 0 .3rem; cursor: pointer; margin-left: auto; }
.chat-hdr-btn + .chat-hdr-btn { margin-left: .1rem; }   /* nur der erste schiebt nach rechts */
.chat-hdr-btn:hover { filter: brightness(1.1); }
.chat-hdr-btn.chat-bell-on { color: var(--bs-success, #2fb675); }

/* Teilnehmer-Auswahl: Chip/Token-Feld mit Autovervollständigung */
.ta-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  min-height: calc(1.5em + .75rem + 2px); height: auto; cursor: text;
}
.ta-input:focus-within {
  border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}
.ta-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--primary, #1a3a5c); color: #fff; border-radius: 1rem;
  padding: .05rem .25rem .05rem .55rem; font-size: .85rem; line-height: 1.5;
}
.ta-chip .ta-x {
  background: none; border: none; color: #fff; opacity: .8; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 .15rem;
}
.ta-chip .ta-x:hover { opacity: 1; }
.ta-text {
  border: none; outline: none; background: transparent;
  flex: 1 1 8ch; min-width: 8ch; padding: .15rem .1rem;
}
.ta-menu { max-height: 220px; overflow-y: auto; }
.chat-title { margin-right: .3rem; }
.chat-convo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-conv {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: none; background: none; padding: .55rem .8rem; cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
}
.chat-conv:hover { background: var(--bs-tertiary-bg); }
.chat-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-conv-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-last { font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; flex-shrink: 0;
  background: #dc3545; color: #fff; font-size: .72rem; line-height: 20px; text-align: center; font-weight: 600;
}
.chat-av-team { background: var(--bs-secondary); color: #fff; }
.chat-av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.chat-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid var(--bs-body-bg); background: #adb5bd;
}
.chat-dot.on { background: #22c55e; }
.chat-hdr-status { font-size: .72rem; font-weight: 500; }
.chat-hdr-status.on { color: #22c55e; }
.chat-hdr-status.off { color: var(--bs-secondary-color); }
.chat-hdr-status.on::before, .chat-hdr-status.off::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: baseline; background: currentColor;
}
.chat-body { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-msg { display: flex; gap: .5rem; align-items: flex-end; max-width: 90%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: .72rem; font-weight: 600;
}
.chat-author { font-size: .72rem; color: var(--bs-secondary-color); margin: 0 .3rem 1px; }
.chat-bubble {
  padding: .4rem .65rem; border-radius: 12px; background: var(--bs-tertiary-bg);
  overflow-wrap: anywhere; white-space: normal; line-height: 1.35;
}
.chat-msg.mine .chat-bubble { background: var(--primary); color: #fff; }
.chat-time { font-size: .66rem; color: var(--bs-secondary-color); margin: 1px .3rem 0; }
.chat-read-status { color: var(--bs-success); font-weight: 600; }
.chat-msg.mine .chat-bubble-wrap { text-align: right; }
/* Aktionen an Nachrichten (Weiterleiten/Löschen) – erst beim Hover sichtbar */
.chat-msg-actions { display: inline-flex; gap: .1rem; opacity: 0; transition: opacity .12s;
  margin: 1px .2rem 0; }
.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { opacity: .85; }
.chat-msg-act { background: none; border: 0; padding: 1px 4px; cursor: pointer;
  color: var(--bs-secondary-color, #6c757d); font-size: .78rem; line-height: 1; border-radius: 4px; }
.chat-msg-act:hover { color: var(--primary, #1a3a5c); background: var(--bs-tertiary-bg, #f1f3f5); }
.chat-fwd-ref { font-size: .72rem; opacity: .75; font-style: italic; margin-bottom: .2rem;
  display: flex; align-items: center; gap: .25rem; }
.chat-forward-box { margin-top: .35rem; text-align: left; }
.chat-forward-row { display: flex; gap: .35rem; align-items: center; }
.chat-forward-row .form-select { max-width: 12rem; }
.chat-typing { padding: .1rem .8rem .3rem; font-size: .74rem; color: var(--bs-secondary-color); font-style: italic; }
.chat-typing-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.chat-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5;
  animation: chatTypingBlink 1.2s infinite ease-in-out both;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chatTypingBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }
.chat-convo { position: relative; }
.chat-mention {
  position: absolute; left: .6rem; right: .6rem; bottom: 58px; z-index: 5;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.2); overflow: hidden; max-height: 180px; overflow-y: auto;
}
.chat-mention-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: .4rem .7rem; font-size: .85rem; cursor: pointer;
}
.chat-mention-item:hover, .chat-mention-item.active { background: var(--bs-tertiary-bg); }
/* Eingebettetes Link-Ziel (Navigation bleibt links) */
.link-frame-wrap { display: flex; flex-direction: column; }
.link-frame {
  width: 100%; height: calc(100vh - 150px); min-height: 360px;
  border: 1px solid var(--bs-border-color); border-radius: 10px; background: #fff;
}

/* Links-Übersicht: Kacheln + Liste */
.link-card { transition: box-shadow .15s ease, transform .12s ease; }
.link-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
.link-thumb {
  position: relative; height: 132px; border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius); overflow: hidden;
  background: linear-gradient(135deg, #eef2f6, #dde5ec);
}
.link-thumb-a { display: block; width: 100%; height: 100%; }
.link-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-thumb-icon {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 2.6rem; color: #8aa0b4;
}
.link-summary {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.link-fav {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #b0b7be; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.link-fav:hover { color: #f0ad2e; }
.link-fav.is-fav { color: #f0ad2e; }
.list-group-item .link-fav { position: static; box-shadow: none; background: transparent; flex-shrink: 0; }
.link-author { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 160px; }
.link-author > .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-author-av {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.link-author-av--none {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e2e8ee; color: #7a8a99; font-size: .7rem;
}
.link-list-thumb {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: #eef2f6; display: flex; align-items: center; justify-content: center;
  color: #8aa0b4; font-size: 1.3rem;
}
.link-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.link-preview-box {
  width: 160px; height: 96px; border: 1px solid var(--bs-border-color); border-radius: 8px;
  overflow: hidden; background: #eef2f6; display: flex; align-items: center; justify-content: center;
}
.link-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.link-drop { cursor: pointer; border-style: dashed; transition: border-color .12s, background .12s; }
.link-drop:hover { border-color: #1a3a5c; }
.link-drop.dragover { border-color: #1a3a5c; background: #e7edf3; }

/* Icon-Auswahl (Bootstrap-Symbole) */
.icon-picker {
  display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--bs-border-color); border-radius: 8px;
}
.icon-picker .icon-opt {
  width: 38px; height: 38px; border: 1px solid var(--bs-border-color);
  border-radius: 8px; background: var(--bs-body-bg); color: var(--bs-body-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.icon-picker .icon-opt:hover { border-color: #1a3a5c; }
.icon-picker .icon-opt.active {
  border-color: #1a3a5c; background: #1a3a5c; color: #fff;
}

/* Avatar-Wrapper mit Online-Status-Punkt (ueberall wo Mitarbeiter-Avatare stehen) */
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.presence-dot {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: #adb5bd; border: 2px solid var(--bs-body-bg);
  box-sizing: content-box;
}
.presence-dot.on { background: #22c55e; }
.avatar-wrap-avatar-xs .presence-dot { width: 6px; height: 6px; border-width: 1.5px; }
.avatar-wrap-staff-avatar .presence-dot { width: 12px; height: 12px; }
.cal-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  vertical-align: baseline; margin-right: 5px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.cal-legend .cal-dot { margin-right: 0; }
.cal-swatch {
  width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; color: rgba(0,0,0,.6); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; padding: 0;
}
.cal-swatch > i { opacity: 0; font-size: .95rem; }
.cal-swatch.selected { border-color: var(--bs-body-color); }
.cal-swatch.selected > i { opacity: 1; }
.cal-swatch.taken { cursor: not-allowed; opacity: .4; }
.cal-swatch.taken > i { opacity: .9; }
.chat-emoji-btn { border: none; background: none; font-size: 1.3rem; padding: 0 .2rem; cursor: pointer; line-height: 1; align-self: center; }
.chat-emoji {
  position: absolute; left: .6rem; right: .6rem; bottom: 58px; z-index: 6;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
  padding: .4rem; max-height: 200px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.chat-emoji-item { border: none; background: none; font-size: 1.25rem; padding: .2rem; cursor: pointer; border-radius: 6px; line-height: 1.2; }
.chat-emoji-item:hover { background: var(--bs-tertiary-bg); }
.chat-att-img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; }
.chat-msg .chat-bubble .chat-att { display: block; margin-bottom: .25rem; }
.chat-att-file {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  color: inherit; padding: .35rem .55rem; border-radius: 8px;
  background: rgba(0,0,0,.06); max-width: 240px;
}
.chat-msg.mine .chat-att-file { background: rgba(255,255,255,.2); color: #fff; }
.chat-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-att-size { opacity: .7; font-size: .72rem; flex-shrink: 0; }
.chat-input { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--bs-border-color); align-items: center; }
.chat-input textarea { resize: none; overflow-y: auto; }
@media (max-width: 480px) {
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 82px; height: min(72vh, 620px); }
}
.contact-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.contact-actions a { color: #6c757d; }
.contact-actions a:hover { color: var(--primary); }
.contact-card .badge { font-size: .62rem; margin-right: .15rem; }

/* ── Was gibt's Neues? / Pinnwand ────────────────────────────────────── */
.note-board { display: flex; flex-wrap: wrap; gap: 14px; }
.note {
  position: relative; width: 200px; min-height: 150px; padding: .85rem .9rem .6rem;
  border-radius: 3px; box-shadow: 2px 3px 8px rgba(0,0,0,.15);
  font-size: .85rem; color: #3a3a2a; display: flex; flex-direction: column;
}
.note:nth-child(3n+1) { transform: rotate(-1.2deg); }
.note:nth-child(3n+2) { transform: rotate(1deg); }
.note:nth-child(3n)   { transform: rotate(-.4deg); }
.note-yellow { background: #fff4b8; }
.note-green  { background: #d7f7c8; }
.note-blue   { background: #cfe8ff; }
.note-pink   { background: #ffd6e7; }
.note-orange { background: #ffe0c2; }
.note-title { font-weight: 700; margin-bottom: .25rem; }
.note-body { white-space: pre-wrap; word-break: break-word; flex-grow: 1; }
.note-meta { margin-top: .5rem; font-size: .68rem; color: rgba(0,0,0,.45); }
.note-del { position: absolute; top: 2px; right: 4px; margin: 0; }
.note-del button { border: none; background: none; color: rgba(0,0,0,.3); line-height: 1; padding: 0; font-size: 1rem; }
.note-del button:hover { color: #c0392b; }
.note-edit { position: absolute; top: 3px; right: 22px; border: none; background: none; color: rgba(0,0,0,.3); line-height: 1; padding: 0; font-size: .85rem; }
.note-edit:hover { color: var(--primary); }
.note-add {
  border: 2px dashed #c9ccd1; background: #fafbfc; color: #8a9099;
  align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  transform: none !important; box-shadow: none;
}
.note-add:hover { border-color: var(--accent); color: var(--accent); }
.note-add i { font-size: 1.6rem; }

.note-color-pick {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.note-color-pick.selected { box-shadow: 0 0 0 2px var(--primary); }

/* „Neu in der App" – Upgrade-Historie als Timeline (Stil wie Buchhaltung) */
.app-news-card { border-top: 4px solid var(--primary); }
.app-news-head { font-weight: 700; color: var(--primary); }
.cl-timeline { position: relative; padding-left: 28px; }
.cl-timeline::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px;
  width: 2px; background: #e6e8eb;
}
.cl-item { position: relative; margin-bottom: 18px; scroll-margin-top: 90px; }
.cl-item:last-child { margin-bottom: 0; }
/* Ziel eines Verweises (z. B. aus einer Feedback-Antwort) hervorheben */
.cl-item:target .cl-card {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,110,253,.18);
  animation: cl-target-flash 1.6s ease-out 1;
}
@keyframes cl-target-flash {
  0% { box-shadow: 0 0 0 6px rgba(13,110,253,.35); }
  100% { box-shadow: 0 0 0 3px rgba(13,110,253,.18); }
}
.cl-dot {
  position: absolute; left: -28px; top: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 2px solid #d0d4d9;
  display: flex; align-items: center; justify-content: center; font-size: .6rem;
}
.cl-date {
  font-size: .72rem; color: #8a9099; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px;
}
.cl-time { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .85; }
.cl-card { border: 1px solid #e6e8eb; border-radius: 10px; padding: 10px 14px; background: #fff; }
.cl-card .badge { font-size: .62rem; }

/* News-Feed „Weisser Ring" */
.feed-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.feed-item {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid #e6e8eb; border-radius: 10px; padding: 10px 14px; background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.feed-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--accent); }
.feed-title { font-size: .85rem; font-weight: 600; line-height: 1.3; color: var(--primary); }
.feed-note { font-size: .78rem; color: var(--bs-body-color, #495057); margin-top: 3px; line-height: 1.35; }
.feed-meta { font-size: .7rem; color: #8a9099; margin-top: 3px; }

.news-item { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid #f0f2f5; }
.news-item:last-child { border-bottom: none; }
.news-date {
  flex-shrink: 0; width: 42px; text-align: center; font-weight: 700; font-size: .75rem;
  color: var(--primary); background: #eef2f7; border-radius: 6px; padding: .25rem 0;
}
.news-fileicon { font-size: 1.3rem; color: var(--primary); opacity: .8; }
.news-contactlogo { width: 28px; height: 28px; border-radius: 6px; background: #f1f3f5; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.news-contactlogo img { width: 100%; height: 100%; object-fit: contain; }
.news-contactlogo i { color: var(--primary); opacity: .7; }

/* ── Mitarbeiter ─────────────────────────────────────────────────────── */
.staff-card { transition: box-shadow .15s, transform .12s; }
.staff-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.staff-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.staff-avatar-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e7ebf0; color: #6c757d; font-size: 1.4rem;
}
.staff-card .badge { font-size: .62rem; margin-right: .15rem; }

/* Tag-Chips (Seminare/Kenntnisse) */
.tag-chip {
  display: inline-block; text-decoration: none; font-size: .7rem; line-height: 1.4;
  padding: .05rem .5rem; border-radius: 999px; margin: .1rem .15rem .1rem 0;
  border: 1px solid transparent; white-space: nowrap;
}
.tag-seminar { background: #e7f0fb; color: #1a3a5c; }
.tag-seminar:hover { background: #d5e6f8; color: #1a3a5c; }
.tag-skill { background: #e6f5ea; color: #186a3b; }
.tag-skill:hover { background: #d4eedd; color: #186a3b; }
.tag-chip.active { box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 600; }

/* ── Flash ───────────────────────────────────────────────────────────── */
.flash-area { margin-bottom: 1rem; }

/* ── Backdrop für mobile Sidebar ─────────────────────────────────────── */
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.45); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%); transition: transform 0.25s ease;
    width: 84vw; max-width: 320px;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.4); }
  .sidebar-backdrop.show { display: block; }
  .main-content { margin-left: 0; padding: 1rem .85rem; }
  .sidebar-toggle { display: inline-block; }

  /* Topbar kompakter, Aktionen umbrechen, Suche volle Breite */
  .topbar { margin: -1rem -.85rem 1rem; padding: .55rem .85rem; }
  .topbar h1 { font-size: 1.05rem; }
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  .topbar-actions form { flex: 1 1 100%; }
  .topbar-actions .input-group { width: 100%; }
  .topbar input[type="search"] { min-width: 0 !important; }

  /* FullCalendar-Kopf stapeln und Buttons verkleinern */
  .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; gap: .4rem; margin-bottom: .6rem; }
  .fc .fc-toolbar-title { font-size: 1.1rem; text-align: center; }
  .fc .fc-button { padding: .35rem .6rem; font-size: .85rem; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; }

  /* Dialoge etwas randnah */
  .modal-dialog { margin: .5rem; }

  /* Topbar bleibt beim Scrollen oben – Menü-Button stets erreichbar */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    padding-top: max(.55rem, env(safe-area-inset-top));
  }

  /* iOS zoomt nicht mehr beim Fokussieren (Felder >= 16px) */
  .form-control, .form-select, input, select, textarea { font-size: 16px; }

  /* Komfortable Touch-Ziele (Apple/Google: ~44px) */
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .topbar .btn-sm, .topbar-actions .btn { min-height: 40px; }
  .list-group-item { padding-top: .7rem; padding-bottom: .7rem; }
  .sidebar .nav-link { padding-top: .65rem; padding-bottom: .65rem; font-size: .95rem; }
  .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }

  /* Aktions-Icons in Karten größer und mit mehr Abstand antippbar */
  .doc-actions { display: flex; gap: .15rem; }
  .doc-actions a, .contact-actions a { font-size: 1.2rem; padding: .3rem; margin-left: 0; }
  .contact-actions { gap: .25rem; }

  /* Safe-Area (Notch/Home-Indikator) berücksichtigen */
  .main-content {
    padding-left: max(.85rem, env(safe-area-inset-left));
    padding-right: max(.85rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }

  /* Tabellen weich scrollen */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ── 5-Sterne-Bewertung (Umfrage) ─────────────────────────────────────── */
/* Radios in umgekehrter Reihenfolge (5→1); über Geschwister-Selektoren
   leuchten der gewählte Stern und alle davor (links) auf. */
.star-rating { display: inline-flex; flex-direction: row-reverse;
  justify-content: flex-end; gap: .15rem; font-size: 1.6rem; line-height: 1; }
.star-rating input { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.star-rating label { color: var(--bs-border-color, #ced4da); cursor: pointer;
  transition: color .1s ease; margin: 0; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #f5a623; }
.star-rating input:focus-visible + label { outline: 2px solid var(--primary);
  outline-offset: 2px; border-radius: 3px; }
/* Nur-Anzeige-Sterne (Ergebnisse/Preview) */
.stars-static { color: #f5a623; font-size: 1rem; letter-spacing: 1px; white-space: nowrap; }
.stars-static .bi-star { color: var(--bs-border-color, #ced4da); }

/* ── KI-Assistent: Antwort in den Chat weiterleiten ─────────────────── */
.ai-forward-btn { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem;
  background: none; border: 0; padding: 0; font-size: .8rem; cursor: pointer;
  color: var(--primary, #1a3a5c); }
.ai-forward-btn:hover { text-decoration: underline; }
.ai-forward-box { margin-top: .4rem; }
.ai-forward-row { display: flex; gap: .4rem; align-items: center; }
.ai-forward-row .form-select { max-width: 14rem; }

/* ── KI-Assistent: Verlauf früherer Fragen ──────────────────────────── */
.ai-history { margin-top: .5rem; }
.ai-history-title { font-size: .8rem; color: var(--bs-secondary-color, #6c757d);
  margin: .25rem 0; }

/* ── KI-Assistent: Bestätigungskarte für Schreibaktionen ────────────── */
.ai-action { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem;
  padding: .6rem .7rem; margin: .4rem 0; background: var(--bs-tertiary-bg, #f8f9fa); }
.ai-action-title { font-weight: 600; margin-bottom: .35rem; }
.ai-action-row { display: flex; gap: .5rem; font-size: .875rem; padding: .1rem 0;
  border-top: 1px solid var(--bs-border-color, #e9ecef); }
.ai-action-row:first-of-type { border-top: 0; }
.ai-action-key { flex: 0 0 8rem; color: var(--bs-secondary-color, #6c757d); }
.ai-action-val { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; }
.ai-action-btns { margin-top: .5rem; }
.ai-action-msg { margin-top: .35rem; }

/* ── App-Installation anbieten (PWA-Banner) ─────────────────────────── */
.install-cta { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem;
  padding: .6rem .85rem; border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .6rem; background: var(--bs-tertiary-bg, #f8f9fa); }
.install-cta-icon { font-size: 1.5rem; color: var(--primary, #1a3a5c); flex: 0 0 auto; }
.install-cta-text { flex: 1 1 auto; line-height: 1.25; min-width: 0; }
.install-cta-close { flex: 0 0 auto; margin-left: .1rem; }
.install-steps li { margin-bottom: .5rem; }