:root {
  --color-bg: #1a1a1a;
  --color-card: #262626;
  /*
   * Farbpalette aus dem Referenz‑Video
   *
   * Wir orientieren uns an der dunklen, maroon‑farbenen Gestaltung des 
   * vierminütigen Referenz‑Videos: Kacheln und Buttons nutzen einen 
   * satten Maroon‑Ton, Icons werden weiß dargestellt. Die Variablen
   * werden zentral gesetzt, sodass sich sämtliche Buttons, Kacheln
   * und Meldungen automatisch anpassen, ohne jede Klasse einzeln
   * bearbeiten zu müssen.
   */
  --color-primary: #641e16; /* maroon für Buttons und Kacheln */
  --color-danger: #c62828;  /* kräftiges Rot für Fehler */
  --color-success: #2e7d32; /* sattes Grün für Erfolgsmeldungen */
  --color-warn: #8c1c13;    /* dunkles Rot für den Transport-Button */
  --color-accent: #641e16;  /* maroon für Vital-Kacheln */
}

/* Allgemeine Layout-Stile */
/*
 * Responsive Container (Schritt 30)
 *
 * Setzt eine maximale Breite und zentriert den Inhalt. Die Höhe wird auf
 * 100 % der Viewport-Höhe gesetzt und der Inhalt scrollt bei Bedarf. So
 * entstehen am Desktop links und rechts schwarze Ränder, während auf
 * Mobilgeräten die volle Breite genutzt wird【423246376074668†L1694-L1707】.
 */
body.app-dark {
  background-color: var(--color-bg);
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
  margin: 0 auto;
  max-width: 400px;
  height: 100vh;
  overflow-y: auto;
  /* Entferne Flexbox-Zentrierung, da der Inhalt nun scrollbar sein darf */
}

/* Responsive Anpassungen (Schritt 16)
 *
 * Für größere Bildschirme wird die maximale Breite des App‑Containers erhöht
 * und das Grid der Fall‑Buttons bzw. der Ressourcenkarten erweitert.
 */
@media (min-width: 600px) {
  body.app-dark {
    max-width: 600px;
  }
  /* Bei mittelgroßen Displays vier Buttons pro Reihe */
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .res-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 800px) {
  body.app-dark {
    max-width: 800px;
  }
  /* Auf sehr großen Displays ebenfalls vier Buttons, die Ressourcen werden auf fünf verteilt */
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .res-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.container {
  text-align: center;
}

.case-button {
  display: block;
  margin: 12px auto;
  padding: 16px 24px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 12px;
  width: 280px;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.2s;
}

.case-button:hover {
  background-color: #004d4d;
}

/* Header der Fallseite */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.back-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 24px;
  cursor: pointer;
}
.title {
  font-size: 1.2rem;
  font-weight: bold;
}
#timer {
  font-size: 1rem;
  color: var(--color-success);
}

/* Patientenkarten-Stil */
.patient-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-card);
  border-radius: 12px;
  padding: 16px;
  margin: 16px;
  /* Schatten für Karten-Look gemäß Schritt 23 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.patient-card .left {
  flex: 1;
  color: #ffffff;
}
.patient-card .avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.patient-card .weight {
  text-align: right;
  color: #ffffff;
}

/* Grid für Aktionen */
/* Grid für die Buttons auf der Fall-Detailseite */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px;
}
/* Runde Buttons wie im Video (90×90 px) mit primärer Farbe */
.grid-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  background-color: var(--color-card);
  color: #ffffff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s;
  text-align: center;
}
.grid-btn:hover {
  background-color: #333333;
}

/* Icons innerhalb der Grid-Buttons: zentriert über dem Text. Die Filter invertieren die
   schwarzen SVG-Dateien, sodass sie weiß dargestellt werden. */
.grid-btn img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  filter: invert(100%);
}

/* Kennzeichnung für Buttons, bei denen bereits Daten vorhanden sind */
/* Status-Badges für die Buttons in der Fallübersicht
 *
 * Jeder Grid-Button kann anhand der Klassen "no-data" (Rot) oder
 * "has-data" (Grün) einen kleinen Punkt oben rechts anzeigen. Für
 * Buttons ohne Status wird kein Punkt angezeigt. */
.grid-btn.no-data,
.grid-btn.has-data {
  position: relative;
}
.grid-btn.no-data::after,
.grid-btn.has-data::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.grid-btn.no-data::after {
  background-color: var(--color-danger);
}
.grid-btn.has-data::after {
  background-color: var(--color-success);
}

/* Protokoll-Ansicht: Liste mit kleinen Einträgen und dezenten Linien */
.protocol-container {
  margin: 16px;
}
.protocol-item {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #3a4750;
}
.protocol-item:last-child {
  border-bottom: none;
}
.protocol-time {
  color: #888;
  width: 60px;
}
.protocol-desc {
  flex: 1;
  padding-left: 8px;
}

/* Transport-Button */
.transport-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 16px;
  padding: 16px;
  background-color: var(--color-warn);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

/* Nachbesprechungskarte */
.debrief {
  margin: 16px;
  padding: 16px;
  background-color: var(--color-card);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
.debrief h2,
.debrief h3 {
  margin-top: 0;
  margin-bottom: 8px;
}
.debrief ol {
  padding-left: 20px;
}
.debrief button {
  background-color: var(--color-card);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 8px;
  padding: 8px 16px;
  margin-right: 8px;
  cursor: pointer;
}
.debrief button:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Toast-Container und Meldungen */
#toast-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
.toast {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: #fff;
  opacity: 0;
  transition: opacity .5s, transform .5s;
}
.toast.visible {
  opacity: 1;
}
.toast.success {
  background: var(--color-success);
}
.toast.error {
  background: var(--color-danger);
}

/*
 * Einführungs-/Einsatzmeldungs-Seite
 *
 * Diese Stile sorgen dafür, dass die Einsatzmeldung zentriert und
 * übersichtlich dargestellt wird. Eine dunkle Karte hält den Text,
 * darunter ein maroon‑farbener Button zum Fortfahren.
 */
.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 0 16px;
}
.intro-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 24px;
}
.intro-text {
  background-color: var(--color-card);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: #fff;
  max-width: 340px;
  line-height: 1.4;
}
.intro-btn {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.intro-btn:hover {
  background-color: var(--color-warn);
}

/*
 * Banner für korrekte/falsche Maßnahmen oder Diagnosen
 *
 * Banner werden oberhalb der Fallübersicht angezeigt, wenn eine Maßnahme
 * gespeichert wurde. Die Klassen „banner-success" und „banner-error"
 * definieren die Hintergrundfarbe je nach Typ.
 */
.banner {
  margin: 16px;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}
.banner-success {
  background-color: var(--color-success);
  color: #fff;
}
.banner-error {
  background-color: var(--color-danger);
  color: #fff;
}

/* Suchleiste und Liste für Maßnahmen */
.search-bar {
  margin: 16px;
}

/* Liste der Maßnahmen */
#action-list {
  list-style: none;
  padding: 0;
  margin: 0 16px;
  /* Die Liste der Maßnahmen soll scrollbar sein, wenn viele Einträge vorhanden sind. */
  max-height: 60vh;
  overflow-y: auto;
}

#action-list li {
  background-color: var(--color-card);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  height: 50px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
  color: #ffffff;
}

#action-list li:hover {
  background-color: #333333;
}

#action-list li.selected {
  background-color: var(--color-primary);
}

#action-list li.selected::after {
  content: '✓';
  color: #ffffff;
  font-weight: bold;
}

/* Medikamentenliste – gleiche Gestaltung wie Maßnahmenliste */
#med-list {
  list-style: none;
  padding: 0;
  margin: 0 16px;
}
#med-list li {
  background-color: var(--color-card);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  height: 50px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
  color: #ffffff;
}
#med-list li:hover {
  background-color: #333333;
}
#med-list li.selected {
  background-color: var(--color-primary);
}
#med-list li.selected::after {
  content: '✓';
  color: #ffffff;
  font-weight: bold;
}

/* Diagnosenliste – analog zur Maßnahmenliste */
#dg-list {
  list-style: none;
  padding: 0;
  margin: 0 16px;
  /* Die Diagnosenliste soll scrollbar sein, wenn viele Einträge vorhanden sind */
  max-height: 60vh;
  overflow-y: auto;
}
#dg-list li {
  background-color: var(--color-card);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  height: 50px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
  color: #ffffff;
}
#dg-list li:hover {
  background-color: #333333;
}
#dg-list li.selected {
  background-color: var(--color-primary);
}
/* kleines X rechts, um eine ausgewählte Diagnose zu kennzeichnen */
#dg-list li .remove-icon {
  margin-left: auto;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  /* Entfernte pointer-events:none, damit das X klickbar ist */
}

/* Lagerungs-Liste – analog zur Diagnosenliste */
#posture-list {
  list-style: none;
  padding: 0;
  margin: 0 16px;
}
#posture-list li {
  background-color: var(--color-card);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  height: 50px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
  color: #ffffff;
}
#posture-list li:hover {
  background-color: #333333;
}
#posture-list li.selected {
  background-color: var(--color-primary);
}
#posture-list li .remove-icon {
  margin-left: auto;
  color: #ffffff;
  font-weight: bold;
  pointer-events: none;
}

/* Raster für Ressourcen (Nachforderung) */
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}

.res-card {
  /* Use the generic card color for resources (step 29: einheitliche Farben) */
  background-color: var(--color-card);
  color: #ffffff;
  border-radius: 12px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  transition: filter 0.2s;
  position: relative;
  /* Leichter Schatten wie bei anderen Karten (Schritt 23) */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Icon innerhalb der Ressourcenkarten */
.res-card img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  filter: invert(100%);
}
.res-card.requested {
  background-color: var(--color-success);
}
.res-card.alerted {
  background-color: #616161;
}
.res-card:hover {
  filter: brightness(1.1);
}
.res-card small {
  font-size: 0.7em;
  margin-top: 4px;
}

/* Buttons für Applikationswege und Einheiten */
.route-list,
.unit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.route-list button,
.unit-list button {
  background-color: var(--color-card);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.route-list button.selected,
.unit-list button.selected {
  background-color: var(--color-primary);
}

/* Formulare für Anamnese */
.form-group {
  margin: 16px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.form-group label {
  margin-bottom: 4px;
}
.form-group input,
.form-group textarea {
  padding: 8px;
  border-radius: 8px;
  border: none;
  background-color: #333333;
  color: #ffffff;
}
.save-btn {
  display: inline-block;
  margin: 16px;
  padding: 12px 20px;
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

/* Speichern- und Abbrechen-Buttons im Medikamentenmodal */
.modal-content.med .save-btn {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 12px;
  margin-right: 8px;
}
.modal-content.med .cancel-btn {
  background-color: var(--color-danger);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 12px;
}

/* Vitalwerte-Container */
.vital-container {
  padding: 16px;
}
#vital-summaries {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.vital-summary {
  background-color: var(--color-card);
  padding: 12px;
  border-radius: 12px;
  min-width: 120px;
  position: relative;
  color: #fff;
  /* Einheitlicher Schatten wie bei anderen Karten */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  /* Längere Notizen umbrechen lassen */
  white-space: normal;
  word-break: break-word;
  /* Einheitliche Höhe und vertikale Zentrierung für alle Zusammenfassungen */
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Farbvarianten für Vital‑Zusammenfassungen anhand des Datentyps
 * Ist das Attribut data-input="number" gesetzt, wird ein leicht bläulicher Hintergrund verwendet,
 * bei data-input="text" ein leicht rötlicher. Diese Unterscheidung verdeutlicht, ob es sich um
 * einen numerischen Wert (z. B. Puls, Blutdruck) oder eine textuelle Notiz (z. B. Hautkolorit) handelt. */
.vital-summary[data-input="number"] {
  background-color: #2d4057; /* dunkles Blau für numerische Werte */
}
.vital-summary[data-input="text"],
.vital-summary:not([data-input]) {
  background-color: #47272d; /* dunkles Maroon für textuelle Werte oder Standard */
}
.vital-summary button {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 16px;
}
.vital-grid {
  display: grid;
  /* Flexibles Grid: Kacheln wachsen und schrumpfen abhängig von der Breite. Die
     Mindestbreite von 140 px sorgt dafür, dass die Kacheln auf kleinen
     Bildschirmen zweispaltig angeordnet werden und auf größeren Displays
     automatisch mehrere Spalten nutzen. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.vital-card {
  background-color: var(--color-accent);
  color: #ffffff;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  /* Ermöglicht absolute Positionierung von Countdown-Overlays */
  position: relative;
}



/* Overlay für die Countdown-Animation */
.countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  z-index: 5;
  pointer-events: none;
}

/* Das SVG für den Countdown-Kreis */
.countdown-overlay svg {
  width: 60%;
  height: 60%;
  transform: rotate(-90deg);
}

/* Der Countdown-Text in der Mitte der Animation */
.countdown-overlay .countdown-text {
  position: absolute;
  font-size: 1.5em;
  color: #ffffff;
  font-weight: bold;
}

/* Allgemeine Hidden-Klasse für Elemente, die per JS ein-/ausgeblendet werden */
.hidden {
  display: none;
}

/*
 * Chat‑Anamnese
 * Das Chat‑Interface nutzt flexbox, um Nachrichten von oben nach unten zu stapeln.
 * Bot‑Nachrichten und Benutzer‑Nachrichten haben unterschiedliche Hintergrundfarben,
 * wobei die Benutzernachrichten am rechten Rand ausgerichtet sind. Antwortbuttons
 * werden unter der Frage angezeigt. Der SAMPLER‑Button wird am Ende eingeblendet.
 */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.chat-message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  word-wrap: break-word;
}
.bot-message {
  align-self: flex-start;
  background-color: var(--color-card);
  color: #ffffff;
}
.user-message {
  align-self: flex-end;
  background-color: var(--color-primary);
  color: #ffffff;
}
.answer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.answer-buttons button {
  background-color: var(--color-card);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.answer-buttons button:hover {
  background-color: var(--color-primary);
}
.sampler-btn {
  display: none;
  margin: 16px;
  padding: 12px 20px;
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
/* Modal Styling */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background-color: var(--color-card);
  padding: 20px;
  border-radius: 12px;
  width: 80%;
  max-width: 400px;
  color: #ffffff;
}
.modal-content textarea {
  width: 100%;
  height: 80px;
  margin-top: 12px;
  background-color: #333;
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 8px;
}
.modal-content button {
  margin-top: 12px;
  margin-right: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Filter-Dropdown für Protokollseite */
.protocol-filter {
  padding: 0 16px;
  margin-top: 8px;
}
.protocol-filter select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background-color: var(--color-card);
  color: #ffffff;
  font-size: 1rem;
  appearance: none;
}
.protocol-filter select option {
  background-color: var(--color-card);
  color: #ffffff;
}

/* Raster und Karten für Lagerungen (Schritt 11) */
.posture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}

.posture-card {
  background-color: var(--color-card);
  color: #ffffff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.posture-card.selected {
  background-color: var(--color-primary);
}

.posture-card img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  filter: invert(100%);
}

.posture-card small {
  font-size: 0.75rem;
  margin-top: 4px;
  opacity: 0.8;
}

/* === Transport-Auswahl (Schritt 13) === */
.transport-container {
  padding: 16px;
  text-align: center;
}
.transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  justify-items: center;
  margin: 16px 0;
}
.transport-card {
  background-color: var(--color-card);
  color: #ffffff;
  border-radius: 12px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: filter 0.2s;
}
.transport-card.selected {
  background-color: var(--color-primary);
}
.transport-card:hover {
  filter: brightness(1.1);
}
.transport-card img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  filter: invert(100%);
}
.transport-name {
  font-size: 0.75em;
}
.transport-confirm-btn {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 1em;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.transport-confirm-btn:hover {
  filter: brightness(1.1);
}

/* === Debrief-Auswertung und Feedback (Schritt 14) === */
.evaluation-list {
  margin: 16px 0;
  padding-left: 20px;
  list-style-type: disc;
}
.evaluation-list li {
  margin-bottom: 8px;
  line-height: 1.4;
}
.evaluation-tip {
  font-size: 0.9em;
  opacity: 0.8;
  margin: 12px 0;
}
.feedback-btn {
  background-color: var(--color-card);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 24px;
  margin: 4px;
  cursor: pointer;
  transition: filter 0.2s;
}
.feedback-btn.up {
  background-color: var(--color-success);
}
.feedback-btn.down {
  background-color: var(--color-danger);
}
.feedback-btn:hover {
  filter: brightness(1.1);
}

/* === Fehlerseiten === */
.error-page {
  margin: 40px;
  text-align: center;
}
.error-page h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}
.error-page p {
  margin-bottom: 12px;
  line-height: 1.4;
}
.error-page a {
  color: var(--color-primary);
  text-decoration: underline;
}