@charset "utf-8";

@font-face {
	font-family: Header ;
	src: url("../schriften/Lobster\ 1.4.otf") ;
}

@font-face {
	font-family: Überschrift ;
	src: url("../schriften/Lobster\ 1.4.otf") ;
}

@font-face {
	font-family: Text ;
	src: url("../schriften/NostalgicWhispers-Regular.ttf") ;
}


/* Farben ------------------------------------------------------------------------------------------ */
:root {
    --farbe-hintergrund: #000b2c ;   /* Seitenhintergrund: dunkles Blau, passend zum Schuppen-Header */
    --farbe-flaeche: #011c48 ;       /* Tabellenzeilen (ungerade), Gelesen-Verlauf, Datei-Auswahl */
    --farbe-flaeche-alt: #1c2d5e ;   /* jede zweite Tabellenzeile */
    --farbe-box: #16244d ;           /* Login-Box */
}

/* Allgemeines -----------------------------------------------------------------------------------  */

* {
    margin: 0 ;
    padding: 0 ;
    box-sizing: border-box ;
}

html, body {
    height: 100% ;
    background-color: var(--farbe-hintergrund) ;   /* einfarbig – gleiche Farbe wie der Sticky-Kopfbereich */
    color: #eee ;
    font-family: Text, Verdana, Arial, sans-serif ;
}

body {
    min-width: 320px ;
    overflow-x: hidden ;
}

.inhalt {
    /* Platz für den fixen Kopfbereich (Maße in header.css) plus etwas Luft; unten Abstand zum Seitenende */
    padding-top: calc(var(--header-hoehe, 9rem) + 1rem) ;
    padding-bottom: 4rem ;
    min-height: 88vh ;
}

h2 { 
    /* Info: h1 ist nur für die Webseiten-Überschrift */
    font-family: Überschrift, Verdana, Arial, sans-serif;
    font-size: clamp(2rem, 4vw, 4.5vh) ;
    text-align: center ;
    padding: 1rem 0 ;
}

.admin-seite {
    font-family: Verdana, Arial, sans-serif ;
}

/* Admin-Login ------------------------------------------------ */

.login-box {
    width: min(90%, 24rem) ;
    margin: 1rem auto 2rem ;
    padding: 1.5rem ;
    background-color: var(--farbe-box) ;
    border: 1px solid #fff ;
    border-radius: 0.5rem ;
    font-family: Verdana, Arial, sans-serif ;
    text-align: center ;
}

.login-form {
    display: flex ;
    flex-direction: column ;
    gap: 0.75rem ;
    align-items: stretch ;
}

.login-form label {
    font-size: 1rem ;
    text-align: left ;
}

.login-form input[type="password"] {
    width: 100% ;
    height: 2.4rem ;
    padding: 0 0.6rem ;
    font-size: 1rem ;
    color: #000 ;
    border: 1px solid #fff ;
    border-radius: 0.5rem ;
}

.login-button {
    height: 2.6rem ;
    font-family: Verdana, Arial, sans-serif ;
    font-size: 1rem ;
    color: #fff ;
    background-image: linear-gradient(#2379df 2%, #1b6bcd, #012a81, #001047, #00082b);
    border: 1px solid #fff ;
    border-radius: 0.5rem ;
    cursor: pointer ;
}

.login-fehler {
    margin-bottom: 0.75rem ;
    color: #ff9999 ;
    font-weight: bold ;
}

.login-zurueck {
    margin-top: 1rem ;
    font-size: 0.9rem ;
}

.login-zurueck a {
    color: #eee ;
}

/* Übersicht -------------------------------------------------- */

.uebersicht {
    text-align: center ;
    max-width: 1200px ;
    margin: 1rem auto ;
    padding: 0 1rem ;
}

.bilderUebersicht {
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
    align-items: center ;
    gap: 1.5rem ;
}

/* Kacheln: Breite sitzt auf dem <a> (Flex-Element), das Bild füllt es aus.
   Desktop: drei nebeneinander, wachsen fluid mit der Fensterbreite bis 340px. */
.bilderUebersicht a {
    display: block ;
    flex: 0 1 calc((100% - 3rem) / 3) ;
    max-width: 340px ;
}

.bilderUebersicht img {
    display: block ;
    width: 100% ;
    height: auto ;
}

/* Textlinks unterhalb der Kacheln (für Einträge ohne eigenes Kachelbild): eigene Zeile,
   Links nebeneinander mit Trennpunkt, auf dem Handy untereinander */
.bilderUebersicht .uebersichtLinks {
    flex: 1 1 100% ;
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
    align-items: center ;
    gap: 0.4rem 0 ;
    margin-top: 0.5rem ;
}

.bilderUebersicht .uebersichtLink {
    flex: 0 1 auto ;
    max-width: none ;
    padding: 0 1rem ;
    color: #eee ;
    text-decoration: none ;
    font-size: clamp(1rem, 2vw, 1.3rem) ;
    letter-spacing: 0.15rem ;
}

.bilderUebersicht .uebersichtLink + .uebersichtLink {
    border-left: 1px solid rgba(238, 238, 238, 0.5) ;
}

@media (max-width: 600px) {
    .bilderUebersicht .uebersichtLink {
        flex-basis: 100% ;
    }

    .bilderUebersicht .uebersichtLink + .uebersichtLink {
        border-left: none ;
    }
}

.bilderUebersicht .uebersichtLink:hover {
    text-decoration: underline ;
}

/* iPad (hoch und quer) und kleinere Fenster: zwei Kacheln pro Zeile */
@media (max-width: 1199px) {
    .bilderUebersicht a {
        flex-basis: calc((100% - 1.5rem) / 2) ;
        max-width: none ;
    }
}

@media (max-width: 767px) {
    .uebersicht {
        margin: 0.5rem auto ;
        padding: 0 0.75rem ;
    }

    /* Handy: weiterhin zwei pro Zeile, etwas engerer Abstand */
    .bilderUebersicht {
        gap: 1rem ;
    }

    .bilderUebersicht a {
        flex-basis: calc((100% - 1rem) / 2) ;
    }
}