/* allgemeine Einstellungen - Farben an temperatur-statistik-zschopau-ab-2015.html/style.css angeglichen
   (siehe :root dort), damit beide Seiten optisch zusammengehören. Die
   feste Höhe/Breite von #rahmen bleibt bewusst unverändert - index.html
   ist als Einzelbildschirm-Webapp (kein Scrollen auf dem iPhone) konzipiert. */

:root {
    --bg: #0d0d0f;
    --bg-card: #17171b;
    --border: #2c2c33;
    --text: #e8e8ea;
    --text-dim: #8b8b93;
    --akzent: #3768FF;
    --erfolg: #39AF6D;
    --fehler: #CF327C;
    --warnung: #FF9830;
}

/* Wichtig: Wegen der Chart-Stapelung per position:relative + negativem
   top (siehe index.html) reserviert der Dokumentenfluss weit mehr Höhe,
   als visuell sichtbar ist (jedes Chart-div "belegt" trotz Hochschieben
   weiter seine volle Höhe im Fluss). Deshalb standardmäßig overflow
   hidden - sonst gäbe es praktisch immer einen Scrollbalken, obwohl das
   sichtbare Panel locker ins Fenster passt. Reicht die Fensterhöhe fürs
   Panel wirklich nicht aus, schaltet das Script in index.html gezielt
   auf overflow:auto um. */
html, body {
    height: 100%;
    overflow: hidden;
}

html { -webkit-text-size-adjust: none;
     }

body	{
         min-width:320px;
         max-width:1024px;
         padding:0px;
         padding-top:2vh;
         margin:0px auto;
         background-color: var(--bg);
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         /* Zusätzlich zu <center> auch per Flexbox horizontal zentrieren -
            robuster als sich allein auf das veraltete <center>-Tag zu
            verlassen. Die Panel-Größe bleibt dabei immer gleich (keine
            Zoom-Skalierung je nach Displaybreite mehr). */
         display: flex;
         flex-direction: column;
         align-items: center;
        }

div#rahmen {
                 /* WICHTIG (siehe Chat, 30.07.2026): #rahmen NICHT selbst
                    positionieren/z-index geben - #rahmen hat einen
                    UNDURCHSICHTIGEN Kartenhintergrund (background-color
                    unten). Würde #rahmen als Ganzes vor die Chart-divs
                    gezogen, verdeckt dieser undurchsichtige Hintergrund die
                    komplette Karte VOR den Charts (ausprobiert - Charts
                    dadurch komplett unsichtbar geworden). Stattdessen
                    bekommen NUR #logo und die Datum/Uhrzeit-Zeile selbst ihr
                    eigenes z-index (siehe unten) - die haben keinen eigenen
                    Hintergrund, dadurch schiebt sich nur der TEXT nach vorne. */
                 height:620px;
                 /* border-box statt (Standard) content-box: sonst käme der
                    5px-Rahmen zur Höhe dazu (Höhe+10px echte Höhe) - das
                    war der Grund für den unnötigen Scrollbalken, obwohl
                    das Fenster eigentlich gereicht hätte. */
                 box-sizing: border-box;
                 display: table-cell;
                 vertical-align: middle;
                 background-color: var(--bg-card);
                 padding:0px;
                 margin:0px;
                 border:5px solid var(--border);
                 margin-top:0px;
                 width:295px;
                 border-radius:20px;
                 box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
                 }

/* Kleine, dezente Überschrift über Datum/Uhrzeit - nimmt kaum Platz weg,
   damit die feste Panel-Höhe nicht neu austariert werden muss. */
#rahmen h1 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    margin: 0 0 14px;
    padding: 0;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#logo {
                 /* position:relative + z-index noetig (siehe Chat, 30.07.2026):
                    die Chart-divs darunter nutzen ebenfalls position:relative
                    (fuer die negativen top-Offsets) und werden dadurch OHNE
                    z-index hier immer ueber #logo gezeichnet, egal in
                    welcher DOM-Reihenfolge - das liess z.B. die grauen
                    Tages-Gitterlinien der Charts sichtbar ueber den großen
                    Temperatur-/Feuchte-/Luftdruck-Zahlen liegen. */
                 position:relative;
                 z-index:2;
                 letter-spacing:4px;
                 text-decoration:none;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                 color: var(--akzent);
                 font-weight:bold;
                 font-size:60px;
                 line-height: 1em;
                }
@media screen and (max-width: 717px) {
body {
         background-color: var(--bg);
}
div#rahmen {
                 background-color: var(--bg);
                 border:0px solid var(--border);
                 box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

}

/* Footer-Link zur Statistik-Seite - gleiches Design wie der Rück-Link
   dort (siehe .footer-link in style.css), damit beide Seiten optisch
   zusammengehören. */
.footer-link,
.footer-link:visited {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.footer-link:hover {
    color: var(--text);
}

/* 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") - gleiches loader.png wie bei Webcam und
   Spritpreise, damit alle Web-Apps dasselbe Lade-Symbol zeigen. */
#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); }
}