/* allgemeine Einstellungen */

:root {
    --text: #e8e8ea;
    --text-dim: #8b8b93;
}

html { -webkit-text-size-adjust: none;
     }
          
body {
     /* min-height + flex-Zentrierung sorgt dafür, dass #rahmen von Anfang
        an (schon vor dem Laden des Kamerabilds) vertikal UND horizontal
        mittig sitzt - vorher übernahm das nur ein JS-Script, das erst nach
        dem "load"-Event des Bilds lief. Bei der Zeitraffer-Seite (großes
        GIF, laedt spuerbar) sass die Seite bis dahin oben am Bildschirmrand
        und sprang erst nach dem Laden in die Mitte (siehe Chat 30.07.2026).
        Jetzt zentriert der Browser sofort per CSS, unabhängig vom
        Ladezustand des Bilds. */
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     padding:0px;
     margin:0px auto;
     background-color:#000000;
     color:#ffffff;
     /* schoenere, modernere Schriftart statt Verdana - gleicher
        System-Font-Stack wie im Wetter-Bereich (siehe wetter.css/style.css),
        damit alle Projektseiten einheitlich wirken (siehe Chat 30.07.2026).
        Gilt ueber Vererbung auch fuer Ueberschrift + Links unten. */
     font: normal .8em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     }

div#rahmen {

                 background-color:#000000;
                 padding:0px;
                 margin:0px;
                 /* schmaler schwarzer Rand am unteren Fensterrand (siehe
                    Chat 30.07.2026): body zentriert #rahmen vertikal per
                    flex; margin-bottom (ohne passendes margin-top) sorgt
                    dafür, dass unterhalb IMMER etwas mehr Freiraum bleibt
                    als oberhalb, statt dass der letzte Link exakt am
                    Fensterrand klebt. */
                 margin-bottom:10px;
                 border:0;
          }

a:link {
        color: #ffffff;
        text-decoration: none;
        }
a:visited {
          color: #ffffff;
          text-decoration: none;
          }
a:hover {
        color: #aaaaaa;
        text-decoration: none;
        }

img {
         /* display:block noetig (siehe Chat 30.07.2026): <img> ist per
            Default inline und sitzt dadurch auf einer Textzeile mit
            Grundlinie - das erzeugt einen kleinen, aber sichtbaren
            Leerraum UNTER dem Bild (Platz fuer Unterlaengen wie "g"),
            unabhaengig von jeglichem margin/padding auf dem Bild selbst.
            block behebt das. */
         display: block;
         height: auto;
         width: 100%;
         padding:0px;
         margin:0px;
}

/* Footer-Links zu den anderen Projektseiten (Wetter) - gleicher Stil wie
   .footer-link in Wetter/style.css bzw. Wetter/wetter.css, damit alle
   Projektseiten optisch zusammengehören. WICHTIG (siehe Chat 30.07.2026):
   :link UND :visited hier explizit angeben (nicht nur den Klassennamen
   allein) - sonst gewinnt das weiter oben stehende "a:link{color:#fff}"
   (gleiche/höhere Spezifität), und noch nie besuchte Links erscheinen
   weiß statt im gewünschten dezenten Grau, bis man draufklickt. */
.footer-link:link,
.footer-link:visited {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--text);
}

/* Zeilen unter dem Kamerabild (Zeit-Navigation, Zeitraffer-/Zurück-Link,
   Cross-Links/Copyright): einheitlicher margin-top von 8px zwischen allen
   Zeilen und einheitliche Schriftgröße (12px), damit der Zeilenabstand
   überall gleich wirkt. .webcam-links bekommt bewusst mehr Abstand (siehe
   dort, Chat 30.07.2026) - deshalb hier raus aus der gemeinsamen Regel. */
.webcam-nav,
.webcam-current {
    margin-top: 8px;
}

/* Zeit-Navigation: "minus 15min" steht immer in der linken Spalte an
   fester Position (rechtsbündig zur Mitte hin), "plus 15min" erscheint
   nur beim Zeitreisen in der rechten Spalte (linksbündig zur Mitte hin).
   Durch das 2-Spalten-Grid bleibt "minus 15min" an derselben Stelle,
   auch wenn die rechte Spalte leer ist - kein Springen/Umbruch. */
.webcam-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    padding: 0 3%;
}
.webcam-nav .slot-left {
    text-align: right;
}
.webcam-nav .slot-right {
    text-align: left;
}
.webcam-nav a,
.webcam-current a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
.webcam-nav a:hover,
.webcam-current a:hover {
    color: var(--text);
}

/* Zeile mit "Zeitraffer der letzten Stunden" bzw. (beim Zeitreisen)
   "zum aktuellen Bild" - immer vorhanden, nur der Text/Link wechselt,
   damit der Zeilenabstand zu den Nachbarzeilen konstant bleibt. */
.webcam-current {
    display: flex;
    justify-content: center;
    padding: 0 3%;
}

.webcam-links {
    /* groesserer Abstand nach oben zum Zeitraffer-Link drüber (etwa ein
       halber Zeilenumbruch zusaetzlich, siehe Chat 30.07.2026), damit sich
       die Cross-Link-Zeile sichtbar davon absetzt. */
    margin-top: 14px;
    padding: 0 3%;
    margin-bottom: 16px;
}
.webcam-links .footer-link {
    margin: 0;
}

/* "aktuelles Wetter Zschopau" + "Temperaturstatistik seit 2015" nebeneinander
   statt untereinander (siehe Chat 30.07.2026) - deutlicher Abstand (gap)
   dazwischen, damit klar erkennbar bleibt, dass es zwei getrennte Links
   sind. flex-wrap als Sicherheitsnetz: passt es auf einem schmalen Display
   doch nicht nebeneinander, bricht die Zeile sauber um statt zu überlaufen. */
.webcam-links-haupt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 22px;
}
.webcam-links-haupt .footer-link {
    display: inline-block;
}

/* Kurzfassung der Linktexte ("aktuelles Wetter" / "Temperaturstatistik"
   ohne "Zschopau"/"seit 2015") - auf schmalen Displays (iPhone) passen die
   langen Texte nicht nebeneinander in eine Zeile (siehe Chat 30.07.2026).
   Per Default steht die Langfassung da, ab 420px oder schmaler wird auf
   die Kurzfassung umgeschaltet. */
.webcam-links-haupt .text-kurz {
    display: none;
}
@media (max-width: 420px) {
    .webcam-links-haupt .text-lang {
        display: none;
    }
    .webcam-links-haupt .text-kurz {
        display: inline;
    }
    /* Zeitraffer-Seite: "Webcam Zschopau - " vor der Überschrift auf
       schmalen Displays weglassen, nur "Zeitraffer der letzten Stunden"
       stehen lassen (siehe Chat 30.07.2026). */
    #rahmen h1 .text-lang {
        display: none;
    }
}

/* Copyright-Zeile "bereitgestellt durch DataSE GbR": bewusst aus dem
   normalen Fluss genommen und unten rechts am Fensterrand fixiert (mit
   kleinem Sicherheitsabstand, nicht ganz am Rand), statt Teil der
   zentrierten Link-Spalte zu sein (siehe Chat 30.07.2026). */
.webcam-copyright {
    position: fixed;
    right: 10px;
    bottom: 8px;
    margin: 0;
    text-align: right;
}

/* Bild-Stapel (aktueller-tag.html): aktuelles Standbild (Platzhalter),
   Zeitraffer-GIF und Lade-Kreis liegen alle exakt übereinander in derselben
   Grid-Zelle (siehe Chat 30.07.2026). Solange das GIF lädt, ist nur das
   Standbild + der Lade-Kreis sichtbar (das GIF selbst ist per
   visibility:hidden unsichtbar, nimmt aber schon seinen Platz ein); sobald
   das GIF fertig geladen ist, blendet das begleitende JS das GIF ein und
   Standbild+Lade-Kreis aus. Weil beide Bilder denselben Stapel (dieselbe
   Breite) nutzen, werden sie immer gleich groß dargestellt - kein
   sichtbarer Sprung beim Umschalten. */
#bild-stapel {
    display: grid;
}
.stapel-bild {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
}
/* WICHTIG: auf #bild-stapel scoped, nicht einfach "#bild" allein - sonst
   waere auch das (unabhaengige) #bild auf index.html/webcam-Live-Seiten
   (dasselbe id="bild") staendig unsichtbar, da dort niemand dieses
   visibility wieder aufhebt. */
#bild-stapel #bild {
    visibility: hidden;
}
#lade-spinner {
    grid-area: 1 / 1;
    width: 15%;
    max-width: 56px;
    height: auto;
    align-self: center;
    justify-self: center;
    z-index: 5;
    pointer-events: none;
}

/* Sichtbare Überschrift unter dem Bild, vor den Link-Zeilen - bewusst
   kompakt gehalten (gleiche Schriftgröße wie die Link-Zeilen darunter),
   damit sie im platzknappen, fest-hohen Layout nicht zu viel Raum
   wegnimmt und das Kamerabild optisch im Vordergrund bleibt. */
#rahmen h1 {
    /* eher eine Unterschrift/Bildunterschrift als eine Überschrift -
       deshalb nah ans Bild gerückt, aber 0 wirkte zu eng direkt anliegend
       (siehe Chat 30.07.2026) - 6px als kleiner, bewusster Abstand. */
    margin-top: 6px;
    line-height: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 0;
    padding: 0;
    text-align: center;
}

/* Visuell verstecktes <h1> - liefert Suchmaschinen/Screenreadern eine
   echte Seitenüberschrift, ohne auf dieser bewusst bildlastigen,
   platzknappen Seite Raum wegzunehmen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pull-to-Refresh-Anzeige (siehe Script in index.html, Chat 01.08.2026:
   "durch runterziehen eine aktualisierung erzwingen eventuell mit dem
   loader.png als layer drüber"). */
#pull-refresh-overlay {
    position: fixed;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    transform: translateY(-70px);
    transition: transform 0.15s ease-out;
    z-index: 1000;
    opacity: 0.85;
    pointer-events: none;
}
#pull-refresh-overlay img {
    width: 100%;
    height: 100%;
    display: block;
}
#pull-refresh-overlay.bereit img,
#pull-refresh-overlay.laedt img {
    animation: pull-refresh-spin 0.8s linear infinite;
}
@keyframes pull-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}