:root{
    --bg-color: #212529; /* Seiten-Hintergrundfarbe (HTML: body - alle Seiten) */
    --color: #ffffffff; /* Standard-Textfarbe (HTML: body, h2, button, etc.) */
    --hover-color: #7d7d7dff; /* Hover-Farbe z.B. für Links (HTML: nav a:hover) */
    --secundary-color: #393E46; /* Sekundärbox-Farbe (HTML: main, footer) */
    --box-color: #555d6aff; /* Farbton für Inhalte-Box (HTML: main) */
    --databutton-color: #009EE3; /* Primärfarbe für Action-Buttons (HTML: .databutton, .uploadbutton) */
    --shadow : rgba(0,0,0,0.35); /* Schattenfarbe für Boxen */
    --font-family: 'monsterrat', sans-serif; /* Global verwendete Schriftfamilie */
}

/* Responsive Anpassungen */
@media (max-width: 600px){
    nav{ grid-template-columns: auto 1fr; gap: 8px; padding: 8px 12px; }
    nav .gefahr_hinweis{ display: none; }
    nav .navlogo{ grid-column: 1 / -1; justify-self: start; }
    nav a.nav-item{ grid-column: 1 / -1; justify-self: end; }

    footer{ grid-template-columns: 1fr; grid-auto-rows: auto; height: auto; padding: 12px; }
    .footer-links{ grid-auto-flow: row; gap: 8px; justify-self: center; }
    .footerlogo{ justify-self: end; grid-column: 1; }

    .file-row{ grid-template-columns: 1fr; gap: 10px; }
    .status-wrapper{ justify-self: start; min-width: auto; }
    .databutton{ padding: 20px; }
    .uploadbutton{ padding: 10px 12px; }
}

/* Überschrift H2 - verwendet in pages/home.html und pages/upload.html */
h2{
    font-family: var(--font-family); /* Schrifttyp - wie in HTML gesetzt */
    color: var(--databutton-color); /* H2 hebt sich mit Button-Farbe ab */
    margin-bottom: 25px; /* Kein extra Außenabstand */
    text-align: center; /* Zentriert die Überschrift horizontal */
    cursor: default; /* Kein Pointer-Cursor */
}

/* H3 - kleinere Überschriften (z.B. Upload-Erfolg) */
h3{
    font-family: var(--font-family); /* Konsistente Schrift */
    color: var(--color); /* Weiße/helle Farbe für Erfolgstext */
    margin: 0px 0px 0px; /* Kein extra Außenabstand */
    cursor: default; /* Kein Pointer-Cursor */
}

/* Grundlegendes Seiten-Layout - Body (HTML: body) */
body{
    background-color: var(--bg-color); /* Seitenhintergrund */
    color: var(--color); /* Standardtextfarbe */
    font-family: var(--font-family); /* Standardfont */
    margin: 0; /* Entfernt default body margin */
    min-height: 100vh; /* Minimum-Höhe: volle Bildschirmhöhe */
    display: grid; /* Grid als Basislayout */
    grid-template-rows: auto 1fr auto; /* nav | main | footer */
    grid-template-areas:
        "nav"
        "main"
        "footer";
} 

/* Navigation (HTML: nav in index.html/partials) */
nav{
    display: grid; /* Grid für bessere Spaltenkontrolle */
    grid-template-columns: auto auto 1fr auto; /* logo | warn | spacer | rechts-aligned links */
    align-items: center; /* Zentriert vertikal */
    gap: 16px; /* Abstand zwischen Nav-Elementen */
    padding: 0 24px; /* Innenabstand links/rechts */
    height: 10vh; /* Höhe des Nav-Balkens */
    font-family: var(--font-family); /* Schrift */
    background-color: var(--secundary-color); /* Hintergrund der Nav */
    border-bottom: 1px solid var(--box-color); /* Dezenter Rand unten */
    grid-area: nav;
}

/* Explizite Platzierung für Logo / Warnhinweis */
nav .navlogo{ grid-column: 1; justify-self: start; }
nav .gefahr_hinweis{ grid-column: 2; justify-self: start; } 

/* Logo-Container in der Nav (HTML: .navlogo img) */
.navlogo{
    width: 400px; /* Platz für Logo */
    height: 75px; /* Größe anpassen - evtl. überschrieben vom Bild */
    margin-right: 16px; /* Abstand zum nächsten Element */
}

/* Positioniert die Nav-Links rechts */
nav a.nav-item:first-of-type{ /* Startseite: steht links von Login, beide rechts ausgerichtet */
    grid-column: 3;
    justify-self: end;
}
nav a.nav-item:last-of-type{ /* Login: ganz rechts */
    grid-column: 4;
    justify-self: end;
} 

/* Allgemeine Link-Optik in der Nav */
nav a{
    color: var(--color); /* Linkfarbe */
    text-decoration: none; /* entfernt Unterstreichung */
    background-color: var(--box-color); /* Hintergrund für den Link */
    padding: 6px 14px; /* Innenabstand */
    border-radius: 0px; /* Eckenradius */
    transition: background-color 0.2s ease, color 0.2s ease; /* Sanfte Übergänge */
}

/* Hover-Zustand für Nav-Links */
nav a:hover{
    cursor: pointer; /* Zeigt Klickbarkeit an */
    color: var(--box-color); /* Invertiert die Farben beim Hover */
    background-color: var(--hover-color); /* Hover-Hintergrund */
}

/* Haupt-Container (HTML: main, umfasst die Box um H2, Buttons, Upload-Form) */
main {
    display: grid;
    place-items: center; /* Zentriert horizontal & vertikal */
    grid-area: main;
    padding: 20px;
} 

/* H2 innerhalb von main (HTML: main h2) */
main h2{
    color: var(--databutton-color); /* H2 betont mit Button-Farbe */
    font-size: 30px; /* Schriftgröße */
    margin-top: 0px; /* Kein extra Abstand oben */
    text-align: center;
} 

/* startseite */
.home-section, .upload-section { 
    display: grid;
    grid-auto-rows: auto;
    place-items: center;
    cursor: default; /* Kein pointer auf die ganze Box */

    /* BOX-GRÖSSE & ZENTRIERUNG */
    width: 100%;           /* Volle Breite innerhalb des Main-Containers */
    max-width: 720px;      /* Begrenze die Breite für große Displays */
    min-width: 320px;      /* Mindestbreite für kleine Displays */
    margin: 40px auto;     /* Abstand oben/unten und zentriert */

    padding: 40px;
    color: var(--color);
    font-family: var(--font-family);
    background-color: var(--box-color); /* Hintergrund sichtbar machen */
    border: 2px solid var(--secundary-color);
    border-radius: 15px;
    gap: 20px;
    box-shadow: 0 6px 18px var(--shadow); /* Hebt die Box vom Hintergrund ab */
} 

.termsofuse-section, .datenschutz-section, .impressum-section, .dsa-section, .page-error {
    display: grid;
    grid-auto-rows: auto;
    place-items: left;

    /* BOX-GRÖSSE & ZENTRIERUNG */
    width: fit-content;      /* Die Box ist nur so breit wie ihr Inhalt */
    min-width: 400px;        /* Mindestbreite, damit es stabil aussieht */
    margin: 100px 100px;          /* Zusätzliche Absicherung für die horizontale Mitte */

    padding: 20px 20px;
    color: var(--color);
    font-family: var(--font-family);
    background-color: var(--box-color);
    border: 2px solid var(--secundary-color);
    border-radius: 15px;
    gap: 0.5px;
    line-height: 1;
    box-shadow: 0 6px 18px var(--shadow); /* Hebt die Box vom Hintergrund ab */
} 

/* Unsichtbare native File-Input (HTML: #fileInput) */
#fileInput{
    position: absolute; /* Vom Fluss nehmen */
    opacity: 0; /* Unsichtbar */
    pointer-events: none; /* Verhindert Interaktion */
}

/* --- Button Titel / Subtitel (HTML: .button-title, .button-subtitle in pages/home.html) --- */
.button-title{
    font-family: var(--font-family); /* Schrift für Titel */
    color: var(--color); /* Weiße Titel-Farbe */
    font-size: 30px; /* Große Schrift für sichtbare Button-Titel */
    font-weight: 600; /* Fett */
    margin-bottom: 6px; /* Abstand zum Untertitel */
}

.button-subtitle{
    font-family: var(--font-family); /* Schrift */
    color: var(--color); /* Farbe */
    font-size: 15px; /* Kleinere Schrift für Untertitel */
    opacity: 0.9; /* Leicht transparente Darstellung */
}

/* --- Datein auswählen Button (HTML: .databutton in pages/home.html / pages/upload.html) --- */
.databutton{
    display: grid; /* Grid für vertikale Ausrichtung von Titel/Subtitel */
    place-items: center; /* Zentriert beides */
    grid-auto-rows: auto;
    text-align: center; /* Text zentriert */
    font-family: var(--font-family); /* Konsistente Schrift */
       
    background-color: var(--databutton-color); /* Markante Button-Farbe */
    color: var(--color); /* Textfarbe innerhalb des Buttons */

    padding: 40px 40px; /* Innenabstand der Box (macht sie größer) */

    border-style: dashed; /* Gepunkteter Rahmen */
    border-width: 2px; /* Rahmenstärke */
    border-color: var(--secundary-color); /* Rahmenfarbe */
    border-radius: 15px; /* Abgerundete Ecken */

    cursor: pointer; /* Zeigt Klickbarkeit an */
    transition: background-color 1s ease; /* Sanfter Farbwechsel beim Hover */
} 

/* Hover Effekt für Datein auswählen Button */
.databutton:hover{
    background-color: var(--bg-color); /* Invertiert zu dunklem Hintergrund beim Hover */
}

/* --- Hochladen Button (HTML: .uploadbutton, #uploadButton in pages/home.html & pages/upload.html) --- */
.uploadbutton{
    display: grid; /* Grid für konsistente Zentrierung */
    place-items: center;
    justify-items: center;
    align-items: center;
    text-align: center; /* Text zentriert */
       
    background-color: var(--databutton-color); /* Markante Button-Farbe */
    color: var(--color); /* Textfarbe innerhalb des Buttons */

    padding: 10px 10px; /* Innenabstand der Box (macht sie größer) */
    min-height: 30px; /* Mindesthöhe für bessere Vertikalzentrierung */

    cursor: pointer; /* Zeigt Klickbarkeit an */
    transition: background-color 0s ease; /* Sanfter Farbwechsel beim Hover */
}

/* Ensures any title inside the uploadbutton is centered */
.uploadbutton .uploadbutton-title,
.uploadbutton .button-title{
    margin: 0; /* Remove default margins */
    display: block;
    width: 100%;
    line-height: 1;
    text-align: center;
    
}

/* Hover Zustand für Upload-Button */
.uploadbutton:hover{
    background-color: var(--bg-color); /* Dunkler Hintergrund beim Hover */
}

/* --- Progress / Datei-Liste (HTML: #progressContainer, #progressBar, .file-list, .file-row) --- */
#progressContainer{
    display: none; /* Standardmäßig verborgen, wird per JS angezeigt (script.js) */
    margin-top: 24px; /* Abstand über dem Progress-Container */
    width: 100%;    /* Basiert auf max-width weiter unten */
    max-width: 540px; /* Maximale Breite wie die Datei-Liste */
    background: var(--secundary-color); /* Hintergrund des Balkens */
    border-radius: 8px; /* Abgerundet */
    height: 14px; /* Höhe des sichtbaren Fortschrittsbalkens */
    overflow: hidden; /* Verhindert Überlaufen */
}

#progressBar{
    width: 0%; /* Startbreite 0%, wird per JS gesetzt */
    height: 100%; /* Volle Höhe des Containers */
    background: var(--databutton-color); /* Auffällige Farbe zum Füllen */
    transition: width 0.3s; /* Animiert die Breitenänderung */
}

/* ------------------------------------------------------------------
   Upload Result / Share Link / Result Buttons
   - Verwendet in: pages/home.html, pages/upload.html (IDs: #uploadResult, #fileDetails, #shareLink)
   - Ziel: Inline-Styles entfernen, vorhandene Klassen (.uploadbutton, .databutton) wiederverwenden
   ------------------------------------------------------------------ */

/* Wrapper für das Upload-Ergebnis (standardmäßig versteckt, JS zeigt es an) */
#uploadResult{
    display: none; /* bleibt per JS sichtbar/unsichtbar; JS setzt inline style (z.B. 'flex') */
    gap: 20px; /* Abstand zwischen Elementen */
    width: 100%;
    font-family: var(--font-family); /* Konsistente Schrift */ 

}

/* Utility to hide elements via class */
.hidden{ display: none !important; } 

/* Titel im Erfolgs-Fall (bereits in pages/upload.html als class="success-title" genutzt) */
.success-title{
    color: #3498db; /* blau (gleich wie --databutton-color) */
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin: 0;
}

/* Detaillierte Anzeige einer Datei nach Upload (ersetzt Inline-Styles in #fileDetails) */
#fileDetails{
    width: 100%;
    max-width: 540px;
    background: #2c3e50; /* dunkler Kasten */
    padding: 15px;
    border-radius: 8px;
    color: white;
}

/* Freigabe-Link-Box (ersetzt Inline-Styles in #shareLink) */
#shareLink{
    background: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 540px;
    word-break: break-all; /* lange Links umbrechen */
    border: 2px solid #3498db;
    text-align: center;
    color: #3498db;
}

/* Container mit den Action-Buttons (ersetzt mehrere Inline-Styles) */
.result-buttons{
    display: grid;
    grid-auto-flow: row;
    gap: 20px;
    justify-items: center;
    width: 100%;
} 

/* Spezifische Anpassungen für die Buttons im Ergebnisbereich (nutzt vorhandene .uploadbutton/.databutton) */
#copyBtn{ /* primärer Copy-Button */
    background-color: var(--databutton-color); /* gleiche Farbe wie andere Buttons */
    padding: 15px 40px; /* breit(er)er Button */
    border-radius: 8px; /* runde Ecken wie im Design */
    cursor: pointer;
}
#copyBtn{
    color: white; /* explizit sicherstellen */
    font-weight: bold;
    font-size: 20px;
}

#downloadBtn{ /* Download-Link styled wie Button */
    padding: 15px;
    text-decoration: none;
    width: 100%;
    max-width: 250px;
    background-color: var(--databutton-color);
    text-align: center;
    border-radius: 8px;
    display: inline-block; /* damit padding auf <a> wirkt wie Button */
}

/* 'Neuer Upload' Button im Ergebnisbereich - scoped auf #uploadResult, damit globale .databutton nicht geändert wird */
#uploadResult .databutton{
    background-color: var(--secundary-color);
    padding: 10px;
    width: 100%;
    max-width: 250px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}

.file-list {
    width: 100%;
    max-width: 540px;
    display: grid;
    grid-auto-rows: auto;
    gap: 10px;
    margin: 20px auto; /* Zentriert die Liste */
} 

.file-row {
    display: grid; /* Grid für klare Spalten (Name | Status) */
    grid-template-columns: 1fr auto;
    align-items: center;
    background-color: #2c3e50; /* Dunkler Hintergrund für Kontrast */
    border: 1px solid var(--secundary-color);
    border-radius: 8px;
    padding: 12px 20px;
    transition: background 0.3s ease;
} 

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 15px;
    color: white;
    justify-self: start; /* In Grid, links ausgerichtet */
} 

.status-wrapper {
    display: grid; /* Grid als inline-row */
    grid-auto-flow: column;
    align-items: center;
    gap: 15px;
    min-width: 180px; /* Platzhalter für die rechte Seite */
    justify-items: end; /* Inhalte am rechten Ende */
} 

.mini-progress-container {
    width: 80px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
}

.mini-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--databutton-color);
    transition: width 0.2s ease;
}

/* Small per-file progress used in the file list (inline next to filename) */
.progressContainer {
    display: inline-block;
    vertical-align: middle;
    width: 80px; /* kürzere Leiste */
    height: 6px; /* schlanker */
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 8px;
}

/* hidden state keeps the container visually subtle */
.progressContainer[aria-hidden="true"] { opacity: 0.6; }

.progressContainer .progressBar, .progressBar {
    width: 0%;
    height: 100%;
    background: var(--databutton-color);
    transition: width 0.2s ease;
    border-radius: 3px;
}

.progressContainer[aria-valuenow] .progressBar { transition: width 0.15s linear; }

.file-status {
    font-size: 0.85rem;
    font-weight: bold;
    color: #9be899; /* Grüner Status-Text */
    min-width: 64px; /* Reserve Platz, damit das Layout nicht springt */
    text-align: right; /* Status rechtsbündig innerhalb des reservierten Bereichs */
    display: inline-block;
}

/* Hides the status visually but keeps its layout space reserved */
.status-hidden { visibility: hidden; }


.file-check {
    font-size: 1.1rem;
    color: #9be899;
}

/* Wenn keine Dateien vorhanden sind, verstecken */
.file-list:empty{
    display: none;
}

/* Der Bereich rechts, wo Status oder Progress erscheint (HTML: .status-container) */
.status-container {
    display: grid;
    grid-auto-flow: column;
    align-items: center; /* Zentriert vertikal */
    justify-items: end; /* Rechtsbündig */
    gap: 10px; /* Abstand zwischen Elementen */
    min-width: 140px; /* Platz für Status-Text und Icon */
} 

/* Wrapper für das Upload-Formular (ersetzt Inline-Styles in pages/upload.html) */
.upload-form{
    display: grid;
    grid-auto-rows: auto;
    gap: 20px;
    justify-items: center;
    width: 100%;
}

/* Wenn das Ergebnis sichtbar gemacht wird, soll es per Klasse als Grid dargestellt werden */
#uploadResult.is-visible{ display: grid; justify-items: center; gap: 40px; width: 100%; }

/* Fehlerseite (HTML: .page-error) */
.page-error {
    text-align: center; /* Zentriert Fehlertext */
}

/* Hinweis-Box (HTML: .gefahr_hinweis) */
.gefahr_hinweis{ 
    width: 400px; /* angepasste Breite der Hinweis-Box */
    height: auto; /* Höhe automatisch, Bild skaliert */
    justify-self: start;
}

/* Footer moved to end of file (see bottom) */
/* Footer (HTML: footer) - moved to the end as requested */
footer{
    display: grid;
    grid-template-columns: auto 1fr auto; /* links | zentriert | rechts */
    align-items: center;
    gap: 20px; /* Abstand zwischen Fuß-Elementen */
    padding: 0 24px; /* Innenabstand links/rechts */
    height: 10vh; /* Footer-Höhe */
    background-color: var(--secundary-color); /* Footer-Hintergrund */
    border-top: 1px solid var(--box-color); /* Dezente Trennung nach oben */
    grid-area: footer;
}

/* Footer Links - zentriert in der mittleren Spalte */
.footer-links{
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    align-items: center;
    grid-column: 2; /* in die Mitte */
    justify-self: center; /* horizontal zentriert */
}

footer strong{
    grid-column: 2;
    justify-self: center;
    color: var(--color);
} 

footer a{
    color: var(--color); /* Linkfarbe */
    margin: 0px 20px; /* Abstand zwischen Links */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 15px; /* Link-Schriftgröße */
}

footer a:hover{
    color: var(--hover-color); /* Hover-Farbe */
    cursor: pointer; /* Zeigt Klickbarkeit */
}