/* ===== Schmale Fenster ===================================================
   Das Portal hatte in style.css genau zwei Media Queries, eine davon nur
   fuer Bewegungsreduktion. Die Seitenleiste war bei jeder Fensterbreite
   fest 252 Pixel breit, und .grid-2 blieb immer zweispaltig.

   Im Browser gemessen, ein Eingabefeld im zweispaltigen Raster:

       Fenster 1400 px  ->  Feld 493 px
       Fenster  900 px  ->  Feld 243 px
       Fenster  600 px  ->  Feld  93 px
       Fenster  420 px  ->  Feld  65 px

   Unter etwa 900 Pixeln war damit nichts mehr zu bedienen.

   Drei Stufen:
     bis 1024 px  Leiste wird zur Symbolspalte, Raster einspaltig
     bis  720 px  Leiste faehrt seitlich ein, Knopf oben links
     bis  520 px  auch die Kennzahlen untereinander

   Das !important steht hier mit Absicht: die Raster sind in den einzelnen
   Seiten definiert, teils direkt im style-Attribut. Bei dieser Breite ist
   eine Spalte keine Geschmacksfrage mehr, sondern die einzige Fassung, in
   der man das Feld noch treffen kann.                                    */

/* ---------------------------------------------------- bis 1024: Symbolspalte */
@media (max-width: 1024px) {
    .sidebar {
        width: 66px !important;
        padding-left: .5rem;
        padding-right: .5rem;
    }
    /* Die Beschriftung ist ein blosser Textknoten neben dem Symbol - sie
       laesst sich nicht einzeln ansprechen. Also Schriftgroesse null fuer
       den Eintrag und die volle Groesse zurueck fuer das Symbol. */
    .sidebar .nav-item { font-size: 0; justify-content: center; gap: 0; padding: 11px 0; }
    .sidebar .nav-item i { font-size: 1.02rem; width: auto; }
    .sidebar .nav-section span { font-size: 0; }
    .sidebar .nav-section { justify-content: center; padding: 4px 0; }
    .sidebar .nav-section .gruppe-symbol { font-size: .8rem; margin: 0; }
    .sidebar .nav-chevron { display: none; }
    /* Eine Stufe mehr Spezifitaet als noetig aussieht: sidebar.js haengt
       sein Stylesheet zur Laufzeit an, also nach dieser Datei. Bei
       gleicher Spezifitaet gewinnt das spaetere - der Markenname blieb
       dadurch gross und ragte aus der Symbolspalte heraus. */
    .sidebar .sidebar-brand { font-size: 0; justify-content: center; margin-left: 0; margin-right: 0; }
    .sidebar .sidebar-brand i { font-size: 1rem; }
    .sidebar .nav-suche { display: none; }
    .sidebar-footer .nav-item { font-size: 0; }

    .main-content { padding: 1.5rem 1.25rem 3rem; }

    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

    .kpis { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tabellen brechen nicht um. Lieber in ihrem eigenen Kasten schieben
       als die ganze Seite seitlich verrutschen lassen. */
    .card table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------- bis 720: Leiste faehrt ein */
@media (max-width: 720px) {
    .sidebar {
        position: fixed !important;
        left: 0; top: 0;
        height: 100vh !important;
        width: 244px !important;
        padding: 1.1rem .9rem;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.16, 1, .3, 1);
        z-index: 900;
        box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    }
    body.nav-offen .sidebar { transform: none; }

    /* Aufgeklappt ist wieder Platz fuer die Beschriftung. */
    .sidebar .nav-item { font-size: .88rem; justify-content: flex-start; gap: 11px; padding: 9px 11px; }
    .sidebar .nav-item i { width: 18px; }
    .sidebar .nav-section span { font-size: .64rem; }
    .sidebar .nav-section { justify-content: space-between; padding: 4px 8px; }
    .sidebar .nav-chevron { display: block; }
    .sidebar .sidebar-brand { font-size: 1.1rem; justify-content: flex-start; margin: .2rem .4rem .9rem; }
    .sidebar .nav-suche { display: flex; }
    .sidebar-footer .nav-item { font-size: .88rem; }

    .nav-schatten {
        position: fixed; inset: 0; z-index: 899;
        background: rgba(4, 5, 9, .6);
        opacity: 0; pointer-events: none;
        transition: opacity .22s;
    }
    body.nav-offen .nav-schatten { opacity: 1; pointer-events: auto; }

    #nav-knopf {
        display: flex !important;
        position: fixed; top: 12px; left: 12px; z-index: 901;
        width: 42px; height: 42px;
        align-items: center; justify-content: center;
        border-radius: 11px;
        background: var(--card-2, #181b26);
        border: 1px solid var(--line-2, rgba(255, 255, 255, .12));
        color: var(--text-main, #eef0f7);
        font-size: 1.05rem; cursor: pointer;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    }

    /* Platz fuer den Knopf, damit er nicht auf der Ueberschrift liegt. */
    .main-content { padding: 4.6rem 1rem 3rem; }
    h1 { font-size: 1.35rem; }
}

/* ------------------------------------------------------- bis 520: alles untereinander */
@media (max-width: 520px) {
    .kpis, .stats-grid { grid-template-columns: 1fr !important; }
    .main-content { padding: 4.6rem .75rem 3rem; }
    .card { padding: 1.15rem; }
}

/* Der Knopf existiert immer, ist aber nur im schmalen Fenster zu sehen. */
#nav-knopf { display: none; }