/****************************************************************************
 * easy4me Header (wie alte Live-Seite)
 * Zeile 1: Logo | Digitale Grundbildung + KI | Office-Umschalter
 * Zeile 2: Modul-Kacheln (Sprite easy4me-module.svg, 10 Kacheln untereinander)
 * Office-Variante: html.office_libre (gesetzt per Inline-Script, functions.php)
 ****************************************************************************/

/* Topbar zweizeilig statt fixer 4rem-Leiste -> scrollt mit wie auf der Live-Seite */
.topbar { position: relative; height: auto; background-color: transparent; box-shadow: none; }
.wrapper { padding-top: 0; }
.e4m_site_description { margin: .25rem 0 0; color: #16b0ff; font-size: .875rem; }
.e4m_header { padding-top: .75rem; padding-bottom: .75rem; row-gap: .75rem; }

.e4m_header .logo_wrapper picture.data_ratio { width: 10rem; height: 2.5rem; }
@media screen and (min-width:64em) {
    .e4m_header .logo_wrapper picture.data_ratio { width: 22rem; height: 4rem; }
}

/* Werkzeuge rechts oben */
.e4m_header_tools { display: flex; justify-content: flex-end; align-items: flex-end; gap: 1.5rem; }

.e4m_quicklinks { display: flex; align-items: flex-end; }
.e4m_quicklinks_group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 13rem; }
.e4m_quicklinks_group + .e4m_quicklinks_group { margin-left: 10px; padding-left: 12px; border-left: 1px solid #ccc; }
.e4m_quicklinks_group strong { flex: 0 0 100%; text-align: center; font-size: .875rem; }
.e4m_quicklinks_group img { display: block; height: 45px; width: auto; }

.e4m_office_switch { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.e4m_office_switch a { display: block; width: 2.5rem; aspect-ratio: 67 / 80; background-position: center; background-size: contain; background-repeat: no-repeat; }
@media screen and (min-width:40em) {
    .e4m_office_switch a { width: 4.2rem; }
}
.e4m_switch_ms { background-image: url(../img/office-ms-inactive.png); }
.e4m_switch_libre { background-image: url(../img/office-libre-inactive.png); }
html:not(.office_libre) .e4m_switch_ms { background-image: url(../img/office-ms-active.png); }
html.office_libre .e4m_switch_libre { background-image: url(../img/office-libre-active.png); }

/* Nur das Menue der aktiven Office-Variante zeigen */
.navigation_wrapper .menu.e4m_menu_libre,
html.office_libre .navigation_wrapper .menu.e4m_menu_ms { display: none; }
html.office_libre .navigation_wrapper .menu.e4m_menu_libre { display: flex; }

@media screen and (min-width:64em) {
    .e4m_header .navigation_wrapper { padding-top: 0; padding-bottom: 0; }
}

/* Modul-Kacheln (auch im mobilen Menue als Kachel-Raster) */
.navigation_wrapper .menu.e4m_module_menu { flex-direction: row; flex-wrap: wrap; gap: 8px; }
/* Schrift skaliert mit der Kachelbreite (102px -> ~11px); lange Titel haben ­ im Menue */
.e4m_module_menu > li { flex: 1 1 0; min-width: 4.5rem; max-width: 102px; container-type: inline-size; }
.e4m_module_menu > li > a {
    display: flex; align-items: flex-end; justify-content: center;
    aspect-ratio: 102 / 71; padding: 0 2px 5px;
    background: url(../img/easy4me-module.svg) 0 0 / 100% auto no-repeat;
    color: #fff; font-size: 10.5cqw; font-weight: 700; line-height: 1.1;
    text-align: center; text-decoration: none; hyphens: manual;
}
.e4m_module_menu > li > a:hover,
.e4m_module_menu > li > a:focus,
.e4m_module_menu > .current-menu-item > a,
.e4m_module_menu > .current-menu-ancestor > a { color: #ccc; }

/* Mobil/Tablet (Hamburger-Menue): immer 2 Kacheln nebeneinander, Menue max. 30rem breit */
@media screen and (max-width:63.99875em) {
    .e4m_header .navigation_wrapper .menu_wrapper { max-width: 30rem; padding-top: 5.5em; }
    .e4m_module_menu > li { flex: 0 0 calc(50% - 4px); max-width: none; min-width: 0; }
    .e4m_module_menu > li > a { font-size: min(10.5cqw, .9375rem); }
}

/* Mobil/Tablet: Header nur Logo + Hamburger; Office-Umschalter (oben) und
   DG/KI (unten) stehen im Burger-Menue (.e4m_mobile_tools, functions.php) */
.e4m_mobile_tools { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; align-items: center; }
.e4m_mobile_office { margin-bottom: 1.25rem; }
.e4m_mobile_quicklinks { margin-top: 1.5rem; }
.e4m_mobile_tools_title { margin-bottom: .5rem; font-size: .875rem; font-weight: 700; }
.e4m_mobile_tools .e4m_office_switch { gap: 1rem; }
.e4m_mobile_tools .e4m_office_switch a { width: 3.5rem; }
.e4m_mobile_tools .e4m_quicklinks { justify-content: center; }

/* Sprite-Position: Kachel n von 10 -> n/9 * 100% */
.e4m_module_menu > li.m8_1 > a { background-position: 0 0; }
.e4m_module_menu > li.m2 > a { background-position: 0 11.111%; }
.e4m_module_menu > li.m3 > a { background-position: 0 22.222%; }
.e4m_module_menu > li.m4 > a { background-position: 0 33.333%; }
.e4m_module_menu > li.m5 > a { background-position: 0 44.444%; }
.e4m_module_menu > li.m6 > a { background-position: 0 55.556%; }
.e4m_module_menu > li.m7 > a { background-position: 0 66.667%; }
.e4m_module_menu > li.m8 > a { background-position: 0 77.778%; }
.e4m_module_menu > li.m9 > a { background-position: 0 88.889%; }
.e4m_module_menu > li.m10 > a { background-position: 0 100%; }