* { box-sizing: border-box; }

:root {
  --bg: #1c1922;
  --bg-panel: #252030;
  --bg-elevated: #2f2839;
  --bg-input: #251f2e;
  --text: #ece6f2;
  --text-muted: #a89bb8;
  --accent: #9b7ede;
  --accent-strong: #b491f0;
  --border: #3b3247;
  --gefahr: #d97a93;
  --gefahr-strong: #e693a8;
  --warnung: #d9a15a;
}

html, body {
  height: 100%;
}

.wartung-banner {
  background: var(--warnung);
  color: #1c1922;
  text-align: center;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Scrollbalken ans dunkle Design angleichen statt OS-/Browser-Standard (hell, wirkt fremd) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Auth (Login-Gate) --- */
.auth-overlay {
  display: none;
}

body.auth-benoetigt .auth-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

body.auth-benoetigt .app-shell {
  display: none;
}

.auth-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
  width: min(360px, 90vw);
  text-align: center;
}

.auth-box h1 {
  color: var(--accent-strong);
  margin-top: 0;
}

.auth-box p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.auth-formular {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
}

.auth-formular input {
  padding: 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.95rem;
}

.auth-status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--gefahr-strong);
}

.auth-wechsel {
  margin: 0;
  font-size: 0.85rem;
}

.auth-wechsel a {
  color: var(--accent-strong);
  cursor: pointer;
}

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --- Linke Sidebar (Nutzer/Home/Werkbänke) --- */
.linke-sidebar {
  width: 92px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.2s ease;
}

.linke-sidebar.eingeklappt {
  width: 0;
}

.linke-tabs {
  width: 92px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  gap: 0.25rem;
}

.linke-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: var(--text-muted);
  padding: 0.75rem 0.25rem;
  font-size: 0.75rem;
  margin: 0 0.5rem;
}

.linke-tab-icon {
  font-size: 1.3rem;
}

.linke-tab-btn.active {
  background: var(--bg-elevated);
  color: var(--accent-strong);
  font-weight: 600;
}

.linke-tab-btn-unten {
  margin-top: auto;
}

.linke-panel {
  display: none;
}

.linke-panel.active {
  display: block;
}

.linke-panel h3 {
  color: var(--accent-strong);
  font-size: 0.95rem;
  margin: 1.25rem 0 0.75rem 0;
}

.linke-panel h3:first-child {
  margin-top: 0;
}

/* --- Profil-Unterpanels (Profil/Dateien/IdentityCore als ein Sammel-Bereich) --- */
.profil-unterpanel-umschalter {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.profil-unter-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  padding: 0.6rem 0.4rem;
  font-size: 0.85rem;
}

.profil-unter-btn.active {
  background: var(--bg-elevated);
  color: var(--accent-strong);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

.profil-unterpanel {
  display: none;
}

.profil-unterpanel.active {
  display: block;
}

.platzhalter-text {
  color: var(--text-muted);
  font-style: italic;
}

.profil-block {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.profil-block input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

/* --- Home-Widgets --- */
.widget-karte {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.widget-datum-uhrzeit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.widget-uhrzeit {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.widget-datum {
  color: var(--text-muted);
  text-transform: capitalize;
}

#widget-protokoll-highlight, #widget-identitycore-kurz {
  cursor: pointer;
}

#widget-identitycore-kurz div {
  padding: 0.15rem 0;
}

.wetter-widget {
  cursor: pointer;
}

.wetter-anzeige {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.wetter-temperatur {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.wetter-beschreibung {
  color: var(--text-muted);
}

.wetter-regen, .wetter-stunde-regen, .wetter-tag-regen {
  color: var(--accent-strong);
  font-size: 0.8rem;
}

.wetter-detail h4 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.wetter-detail h4:not(:first-child) {
  margin-top: 0.75rem;
}

.wetter-stunden-reihe {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.wetter-stunde {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.wetter-stunde-temp {
  color: var(--text);
  font-weight: 600;
}

.wetter-tage-liste {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wetter-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

.wetter-tag:last-child {
  border-bottom: none;
}

.wetter-tag-name {
  width: 2.5rem;
  text-transform: capitalize;
  color: var(--text);
  font-weight: 600;
}

.wetter-tag-beschreibung {
  flex: 1;
  color: var(--text-muted);
}

.wetter-tag-temp {
  color: var(--text);
}

.erinnerung-neu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.erinnerung-neu input, .erinnerung-neu select {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

.erinnerung-neu #erinnerung-text {
  flex: 1;
  min-width: 10rem;
}

.erinnerung-neu #erinnerung-faellig, .erinnerung-neu #erinnerung-wiederholung {
  flex: 0 0 auto;
  color-scheme: dark;
}

.erinnerung-faellig-anzeige {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

#erinnerungen-liste, #letzte-ordner-liste, #letzte-chats-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

#letzte-chats-liste li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
}

#letzte-chats-liste li:last-child {
  border-bottom: none;
}

#letzte-chats-liste li:hover {
  color: var(--accent-strong);
}

#erinnerungen-liste li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

#erinnerungen-liste li:last-child {
  border-bottom: none;
}

#erinnerungen-liste li.erledigt span {
  text-decoration: line-through;
  color: var(--text-muted);
}

#erinnerungen-liste input[type="checkbox"] {
  accent-color: var(--accent);
}

#erinnerungen-liste span {
  flex: 1;
}

.widget-karte h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.freunde-suche {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.freunde-suche input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

.freunde-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.freunde-liste li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.freunde-liste li:last-child {
  border-bottom: none;
}

.freunde-liste span {
  flex: 1;
}

.freunde-such-treffer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.freunde-such-treffer span {
  flex: 1;
}

/* --- Feed (Etappe 5: Posts) --- */
#post-text {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.5rem;
}

#post-datei {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.feed-post-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.feed-post-kopf strong {
  color: var(--accent-strong);
}

.feed-post-kopf .feed-post-loeschen {
  margin-left: auto;
}

.feed-post-text {
  white-space: pre-wrap;
  margin-bottom: 0.5rem;
}

.feed-post-medium {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.feed-post-kommentare {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  border-top: 1px solid var(--border);
}

.feed-post-kommentare li {
  padding: 0.3rem 0;
  font-size: 0.85rem;
}

.feed-post-kommentare li .eintrag-loeschen {
  margin-left: 0.3rem;
}

.feed-post-kommentar-neu {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.feed-post-kommentar-neu input {
  flex: 1;
  padding: 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.85rem;
}

#letzte-ordner-liste li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
}

#letzte-ordner-liste li:last-child {
  border-bottom: none;
}

#letzte-ordner-liste li:hover {
  color: var(--accent-strong);
}

.fernzugriff-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#remote-qr {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.remote-url {
  color: var(--text-muted);
  font-size: 0.85rem;
}

#import-quellpfad, #import-zielname {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.profil-block input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

header h1 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--accent-strong);
  flex: 1;
}

.sidebar-toggle-btn, .chat-toggle-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
}

main {
  padding: 1rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.haupt-platzhalter {
  color: var(--text-muted);
  font-style: italic;
}

button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
}

button.gefahr {
  border-color: var(--gefahr);
  color: var(--gefahr-strong);
}

button.gefahr:hover {
  background: var(--gefahr);
  color: #201a2c;
}

/* --- Suchleiste (generisch, wiederverwendbar über mehrere Ansichten) --- */
.suchleiste {
  width: 100%;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

.suchleiste:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Protokoll --- */
.protokoll-aktionen {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#protokoll-liste, #dateien-liste {
  list-style: none;
  padding: 0;
}

#protokoll-liste li {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.protokoll-gruppe-kopf {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.protokoll-gruppe-kopf span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protokoll-gruppe-pfeil {
  flex-shrink: 0;
  color: var(--text-muted);
}

.protokoll-gruppe-liste {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

#protokoll-liste .eintrag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

#protokoll-liste .zeitstempel {
  font-size: 0.75rem;
  color: var(--text-muted);
}

#protokoll-liste .kontext {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0.15rem 0;
}

.eintrag-loeschen, .eintrag-bearbeiten, .eintrag-speichern, .eintrag-abbrechen {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.eintrag-loeschen:hover {
  color: var(--gefahr-strong);
}

.eintrag-bearbeiten:hover {
  color: var(--accent-strong);
}

.eintrag-kopf-aktionen {
  display: flex;
  gap: 0.2rem;
}

#protokoll-liste .kurzfassung {
  color: var(--text);
  margin: 0.2rem 0 0.4rem 0;
}

#protokoll-liste .zitat {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85rem;
  margin: 0 0 0.4rem 0;
  border-left: 2px solid var(--accent);
  padding-left: 0.5rem;
}

.details-umschalten {
  background: transparent;
  border: none;
  color: var(--accent-strong);
  padding: 0;
  font-size: 0.8rem;
}

.details {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
}

#protokoll-liste textarea {
  width: 100%;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0.2rem 0;
  resize: vertical;
}

.eintrag-bearbeiten-aktionen {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.eintrag-speichern {
  color: var(--accent-strong);
}

/* --- IdentityCore --- */
.identitycore-vorschlag {
  border-color: var(--accent);
}

.identitycore-vorschlag p {
  margin: 0 0 0.6rem 0;
  color: var(--text);
}

.identitycore-vorschlag-aktionen {
  display: flex;
  gap: 0.5rem;
}

.regler-gruppe {
  margin-bottom: 1.25rem;
}

.regler-gruppe label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--text);
}

.segmented {
  display: flex;
  gap: 0.4rem;
}

.segmented button.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

/* --- IdentityCore Stufe 2 (Domänenspezifisch) --- */
.domain-segmented {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.domain-segmented button.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

.chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.chip.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

.toggle-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-zeile label {
  margin-bottom: 0;
}

.toggle {
  min-width: 3.5rem;
}

.toggle.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stepper span {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

/* --- Dateien --- */
#dateien-pfad {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.dateien-sortierung {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.dateien-sortierung button.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

.dateien-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.dateien-bild {
  max-width: 100%;
  max-height: 400px;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.5rem;
}

.dateien-neu {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.dateien-neu input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

.dateien-neu-status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.dateien-neu-status.fehler {
  color: var(--gefahr-strong);
}

#dateien-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

#dateien-liste li:hover {
  background: var(--bg-elevated);
}

.dateien-name {
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dateien-aktionen-eintrag {
  display: flex;
  gap: 0.1rem;
  flex-shrink: 0;
}

.datei-umbenennen, .datei-loeschen {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  font-size: 0.85rem;
}

.datei-umbenennen:hover {
  color: var(--accent-strong);
}

.datei-loeschen:hover {
  color: var(--gefahr-strong);
}

.dateien-editor {
  margin-top: 0.75rem;
}

#dateien-inhalt {
  width: 100%;
  min-height: 300px;
  white-space: pre-wrap;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--text);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.9rem;
  resize: vertical;
}

.dateien-editor-aktionen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

#dateien-status {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --- Projekte (ProjectCore) --- */
.projekte-baum, .projekte-baum-unter {
  list-style: none;
  padding: 0;
  margin: 0;
}

.projekte-baum-unter {
  margin-left: 1.1rem;
  border-left: 1px dashed var(--border);
  padding-left: 0.75rem;
}

.projekte-baum li {
  margin-bottom: 0.35rem;
}

.projekte-baum-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--projekt-farbe, var(--border));
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}

.projekte-baum-zeile:hover {
  border-color: var(--accent);
}

.projekte-baum-zeile .sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}

#projekt-detail-protokoll li,
#projekt-detail-verbindungen li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

#projekt-detail-protokoll li .sub,
#projekt-detail-verbindungen li .sub {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex: 1;
}

.pill {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.pill-live { color: #7fbd8e; border-color: #7fbd8e; }
.pill-progress { color: #e0a855; border-color: #e0a855; }
.pill-blocked { color: var(--gefahr-strong); border-color: var(--gefahr); }
.pill-planned { color: var(--text-muted); border-color: var(--border); }

/* --- Projekte: Statistik-Kopf --- */
.projekte-statistik {
  margin-bottom: 0.75rem;
}

.projekte-statistik-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.projekte-statistik-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem 0.15rem 0.4rem;
}

.projekte-statistik-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--status-farbe, var(--border));
  flex-shrink: 0;
}

.projekte-statistik-balken-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.projekte-statistik-balken {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.projekte-statistik-balken-fuellung {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* --- Home: Server-Status-Widget --- */
.systemstatus-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.systemstatus-label {
  width: 2.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.systemstatus-balken {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.systemstatus-balken-fuellung {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.systemstatus-wert {
  width: 2.5rem;
  text-align: right;
  font-size: 0.85rem;
}

.systemstatus-konten {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --- Projekte: SVG-Diagramm --- */
.projekte-diagramm-wrapper {
  overflow-x: auto;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

.projekte-diagramm {
  display: block;
}

.projekte-diagramm-linie {
  stroke: var(--border);
  stroke-width: 1.5;
}

.projekte-diagramm-kante {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  cursor: pointer;
}

.projekte-diagramm-kante:hover {
  stroke-opacity: 1;
  stroke-width: 2;
}

.projekte-diagramm-leer {
  fill: var(--text-muted);
  font-size: 0.85rem;
}

.projekte-diagramm-kante-info {
  margin: 0.4rem 0 0.75rem 0;
}

.projekt-knoten {
  box-sizing: border-box;
  height: 100%;
  background: var(--bg-panel);
  border: 2px solid var(--status-farbe, var(--border));
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
}

.projekt-knoten:hover {
  background: var(--bg-elevated);
}

.projekt-knoten-wurzel {
  border-color: var(--accent);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.projekt-knoten-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
}

.projekt-knoten-kopf strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projekt-knoten-badge {
  font-size: 0.65rem;
  color: var(--text-muted);
  background: var(--bg-input);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  flex-shrink: 0;
}

.projekt-knoten-kurz {
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0.1rem 0 0.3rem 0;
}

.projekt-knoten-balken {
  height: 3px;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
  margin-top: 0.3rem;
}

.projekt-knoten-balken-fuellung {
  height: 100%;
  border-radius: 999px;
}

.projekt-formular-block {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.25rem 0.85rem 0.1rem;
  margin: 0 0 0.85rem 0;
}

.projekt-formular-block legend {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.projekt-formular-block .regler-gruppe:last-child {
  margin-bottom: 0.85rem;
}

/* --- Projekte: Unterbereiche-Tabelle --- */
.projekte-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.projekte-tabelle th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.projekte-tabelle td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.projekte-tabelle tbody tr {
  cursor: pointer;
}

.projekte-tabelle tbody tr:hover {
  background: var(--bg-elevated);
}

.zurueck-link {
  background: transparent;
  border: none;
  color: var(--accent-strong);
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.projekte-detail-kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.projekte-detail-kopf h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 1.1rem;
  flex: 1;
}

#projekt-detail-farbe {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

#projekt-detail-kurz, #projekt-detail-ordner {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

#projekt-detail-definition, #projekt-detail-ziel, #projekt-detail-bauweise {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.eintrag-projekt-zuordnen {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  font-size: 0.9rem;
}

.eintrag-projekt-zuordnen:hover {
  color: var(--accent-strong);
}

.protokoll-projekt-auswahl {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.protokoll-projekt-auswahl select {
  flex: 1;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.3rem;
}

/* --- Chat-Sidebar --- */
.chat-sidebar {
  width: 360px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.2s ease;
}

.chat-sidebar.eingeklappt {
  width: 0;
}

.chat-sidebar-inner {
  width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-protokoll-umschalter {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.umschalter-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
}

.umschalter-btn.active {
  background: var(--bg-elevated);
  color: var(--accent-strong);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

.sidebar-ansicht {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sidebar-ansicht.active {
  display: flex;
}

.chat-liste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.chat-liste-kopf strong {
  color: var(--accent-strong);
}

#ansicht-protokoll {
  overflow-y: auto;
  padding: 0.75rem;
}

.chat-liste {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.8rem;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--text-muted);
  cursor: pointer;
}

.chat-chip.aktiv {
  background: var(--accent);
  color: #201a2c;
  border-color: var(--accent);
  font-weight: 600;
}

.chat-chip .chip-loeschen, .chat-chip .chip-umbenennen {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0 0.2rem;
  font-size: 0.85rem;
}

.chat-chip .chip-umbenennen {
  font-size: 0.7rem;
  opacity: 0.7;
}

.chat-chip-umbenennen {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 0.4rem;
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
  width: 8rem;
}

.chat-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-nachricht {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  max-width: 90%;
}

.chat-nachricht.nutzer {
  align-self: flex-end;
  background: var(--accent);
  color: #201a2c;
  white-space: pre-wrap;
}

.chat-nachricht.assistent {
  align-self: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

/* --- Markdown-Rendering in Assistent-Nachrichten --- */
.chat-nachricht.assistent p {
  margin: 0 0 0.5rem 0;
}

.chat-nachricht.assistent > *:last-child {
  margin-bottom: 0;
}

.chat-nachricht.assistent h4,
.chat-nachricht.assistent h5,
.chat-nachricht.assistent h6 {
  margin: 0.75rem 0 0.4rem 0;
  color: var(--accent-strong);
}

.chat-nachricht.assistent ul,
.chat-nachricht.assistent ol {
  margin: 0 0 0.5rem 0;
  padding-left: 1.4rem;
}

.chat-nachricht.assistent li {
  margin-bottom: 0.2rem;
}

.chat-nachricht.assistent code {
  background: var(--bg-input);
  border-radius: 0.3rem;
  padding: 0.1rem 0.3rem;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.85em;
}

.chat-nachricht.assistent pre {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem;
  overflow-x: auto;
  margin: 0 0 0.5rem 0;
}

.chat-nachricht.assistent pre code {
  background: none;
  padding: 0;
}

.chat-nachricht.assistent a {
  color: var(--accent-strong);
}

.chat-nachricht.assistent .md-tabelle {
  border-collapse: collapse;
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.chat-nachricht.assistent .md-tabelle th,
.chat-nachricht.assistent .md-tabelle td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
  text-align: left;
}

.chat-nachricht.assistent .md-tabelle th {
  background: var(--bg-panel);
}

#chat-form, #soziale-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#chat-input, #soziale-chat-input {
  flex: 1;
  padding: 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 1rem;
}

/* --- Mensch-zu-Mensch-Chat (Etappe 4), reiner Text, keine Markdown-/Bild-Extras --- */
.soziale-nachricht {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  max-width: 90%;
  white-space: pre-wrap;
}

.soziale-nachricht.eigene {
  align-self: flex-end;
  background: var(--accent);
  color: #201a2c;
}

.soziale-nachricht.fremde {
  align-self: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

#chat-bild-anhaengen {
  padding: 0.5rem 0.65rem;
  flex-shrink: 0;
}

.chat-bild-vorschau {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-bild-vorschau img {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
}

.chat-bild-vorschau-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.chat-bild-vorschau-info button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 0 0.3rem;
  margin-left: auto;
}

.chat-nachricht-bild {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  border-radius: 0.5rem;
  margin-bottom: 0.4rem;
  object-fit: contain;
}

@media (max-width: 720px) {
  .chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 88vw;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  }

  .chat-sidebar.eingeklappt {
    width: 0;
  }

  .chat-sidebar-inner {
    width: 88vw;
  }

}

.erinnerung-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 22rem;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 0.9rem;
  animation: erinnerung-toast-ein 0.2s ease-out;
}

.erinnerung-toast button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  margin-left: auto;
}

@keyframes erinnerung-toast-ein {
  from { transform: translateY(0.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Werkbank-Editor (2026-07-27) --- */
.werkbaenke-neu {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.werkbaenke-neu input {
  flex: 1;
  min-width: 10rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
}

.werkbaenke-neu select {
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
}

.werkbaenke-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
}

.werkbank-karte {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  text-align: left;
}

.werkbank-karte:hover {
  border-color: var(--accent);
}

.werkbank-karte-name {
  font-weight: 600;
  color: var(--text);
}

.werkbank-karte-kategorie {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.werkbank-editor-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.werkbank-editor {
  display: flex;
  gap: 0.75rem;
  height: 65vh;
  margin-top: 0.5rem;
}

.werkzeug-palette {
  width: 14rem;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.werkzeug-palette h4 {
  margin: 0.5rem 0 0.3rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.werkzeug-karte {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  cursor: grab;
  font-size: 0.85rem;
}

.werkzeug-karte.ungebaut {
  opacity: 0.5;
  cursor: not-allowed;
}

.werkzeug-karte:active {
  cursor: grabbing;
}

.werkbank-canvas {
  flex: 1;
  position: relative;
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  overflow: auto;
}

.platziertes-element {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
}

.platziertes-element:active {
  cursor: grabbing;
}

.platziertes-element.ausgewaehlt {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.platziertes-element-loeschen {
  border: none;
  background: transparent;
  color: var(--gefahr-strong);
  padding: 0 0 0 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}