/* ==========================================================
   EKS LAYOUT / THEME CSS
   ========================================================== */

/* ===== Variablen =====
   Farben, Radius und Schrift kommen aus eks-brand-tokens.css */
:root {
  --eks-bar-height: 48px;
  --eks-pad-x: 20px;
  --eks-gap: 48px;
  --eks-iframe-nudge: 50px;
  --eks-header-mid-gap: 16px;        /* Abstand Breadcrumb <-> Suchfeld */
  --eks-header-menu-font-size: 12pt; /* Burger- UND Breadcrumb-Dropdowns - wieder auf das einheitliche 12pt der restlichen Seite zurückgesetzt */
  --eks-sidebar-width: 400px;        /* Rechte Spalte (Moodle-Blöcke + Suchfeld/Bearbeiten/Initialienkreis im Header) - bleibt IMMER exakt gleich breit, egal wie sich das Fenster verändert. Die sichtbaren Kacheln selbst sind (--eks-sidebar-width - 2 * --eks-gap) breit, siehe .eks-center weiter unten. */

  /* Hilfs-Variablen */
  --eks-rails: calc((var(--eks-bar-height) + var(--eks-gap)) * 2);
  --eks-viewport-free: calc(100vh - var(--eks-rails));
}

/* ===== Schriftart & Schriftgröße global ===== */
body,
#region-main,
#theme_adaptable-drawers-sidepost {
  font-family: var(--eks-font-family) !important;
  font-size: var(--eks-font-size) !important;
  color: var(--eks-text-on-light);
}

/* ===== Links: standardmäßig nie fett, nur bei Hover/Fokus fett =====
   Gilt für alle Links auf der Seite (Kopf-/Fußzeile, Nutzermenü,
   Bearbeiten-Umschalter-Umgebung, Moodle-Blöcke). Das Pendant für die
   5 Menü-Kacheln im iFrame liegt in menu/0.css, da CSS-Variablen nicht
   über iFrame-Grenzen hinweg gelten. */
a {
  font-weight: var(--eks-font-weight-body) !important;
}
a:hover,
a:focus-visible {
  font-weight: var(--eks-font-weight-hover) !important;
}

/* ===== Kopf-/Nav-Bereiche verstecken ===== */
#adaptable-page-header-wrapper,
#header2.above-header.main-header-row,
#main-navbar,
#page-second-header,
#page-navbar,
.primary-navigation,
.secondary-navigation,
.tertiary-navigation,
.moremenu,
.moremenu .nav-tabs,
.moremenu.navigation,
.nav.more-nav.nav-tabs,
.main-navbar,
#page-header,
.page-header,
.page-header-headings,
#page-header-wrapper,
#page-navbar,
.navbar,
.navbar.fixed-top,
.navbar-expand,
.navbar-dark,
.navbar-light,
.custom-menu,
#custommenu,
.navbar-nav,
.rui-topbar,
.rui-navbar,
.rui-pageheader,
.topbar,
#topbar,
.breadcrumb,
nav.breadcrumb,
.context-header,
.page-context-header,
.course-header,
.page-navbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* ===== Kursindex/Drawer links raus ===== */
#theme_adaptable-drawers-courseindex,
#courseindex,
.courseindex,
#course-index-placeholder,
.drawer.drawer-left,
.drawer-left,
[data-region="fixed-drawer"][data-preference="drawer-open-index"],
.drawer-toggles,
.drawer-toggler.drawer-left-toggle,
button[data-target="theme_adaptable-drawers-courseindex"],
button[aria-controls="courseindex"],
button[data-action="toggle-drawer"][data-side="left"],
button[data-action="toggle-drawer"][data-target="courseindex"],
a[href*="courseindex"],
[title="Kursindex öffnen"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
}

#theme_adaptable-drawers-primary {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
}
button[data-target="theme_adaptable-drawers-primary"],
.drawer-toggler.open-nav {
  display: none !important;
}

/* ===== Grundlayout ===== */
html, body { height: 100%; }
body {
  margin: 0 !important;
  overflow: hidden !important;
  background: #fff;
  padding: 0 !important;
}

#page {
  height: 100vh !important;
  overflow: hidden !important;
  padding-top: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  padding-bottom: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#maincontainer, .outercont, #page-content, #region-main-box,
#region-main, .container, .row, [class*="col-"] {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#page-footer, #back-to-top { display: none !important; }

/* ===== Scrollbarer Hauptbereich ===== */
#region-main-box,
#region-main {
  height: var(--eks-viewport-free) !important;
  max-height: var(--eks-viewport-free) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

#region-main-box {
  width: calc(100% - var(--eks-sidebar-width)) !important;
  max-width: calc(100% - var(--eks-sidebar-width)) !important;
  margin: 0 !important;
}
#region-main {
  width: 100% !important;
  max-width: 100% !important;
}

/* Verhindert, dass eine zu groß eingebettete iFrame-Höhe (z. B. das
   Startseiten-5er-Menü) einen Scrollbalken in #region-main erzwingt.
   Dessen Breite (~15-17px, browserabhängig) würde sonst von der für
   das iFrame verfügbaren Breite abgezogen - das iFrame wird dadurch
   schmaler als erwartet, wodurch NUR der Weißraum zwischen den
   Kacheln und dem Trennstrich größer wirkt als die drei anderen
   weißen Bereiche (die alle außerhalb des iFrames liegen und davon
   nicht betroffen sind). max-height statt height, damit ein iFrame,
   das ohnehin schon kleiner ist, nicht künstlich vergrößert wird. */
#region-main iframe {
  display: block !important;
  max-height: var(--eks-viewport-free) !important;
}

/* ===== Fixer Header ===== */
#eks-fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200000;
  background: var(--eks-accent);
  color: var(--eks-text);
  height: var(--eks-bar-height);
  padding: 0 var(--eks-pad-x);
  font: inherit;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

#eks-fixed-header * {
  margin: 0; padding: 0; border: 0;
  box-sizing: border-box;
  line-height: 1;
}

/* ===== Kopfzeile: robuster Flex-Fluss statt fester Prozent-/vw-Werte =====
   Feste Elemente (Burger+eksikon, Suchfeld, Bearbeiten-Bereich+Name)
   behalten IMMER denselben Platz (flex: 0 0 auto - wächst nicht,
   schrumpft nicht). Der Breadcrumb dazwischen (#eks-header-breadcrumb)
   ist das EINZIGE Element mit flex:1 - es bekommt den gesamten Rest der
   Breite und schrumpft bei Platzmangel (mit Auslassungspunkten je
   Eintrag, siehe .eks-breadcrumb-item unten), statt dass sich irgendwas
   verschiebt oder überlappt. Das ersetzt die vorherige Positionierung
   über position:absolute + feste 75%/vw-Annahmen über die Content-
   Breite, die beim Ändern der Fensterbreite zu Überlappungen führte. */
#eks-fixed-header .eks-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

#eks-left-wrap { position: relative; z-index: 1; }

#eks-fixed-header .eks-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* "eksikon" bekommt denselben festen Platz wie Burger-Symbol usw. -
   eigene Box, damit sie NIE schrumpft (siehe .eks-breadcrumb-item
   Grundregel unten, die für alle ANDEREN Breadcrumb-Glieder gilt). */
#eks-eksikon-item .eks-breadcrumb-item {
  flex-shrink: 0;
}

/* Breadcrumb-Fortsetzung ab dem 2. Glied ("Schulformen und
   Berufsfelder -> ..."), siehe zusaetzliches.html/renderBreadcrumb().
   Das EINZIGE wachsende/schrumpfende Element der Kopfzeile - bekommt
   den kompletten Rest der Breite. */
#eks-fixed-header .eks-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  /* KEIN overflow:hidden hier: würde auch die Kinder-Dropdowns
     abschneiden, die unterhalb der Zeile aufgehen (Clipping durch ein
     Elternelement betrifft auch absolut positionierte Nachkommen).
     Die Kürzung selbst passiert schon auf Höhe von .eks-breadcrumb-label
     (eigenes overflow:hidden + Ellipsis dort). */
  font-weight: var(--eks-font-weight-title);
  font-size: var(--eks-font-size-title);
  letter-spacing: .2px;
}

/* Jedes Breadcrumb-Glied steckt in einer eigenen Box mit fester
   BEVORZUGTER Breite (siehe fitBreadcrumbItems() in zusaetzliches.html,
   misst im fetten Zustand - gleiches Prinzip wie fitMenuLinks() im
   Menü-iFrame), damit fett werdender Text beim Hover/Fokus nicht
   nachfolgende Glieder verschiebt. In #eks-header-breadcrumb darf diese
   Breite aber SCHRUMPFEN (flex-shrink:1, Grundeinstellung), wenn nicht
   genug Platz da ist - der Text kürzt dann per Auslassungspunkte
   (siehe .eks-breadcrumb-label). Nur "eksikon" (siehe Regel oben) ist
   davon ausgenommen und bleibt immer in voller Breite. Gleichzeitig
   Anker für das Kinder-Dropdown darin (position:relative). */
/* height:40px + eigenes Flex-Centering, damit der untere Rand dieser
   Box (= Ankerpunkt für "top:100%" beim Kinder-Dropdown, siehe unten)
   IMMER an derselben Stelle landet wie beim Initialienkreis-Button
   (ebenfalls 40px hoch) - unabhängig von der tatsächlichen Texthöhe
   des Glieds. Ohne das started jedes Dropdown auf einer anderen Höhe,
   je nachdem wie hoch der jeweilige Auslöser selbst ist. */
#eks-fixed-header .eks-breadcrumb-item {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
}
#eks-fixed-header .eks-breadcrumb-label,
#eks-fixed-header .eks-breadcrumb-label:visited {
  display: block;
  color: var(--eks-text) !important;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Nötig, damit text-overflow:ellipsis überhaupt greift (sonst würde
     der Text bei Platzmangel umbrechen statt gekürzt zu werden). */
  white-space: nowrap;
}
/* Letztes (aktuelles) Glied fett, weil es die aktuelle Position ist -
   gilt auch für "eksikon" selbst, solange noch nichts ausgewählt wurde
   (siehe buildBreadcrumbSegments() in zusaetzliches.html, current wird
   dort für "eksikon" true, wenn (noch) keine id in der URL steht). */
#eks-fixed-header .eks-breadcrumb-label[aria-current="page"] {
  font-weight: var(--eks-font-weight-hover);
}
#eks-fixed-header .eks-breadcrumb-sep {
  color: var(--eks-text);
  opacity: .55;
  flex: 0 0 auto;
}

/* Kinder-Dropdown je Breadcrumb-Glied (z. B. bei "Schulformen und
   Berufsfelder": Abteilung 1-5, bei "eksikon": die 5 Startseiten-
   Bereiche) - öffnet bei Hover/Tastatur-Fokus über das Glied, lückenlos
   direkt darunter (kein margin-top, aus demselben Grund wie beim
   Burger-/Untermenü-Dropdown: sonst verliert die Maus auf dem Weg
   dorthin kurz den Hover). KEINE feste min-width - die Breite ergibt
   sich rein aus den Links selbst, die per fitDropdownWidth() in
   zusaetzliches.html alle auf die Breite des breitesten Eintrags im
   fetten Zustand gesetzt werden. */
#eks-fixed-header .eks-breadcrumb-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border-radius: var(--eks-box-radius);
  padding: 8px 0;
  z-index: 260000;
}
#eks-fixed-header .eks-breadcrumb-item:hover > .eks-breadcrumb-submenu,
#eks-fixed-header .eks-breadcrumb-item:focus-within > .eks-breadcrumb-submenu {
  display: flex;
}
/* WICHTIG: #eks-fixed-header-Präfix (statt nur .eks-breadcrumb-submenu
   a) - genau wie bei #eks-burgermenu a. Ohne diesen ID-Anteil war die
   Spezifität niedriger als beim Burger-Menü, wodurch Moodles eigenes
   Theme-CSS auf der echten Seite (im lokalen Test ohne Moodle-CSS
   nicht sichtbar!) padding/font-size hier überschrieben hat - dadurch
   wirkten diese Menüs enger/kleiner als das Burger-Menü. Zusätzlich
   !important auf padding/font-size als weitere Absicherung. */
#eks-fixed-header .eks-breadcrumb-submenu a,
#eks-fixed-header .eks-breadcrumb-submenu a:visited {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px !important;
  color: var(--eks-text-on-light) !important;
  text-decoration: none;
  font-size: var(--eks-header-menu-font-size) !important;
  font-weight: var(--eks-font-weight-body);
  white-space: nowrap;
}
#eks-fixed-header .eks-breadcrumb-submenu a:hover,
#eks-fixed-header .eks-breadcrumb-submenu a:focus-visible {
  background: #f4f6f8;
  font-weight: var(--eks-font-weight-hover);
}
/* Der Unterpunkt, der dem aktuell angezeigten Pfad entspricht (siehe
   buildBreadcrumbSubmenu() in zusaetzliches.html), wird hervorgehoben -
   dezenter Hintergrund + Akzentfarbe, da reines Gelb (#FFCA28, wie das
   Ordner-Symbol) auf weißem Grund zu wenig Kontrast hätte. */
#eks-fixed-header .eks-breadcrumb-submenu a.eks-breadcrumb-child-selected,
#eks-fixed-header .eks-breadcrumb-submenu a.eks-breadcrumb-child-selected:visited {
  background: var(--eks-accent-soft) !important;
  color: var(--eks-accent) !important;
  font-weight: var(--eks-font-weight-hover);
}
.eks-breadcrumb-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.eks-breadcrumb-icon--folder { fill: #FFCA28; }
.eks-breadcrumb-icon--page { fill: var(--eks-text-muted); }

#eks-fixed-header .eks-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--eks-box-radius);
}
#eks-fixed-header .eks-burger:hover { opacity: .9; }
#eks-fixed-header .eks-burger:focus-visible {
  outline: 2px solid #E6F0F7;
  outline-offset: 2px;
}

/* Burger-Dropdown: standardmäßig ausgeblendet, erscheint bei Hover ODER
   Tastatur-Fokus über #eks-burger-wrap (Button + Dropdown zusammen -
   bewusst NICHT #eks-left-wrap, das auch den Breadcrumb enthält; sonst
   würde auch dessen Hover das Menü öffnen). JS
   (Zusätzliches HTML) pflegt dazu nur noch aria-expanded mit. */
/* height:40px + eigenes Flex-Centering aus demselben Grund wie bei
   .eks-breadcrumb-item weiter oben - der untere Rand (Ankerpunkt für
   "top:100%" beim Burger-Dropdown) landet dadurch an derselben Stelle
   wie beim Initialienkreis-Button, unabhängig von der kleineren
   28px-Größe des Burger-Symbols selbst. */
#eks-burger-wrap {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
#eks-burgermenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* Kein margin-top (vorher 4px): der Abstand lag außerhalb sowohl von
     #eks-burger-wrap (dessen eigene Box endet an der Kopfzeile - absolut
     positionierte Kinder zählen nicht zur Höhe) als auch vom Dropdown
     selbst - die Maus verlor beim Weg vom Button zum Dropdown dadurch
     kurz den Hover, bevor sie ankam, und das Menü schloss sich vorzeitig.
     Jetzt sitzt das Dropdown lückenlos direkt unter der Kopfzeile. */
  margin-top: 0;
  flex-direction: column;
  /* KEINE feste min-width mehr: sonst ändert sich beim Hover des
     längsten Eintrags (der dann fett wird) die Breite des ganzen
     Dropdowns sichtbar. Die Breite ergibt sich jetzt rein aus den
     Links, die per fitDropdownWidth() in zusaetzliches.html beim
     Sichtbarwerden alle auf die Breite des breitesten Eintrags im
     fetten Zustand gesetzt werden - exakt wie beim Breadcrumb-Dropdown. */
  /* Gleiches Design wie alle anderen Header-Menüs (Breadcrumb-Dropdowns,
     Initialienmenü): weißer Hintergrund + Schatten statt eigener
     Akzentfarbe. */
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border-radius: var(--eks-box-radius);
  padding: 8px 0;
  z-index: 250000;
}
#eks-burger-wrap:hover #eks-burgermenu,
#eks-burger-wrap:focus-within #eks-burgermenu {
  display: flex;
}
#eks-burgermenu a,
#eks-burgermenu a:visited {
  display: block;
  padding: 10px 14px;
  color: var(--eks-text-on-light) !important;
  text-decoration: none;
  font-size: var(--eks-header-menu-font-size);
  font-weight: var(--eks-font-weight-body);
  white-space: nowrap;
}
#eks-burgermenu a:hover,
#eks-burgermenu a:focus-visible {
  background: #f4f6f8;
  font-weight: var(--eks-font-weight-hover);
}

/* Burger-Menü, 2. Ebene: Einträge mit eigenen Unterpunkten (z. B.
   "Office") bekommen eine EXTRA Spalte daneben statt einer bloßen
   Einrückung - es gibt bewusst nur genau diese eine zusätzliche Ebene
   (siehe f_verzeichnis.js/buildBurgerItems in zusaetzliches.html).
   Öffnet bei Hover/Tastatur-Fokus über den Eintrag, exakt wie das
   Burger-Menü selbst. */
.eks-burger-item-wrap {
  position: relative;
}
/* Pfeil als Hinweis, dass rechts noch eine Spalte folgt. */
.eks-burger-item-wrap > a::after {
  content: "\203A";
  float: right;
  margin-left: 12px;
  opacity: .7;
}
.eks-burger-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  /* Kein margin-left: aus demselben Grund wie beim Burger-Dropdown
     selbst (siehe #eks-burgermenu weiter oben) - ein Lücke zwischen
     Auslöser und Flyout würde den Hover auf dem Weg dorthin kurz
     verlieren und das Untermenü vorzeitig schließen. */
  margin-left: 0;
  flex-direction: column;
  /* KEINE feste min-width mehr - siehe Kommentar bei #eks-burgermenu
     oben, hier gilt derselbe Grund. Gleiches Design wie alle anderen
     Header-Menüs (siehe #eks-burgermenu oben). */
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border-radius: var(--eks-box-radius);
  padding: 8px 0;
  z-index: 260000;
}
.eks-burger-item-wrap:hover > .eks-burger-submenu,
.eks-burger-item-wrap:focus-within > .eks-burger-submenu {
  display: flex;
}

/* Bearbeiten-Toggle: eigener fester Block links vom Suchfeld/
   Initialienkreis, nicht Teil von #eks-header-right-fixed - so bleibt
   dessen Breite unabhängig von der Blockspalten-Breite und beeinflusst
   nicht, wo das Suchfeld beginnt (siehe #eks-header-right-fixed
   unten). */
#eks-fixed-header #eks-editwrap {
  flex: 0 0 auto;
}

/* Rechter Fixbereich: Wrapper mit fester Breite (--eks-sidebar-width
   minus Kopfzeilen-Innenabstand --eks-pad-x), links bündig mit der
   Blockspalte (#theme_adaptable-drawers-sidepost). Suchfeld/Lupe und
   Initialienkreis werden darin über explizite margin-Werte platziert
   (nicht über gap/auto-margin), damit ihre Position unabhängig
   voneinander exakt berechnet werden kann (siehe .eks-center und
   .eks-right unten). */
#eks-fixed-header #eks-header-right-fixed {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: calc(var(--eks-sidebar-width) - var(--eks-pad-x));
}
/* Initialienkreis: ganz rechts, bündig mit der echten rechten
   Fensterkante (wie die Blockspalte selbst, die kein rechtes Padding
   hat) - via negativem margin-right in Höhe von --eks-pad-x, der
   sonst die Ausrichtung um genau diesen Betrag verschieben würde.
   margin-left ergibt einen kleinen sichtbaren Abstand zum Suchfeld/
   zur Lupe links davon. */
#eks-fixed-header #eks-header-right-fixed .eks-right {
  margin-left: 8px;
  margin-right: calc(-1 * var(--eks-pad-x));
}

/* Suchfeld+Lupe: fester Platz in der Kopfzeile, normaler Flex-Fluss
   (kein position:absolute mehr - das ging von einer festen Content-
   Breite aus, die sich beim Ändern der Fensterbreite anders verhalten
   konnte als die Kopfzeile selbst und zu Überlappungen führte).
   Wächst/schrumpft nie (flex: 0 0 auto), behält also immer denselben
   Platz. Breite und margin-left sind bewusst exakt auf die SICHTBAREN
   Block-Kacheln ausgerichtet, nicht auf die Blockspalten-Box selbst:
   die Blockspalte hat links --eks-gap Innenabstand (zum Trennstrich)
   und die Kacheln selbst nochmal --eks-gap Innenabstand rechts (zum
   rechten Fensterrand, siehe #theme_adaptable-drawers-sidepost /
   #block-region-side-post in diesem File) - macht die Kacheln
   insgesamt (--eks-sidebar-width - 2 * --eks-gap) breit, beginnend
   --eks-gap nach dem linken Rand von #eks-header-right-fixed (der mit
   der Blockspalten-Box selbst übereinstimmt). So beginnt das Suchfeld
   exakt am linken Rand der Kacheln und die Lupe endet exakt an deren
   rechtem Rand, unabhängig von der Fensterbreite. */
#eks-fixed-header .eks-center {
  display: none;
  align-items: center;
  flex: 0 0 auto;
  width: calc(var(--eks-sidebar-width) - 2 * var(--eks-gap));
  margin-left: var(--eks-gap);
}
#eks-header-search {
  width: 100%;
  display: flex;
  gap: 6px;
}
/* #eks-search-form ist selbst ein Flex-Item von .eks-center (=
   #eks-header-search) OHNE eigenes flex-grow - ohne diese Regel bleibt
   es auf seiner Inhaltsgröße stehen, statt die volle Breite bis zum
   rechten Rand auszufüllen, und der Lupen-Button würde dadurch nicht
   an der Ziel-Position (siehe .eks-center oben) landen. */
#eks-search-form {
  flex: 1 1 auto;
  min-width: 0;
}
#eks-header-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border-radius: var(--eks-box-radius);
  border: 1px solid rgba(0,0,0,.3) !important;
  background: #fff !important;
  color: var(--eks-text-on-light) !important;
  padding: 0 10px;
  font-size: var(--eks-font-size);
}
#eks-header-search input::placeholder { color: transparent; }
/* Lupen-Button statt Text-Button "Suchen" - quadratisch, Icon
   zentriert, gleiche Höhe wie das Suchfeld. */
#eks-header-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--eks-box-radius);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  color: var(--eks-text);
  padding: 0;
  cursor: pointer;
}
#eks-header-search button:hover { background: rgba(255,255,255,.28); }

/* Rechts: Nutzerbereich - fester Platz, wächst/schrumpft nie, damit
   Bearbeiten-Bereich und Nutzername immer denselben Platz behalten
   (kein position/grid-Sonderfall mehr nötig im normalen Flex-Fluss). */
#eks-fixed-header .eks-right {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}
#eks-header-user { position: relative; }
#eks-userbutton {
  background: transparent;
  color: var(--eks-text);
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  flex: 0 0 auto;
}
#eks-userbutton:hover { background: rgba(255,255,255,.12); }
/* Initialienkreis statt vollem Namen (siehe setName() in
   zusaetzliches.html) - fester, kleiner Platz unabhängig von der
   Namenslänge, dadurch bekommt der Breadcrumb in der Mitte mehr Raum. */
#eks-username {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: var(--eks-text);
  font-weight: var(--eks-font-weight-hover);
  font-size: var(--eks-font-size);
  letter-spacing: .5px;
}
/* position:absolute + top:100% + right:0, lückenlos direkt unter
   #eks-header-user (kein Gap wie vorher bei position:fixed + top:
   calc(bar-height + 8px) - dieser Abstand lag außerhalb sowohl vom
   Initialienkreis-Button als auch vom Dropdown selbst, wodurch die Maus
   auf dem Weg dorthin kurz den Hover verlor und das Menü vorzeitig
   schloss. Exakt dieselbe Lösung wie beim Burger-/Breadcrumb-Dropdown. */
#eks-usermenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  background: #fff;
  color: var(--eks-text-on-light);
  border-radius: var(--eks-box-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 8px 0;
  min-width: 220px;
  z-index: 300000;
}
#eks-usermenu a {
  display: block;
  padding: 10px 14px;
  color: var(--eks-text-on-light);
  text-decoration: none;
  font-size: var(--eks-font-size);
}
#eks-usermenu a:hover { background: #f4f6f8; }
/* Öffnet per Hover/Tastatur-Fokus über #eks-header-user (Initialienkreis
   + Dropdown zusammen), genau wie Burger- und Breadcrumb-Menüs. */
#eks-header-user:hover #eks-usermenu,
#eks-header-user:focus-within #eks-usermenu {
  display: block;
}

body.eks-auth #eks-fixed-header .eks-center,
body.eks-auth #eks-fixed-header .eks-right,
body.eks-auth #eks-fixed-header #eks-editwrap {
  display: flex !important;
}

/* ===== Bearbeiten-Toggle =====
   Eigenständiger Block, direktes Flex-Kind von .eks-header-inner -
   standardmäßig versteckt und erst über body.eks-auth (siehe oben)
   eingeblendet. */
#eks-editwrap {
  display: none;
  align-items: center;
  gap: 10px;
}
#eks-editswitch {
  position: relative;
  display: inline-block;
  width: 56px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ddd, #cfcfcf);
  border: 1px solid #bbb;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
#eks-editswitch::after {
  content: "";
  position: absolute;
  top: 50%; left: 4px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: left .18s ease;
}
#eks-editswitch.on {
  background: linear-gradient(180deg, #3fbf6b, #2aa054);
  border-color: #238a47;
}
#eks-editswitch.on::after { left: 30px; }
#eks-editchk { position: absolute; opacity: 0; width: 0; height: 0; }
#eks-editswitch:focus-visible {
  outline: 2px solid #E6F0F7;
  outline-offset: 2px;
}

/* ===== Fixer Footer ===== */
#eks-fixed-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140000;
  background: var(--eks-accent);
  color: var(--eks-text);
  height: var(--eks-bar-height);
  padding: 0 var(--eks-pad-x);
  font-size: var(--eks-font-size-small);
  display: flex;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}
#eks-fixed-footer .eks-footer-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
}
#eks-fixed-footer a {
  color: var(--eks-text);
  text-decoration: none;
  font-size: var(--eks-font-size-small);
}
#eks-fixed-footer a:hover { color: #E6F0F7; }
#eks-fixed-footer .eks-footer-grid > div:nth-child(1) { text-align: left; }
#eks-fixed-footer .eks-footer-grid > div:nth-child(2) { text-align: center; }
#eks-fixed-footer .eks-footer-grid > div:nth-child(3) { text-align: right; }

/* =========================================================
   Rechte Drawer-Spalte
   ========================================================= */
#theme_adaptable-drawers-sidepost {
  display: block !important;
  position: fixed !important;
  right: 0;
  z-index: 120000;
  top: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  bottom: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  width: var(--eks-sidebar-width) !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
  padding-left: var(--eks-gap) !important;
  padding-right: 0 !important;
  background: #fff !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#theme_adaptable-drawers-sidepost[data-state],
#theme_adaptable-drawers-sidepost:not(.show) {
  display: block !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Trennlinie – EINE Fläche, gesteuert über --eks-accent.
   Bewusst NICHT als ::before von #theme_adaptable-drawers-sidepost, weil
   dieses Element selbst "overflow: hidden" hat – das würde ein eigenes
   fixiertes Pseudo-Element auf die (ggf. von Moodle per JS verkleinerte)
   Box des Drawers zurückschneiden und die Linie unten abschneiden.
   Stattdessen an html hängen: html hat kein eigenes overflow:hidden und
   kann die Linie deshalb nicht clippen – dadurch garantiert durchgängig
   von oben (Header-Unterkante) bis unten (Footer-Oberkante) sichtbar. */
html::after {
  content: "";
  position: fixed;
  right: var(--eks-sidebar-width);
  width: 8px;
  background: var(--eks-accent);
  top: calc(var(--eks-bar-height) + var(--eks-gap));
  bottom: calc(var(--eks-bar-height) + var(--eks-gap));
  z-index: 200001;
  pointer-events: none;
}

/* Drawer-Header & Inhalt */
#theme_adaptable-drawers-sidepost .drawerheader { display: none !important; }
#theme_adaptable-drawers-sidepost .drawercontent {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  height: 100% !important;
  overflow: hidden !important;
}
#theme_adaptable-drawers-sidepost section[aria-label="Blöcke"] {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Blöcke im Drawer */
#block-region-side-post {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 var(--eks-gap) 0 0 !important;
  margin: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-height: var(--eks-viewport-free);
  overflow-y: auto;
}

#theme_adaptable-drawers-sidepost section.block.mb-3 { margin-bottom: 0 !important; }

/* "Hidden"-Blockregion des Adaptable-Themes ausblenden: erscheint nur im
   Bearbeitungsmodus für Nutzer mit moodle/block:edit (Lehrkräfte/Admins,
   siehe theme/adaptable/classes/output/core_renderer_layout.php,
   Überschrift = Sprachstring "hidden-blocks-desc") - Schüler/Schülerinnen
   sehen sie nie, serverseitig ausgeblendet. Kein Theme-Setting dafür
   vorhanden, daher hier per CSS entfernt. */
.hidden-blocks {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Einzelblöcke: kleine Box-Variante */
#theme_adaptable-drawers-sidepost section.block,
#theme_adaptable-drawers-sidepost section.block.hidden {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 calc((100% - 10%) / 3) !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: var(--eks-block-border-width) solid var(--eks-block-border-color) !important;
  border-radius: var(--eks-block-radius) !important;
  background: var(--eks-accent) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#theme_adaptable-drawers-sidepost section.block.hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#theme_adaptable-drawers-sidepost section.block.collapsed,
#theme_adaptable-drawers-sidepost section.block.card-collapsed {
  height: auto !important;
}

#theme_adaptable-drawers-sidepost section.block .content,
#theme_adaptable-drawers-sidepost section.block .card-body {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#theme_adaptable-drawers-sidepost section.block .collapse,
#theme_adaptable-drawers-sidepost section.block .collapsing {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Block-Controls global */
.block .header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.block .header .title { flex: 1 1 auto !important; }
.block .block-controls, .block .commands, .block .action-menu,
.block .actions, .block .controls, .block .block-action,
.block .block-collapsible, .block [data-action],
.block .btn.btn-icon.collapse-toggle, .block .collapsible-actions,
.block .header .block_action {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Icons in Blocktiteln unterdrücken */
.block .header .title i,
.block .header .title img,
.block .header .title img.icon,
.block .header .title .icon,
.block .header .title .navicon,
.block .header .title .fa,
.block .header .title .bi,
.block .header .title [class*=" icon"],
.block .header .title [class^="fa"],
.block .header .title [class^="bi"],
.block .card-title > .icon,
.block .card-title > i,
.block .card-title > img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
body.showblockicons .block .header .title:before,
body.showblockicons .block .header .title:after,
.block .header .title:before,
.block .header .title:after,
.block.card .card-title:before,
.block.card .card-title:after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
.block .header .title,
.block.card .card-title {
  background-image: none !important;
  background: none !important;
  padding-left: 12px !important;
}
.block .header .title .d-inline,
.block .header .title h1.d-inline,
.block .header .title h2.d-inline,
.block .header .title h3.d-inline,
.block .header .title h4.d-inline { position: relative; }

.block .header .title .d-inline::before,
.block .header .title .d-inline::after,
.block .header .title h1.d-inline::before,
.block .header .title h1.d-inline::after,
.block .header .title h2.d-inline::before,
.block .header .title h2.d-inline::after,
.block .header .title h3.d-inline::before,
.block .header .title h3.d-inline::after {
  content: none !important;
  display: none !important;
  width: 0 !important; height: 0 !important;
  background: none !important;
  margin: 0 !important; padding: 0 !important;
}
.block .header .title .d-inline > .icon,
.block .header .title .d-inline + .icon,
.block .header .title .d-inline + i,
.block .header .title .d-inline + img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important;
}

/* ===== Titelzeile Drawer-Blöcke & Menü-Kacheln: gleiche Optik ===== */
#theme_adaptable-drawers-sidepost section.block .header,
#theme_adaptable-drawers-sidepost section.block .header .title {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--eks-accent) !important;
  color: var(--eks-text) !important;
  border: 0 !important;
}
/* Block-Überschriften (Drawer) = gleich wie Kachel-Titel */
#theme_adaptable-drawers-sidepost section.block .header .title h2 {
  margin: 0 !important;
  padding: 8px 12px !important;
  font-weight: var(--eks-font-weight-title);  /* 600 – semibold, wie Kachel-Titel */
  font-size: var(--eks-font-size-title);       /* 13pt – wie Kachel-Titel */
  color: var(--eks-text) !important;           /* Off-White */
  line-height: 1.2;
  text-align: center !important;
}

/* Absicherung: falls Moodle den Block statt mit .header/.title als
   Bootstrap-Card rendert (.card-header/.card-title). Gleiche Optik,
   gleiche Quelle (--eks-accent / --eks-font-weight-title / --eks-font-size-title). */
#theme_adaptable-drawers-sidepost section.block.card > .card-header,
#theme_adaptable-drawers-sidepost .block.card .card-header {
  margin: 0 !important;
  padding: 8px 12px !important;
  background: var(--eks-accent) !important;
  color: var(--eks-text) !important;
  border: 0 !important;
}
#theme_adaptable-drawers-sidepost section.block.card .card-title,
#theme_adaptable-drawers-sidepost .block.card .card-header .card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: var(--eks-font-weight-title);
  font-size: var(--eks-font-size-title);
  color: var(--eks-text) !important;
  line-height: 1.2;
  text-align: center !important;
}

/* Inhalt Drawer-Blöcke: helle Box */
#theme_adaptable-drawers-sidepost section.block .content {
  background: #fff !important;
  border: var(--eks-block-border-width) solid var(--eks-accent-soft) !important;
  border-radius: calc(var(--eks-block-radius) / 2) !important;
  margin: 10px 12px 12px 12px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  color: var(--eks-text-on-light) !important;  /* dunkler Text auf weißem Grund */
  font-size: var(--eks-font-size-list);
  font-weight: var(--eks-font-weight-body);
}

/* Skip-Links entfernen */
#theme_adaptable-drawers-sidepost a.skip,
#theme_adaptable-drawers-sidepost .skip-block-to { display: none !important; }

/* =========================================================
   Administration-Block
   ========================================================= */
#theme_adaptable-drawers-sidepost section.block_settings,
#theme_adaptable-drawers-sidepost [data-block="settings"] {
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
}

/* display/align-items/gap kommen bereits von der globalen .block
   .header-Regel weiter oben (identische Werte) - hier nur noch das
   einzig abweichende justify-content, zentriert seit der Show/Hide-
   Button (id="instance-<n>-action") ausgeblendet ist. */
#theme_adaptable-drawers-sidepost section.block .header {
  justify-content: center !important;
}
#theme_adaptable-drawers-sidepost section.block .block-controls,
#theme_adaptable-drawers-sidepost section.block .actions,
#theme_adaptable-drawers-sidepost section.block .controls,
#theme_adaptable-drawers-sidepost section.block .action-menu,
#theme_adaptable-drawers-sidepost section.block [data-action],
#theme_adaptable-drawers-sidepost section.block .dropdown,
#theme_adaptable-drawers-sidepost section.block .dropdown-toggle,
#theme_adaptable-drawers-sidepost section.block .menu {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
}
#theme_adaptable-drawers-sidepost section.block .dropdown-menu { z-index: 300001 !important; }

/* Show/Hide-Button der Blöcke ausblenden. Vom Nutzer per DevTools
   identifiziert: id="instance-16-action" (Beispiel für einen
   Block). Die Zahl ist die Block-Instanz-ID und bei jedem Block
   anders, daher per Attribut-Selektor auf das ID-Muster statt eine
   feste ID – trifft dadurch automatisch auf alle Blöcke zu. Höhere
   Spezifität als die .action-menu-Regel oben (die das Element sonst
   sichtbar erzwingen würde), damit dieses display:none gewinnt. */
#theme_adaptable-drawers-sidepost section.block [id^="instance-"][id$="-action"] {
  display: none !important;
  visibility: hidden !important;
}

/* Zeichen/Icon neben den Block-Überschriften ("Schulweite Termine" etc.)
   entfernen – deckt sowohl klassisches .header/.title-Markup als auch
   die Bootstrap-Card-Variante (.card-header/.card-title) ab, unabhängig
   davon, ob Moodle das Icon als <i>, <img>, <svg> oder .icon-Element
   rendert. */
#theme_adaptable-drawers-sidepost section.block .header .title i,
#theme_adaptable-drawers-sidepost section.block .header .title img,
#theme_adaptable-drawers-sidepost section.block .header .title svg,
#theme_adaptable-drawers-sidepost section.block .header .title .icon,
#theme_adaptable-drawers-sidepost section.block.card .card-title i,
#theme_adaptable-drawers-sidepost section.block.card .card-title img,
#theme_adaptable-drawers-sidepost section.block.card .card-title svg,
#theme_adaptable-drawers-sidepost section.block.card .card-title .icon {
  display: none !important;
}

/* =========================================================
   Seite cmid=12: iFrame-Layout
   EINE zusammenhängende Fassung (ersetzt frühere, teils
   widersprüchliche Parallel-Regeln für dieselben Selektoren –
   dadurch füllt das iFrame #region-main jetzt zuverlässig bis
   ganz nach unten, nicht nur bis zu einem festen px-Wert).
   ========================================================= */
body.cmid-12 #region-main-box { width: 100% !important; }

body.cmid-12 #region-main > h2,
body.cmid-12 #region-main .activity-header,
body.cmid-12 #region-main .secondary-navigation,
body.cmid-12 #page-content h2:first-of-type { display: none !important; }

body.cmid-12 #region-main > :not([role="main"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* region-main: fixed, exakt zwischen Header und Footer */
body.cmid-12 #region-main {
  position: fixed !important;
  top: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  bottom: calc(var(--eks-bar-height) + var(--eks-gap)) !important;
  left: 0 !important;
  width: calc(100% - var(--eks-sidebar-width)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 150000 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Moodle-Innenwrapper: alle drei werden zu Flex-Containern, die die Höhe
   von #region-main lückenlos durchreichen (jeder füllt seinen Vorgänger
   über flex:1 1 auto). Wichtig: position:relative NUR auf [role="main"]
   selbst (direktes Flex-Kind von #region-main, dadurch garantiert mit
   voller Höhe) – NICHT zusätzlich auf die verschachtelten Kind-Elemente,
   sonst würde .eks-iframe-wrapper (position:absolute) an einem dieser
   inneren, ggf. nicht selbst gestreckten Elemente verankern und auf
   Höhe 0 zusammenfallen (genau das war der Bug: das ganze 5er-Menü
   verschwand). */
body.cmid-12 [role="main"] {
  position: relative !important;
}
body.cmid-12 [role="main"],
body.cmid-12 [role="main"] > .box.generalbox.center.clearfix,
body.cmid-12 [role="main"] .no-overflow {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Wrapper: absolute, füllt [role="main"] lückenlos von Rand zu Rand –
   kein fester px-/vh-Wert mehr, sondern immer genau die verfügbare Höhe. */
body.cmid-12 .eks-iframe-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 190000 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* iFrame: volle Fläche des Wrappers */
body.cmid-12 .eks-iframe-full {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cmid-12 #region-main *:not([role="main"] *):not(.eks-iframe-wrapper):not(.eks-iframe-full) {
  pointer-events: none !important;
}