/* ============================================ */
/* Basis-Styles & Globale Elemente            */
/* ============================================ */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333; /* Grundlegende Textfarbe */
}

h1, h2, h3 {
    color: #333;
}

h1 {
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

h2 {
    margin-top: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 15px; /* Einheitlicher Abstand nach H2 */
}

h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #444;
}

ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0; /* Standard-Margin entfernen */
    margin-bottom: 1em; /* Standard-Absatz-Abstand */
}

hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 30px 0;
}

/* ============================================ */
/* Formular-Styling (Generell)              */
/* ============================================ */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px; /* Etwas mehr Platz */
    font-weight: bold;
}

/* Styling für die meisten Text-Inputs und Textareas */
input[type="text"],
textarea {
    width: calc(100% - 22px); /* Breite mit Padding berücksichtigen */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.5;
    font-family: inherit; /* Schriftart vom Body übernehmen */
    box-sizing: border-box; /* Padding und Border in die Breite einrechnen */
}

textarea {
    resize: vertical; /* Nur vertikales Ändern der Größe erlauben */
}

/* Styling für Checkboxen generell */
input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* Styling für Labels neben Checkboxen */
/* Modernere Selektoren, die auf das Kind oder das nächste Element abzielen */
label:has(input[type="checkbox"]),
label[for] /* Allgemeineres Fallback für Labels, die zu Inputs gehören */
{
     display: inline;
     vertical-align: middle;
     margin-left: 5px; /* Kleiner Abstand nach der Checkbox/Input */
     font-weight: normal; /* Normales Gewicht für den Labeltext */
}
label strong { /* Für Hervorhebungen im Label */
     font-weight: bold;
     color: #333;
}


/* ============================================ */
/* Button-Styling (Generell)                  */
/* ============================================ */
.button {
    display: inline-block;
    padding: 10px 15px; /* Einheitliches Padding */
    background-color: #007bff;
    color: white !important; /* Wichtig um Link-Farbe zu überschreiben */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; /* Abstand nach oben */
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5; /* Konsistente Zeilenhöhe */
    box-sizing: border-box; /* Padding/Border in Größe einrechnen */
    transition: background-color 0.2s ease; /* Sanfter Hover-Effekt */
}
.button:hover {
    background-color: #0056b3;
}
.button-secondary {
    background-color: #6c757d;
}
.button-secondary:hover {
    background-color: #5a6268;
}
.button-delete {
    background-color: #dc3545;
    color: white !important;
}
.button-delete:hover {
    background-color: #c82333;
}
.button-delete:disabled {
    background-color: #f8d7da;
    cursor: not-allowed;
    opacity: 0.6;
}


/* ============================================ */
/* Styles für Startseite (start.html)         */
/* ============================================ */

/* Container für Abschnitte */
section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Globale Aktionen */
.global-actions {
    padding: 15px 20px;
    background-color: #e9ecef; /* Heller Hintergrund zur Abhebung */
    border-radius: 5px;
    margin-bottom: 30px;
    border: 1px solid #ced4da;
    /* Flexbox für Ausrichtung der Buttons */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* Abstand zwischen Elementen */
}
.global-actions h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    border-bottom: none;
    width: 100%;
    order: -1;
}
.global-actions .button,
.global-actions label.button {
    margin-right: 0; /* Ersetzt durch gap */
    margin-bottom: 0; /* Ersetzt durch gap (außer bei Umbruch) */
    margin-top: 0; /* Kein oberer Abstand hier */
}
#global-import-status {
    width: 100%;
    margin-top: 5px;
    color: blue;
    min-height: 1.5em;
}


/* Liste der vorhandenen Klausuren */
#klausuren-liste {
    /* Verwendet Basis-ul-Stile */
}
#klausuren-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #eee;
    background-color: #fdfdfd;
    margin-bottom: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    flex-wrap: wrap; /* Buttons umbrechen lassen */
    gap: 10px; /* Abstand zwischen Name und Button-Gruppe */
}
#klausuren-liste li:hover {
    background-color: #f0f0f0;
}
#klausuren-liste li a { /* Der Klausur-Link */
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    flex-grow: 1; /* Nimmt verfügbaren Platz */
    display: inline-block;
}
#klausuren-liste li a:hover {
    color: #0056b3;
}
/* Container für Buttons in der Klausurenliste */
#klausuren-liste li .klausur-actions {
    display: flex;
    flex-shrink: 0;
}
/* Buttons in der Klausurenliste (kleiner) */
#klausuren-liste li .klausur-actions .button {
    padding: 4px 8px;
    font-size: 0.85em;
    margin-left: 5px;
    margin-top: 0;
    margin-right: 0;
    line-height: 1.4;
}


/* Formular zum Bearbeiten/Erstellen von Klausuren */
#klausur-form-section {
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
#klausur-form-section.edit-mode {
    border-color: #007bff; /* Blauer Rand im Edit-Modus */
}
#klausur-form textarea#klausur-horizont {
    font-family: monospace, Consolas, "Courier New", Courier; /* Monospace! */
    min-height: 350px; /* Größeres Textfeld */
    line-height: 1.5;
    border-radius: 0 0 4px 4px; /* Unten abgerundet */
    border-top-color: #dee2e6; /* Farbe an Toolbar anpassen */
    margin-top: 0; /* Kein Abstand mehr nach oben zur Toolbar */
}
#klausur-form small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.9em;
}
#klausur-form #klausur-submit-button {
    /* Standard .button */
}
#klausur-form #klausur-cancel-button {
    /* Standard .button-secondary */
    margin-left: 10px; /* Abstand zum Submit-Button */
}
#edit-create-status {
    margin-top: 15px;
    font-weight: bold;
    min-height: 1.5em;
}
/* Toolbar für Markdown-Editor */
.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: -1px; /* Überlappt leicht mit Textarea-Rand */
    padding: 6px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}
.markdown-toolbar .button.button-small {
    padding: 3px 8px;
    font-size: 0.85em;
    margin: 0;
    line-height: 1.4;
    background-color: #6c757d;
    color: white;
    border-radius: 3px;
}
.markdown-toolbar .button.button-small:hover {
    background-color: #5a6268;
}


/* ============================================ */
/* Styles für Klausur-Übersicht (index.html) */
/* ============================================ */

/* Aktionsbuttons über der Prüflingsliste */
.action-buttons {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Abstand zwischen Buttons */
    align-items: center; /* Vertikale Ausrichtung */
}
.action-buttons .button,
.action-buttons label.button {
     margin-top: 0; /* Kein oberer Abstand */
     margin-right: 0; /* Ersetzt durch gap */
     margin-bottom: 0; /* Ersetzt durch gap */
}
#import-status { /* Status für Prüflingsimport */
    width: 100%;
    margin-top: 5px;
    color: blue;
    min-height: 1.5em;
}

/* Styling für die Prüflingsliste */
#prueflinge-liste li {
    background-color: #fff;
    padding: 12px 15px;
    border: 1px solid #eee;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* Abstand zwischen Info und Buttons */
}
#prueflinge-liste .pruefling-info {
    flex-grow: 1;
}
#prueflinge-liste .pruefling-info span {
    margin-right: 15px;
    display: inline-block;
}
#prueflinge-liste .pruefling-info .name {
    font-weight: bold;
}
#prueflinge-liste .pruefling-info .klasse{
    color: #555;
}
#prueflinge-liste .pruefling-info .note {
    font-style: italic;
    color: #333;
}
/* Buttons in der Prüflingsliste */
#prueflinge-liste .button {
    padding: 5px 10px;
    font-size: 0.9em;
    flex-shrink: 0;
    margin-left: 5px;
    margin-top: 0;
    margin-right: 0;
}


/* ============================================ */
/* Styles für Korrekturseite (korrektur.html) */
/* ============================================ */

/* Abschnitt Aufgabenbewertung */
.aufgaben-bewertung-section {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}
.aufgaben-bewertung-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    font-size: 1.2em;
}

/* Grid für Noten/Gewichtung */
#aufgaben-bewertung-container {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) minmax(100px, 1fr); /* Spaltenbreiten */
    gap: 10px 15px; /* Zeilen- und Spaltenabstand */
    align-items: center;
    margin-top: 10px; /* Platz für Überschriften */
}
/* Grid Überschriften */
.grid-header {
    font-weight: bold;
    text-align: right;
    font-size: 0.9em;
    color: #555;
    padding-bottom: 5px;
    grid-row: 1; /* Immer erste Zeile */
}
.grid-header.punkte-header {
    grid-column: 2; /* Zweite Spalte */
}
.grid-header.gewichtung-header {
    grid-column: 3; /* Dritte Spalte */
    text-align: left; /* Gewichtung linksbündig */
    padding-left: 5px;
}
/* Normale Labels und Inputs im Grid */
#aufgaben-bewertung-container label:not(.grid-header) {
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
    font-size: 0.95em;
    grid-column: 1; /* Erste Spalte */
}
#aufgaben-bewertung-container input[name^="task_grade_"] {
    grid-column: 2; /* Zweite Spalte */
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: right;
}
#aufgaben-bewertung-container select[name^="task_weight_"] {
    grid-column: 3; /* Dritte Spalte */
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    font-family: inherit;
    font-size: 0.95em;
    cursor: pointer;
}
#aufgaben-bewertung-container select[name^="task_weight_"]:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
}
/* Pfeile in Number-Inputs entfernen (optional) */
#aufgaben-bewertung-container input[type=number]::-webkit-inner-spin-button,
#aufgaben-bewertung-container input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#aufgaben-bewertung-container input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

/* Container für berechnete Gesamtnote */
.gesamtnote-berechnet-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: bold;
}
.gesamtnote-berechnet-container label {
    margin-right: 10px;
    font-size: 1.1em;
    font-weight: bold; /* Sicherstellen, dass Label fett ist */
}
.gesamtnote-output {
    font-size: 1.3em;
    color: #007bff;
    min-width: 40px;
    text-align: right;
    display: inline-block;
    padding: 5px 8px; /* Etwas mehr Padding */
    background-color: #e9ecef;
    border-radius: 4px;
    font-family: monospace; /* Feste Breite für Zahlen */
}


/* Container für dynamischen Erwartungshorizont */
#erwartungshorizont-dynamisch {
    margin-top: 20px;
    padding-left: 10px;
}
#erwartungshorizont-dynamisch h2 {
    /* Verwendet Basis-H2-Stile */
}
#erwartungshorizont-dynamisch h3 {
    /* Verwendet Basis-H3-Stile */
}
#erwartungshorizont-dynamisch ul {
    /* Verwendet Basis-ul-Stile */
    margin-top: 10px;
    margin-bottom: 15px;
}
#erwartungshorizont-dynamisch li {
    margin-bottom: 12px;
    padding-left: 5px;
    line-height: 1.5;
}
#erwartungshorizont-dynamisch input[type="checkbox"] {
    /* Verwendet globale Checkbox-Stile */
}
#erwartungshorizont-dynamisch label {
    /* Verwendet globale Label-Stile */
}
#erwartungshorizont-dynamisch label strong {
     /* Verwendet globale Strong-Stile */
}
/* Einrückung für verschachtelte Listen */
#erwartungshorizont-dynamisch ul ul {
    padding-left: 25px;
    margin-top: 8px;
    border-left: 2px solid #eee; /* Optionale Linie */
    margin-left: 5px;
}
#erwartungshorizont-dynamisch ul ul li {
    margin-bottom: 8px;
    padding-left: 0;
}
/* Styling für normale Listenelemente (ohne Checkbox) */
#erwartungshorizont-dynamisch li:not(:has(> input[type="checkbox"])) {
     color: #555;
     margin-left: 28px; /* Einrückung wie Checkbox-Text */
}


/* Styling für die (ggf. vorhandenen) übergreifenden Kriterien */
#uebergreifende-kriterien-liste {
    list-style: none;
    padding-left: 10px;
}
#uebergreifende-kriterien-liste li {
     margin-bottom: 12px;
}
#uebergreifende-kriterien-liste input[type="checkbox"] {
     /* Verwendet globale Checkbox-Stile */
}
#uebergreifende-kriterien-liste label {
      /* Verwendet globale Label-Stile */
}
#uebergreifende-kriterien-liste label strong {
      /* Verwendet globale Strong-Stile */
}

/* Statusmeldungen am Formularende */
#save-status {
     margin-top: 15px;
     font-weight: bold;
     min-height: 1.5em; /* Platz reservieren */
     color: green; /* Standardmäßig grün */
}

/* Abschnitt Gewichtungseinstellungen */
.gewichtung-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border: 1px solid #ccc;
}
.gewichtung-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    border-bottom: none;
}

/* Grid für Gewichtungs-Inputs */
.gewichtung-inputs-grid {
    display: grid;
    /* 2 Spalten: Label, Input */
    grid-template-columns: auto minmax(100px, 150px);
    gap: 8px 12px; /* Etwas kleinerer Abstand */
    align-items: center;
    margin-bottom: 15px;
}
.gewichtung-inputs-grid label {
    font-weight: normal; /* Nicht fett */
    text-align: right;
    padding-right: 5px;
    font-size: 0.95em;
}
.gewichtung-inputs-grid input[type="number"] {
    width: 100%;
    padding: 6px 8px; /* Kleineres Padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: right;
}
/* Optional: Pfeile entfernen */
.gewichtung-inputs-grid input[type=number]::-webkit-inner-spin-button,
.gewichtung-inputs-grid input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.gewichtung-inputs-grid input[type=number] { -moz-appearance: textfield; }

/* Summenanzeige und Warnung */
.gewichtung-summe {
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gewichtung-summe label {
    font-weight: bold;
}
#gewichtung-summe-output {
    display: inline-block;
    padding: 3px 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}
.gewichtung-warnung {
    color: red;
    font-size: 0.9em;
    margin-left: 10px;
}

/* Speicherstatus für Gewichtung */
#gewichtung-save-status {
    margin-top: 10px;
    min-height: 1.5em;
    font-weight: bold;
}

/* ============================================ */
/* Styles für Korrekturseite (korrektur.html) - ERWEITERT */
/* ============================================ */
/* ... (Bestehende Styles für Formular, dynamischen Horizont etc.) ... */

/* Container für berechnete Note (oben auf korrektur.html) */
.gesamtnote-anzeige-korrektur {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 4px;
    display: flex;
    /* justify-content: space-between; */ /* <<< ENTFERNEN */
    align-items: center;
    gap: 10px; /* <<< NEU: Fügt Abstand zwischen Label und Output hinzu */
}

.gesamtnote-anzeige-korrektur label {
    font-weight: bold;
    margin-bottom: 0;
    /* Kein margin-right mehr nötig, wird durch gap gesteuert */
}
/* .gesamtnote-output wird wiederverwendet (Style oben bei Aufgabenbewertung) */
.gesamtnote-output {
    font-size: 1.3em;
    color: #007bff;
    /* min-width nicht unbedingt nötig, wenn nicht rechtsbündig */
    text-align: left; /* <<< GEÄNDERT: Linksbündig */
    display: inline-block;
    padding: 5px 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    font-family: monospace;
}

/* Grid für Aufgaben-Noten-Inputs */
.aufgaben-noten-grid {
    display: grid;
    /* 3 Spalten: Label, Input, Gewichtungsanzeige */
    grid-template-columns: auto minmax(80px, 1fr) minmax(60px, auto);
    gap: 10px 15px;
    align-items: center;
    margin-bottom: 20px; /* Abstand vor nächstem HR */
}

.aufgaben-noten-grid label {
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
    font-size: 0.95em;
    grid-column: 1;
}

.aufgaben-noten-grid input[type="number"] {
    grid-column: 2;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: right;
}
/* Pfeile entfernen (optional) */
.aufgaben-noten-grid input[type=number]::-webkit-inner-spin-button,
.aufgaben-noten-grid input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.aufgaben-noten-grid input[type=number] { -moz-appearance: textfield; }


/* Anzeige der festen Gewichtung */
.aufgaben-noten-grid .feste-gewichtung {
    grid-column: 3; /* Dritte Spalte */
    font-size: 0.9em;
    color: #555;
    text-align: left;
    padding-left: 5px;
    font-style: italic;
}