#head {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
}
body.isMobile #head {
    height: unset;
    line-height: 1em;
}

#sprachen, #versionNumber {
    font-size: 10px;
    font-weight: normal;
}

/* Flaggen, Versionsnummer und die Icons rechts daneben (Warndreieck, Info) stehen auf einer
   Linie. Ohne align-items richtet die Zeile ihre Kinder oben aus ("normal"): die 16px hohen
   Icons sassen dann auf top 5, die Textmitte liegt aber bei 17 -- die Icons schwebten
   sichtbar ueber der Schrift.
   Die Zeilenhoehe bleibt bei 25.2px und #head damit bei 80px (mobil 70px); das ist Pflicht,
   weil global.js --mobile-header-height aus head.offsetHeight berechnet. */
#headVersionRow {
    align-items: center;
}

/* Der Sprachen-Block ist ueber seine line-height 25.2px hoch, die Flaggen sitzen darin oben
   und liessen sich durch das Zentrieren der Zeile nicht mitnehmen. Mit line-height: 0 ist der
   Block genau so hoch wie die Flaggen und wird als Ganzes zentriert -- gemessen: Flaggen,
   Warndreieck und Info-Icon liegen danach alle bei 17.6, die Textmitte bei 17. */
#headVersionRow #sprachen {
    line-height: 0;
}

#topRightInfoContainer {
    margin-right: 15px;
    margin-top: 5px;
    /* Bezugsrahmen für die an die Unterkante geheftete Icon-Zeile. */
    position: relative;
}

body.isMobile #topRightInfoContainer {
    margin-right: 5px;
    margin-bottom: unset;
    margin-top: 5px;
}

body.isMobile #headTopRight {
    min-width: 0;
    overflow: hidden;
}

/* Die drei Zeilen von #topRightInfoContainer brauchen zusammen 92px, #head ist
   aber bewusst fest 80px hoch. Die Icon-Zeile wird deshalb aus dem Fluss
   genommen und an die Unterkante geheftet — nur so bleiben Chat- und
   Wiedervorlagen-Icon innerhalb der Kopfzeile, ohne die Zeilen darüber
   (Sprachen/Version, "Eingeloggt als") zu verschieben. */
#headerSchoolYearRow {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Mobil ist #head nicht fixiert, sondern wächst mit dem Inhalt (70px), und
   global.js leitet daraus --mobile-header-height für alle Sticky-Elemente ab.
   Die Zeile muss dort im Fluss bleiben, sonst schrumpft die Kopfzeile. */
body.isMobile #headerSchoolYearRow {
    position: static;
}

/* Nur die Icons in der Kopfzeile: auf classRegister.php liegen dieselben IDs in
   einer eigenen Zeile, die die Baseline-Ausrichtung der Nachbar-Icons braucht. */
#headerSchoolYearRow #mailboxIcon,
#headerSchoolYearRow #wdvlIcon {
    width: 24px;
    /* Auf der Textbaseline reserviert das Inline-Bild darunter noch
       Descender-Raum und rutscht damit unter die Kopfzeilenkante. */
    vertical-align: bottom;
}

/* Mobil bleibt die Baseline-Ausrichtung, weil der Descender-Raum dort in die
   inhaltsgetriebene Höhe von #head eingeht (siehe oben). */
body.isMobile #headerSchoolYearRow #mailboxIcon,
body.isMobile #headerSchoolYearRow #wdvlIcon {
    vertical-align: baseline;
}

#schulLogo {
    max-height: 80px;
    width: auto;
    margin-right: 5px;
}