/* Korrekturen am Theme für kleine Bildschirme (und das Logo überall).
 *
 * Geprüft auf der Startseite nach dem Login bei 390 und 360 px Breite:
 *
 *   Das Theme zwingt das Logo in 36 x 36 px. Querformat-Logos einer
 *   Einrichtung werden dadurch gestaucht und unlesbar. Die Höhe bleibt, die
 *   Breite folgt dem Bild - quadratische Logos sehen aus wie vorher.
 *
 *   Die schwebenden Knöpfe unten rechts (Farbschema, nach oben) lagen beim
 *   Scrollen immer wieder genau auf "Weiter" und "Start" der Kurskarten.
 *   Nach links verschoben verdeckten sie auf der Kursseite den Textanfang.
 *   Auf dem Handy entfallen sie deshalb ganz.
 *
 *   Gruppenköpfe mit langem Namen brachen um; die Kurszahl schrumpfte dabei
 *   zu "4..". Sie darf nicht mehr schrumpfen, der Link bleibt einzeilig und
 *   bekommt eine Trefferfläche, die sich mit dem Finger treffen lässt.
 */

.adminuiux-header .navbar .navbar-brand img {
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.gruppenkopf .badge {
    flex-shrink: 0;
}

.gruppenkopf-link {
    white-space: nowrap;
    padding: .5rem 0;
}

@media (max-width: 767.98px) {
    /* Breiter, und die Kopfzeile bricht bei 360 px in zwei Zeilen um */
    .adminuiux-header .navbar .navbar-brand img {
        max-width: 88px;
    }

    .adminuiux-header .navbar > .container-fluid {
        flex-wrap: nowrap;
    }

    /* Schwebende Knöpfe: rechts verdeckten sie "Weiter"/"Start", links den
       Textanfang. Auf dem Handy scrollt man ohnehin mit dem Finger nach oben. */
    .schwebeknoepfe {
        display: none !important;
    }

    .gruppenkopf-link {
        margin-left: 0 !important;
    }
}

/* Kursseite (templates/studiengang/index.tpl) auf dem Handy.
 *
 * Am Desktop stehen Kurskopf, Beschreibung und Material links, die
 * Seminarliste rechts. Untereinander gestapelt kam die Liste ganz ans Ende -
 * nach rund drei Bildschirmen Beschreibung und Material, und der Kurstitel
 * erst nach Zertifikat und Lernstand. Hier wird die Seite zur Spalte mit
 * fester Reihenfolge: Hinweis, Kurskopf, Ansicht und Liste, Ziel, Lernstand,
 * dann Beschreibung und Material.
 */
@media (max-width: 767.98px) {
    #main-content:has(.ks-haupt) {
        display: flex;
        flex-direction: column;
    }

    #main-content:has(.ks-haupt) > * { order: 9; }
    #main-content .ks-oben    { order: 0; }
    #main-content .ks-kopf    { order: 1; }
    #main-content .ks-ansicht { order: 2; }
    #main-content #sicht-karte,
    #main-content #sicht-liste { order: 3; }
    #main-content .ks-ziel    { order: 4; }
    #main-content .ks-profil  { order: 5; }
    #main-content .ks-reiter,
    #main-content #description,
    #main-content #projectsnresources { order: 6; }

    /* Die Zwischenebenen verschwinden, ihre Karten reihen sich direkt ein */
    #main-content .ks-haupt,
    #main-content #sicht-links {
        display: contents;
    }

    #main-content #sicht-liste {
        padding-left: 0;
        padding-right: 0;
    }

    /* Keine Scrollbox in der Seite: die Liste steht in voller Länge */
    #main-content .ks-liste {
        height: auto !important;
        overflow: visible !important;
    }

    /* Die Nummer steht schon in der Reihenfolge; die Titel bekommen die Breite */
    #main-content .ks-nr {
        display: none;
    }

    /* Beschreibung zugeklappt: ein paar Zeilen, dann "Mehr lesen" */
    #main-content .ks-text:not(.offen) {
        max-height: 11rem;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
        mask-image: linear-gradient(to bottom, #000 60%, transparent);
    }
}

/* Kursleitungsseite (templates/autor/index.tpl) auf dem Handy: kompakte
 * Zeilen statt großer Karten. Bild und Kurztext entfallen, der Titel, die
 * Themengruppe, "nicht belegt" und die Zahlen bleiben. */
@media (max-width: 767.98px) {
    .autor-kurs {
        margin-bottom: .5rem !important;
    }

    .autor-kurs .autor-kurs-bild,
    .autor-kurs .autor-kurs-text {
        display: none;
    }

    .autor-kurs .card-body {
        padding: .75rem 1rem;
    }

    .autor-kurs .card-body > * {
        margin-bottom: 0 !important;
    }

    .autor-kurs .card-body > .d-flex {
        margin-bottom: .15rem !important;
    }

    .autor-kurs .card-body .mt-auto {
        padding-top: 0 !important;
    }
}