/* style.css */

/* 
  1) Grundsetup für Seite:
     - Setzt die Höhe von HTML und Body auf 100%, um Flexbox nutzen zu können.
     - Entfernt Standard-Margins und -Paddings.
     - Legt eine Standard-Schriftart fest.
     - Legt einen Hintergrund und eine Textfarbe fest.
*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Wichtig, damit der Footer ans untere Ende gedrückt werden kann */
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
}

/* 
  2) Body als Flexcontainer:
     - Header, main und footer sind Flex-Items, die vertikal angeordnet werden.
     - flex-direction: column => items untereinander.
*/
body {
    display: flex;
    flex-direction: column;
}

/* 
  3) Header- und Footer-Styling:
     - Bleiben immer oben/unten, werden nicht zusammengedrückt.
     - Hintergundfarbe, Textfarbe etc. 
*/
header, footer {
    flex-shrink: 0; /* Keine Komprimierung */
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Footer-Text/Überschrift */
header h1, footer p {
    margin: 0;
}

/* 
  4) Hauptbereich (main):
     - Flex-Grow, damit der Inhalt den verfügbaren Platz nutzt und Footer unten landet, wenn wenig Inhalt da ist.
     - max-width 600px, um die Seite zu zentrieren und nicht zu breit werden zu lassen.
     - margin: 40px auto => zentriert horizontal.
     - padding und box-shadow für etwas „Karten“-Effekt.
*/
main {
    flex: 1 0 auto; /* Wichtig, damit main den Platz einnimmt und Footer „wegschiebt“ */
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 
  5) Bereich im main, in dem das Upload-Formular steht
*/
.upload-form-section {
    margin: 20px 0;
}

/* 
  6) Allgemeine Formular-Gestaltung
     - Wir verwenden Flexbox in einer Spalte.
     - .form-group ist ein "Block" mit Label + Input.
*/
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen Form-Gruppen */
}

/* Jede Formgruppe enthält Label und Input */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Label-Styling */
.form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Inputs (File, Password, Number, Datum etc.) */
.form-group input[type="file"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* 
  7) Button-Styling:
     - Grüner Button mit Hover-Effekt 
*/
.upload-button {
    background: #28a745;
    color: #fff;
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* Falls wir aus Buttons auch Links machen möchten */
    display: inline-block; /* Falls wir aus Buttons auch Links machen möchten */
    margin-top: 10px;
}

.upload-button:hover {
    background: #218838;
}

/* 
  8) Standard-Textabstände
*/
main p {
    margin: 10px 0;
}

/*
  9) Link-Effekt
*/
main a {
    color: #0069d9;
    text-decoration: underline;
}

main a:hover {
    color: #0056b3;
    text-decoration: none;
}

/* 
  10) (Optional) Spinner-Klassen (falls du sie später wieder nutzen möchtest)
     - Standardmäßig hidden, Anzeige kann über JS gesteuert werden.
*/
#spinner {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.loader {
    border: 8px solid #f3f3f3;      /* heller Rand */
    border-top: 8px solid #3498db;  /* farbiger Rand oben */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}