/* Nur fuer die Schlachtensee-Seite. Desktop bleibt unveraendert;
   auf schmalen Geraeten (Handy) bricht das feste 960px-Layout auf. */

/* Wrapper um die beiden Button-Gruppen. Auf dem Desktop "unsichtbar"
   (display: contents), damit das bestehende Float-Layout exakt erhalten
   bleibt; auf dem Handy wird daraus je ein Flex-Container (s. unten). */
.btngroup { display: contents; }

/* Menue-Umschalter (per JS eingefuegt) nur auf dem Handy sichtbar */
#navizeile .nav-toggle { display: none; }

/* Zufaelliger Daten-Fakt: auf dem Desktop links neben dem Hinweistext
   (der rueckt per Basis-CSS 300pt ein, dieser Platz wird hier genutzt) */
#seefakt {
    float: left;
    width: 240pt;
    margin-left: 15pt;
    padding: 12pt;
    padding-top: 20pt;
    font-style: italic;
    color: rgb(110,110,110);
}
/* Basis-CSS setzt clear:left auf #fusszeileinnen - hier aufheben,
   damit der Fakt daneben stehen kann (gilt nur auf den See-Seiten) */
#fussbereich { clear: left; }
#fussbereich #fusszeileinnen { clear: none; }

@media (max-width: 980px) {

    /* Feste Breiten der gemeinsamen Seitenstruktur aufloesen */
    #kopfzeile,
    #navizeile,
    #hauptbereich,
    #schriftteil,
    #fusszeile {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    #hintergrundsee {
        background-size: contain, 90px 180px;
    }

    #hauptbereich {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Navigation: eingeklappt hinter einem "Menue"-Knopf, damit der Inhalt
       oben bleibt. Erst beim Antippen klappt die vertikale Liste auf. */
    #navizeile .nav-toggle {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 4px 0;
        padding: 9px 14px;
        text-align: left;
        font: inherit;
        color: rgb(80,80,80);
        background: rgba(220,220,220,0.7);
        border: 1px solid rgb(200,200,200);
        border-radius: 7px;
        cursor: pointer;
    }
    #navizeile ul { overflow: visible; display: none; }
    #navizeile.nav-open ul { display: block; }

    #navizeile li { float: none; width: 100%; }
    #navizeile li a { width: auto; display: block; text-align: left; padding-left: 14px; }
    #navizeile li ul { position: static; left: auto; width: 100%; }
    #navizeile li ul li a { padding-left: 32px; }

    /* Diagramme untereinander/nebeneinander, zentriert und flexibel */
    #showteil {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        align-items: flex-start;
        padding-top: 10px;
        min-height: 0;
    }
    #verlauf, #tmeter { max-width: 100%; }

    /* Bedienknoepfe: zwei getrennte Gruppen (Jahr/Monat/Woche/Tag und
       Zurueck/Vor). Jede Gruppe haelt zusammen, Gruppen brechen als Ganzes um. */
    #temperaturschalter {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        justify-content: center;
        padding-top: 10px;
    }
    .btngroup {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        flex: 0 0 auto;
    }
    #temperaturjahr,
    #temperaturmonat,
    #temperaturwoche,
    #temperaturtag,
    #temperaturzur,
    #temperaturvor {
        float: none;
        margin-left: 0;
        width: auto;
        min-width: 70px;
        flex: 0 0 auto;
    }

    /* Fusszeilen-Text nicht mehr weit eingerueckt */
    #fusszeileinnen {
        margin-left: 8px;
        margin-right: 8px;
    }

    /* Daten-Fakt auf dem Handy oberhalb des Hinweistexts,
       mit Luft zu den Buttons darueber */
    #seefakt {
        float: none;
        width: auto;
        margin: 8px;
        margin-top: 24px;
        padding: 8px;
    }
}