/* =============================================================
   style.css
   Styling für das Schul-Webprojekt
   
   Aufbau:
     1. CSS-Variablen (Farben, Abstände)
     2. Reset & Basis
     3. Layout (Container)
     4. Header & Navigation
     5. Tabelle
     6. Formulare
     7. Buttons
     8. Alerts & Meldungen
     9. Hilfselemente
   ============================================================= */


/* =============================================================
   1. CSS-VARIABLEN
   Farben und Werte zentral definieren → einfach anpassen!
   Verwendung: color: var(--farbe-primär);
   ============================================================= */
:root {
  --farbe-primär:       #2563eb;   /* Blau – Hauptfarbe */
  --farbe-primär-hover: #1d4ed8;   /* Dunkleres Blau für Hover */
  --farbe-erfolg:       #16a34a;   /* Grün – Erfolgsmeldungen */
  --farbe-fehler:       #dc2626;   /* Rot – Fehlermeldungen */
  --farbe-edit:         #d97706;   /* Orange – Bearbeiten-Button */
  --farbe-delete:       #dc2626;   /* Rot – Löschen-Button */
  --farbe-sekundär:     #6b7280;   /* Grau – sekundäre Buttons */

  --hintergrund:        #f8fafc;   /* Seitenhintergrund (helles Grau) */
  --karte-hintergrund:  #ffffff;   /* Weiß für Karten/Container */
  --text-haupt:         #1e293b;   /* Dunkles Blaugrau für Text */
  --text-leicht:        #64748b;   /* Helleres Grau für Nebentext */
  --rahmen-farbe:       #e2e8f0;   /* Helle Rahmenfarbe */

  --border-radius:      8px;       /* Abrundung von Ecken */
  --schatten:           0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --schrift:            'Segoe UI', system-ui, sans-serif;
}


/* =============================================================
   2. RESET & BASIS
   Browser-Standardstyles vereinheitlichen
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;  /* Padding/Border wird NICHT zur Breite addiert */
  margin: 0;
  padding: 0;
}

body {
  font-family:      var(--schrift);
  font-size:        16px;
  line-height:      1.6;
  color:            var(--text-haupt);
  background-color: var(--hintergrund);
  padding:          2rem 1rem;
}


/* =============================================================
   3. LAYOUT
   ============================================================= */
.container {
  max-width:    1100px;
  margin:       0 auto;               /* Horizontal zentrieren */
  background:   var(--karte-hintergrund);
  border-radius: var(--border-radius);
  box-shadow:   var(--schatten);
  padding:      2rem;
}

/* Schmaler Container für Formulare */
.container-schmal {
  max-width: 640px;
}


/* =============================================================
   4. HEADER
   ============================================================= */
header {
  display:         flex;
  justify-content: space-between;  /* Titel links, Button rechts */
  align-items:     center;
  margin-bottom:   1.5rem;
  padding-bottom:  1rem;
  border-bottom:   2px solid var(--rahmen-farbe);
  flex-wrap:       wrap;
  gap:             0.5rem;
}

header h1 {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--text-haupt);
}


/* =============================================================
   5. TABELLE
   ============================================================= */
table {
  width:           100%;
  border-collapse: collapse;  /* Keine Doppelrahmen zwischen Zellen */
  margin-top:      1rem;
}

thead {
  background-color: var(--farbe-primär);
  color:            white;
}

th {
  padding:    0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size:  0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding:    0.75rem 1rem;
  border-bottom: 1px solid var(--rahmen-farbe);
  vertical-align: middle;
}

/* Abwechselnde Zeilenfarben (Zebra-Muster) für bessere Lesbarkeit */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

tbody tr:hover {
  background-color: #eff6ff;  /* Helles Blau beim Hover */
}

.beschreibung {
  color:     var(--text-leicht);
  font-size: 0.875rem;
  max-width: 280px;
}

.aktionen {
  display: flex;
  gap:     0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Formular innerhalb Tabellenzelle (Löschen-Button) */
.aktionen form {
  margin: 0;
}

.anzahl {
  margin-top: 1rem;
  color:      var(--text-leicht);
  font-size:  0.875rem;
}


/* =============================================================
   6. FORMULARE
   ============================================================= */
.formular {
  margin-top: 1.5rem;
}

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

label {
  display:       block;
  font-weight:   600;
  margin-bottom: 0.35rem;
  color:         var(--text-haupt);
  font-size:     0.9rem;
}

/* Alle Eingabefelder: einheitliches Styling */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
  width:         100%;
  padding:       0.6rem 0.875rem;
  border:        1.5px solid var(--rahmen-farbe);
  border-radius: var(--border-radius);
  font-size:     1rem;
  font-family:   var(--schrift);
  color:         var(--text-haupt);
  background:    white;
  transition:    border-color 0.2s, box-shadow 0.2s;
}

/* Fokus-Stil: zeigt welches Feld gerade aktiv ist */
input:focus,
textarea:focus,
select:focus {
  outline:      none;
  border-color: var(--farbe-primär);
  box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

textarea {
  resize: vertical;  /* Nur vertikal in der Größe veränderbar */
}

/* Fehler-Zustand: rote Umrandung */
.hat-fehler input,
.hat-fehler textarea {
  border-color: var(--farbe-fehler);
}

.fehler-text {
  display:    block;
  color:      var(--farbe-fehler);
  font-size:  0.8rem;
  margin-top: 0.3rem;
}

.pflicht {
  color: var(--farbe-fehler);
}

.pflicht-hinweis {
  font-size: 0.8rem;
  color:     var(--text-leicht);
  margin:    0.5rem 0 1.5rem;
}

.formular-aktionen {
  display:    flex;
  gap:        0.75rem;
  margin-top: 1rem;
  flex-wrap:  wrap;
}


/* =============================================================
   7. BUTTONS
   ============================================================= */
.btn {
  display:         inline-block;
  padding:         0.55rem 1.1rem;
  border:          none;
  border-radius:   var(--border-radius);
  font-size:       0.9rem;
  font-weight:     600;
  font-family:     var(--schrift);
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color 0.2s, transform 0.1s;
  line-height:     1.4;
}

.btn:active {
  transform: scale(0.97);  /* Kurzes "Eindrücken" beim Klick */
}

.btn-primary {
  background-color: var(--farbe-primär);
  color:            white;
}
.btn-primary:hover {
  background-color: var(--farbe-primär-hover);
}

.btn-secondary {
  background-color: var(--hintergrund);
  color:            var(--text-haupt);
  border:           1.5px solid var(--rahmen-farbe);
}
.btn-secondary:hover {
  background-color: var(--rahmen-farbe);
}

/* Kleine Buttons für Tabellen-Aktionen */
.btn-klein {
  padding:   0.3rem 0.65rem;
  font-size: 0.8rem;
}

.btn-edit {
  background-color: #fff7ed;
  color:            var(--farbe-edit);
  border:           1px solid #fed7aa;
}
.btn-edit:hover {
  background-color: #ffedd5;
}

.btn-delete {
  background-color: #fef2f2;
  color:            var(--farbe-delete);
  border:           1px solid #fecaca;
}
.btn-delete:hover {
  background-color: #fee2e2;
}


/* =============================================================
   8. ALERTS & MELDUNGEN
   ============================================================= */
.alert {
  padding:       0.875rem 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1.25rem;
  font-size:     0.9rem;
}

.alert-success {
  background-color: #f0fdf4;
  color:            var(--farbe-erfolg);
  border:           1px solid #bbf7d0;
}

.alert-fehler {
  background-color: #fef2f2;
  color:            var(--farbe-fehler);
  border:           1px solid #fecaca;
}

.alert-fehler ul {
  margin:     0.4rem 0 0 1.2rem;
  padding:    0;
}

.leer-hinweis {
  text-align: center;
  padding:    2.5rem;
  color:      var(--text-leicht);
  font-size:  1.1rem;
}


/* =============================================================
   9. RESPONSIVE: Auf kleinen Bildschirmen anpassen
   ============================================================= */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    align-items:    flex-start;
  }

  table {
    font-size: 0.8rem;
  }

  th, td {
    padding: 0.5rem 0.6rem;
  }

  /* Tabelle scrollbar machen auf kleinen Screens */
  .container {
    overflow-x: auto;
    padding: 1rem;
  }
}