:root {
  --green: #2d8c4e;
  --green-light: #e8f5ed;
  --red: #c0392b;
  --red-light: #fdecea;
  --blue: #1a56a0;
  --blue-light: #e8f0fb;
  --gold: #c9941f;
  --gold-light: #fbf2e1;
  --gray: #f4f5f7;
  --border: #dde1e8;
  --text: #1e2330;
  --muted: #676e7c;
  --white: #ffffff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #eef1f6;
  color: var(--text);
  min-height: 100vh;
}
.back-to-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.back-to-dashboard:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }

header {
  background: var(--blue);
  color: white;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}
header h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 1 200px; justify-content: flex-end; }
.header-logo { height: 44px; width: auto; display: block; }
.file-status { font-size: 13px; opacity: 0.9; display: flex; align-items: center; gap: 8px; }
.file-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb84d; }
.file-status.connected .dot { background: #6ee08a; }

nav {
  display: flex;
  gap: 4px;
  background: var(--white);
  padding: 8px 28px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
nav button {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
}
nav button:hover { background: var(--gray); }
nav button.active { color: var(--blue); border-bottom-color: var(--blue); }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.tab-section { display: none; }
.tab-section.active { display: block; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--blue); }
.card h3 { font-size: 15px; margin-bottom: 10px; }

.connect-screen {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
}
.connect-screen .card { padding: 32px; text-align: left; }
.connect-screen p { color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

button.btn {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button.btn:hover { opacity: 0.9; }
button.btn.secondary { background: var(--gray); color: var(--text); border: 1px solid var(--border); }
button.btn.danger { background: var(--red); }
button.btn.success { background: var(--green); }
button.btn.small { padding: 6px 12px; font-size: 13px; }
button.btn:disabled { opacity: 0.6; cursor: default; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.form-field textarea { resize: vertical; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: auto; }

.muted { color: var(--muted); font-size: 13px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }

.version-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 4px;
}
.card .version-badge { background: var(--blue-light); border-color: var(--blue-light); color: var(--blue); }

#changelog-list { display: flex; flex-direction: column; gap: 8px; }
.changelog-entry { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.changelog-entry .cv { font-weight: 700; color: var(--blue); }
.changelog-group { display: flex; flex-direction: column; gap: 4px; }
.changelog-group .cg-title { font-weight: 700; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.changelog-group .cg-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--text); }

/* ---------- Fragen / Antwort ---------- */

.answer-card { border-left: 4px solid var(--blue); }
.answer-question {
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.answer-question::before { content: "Frage: "; color: var(--muted); font-weight: 600; }
.answer-text { font-size: 15px; line-height: 1.6; }
.answer-meta { font-size: 12px; }

/* ---------- Dokumente ---------- */

.warn-card { background: var(--gold-light); border: 1px solid #e6cf95; }
.warn-card strong { color: var(--gold); display: block; margin-bottom: 6px; font-size: 14px; }
.warn-card p { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; }

.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload-row input[type="file"] { font-size: 13px; flex: 1; min-width: 200px; }

.dok-row-header {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 1.4fr auto;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 10px 6px;
}
.dok-row {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 1.4fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.dok-row:hover { background: var(--gray); }
.dok-name { font-weight: 600; word-break: break-word; }
.dok-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 760px) {
  .dok-row, .dok-row-header { grid-template-columns: 1fr auto; }
  .dok-row-header span:nth-child(2), .dok-row-header span:nth-child(3),
  .dok-row > span:nth-child(2), .dok-row > span:nth-child(3) { display: none; }
}

/* ---------- Gestellte Fragen (Protokoll) ---------- */

.verlauf-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* min-width statt fester Breite: sonst sprengt das Suchfeld die Zeile am Handy. */
.verlauf-toolbar input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.frage-row {
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.frage-row.fehler { border-left-color: var(--gold); background: var(--gold-light); }
.frage-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.frage-wer { font-weight: 700; font-size: 14px; }
/* Eine getippte Frage kann ein einziges sehr langes Wort sein (Link, Dateiname) —
   ohne den Umbruch schiebt sie die Karte über den rechten Rand hinaus. */
.frage-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.frage-fuss { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; }

/* Rechte Nav-Gruppe (Einstellungen/Verwaltung + Info). Das margin haengt
   am Wrapper, damit die Gruppe rechts bleibt, auch wenn einzelne Buttons
   fuer Nicht-Admins ausgeblendet sind. */
/* flex-wrap, weil die Gruppe sonst als ein Stueck ueber den rechten Rand
   hinauslaeuft: bei 375px bleiben neben dem linken Reiter nur ~319px, und
   vier Reiter brauchen mehr. Ohne den Umbruch ist der letzte nicht antippbar. */
nav .nav-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: inherit; }

/* ---------- Handy: Formularfelder mindestens 16px ----------
   iOS Safari zoomt beim Antippen eines Feldes unter 16px automatisch in die
   Seite hinein — und wieder heraus zoomt es nicht. Die Feldregeln weiter oben
   laufen über Klassen und sind damit höher spezifisch als ein reiner
   Elementsatz, deshalb hier !important. Gilt nur auf schmalen Schirmen, das
   Desktop-Design bleibt unverändert. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Die Karte "Funktionen" im Info-Reiter teilt sich die Klassen mit der frueheren
   Aenderungsliste; Abstand und Schriftgroesse kommen von hier, weil die Klasse
   .changelog-entry -- an der die Groesse haengt -- dort fehlt. */
#funktionen-list { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }