/* Globale Regel: Wichtig für konsistente Box-Modell-Berechnung */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background-color: #e9f5ee; /* Sehr helles Grün */
  color: #3a4a3a; /* Dunkles Waldgrün-Grau für Text */
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 25px;
  background-color: #f9fff9; /* Fast weiß, sehr leicht grünlich */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column; /* Stellt sicher, dass Header und Main-Layout immer gestapelt sind */
}

header {
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  justify-content: center; /* Horizontal zentrieren */
  flex-wrap: wrap; /* Erlaubt das Umbrechen auf kleineren Bildschirmen */
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c0d6c0; /* Gedämpftes Hellgrün für Trennlinie */
}

.header-logo {
    max-width: 80px; /* Anpassen der Größe nach Bedarf */
    height: auto;
    margin-right: 15px; /* Abstand zwischen Logo und Text */
    margin-bottom: 0; /* Kein Bodenabstand für vertikale Ausrichtung */
}

header h2 {
  color: #2f612f; /* Dunkleres Grün */
  margin: 0; /* Entfernt Standardabstände, um besser mit Flexbox ausgerichtet zu sein */
  font-size: 2.5em;
}

header p {
  width: 100%; /* Erzwingt die Beschreibung in eine neue Zeile */
  text-align: center;
  margin-top: 10px; /* Abstand über der Beschreibung */
  margin-bottom: 0;
  color: #4a7a4a; /* Mittleres Grün */
  font-size: 1.1em;
}

.main-layout {
  display: flex;
  flex-grow: 1;
  flex-direction: column; /* Standard auf 'column' für Mobil, wird auf 'row' für Desktop geändert */
}

.sidebar {
  flex: 0 0 200px;
  padding-right: 20px;
  border-right: 1px solid #c0d6c0; /* Gedämpftes Hellgrün für Trennlinie */
  margin-right: 20px;
  /* Diese Desktop-Styles werden in Media Query für Mobilgeräte überschrieben */
}

.sidebar ul {
  list-style: none;
  padding: 0;
  display: flex; /* Horizontal anordnen */
  justify-content: space-around; /* Elemente gleichmäßig verteilen */
  flex-wrap: wrap; /* Bei Bedarf umbrechen */
}

.sidebar li {
  margin: 5px; /* Abstand zwischen Buttons */
  display: flex; /* Makes the list item a flex container */
  align-items: center; /* Vertically centers content within li */
  gap: 5px; /* Space between anchor and icon */
}

.sidebar a {
  display: inline-block; /* Erlaubt natürliche Breite basierend auf Inhalt */
  padding: 10px 15px;
  background-color: #d0e0d0; /* Helles Grün */
  color: #2f612f; /* Dunkleres Grün */
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap; /* Text auf einer Zeile halten */
}

.sidebar a:hover {
  background-color: #bad0ba; /* Etwas dunkleres Hellgrün */
  color: #214221; /* Sehr dunkles Grün */
}

/* Info icon style */
.info-icon {
    color: #4a7a4a; /* Medium green */
    cursor: pointer;
    font-size: 1.2em;
    transition: color 0.2s ease;
}

.info-icon:hover {
    color: #2f612f; /* Darker green on hover */
}


.content-area {
  flex-grow: 1;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

h2 {
  color: #2f612f; /* Dunkleres Grün */
  border-bottom: 2px solid #c0d6c0; /* Gedämpftes Hellgrün für Trennlinie */
  padding-bottom: 10px;
  margin-bottom: 25px;
  font-size: 1.8em;
}

/* Feedback Form (Neue Frage) */
#feedback-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

#feedback-form input[type="text"],
#feedback-form textarea,
#user-name-input {
  padding: 12px 15px;
  border: 1px solid #b0cbb0; /* Gedämpftes Grün */
  border-radius: 5px;
  font-size: 1em;
  transition: border-color 0.3s ease;
  width: 100%;
  background-color: #fafffa; /* Sehr hellgrünlich */
  color: #3a4a3a;
}

#user-name-input[readonly] {
  background-color: #e0e8e0; /* Sehr blasses Grau-Grün für Readonly */
  cursor: not-allowed;
}

#edit-name-icon {
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
    color: #778877; /* Subtle color */
    cursor: pointer;
    transition: color 0.2s ease;
}
#edit-name-icon:hover {
    color: #4a7a4a; /* Slightly more visible on hover */
}

#upvoter-id-display {
    color: #778877; /* Grau für ausgeblendete Darstellung */
    font-size: 0.85em;
    margin-left: 10px;
    white-space: nowrap; /* ID auf einer Zeile halten */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* Begrenzt die Breite, falls ID sehr lang ist */
    padding-top: 2px; /* Slight vertical alignment adjustment */
}
#toggle-upvoter-id-display-icon {
    cursor: pointer;
    color: #4a7a4a; /* Subtile Farbe */
    font-size: 1.1em;
    margin-left: 5px;
}
#toggle-upvoter-id-display-icon:hover {
    color: #2f612f;
}


#feedback-form input[type="text"]:focus,
#feedback-form textarea:focus {
  border-color: #2f612f; /* Dunkleres Grün */
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 97, 47, 0.25); /* Passender Schatten */
}

#feedback-form textarea {
  min-height: 100px;
  resize: vertical;
}

#feedback-form button[type="submit"] {
  background-color: #2f612f; /* Dunkleres Grün */
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#feedback-form button[type="submit"]:hover {
  background-color: #214221; /* Sehr dunkles Grün */
  transform: translateY(-2px);
}

/* Feedback Liste */
.feedback-list .feedback-items {
  list-style: none;
  padding: 0;
}

.feedback-item {
  display: flex; /* Für Desktop/Tablet bleibt es flex */
  align-items: flex-start;
  background-color: #fffefd; /* Fast weiß */
  border: 1px solid #c0d6c0; /* Gedämpftes Hellgrün */
  border-radius: 7px;
  margin-bottom: 20px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feedback-votes {
  display: flex;
  flex-direction: column; /* Wieder über und unter der Zahl */
  align-items: center;
  margin-right: 20px;
  padding-right: 15px;
  border-right: 1px solid #c0d6c0; /* Gedämpftes Hellgrün für Trennlinie */
  padding-bottom: 0;
  margin-bottom: 0;
}

.vote-button {
  display: block; /* Sichert, dass sie untereinander liegen */
  font-size: 1.5em;
  color: #4a7a4a; /* Mittleres Grün */
  text-decoration: none;
  padding: 5px 8px; /* Abstand anpassen */
  transition: color 0.2s ease, transform 0.2s ease;
}

.vote-button.upvote:hover {
  color: #5cb85c; /* Vibrantes Grün */
  transform: translateY(-2px);
}

.vote-button.downvote:hover {
  color: #b22222; /* Rot bleibt rot für Downvote */
  transform: translateY(2px);
}

.vote-count {
  font-size: 1.4em;
  font-weight: bold;
  color: #2f612f; /* Dunkleres Grün */
  margin: 5px 0; /* Oben/Unten-Abstand für vertikale Anordnung */
}

.feedback-content {
  flex-grow: 1;
  min-width: 0; /* Verhindert, dass Flex-Items überlaufen */
}

/* STYLES FÜR FRAGE */
.question-wrapper {
    position: relative;
    margin-bottom: 8px;
    padding-left: 0; 
    line-height: 1.2em;
    width: 100%;
    display: flex; /* Use flexbox for question and icon */
    align-items: center; /* Align items vertically */
    gap: 8px; /* Space between question and icon */
}

.feedback-question {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.4em;
    color: #2f612f;
    padding-bottom: 0;
    max-width: calc(100% - 30px); /* Adjust max-width for icon to leave space */
}

/* Edit Icon */
.edit-feedback-icon {
    font-size: 1.1em;
    color: #778877; /* Subtle color */
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Prevent icon from shrinking */
    display: none; /* Hidden by default, shown by JS */
}

.edit-feedback-icon:hover {
    color: #4a7a4a; /* Slightly more visible on hover */
}


/* STYLES FÜR BESCHREIBUNG */
.description-wrapper {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px; /* Platz für den Pfeil links */
    width: 100%;
    overflow: hidden; /* Sicherstellen, dass Überlauf im Wrapper selbst gekappt wird */
}

/* Standardzustand der Beschreibung (ausgeklappt) */
.feedback-description {
    margin-top: 3px;
    margin-left: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1.4em;
    max-width: 100%; /* Wichtig für Textumbrüche */
    white-space: pre-wrap; /* Behält Zeilenumbrüche bei und ermöglicht Umbruch bei langen Wörtern */
    word-wrap: break-word; /* Fallback für IE */
    overflow: visible; /* Standardmäßig sichtbar */
    text-overflow: clip; /* Standardmäßig kein Ellipsis */
    max-height: none; /* Standardmäßig keine Höhenbegrenzung */
    transition: max-height 0.3s ease-out; /* Sanfter Übergang für die Höhe */
}

/* Zustand der Beschreibung, wenn sie eingeklappt ist */
.feedback-description.collapsed {
    overflow: hidden; /* Überlaufenden Text verstecken */
    text-overflow: ellipsis; /* Pünktchen anzeigen */
    max-height: 1.4em; /* Begrenzt auf eine Zeile (passen Sie dies an Ihre Schriftgröße an) */
}

.description-toggle-arrow {
    position: absolute;
    left: 0; /* Positionierung links von der Beschreibung */
    top: 0.1em; /* Leichte Anpassung, um mit der ersten Textzeile auszurichten */
    cursor: pointer;
    color: #4a7a4a; /* Mittleres Grün */
    font-weight: bold;
    font-size: 1.1em;
    padding-right: 5px; /* Abstand zum Text */
    background-color: #fffefd;
}

.feedback-meta {
  font-size: 0.9em;
  color: #778877; /* Grau-Grün */
}

.all-upvoters-list { /* New class for upvoters list */
    font-size: 0.9em;
    color: #556655; /* Etwas dunkleres Grau-Grün */
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #c0d6c0; /* Gedämpftes Hellgrün */
}

.no-feedback {
  text-align: center;
  color: #778877; /* Grau-Grün */
  padding: 20px;
  border: 1px dashed #c0d6c0; /* Gedämpftes Hellgrün */
  border-radius: 5px;
  margin-top: 30px;
}

/* Explanation Section */
.explanation-text {
  background-color: #eefaf1; /* Sehr helles Grün */
  border: 1px solid #b0cbb0; /* Gedämpftes Grün */
  border-radius: 5px;
  padding: 20px;
  line-height: 1.8;
  color: #3a4a3a; /* Dunkles Waldgrün-Grau */
  margin-bottom: 25px; /* Add margin below explanation */
}

.explanation-text p {
  margin-bottom: 10px;
}

.explanation-text p:last-child {
  margin-bottom: 0;
}

.explanation-text strong {
  color: #4a7a4a; /* Mittleres Grün */
}

.explanation-text.hidden {
    display: none; /* Initially hide the explanation text */
}

/* --- Table Specific Styles --- */
.table-actions {
    margin-bottom: 20px;
    text-align: right; /* Button rechts ausrichten */
}

.export-button {
    display: inline-block;
    padding: 10px 18px;
    background-color: #4a7a4a; /* Mittleres Grün */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.export-button:hover {
    background-color: #3a6a3a; /* Etwas dunkler */
    transform: translateY(-1px);
}

.table-container {
    overflow-x: auto; /* Ermöglicht horizontales Scrollen bei Bedarf */
    border: 1px solid #c0d6c0;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: #fffefd;
}

.feedback-table {
    width: 100%;
    border-collapse: collapse; /* Entfernt doppelten Rahmen */
    margin: 0; /* Entfernt äußeren Rand */
    min-width: 800px; /* Stellt sicher, dass die Tabelle nicht zu schmal wird */
}

.feedback-table th, .feedback-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e8e0; /* Leichte Trennlinie zwischen Reihen */
}

.feedback-table th {
    background-color: #eefaf1; /* Hellere Hintergrundfarbe für Header */
    color: #2f612f; /* Dunkleres Grün für Header-Text */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    white-space: nowrap; /* Header-Text nicht umbrechen */
}

.feedback-table tbody tr:hover {
    background-color: #f5fcf5; /* Sehr leichter Hover-Effekt */
}

.feedback-table tbody tr:last-child td {
    border-bottom: none; /* Kein Rahmen unter der letzten Zeile */
}

/* Maintenance Hint Styling */
.maintenance-hint {
    background-color: #f1c1c8; /* Light red background */
    color: #c62828; /* Dark red text */
    border: 1px solid #ef9a9a; /* Red border */
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 25px; /* Space below the hint */
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.maintenance-hint p {
    margin: 0; /* Remove default paragraph margins */
}


/* Responsive Design for Table */
@media (max-width: 768px) {
    .table-container {
        border-radius: 0; /* Keine Ecken auf kleinen Bildschirmen */
        border-left: none;
        border-right: none;
    }
    .feedback-table {
        font-size: 0.9em; /* Kleinere Schrift für bessere Lesbarkeit */
        min-width: unset; /* Tabelle kann schmaler werden */
    }
    .feedback-table th, .feedback-table td {
        padding: 8px 10px; /* Weniger Padding */
    }
    .table-actions {
        text-align: center; /* Button zentrieren auf kleinen Bildschirmen */
        margin-bottom: 15px;
    }
    .export-button {
        width: 100%; /* Button volle Breite */
        text-align: center;
    }
}


/* --- Media Queries for Responsive Design --- */

/* Für Bildschirme größer als 768px (Desktop/größere Tablets) */
@media (min-width: 769px) {
  .main-layout {
    flex-direction: row; /* Sidebar und Content nebeneinander */
  }

  .sidebar {
    /* Standardwerte (flex: 0 0 200px; padding-right: 20px; etc.) gelten hier */
  }

  /* Vote-Buttons bleiben in Spaltenanordnung auf Desktop */
  .feedback-votes {
    flex-direction: column;
    border-bottom: none; /* Keine untere Linie, nur rechte */
  }
}

/* Für Bildschirme mit einer maximalen Breite von 768px (Tablets und kleinere Geräte) */
@media (max-width: 768px) {
  .container {
    margin: 20px; /* Kleinere Ränder */
    padding: 15px; /* Kleineres Innenpolster */
  }

  header h2 {
    font-size: 2em; /* Etwas kleinere Schrift */
  }

  h2 {
    font-size: 1.5em; /* Etwas kleinere Schrift */
  }

  .main-layout {
    flex-direction: column; /* Sidebar und Content untereinander stapeln */
  }

  .sidebar {
    flex: none; /* Keine feste Breitenbasis */
    width: 100%; /* Volle Breite */
    padding-right: 0; /* Rechter Abstand entfernen */
    border-right: none; /* Rechter Rahmen entfernen */
    margin-right: 0; /* Rechter Außenabstand entfernen */
    margin-bottom: 20px; /* Platz unter der Sidebar */
    text-align: center; /* Navigationslinks zentrieren */
  }

  .sidebar ul {
    flex-direction: row; /* Navigationspunkte horizontal anordnen */
    justify-content: space-around; /* Gleichmäßig verteilen */
    flex-wrap: wrap; /* Bei Bedarf umbrechen */
  }

  .sidebar li {
    margin-bottom: 5px; /* Kleinere Abstände */
    justify-content: center; /* Center items within li */
  }

  .sidebar a {
    padding: 8px 12px; /* Kleineres Polster für Links */
    font-size: 0.9em; /* Kleinere Schrift für Links */
  }

  .feedback-item {
    flex-direction: row; /* Votes über dem Inhalt stapeln */
    align-items: center; /* Inhalt im Element zentrieren */
    padding: 10px; /* Etwas weniger internes Padding auf kleinen Bildschirmen */
  }

  .feedback-votes {
    flex-direction: column; /* Vote-Buttons bleiben auch auf Mobilgerät in Spalten */
    justify-content: center; /* Vote-Buttons zentrieren */
    width: 10%; /* smaller left Part */
    margin-right: 5px; /* Rechten Außenabstand entfernen */
    padding-right: 5px; /* Rechtes Polster entfernen */
    border-right: 1px solid; /* Rechte Abgrenzung */
    border-bottom: none #c0d6c0; /* Unten nichts */
    padding-bottom: 10px; /* Polster unter den Votes */
    margin-bottom: 15px; /* Außenabstand unter der Vote-Sektion */
  }

  .vote-count {
    margin: 5px 0; /* Angepasster Abstand */
  }

  .feedback-content {
    width: 100%; /* Sicherstellen, dass der Inhalt die volle Breite einnimmt */
    padding: 0 5px; /* Leichter horizontaler Abstand vom Container */
  }

  /* Anpassungen für Text innerhalb von Wrappern, wenn padding-left des Wrappers 0 ist */
  .question-wrapper {
      padding-left: 0; /* Linken Abstand entfernen, um Inhaltsbreite zu maximieren */
  }

  /* Beschreibung bleibt mit Pfeil und Padding */
  .description-wrapper {
      padding-left: 20px;
  }

  .description-toggle-arrow {
      left: 5px; /* Pfeilposition leicht anpassen für kleinere Bildschirme */
  }
}

/* Für sehr kleine Bildschirme (Handys, max. 480px Breite) */
@media (max-width: 480px) {
  .container {
    margin: 10px;
    padding: 10px;
  }

  header h2 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.3em;
  }
  .feedback-votes {
    flex-direction: column; /* Vote-Buttons bleiben auch auf Mobilgerät in Spalten */
    justify-content: center; /* Vote-Buttons zentrieren */
    margin-right: 0; /* Rechten Außenabstand entfernen */
    padding-right: 3px; /* Rechtes Polster entfernen */
    border-right: 1px solid; /* Rechte Abgrenzung */
    border-bottom: none #c0d6c0; /* Unten nichts */
    padding-bottom: 10px; /* Polster unter den Votes */
    margin-bottom: 15px; /* Außenabstand unter der Vote-Sektion */
  }
  .feedback-item {
    flex-direction: row; /* Votes über dem Inhalt stapeln */
    align-items: center; /* Inhalt im Element zentrieren */
    padding: 10px; /* Etwas weniger internes Padding auf kleinen Bildschirmen */
  }

  .sidebar ul {
    flex-direction: column; /* Navigationspunkte auf sehr kleinen Bildschirmen vertikal stapeln */
    align-items: center; /* Elemente zentrieren */
  }

  .sidebar li {
    width: 90%; /* Listenelemente nehmen mehr Breite ein */
    margin-bottom: 8px;
  }

  .sidebar a {
    font-size: 0.85em;
    padding: 6px 10px;
  }

  .vote-button {
    font-size: 1.2em; /* Kleinere Vote-Buttons */
  }

  .vote-count {
    font-size: 1.2em; /* Kleinere Vote-Zählung */
  }
}