/*
 * ============================================================
 * EduSphere – ILIAS 11 System Style
 * ============================================================
 * Basis: ILIAS Delos
 * Eigene Anpassungen werden ausschließlich unterhalb
 * des Imports ergänzt.
 */

/* ILIAS Standarddesign laden */
@import url("/assets/css/delos.css");


/* ============================================================
   EDUSPHERE – BASIS
   ============================================================ */

:root {
    --edusphere-primary: #245f7a;
    --edusphere-primary-dark: #19465b;
    --edusphere-background: #f5f7f9;
    --edusphere-surface: #ffffff;
    --edusphere-text: #1d2935;
    --edusphere-muted: #667785;
}


/* ============================================================
   HEADER – erster Test
   ============================================================ */

.il-maincontrols-metabar {
    border-top: 4px solid var(--edusphere-primary);
}


/* ============================================================
   LINKS
   ============================================================ */

a {
    transition: color 0.15s ease;
}


/* ============================================================
   EDU-SPHERE CUSTOM AREA
   Weitere Anpassungen folgen hier.
   ============================================================ */


/* ============================================================
   EDUSPHERE HEADER
   ============================================================ */

/* Hauptbereich des Headers */
header,
.il-maincontrols {
    background: #ffffff;
}

/* obere Hauptnavigation */
.il-maincontrols-metabar {
    min-height: 72px;
    border-top: 4px solid var(--edusphere-primary);
    border-bottom: 1px solid #e4e9ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Branding / Titel */
.il-maincontrols-metabar .navbar-brand,
.il-maincontrols-metabar .navbar-brand a {
    color: var(--edusphere-text);
    font-weight: 600;
}

/* Metabar-Icons */
.il-maincontrols-metabar .btn {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.il-maincontrols-metabar .btn:hover {
    background-color: #eef4f6;
    transform: translateY(-1px);
}


/* ============================================================
   EDUSPHERE BUTTONS
   ============================================================ */

.btn-primary {
    background-color: var(--edusphere-primary);
    border-color: var(--edusphere-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--edusphere-primary-dark);
    border-color: var(--edusphere-primary-dark);
}


/* ============================================================
   EDUSPHERE FORM ELEMENTS
   ============================================================ */

.form-control:focus {
    border-color: var(--edusphere-primary);
    box-shadow: 0 0 0 2px rgba(36, 95, 122, 0.12);
}


/* ============================================================
   EDUSPHERE LOGO
   ============================================================ */

.il-maincontrols-metabar .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 68px;
    padding-left: 12px;
}

/* vorhandene ILIAS-Bildmarke ausblenden */
.il-maincontrols-metabar .navbar-brand img {
    display: none !important;
}

/* EduSphere-Logo einsetzen */
.il-maincontrols-metabar .navbar-brand::before {
    content: "";
    display: block;
    width: 360px;
    height: 58px;
    background-image: url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* bisherigen Text neben dem Logo ausblenden */
.il-maincontrols-metabar .navbar-brand > * {
    visibility: hidden;
}

/* Logo bleibt sichtbar */
.il-maincontrols-metabar .navbar-brand::before {
    visibility: visible;
}

/* responsive */
@media (max-width: 900px) {
    .il-maincontrols-metabar .navbar-brand::before {
        width: 250px;
        height: 48px;
    }
}

@media (max-width: 600px) {
    .il-maincontrols-metabar .navbar-brand::before {
        width: 190px;
        height: 42px;
    }
}


/* ============================================================
   EDUSPHERE – ILIAS 11 LOGO
   ============================================================ */

/* Logo-Bereich */
.header-inner .il-logo {
    display: flex !important;
    align-items: center !important;
    width: 390px !important;
    min-width: 390px !important;
    height: 68px !important;
    padding: 4px 12px !important;
    margin: 0 !important;
}

/* ILIAS-Standardlogo ausblenden */
.header-inner .il-logo img {
    display: none !important;
}

/* Link im Logo-Bereich */
.header-inner .il-logo a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* EduSphere-Logo */
.header-inner .il-logo a::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}


/* ============================================================
   EDUSPHERE – HEADER
   ============================================================ */

header .header-inner {
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
}


/* ============================================================
   RESPONSIVE LOGO
   ============================================================ */

@media (max-width: 900px) {

    .header-inner .il-logo {
        width: 280px !important;
        min-width: 280px !important;
        height: 58px !important;
    }
}

@media (max-width: 600px) {

    .header-inner .il-logo {
        width: 210px !important;
        min-width: 210px !important;
        height: 50px !important;
        padding-left: 8px !important;
    }
}


/* ============================================================
   EDUSPHERE – LOGO FIX ILIAS 11
   ============================================================ */

.header-inner .il-logo {
    position: relative !important;

    width: 390px !important;
    min-width: 390px !important;
    height: 72px !important;

    padding: 4px 12px !important;
    margin: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}


/* Standard-ILIAS-Bilder sicher ausblenden */
.header-inner .il-logo img {
    display: none !important;
}


/* Desktop-Link über das neue Logo legen */
.header-inner .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* Responsive Originalvariante abschalten */
.header-inner .il-logo > span.visible-xs-block {
    display: none !important;
}


/* Link soll die komplette Logo-Fläche abdecken */
.header-inner .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}


/* altes ::before deaktivieren */
.header-inner .il-logo a::before {
    display: none !important;
    content: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .header-inner .il-logo {
        width: 300px !important;
        min-width: 300px !important;
        height: 62px !important;
    }
}


@media (max-width: 600px) {

    .header-inner .il-logo {
        width: 230px !important;
        min-width: 230px !important;
        height: 54px !important;
        padding: 3px 8px !important;
    }
}


/* ============================================================
   EDUSPHERE – HEADER FINALISIERUNG
   ============================================================ */

/* Gesamter Kopfbereich */
header {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
}

header .header-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 100px !important;
    height: 100px !important;
    padding: 0 24px !important;
}


/* EduSphere Logo */
header .header-inner .il-logo {
    position: relative !important;

    display: block !important;
    flex: 0 0 360px !important;

    width: 360px !important;
    min-width: 360px !important;
    height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}


/* Originale ILIAS-Logos entfernen */
header .header-inner .il-logo img {
    display: none !important;
}


/* Linkfläche über EduSphere-Logo */
header .header-inner .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

header .header-inner .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}


/* Mobile Originalvariante deaktivieren */
header .header-inner .il-logo > span.visible-xs-block {
    display: none !important;
}


/* ============================================================
   ALTEN ILIAS-SEITENTITEL AUSBLENDEN
   ============================================================ */

/*
 * Der bisherige Text
 * "EduSphere | Learning Space Plattform"
 * soll im Branding-Header nicht mehr erscheinen.
 */

header .header-inner .il-pagetitle {
    display: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    header .header-inner {
        min-height: 82px !important;
        height: 82px !important;
        padding: 0 16px !important;
    }

    header .header-inner .il-logo {
        flex-basis: 290px !important;
        width: 290px !important;
        min-width: 290px !important;
        height: 68px !important;
    }
}


@media (max-width: 600px) {

    header .header-inner {
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 10px !important;
    }

    header .header-inner .il-logo {
        flex-basis: 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        height: 58px !important;
    }
}


/* ============================================================
   EDUSPHERE – HEADER FINALISIERUNG
   ============================================================ */

/* Gesamter Kopfbereich */
header {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
}

header .header-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 100px !important;
    height: 100px !important;
    padding: 0 24px !important;
}


/* EduSphere Logo */
header .header-inner .il-logo {
    position: relative !important;

    display: block !important;
    flex: 0 0 360px !important;

    width: 360px !important;
    min-width: 360px !important;
    height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}


/* Originale ILIAS-Logos entfernen */
header .header-inner .il-logo img {
    display: none !important;
}


/* Linkfläche über EduSphere-Logo */
header .header-inner .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

header .header-inner .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}


/* Mobile Originalvariante deaktivieren */
header .header-inner .il-logo > span.visible-xs-block {
    display: none !important;
}


/* ============================================================
   ALTEN ILIAS-SEITENTITEL AUSBLENDEN
   ============================================================ */

/*
 * Der bisherige Text
 * "EduSphere | Learning Space Plattform"
 * soll im Branding-Header nicht mehr erscheinen.
 */

header .header-inner .il-pagetitle {
    display: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    header .header-inner {
        min-height: 82px !important;
        height: 82px !important;
        padding: 0 16px !important;
    }

    header .header-inner .il-logo {
        flex-basis: 290px !important;
        width: 290px !important;
        min-width: 290px !important;
        height: 68px !important;
    }
}


@media (max-width: 600px) {

    header .header-inner {
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 10px !important;
    }

    header .header-inner .il-logo {
        flex-basis: 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        height: 58px !important;
    }
}


/* ============================================================
   EDUSPHERE – LOGINSEITE
   ============================================================ */


/* Hintergrund des Hauptbereichs */
.il-layout-page {
    background: #f4f7f9 !important;
}


/* unnötige Abstände oberhalb des Logins reduzieren */
.ilTabsContentOuter,
.il_after_tabs_spacing {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Loginbereich */
.ilStartupSection {
    max-width: 470px !important;
    margin: 70px auto 90px auto !important;
    padding: 0 20px !important;
}


/* Login-Card */
.ilStartupSection form[name="login_form"] {
    background: #ffffff !important;

    border: 1px solid #e1e7eb !important;
    border-radius: 16px !important;

    padding: 36px 42px 38px 42px !important;

    box-shadow:
        0 12px 35px rgba(28, 54, 72, 0.08),
        0 2px 8px rgba(28, 54, 72, 0.04) !important;
}


/* Formularheader */
.ilStartupSection form[name="login_form"] .c-form__header {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* Hinweis "Erforderliche Angabe" oben entfernen */
.ilStartupSection form[name="login_form"] .c-form__required {
    display: none !important;
}


/* Hauptüberschrift */
.ilStartupSection form[name="login_form"] h2 {
    margin: 0 0 30px 0 !important;

    font-size: 27px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    color: #173e57 !important;
}


/* äußeres Fieldset */
.ilStartupSection form[name="login_form"] > fieldset.c-input {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* innere Felder */
.ilStartupSection form[name="login_form"] fieldset.c-input {
    border: 0 !important;
}


/* Feldabstand */
.ilStartupSection form[name="login_form"]
.c-input__field > fieldset.c-input {
    margin-bottom: 22px !important;
}


/* Labels */
.ilStartupSection form[name="login_form"] label {
    color: #344b5b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}


/* Pflichtsternchen bei Feldern dezenter */
.ilStartupSection form[name="login_form"] label .asterisk {
    color: #4b9f3a !important;
    margin-left: 3px !important;
}


/* Text- und Passwortfelder */
.ilStartupSection form[name="login_form"] input[type="text"],
.ilStartupSection form[name="login_form"] input[type="password"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;

    padding: 10px 14px !important;

    border: 1px solid #cbd6dd !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    color: #243845 !important;
    font-size: 15px !important;

    box-shadow: none !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}


/* Fokus */
.ilStartupSection form[name="login_form"] input[type="text"]:focus,
.ilStartupSection form[name="login_form"] input[type="password"]:focus {
    outline: none !important;

    border-color: #2389ba !important;

    box-shadow:
        0 0 0 3px rgba(35, 137, 186, 0.12) !important;
}


/* Passwortfeld */
.ilStartupSection .c-field-password {
    position: relative !important;
}


/* Auge / Passwort anzeigen */
.ilStartupSection .c-field-password__revelation-glyph {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* Augen-Button */
.ilStartupSection .c-field-password__revelation-glyph .btn {
    border: 0 !important;
    background: transparent !important;
    color: #607887 !important;
    box-shadow: none !important;
}


/* ============================================================
   BUTTONS IM LOGINBEREICH
   ============================================================ */

.ilStartupSection form[name="login_form"] .btn-primary {
    min-height: 48px !important;

    padding: 11px 22px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: #245f7a !important;

    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


.ilStartupSection form[name="login_form"] .btn-primary:hover,
.ilStartupSection form[name="login_form"] .btn-primary:focus {
    background: #19465b !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 14px rgba(36, 95, 122, 0.20) !important;
}


/* Links unterhalb des Formulars */
.ilStartupSection a {
    color: #245f7a !important;
}

.ilStartupSection a:hover {
    color: #19465b !important;
}


/* ============================================================
   CONTENT-BREITE LOGIN
   ============================================================ */

#il_center_col {
    float: none !important;
    width: 100% !important;
}


/* ============================================================
   RESPONSIVE LOGIN
   ============================================================ */

@media (max-width: 600px) {

    .ilStartupSection {
        margin: 35px auto 60px auto !important;
        padding: 0 14px !important;
    }

    .ilStartupSection form[name="login_form"] {
        padding: 28px 24px 30px 24px !important;
        border-radius: 13px !important;
    }

    .ilStartupSection form[name="login_form"] h2 {
        font-size: 23px !important;
        margin-bottom: 24px !important;
    }
}


/* ============================================================
   EDUSPHERE – LOGIN CARD FEINSCHLIFF
   ============================================================ */


/* Card etwas breiter */
.ilStartupSection {
    max-width: 520px !important;
}


/* Formular */
.ilStartupSection form[name="login_form"] {
    padding: 38px 42px 40px 42px !important;
}


/* ============================================================
   FORMULARLAYOUT VON HORIZONTAL AUF VERTIKAL UMBIEGEN
   ============================================================ */

/* ILIAS Horizontal-Form im Login deaktivieren */
.ilStartupSection form[name="login_form"] .c-input {
    display: block !important;
}


/* Label volle Breite */
.ilStartupSection form[name="login_form"] fieldset.c-input > label {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    float: none !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    text-align: left !important;
}


/* Eingabebereich volle Breite */
.ilStartupSection form[name="login_form"] fieldset.c-input > .c-input__field {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* einzelne Felder */
.ilStartupSection form[name="login_form"]
.c-input__field > fieldset.c-input {

    display: block !important;
    width: 100% !important;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;
}


/* Inputs */
.ilStartupSection form[name="login_form"] input[type="text"],
.ilStartupSection form[name="login_form"] input[type="password"] {

    box-sizing: border-box !important;

    width: 100% !important;
    height: 50px !important;

    padding: 11px 14px !important;

    border-radius: 9px !important;
}


/* Passwort benötigt rechts Platz für das Auge */
.ilStartupSection form[name="login_form"] input[type="password"] {
    padding-right: 48px !important;
}


/* ============================================================
   PASSWORT-AUGE
   ============================================================ */

.ilStartupSection .c-field-password {
    display: block !important;
    width: 100% !important;
}

.ilStartupSection .c-field-password__revelation-glyph {
    right: 7px !important;
}


/* ============================================================
   LOGIN-BUTTON
   ============================================================ */

/* ILIAS Buttonbereich auf volle Breite */
.ilStartupSection form[name="login_form"] .c-form__buttons,
.ilStartupSection form[name="login_form"] .c-input__button,
.ilStartupSection form[name="login_form"] .c-input__buttons {

    width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    text-align: left !important;
}


/* Anmelden-Button */
.ilStartupSection form[name="login_form"] button[type="submit"],
.ilStartupSection form[name="login_form"] input[type="submit"],
.ilStartupSection form[name="login_form"] .btn-primary {

    display: block !important;

    width: 100% !important;
    min-height: 50px !important;

    margin: 10px 0 0 0 !important;

    border-radius: 9px !important;

    background: #245f7a !important;
    border: 1px solid #245f7a !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-align: center !important;
}


/* Hover */
.ilStartupSection form[name="login_form"] button[type="submit"]:hover,
.ilStartupSection form[name="login_form"] input[type="submit"]:hover,
.ilStartupSection form[name="login_form"] .btn-primary:hover {

    background: #19465b !important;
    border-color: #19465b !important;
}


/* ============================================================
   LINKS UNTER DEM LOGIN
   ============================================================ */

.ilStartupSection + div,
.ilStartupSection ~ div {

    font-size: 13px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .ilStartupSection {
        max-width: 100% !important;
        margin-top: 30px !important;
    }

    .ilStartupSection form[name="login_form"] {
        padding: 28px 24px 30px 24px !important;
    }
}

/* =========================================================
   EDUSPHERE FOOTER
   ========================================================= */

/* ILIAS Powered-by-/Versionszeile ausblenden */
footer.c-maincontrols__footer [data-section="texts"] {
    display: none !important;
}

/* Footer optisch an EduSphere anpassen */
footer.c-maincontrols__footer {
    background: #ffffff !important;
    border-top: 1px solid #e3e9ed !important;
    box-shadow: none !important;
}

/* Linkbereiche dezenter darstellen */
footer.c-maincontrols__footer [data-section="link-groups"] {
    font-size: 13px !important;
    color: #667785 !important;
}

/* Links in EduSphere-Farben */
footer.c-maincontrols__footer a {
    color: #245f7a !important;
    text-decoration: none !important;
}

footer.c-maincontrols__footer a:hover,
footer.c-maincontrols__footer a:focus {
    color: #19465b !important;
    text-decoration: underline !important;
}


/* =========================================================
   EDUSPHERE FOOTER – Login vereinfachen
   ========================================================= */

/* Permanent-Link-Bereich auf der Loginseite ausblenden */
body footer.c-maincontrols__footer [data-section="permanent-link"] {
    display: none !important;
}


/* =========================================================
   EDUSPHERE FOOTER – Feinschliff
   ========================================================= */

/* Footer insgesamt kompakter */
footer.c-maincontrols__footer {
    padding: 14px 24px !important;
}

/* Linkgruppen horizontal und kompakt */
footer.c-maincontrols__footer [data-section="link-groups"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Überschriften im Footer dezenter */
footer.c-maincontrols__footer [data-section="link-groups"] strong {
    display: none !important;
}

/* Listen auflösen */
footer.c-maincontrols__footer [data-section="link-groups"] ul {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Einträge kompakt */
footer.c-maincontrols__footer [data-section="link-groups"] li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Links etwas ruhiger */
footer.c-maincontrols__footer [data-section="link-groups"] a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #667785 !important;
    text-decoration: none !important;
}

/* Hover in EduSphere-Farbe */
footer.c-maincontrols__footer [data-section="link-groups"] a:hover,
footer.c-maincontrols__footer [data-section="link-groups"] a:focus {
    color: #245f7a !important;
    text-decoration: underline !important;
}

/* Mobile Darstellung */
@media (max-width: 700px) {
    footer.c-maincontrols__footer [data-section="link-groups"],
    footer.c-maincontrols__footer [data-section="link-groups"] ul {
        justify-content: center !important;
        gap: 12px 18px !important;
    }

    footer.c-maincontrols__footer {
        padding: 12px 14px !important;
    }
}


/* =========================================================
   EDUSPHERE LOGIN – Passwort-Auge zentrieren
   ========================================================= */

.ilStartupSection .c-field-password {
    position: relative !important;
}

.ilStartupSection .c-field-password__revelation-glyph {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
}


/* =========================================================
   EDUSPHERE – HEADER IM ANGEMELDETEN BEREICH
   ========================================================= */

body.c-layout__page > .il-layout-page > header {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
    box-shadow: none !important;
}

body.c-layout__page > .il-layout-page > header .header-inner {
    display: flex !important;
    align-items: center !important;
    min-height: 88px !important;
    height: 88px !important;
    padding: 0 24px !important;
}

/* EduSphere-Logo */
body.c-layout__page > .il-layout-page > header .il-logo {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 390px !important;
    width: 390px !important;
    min-width: 390px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

/* Standard-ILIAS-Logo ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo img {
    display: none !important;
}

/* Logo-Link weiterhin vollständig klickbar */
body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive ILIAS-Logo ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

/* Seitentitel ausblenden – Logo enthält die Marke bereits */
body.c-layout__page > .il-layout-page > header .il-pagetitle {
    display: none !important;
}

/* Metabar rechts sauber ausrichten */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
    margin-left: auto !important;
    align-self: center !important;
}

@media (max-width: 900px) {
    body.c-layout__page > .il-layout-page > header .header-inner {
        min-height: 78px !important;
        height: 78px !important;
        padding: 0 16px !important;
    }

    body.c-layout__page > .il-layout-page > header .il-logo {
        flex-basis: 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        height: 64px !important;
    }
}

/* =========================================================
   EDUSPHERE – HEADER ANGEMELDETER BEREICH
   ========================================================= */

body.c-layout__page > .il-layout-page > header {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
    box-shadow: none !important;
}

body.c-layout__page > .il-layout-page > header .header-inner {
    display: flex !important;
    align-items: center !important;
    min-height: 84px !important;
    height: 84px !important;
    padding: 0 20px !important;
    gap: 18px !important;
}

/* EduSphere-Logo */
body.c-layout__page > .il-layout-page > header .il-logo {
    position: relative !important;
    display: block !important;

    flex: 0 0 330px !important;
    width: 330px !important;
    min-width: 330px !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

/* Originales ILIAS-Logo ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo img {
    display: none !important;
}

/* Klickfläche erhalten */
body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mobile Originalvariante ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

/* Seitentitel entfernen */
body.c-layout__page > .il-layout-page > header .il-pagetitle {
    display: none !important;
}

/* Such-/Benutzerbereich rechts */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 84px !important;
}

/* Buttons in der Metabar ruhiger */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar button,
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar a {
    border-radius: 8px !important;
}

/* Responsive */
@media (max-width: 900px) {

    body.c-layout__page > .il-layout-page > header .header-inner {
        min-height: 76px !important;
        height: 76px !important;
        padding: 0 14px !important;
    }

    body.c-layout__page > .il-layout-page > header .il-logo {
        flex-basis: 270px !important;
        width: 270px !important;
        min-width: 270px !important;
        height: 60px !important;
    }

    body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
        min-height: 76px !important;
    }
}

@media (max-width: 620px) {

    body.c-layout__page > .il-layout-page > header .header-inner {
        min-height: 68px !important;
        height: 68px !important;
        padding: 0 10px !important;
    }

    body.c-layout__page > .il-layout-page > header .il-logo {
        flex-basis: 215px !important;
        width: 215px !important;
        min-width: 215px !important;
        height: 52px !important;
    }

    body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
        min-height: 68px !important;
    }
}


/* =========================================================
   EDUSPHERE – HEADER / NAVIGATION KORREKTUR
   ========================================================= */

/* Header bleibt sauber oberhalb der Navigation */
body.c-layout__page > .il-layout-page > header {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
}

/* Logo bekommt nur den tatsächlich benötigten Platz */
body.c-layout__page > .il-layout-page > header .il-logo {
    flex: 0 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 72px !important;

    background-position: left center !important;
    background-size: contain !important;
}

/* Header insgesamt etwas kompakter */
body.c-layout__page > .il-layout-page > header .header-inner {
    min-height: 82px !important;
    height: 82px !important;
    padding: 0 14px !important;
}

/* Hauptnavigation eindeutig unterhalb des Headers */
body.c-layout__page > .il-layout-page > .il-maincontrols,
body.c-layout__page > .il-layout-page .nav.il-maincontrols {
    position: relative !important;
    z-index: 10 !important;
}

/* Metabar weiterhin ganz rechts */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
    margin-left: auto !important;
    min-height: 82px !important;
}


/* =========================================================
   EDUSPHERE – HEADER VON HAUPTNAVIGATION TRENNEN
   ========================================================= */

/* Breite der linken ILIAS-Hauptnavigation */
:root {
    --edusphere-mainbar-width: 74px;
}

/* Header erst rechts neben der Hauptnavigation beginnen */
body.c-layout__page > .il-layout-page > header {
    margin-left: var(--edusphere-mainbar-width) !important;
    width: calc(100% - var(--edusphere-mainbar-width)) !important;
}

/* Logo kompakt im eigentlichen Header */
body.c-layout__page > .il-layout-page > header .il-logo {
    flex: 0 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
    height: 70px !important;
}

/* Hauptnavigation ganz links */
body.c-layout__page .il-maincontrols-mainbar {
    left: 0 !important;
}


/* =========================================================
   EDUSPHERE – HEADER FINAL FIX
   ILIAS Grid bleibt bei 60px
   ========================================================= */

/* vorherige Verschiebung zurücknehmen */
body.c-layout__page > .il-layout-page > header {
    margin-left: 0 !important;
    width: 100% !important;

    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* exakt an ILIAS-Grid anpassen */
body.c-layout__page > .il-layout-page > header .header-inner {
    height: 60px !important;
    min-height: 60px !important;

    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
}

/* Logo innerhalb der 60px-Zeile */
body.c-layout__page > .il-layout-page > header .il-logo {
    flex: 0 0 205px !important;

    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;

    overflow: hidden !important;
}

/* Original-ILIAS-Logo ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo img {
    display: none !important;
}

/* Klickfläche beibehalten */
body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* mobilen Original-Header ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

/* alten Seitentitel ausblenden */
body.c-layout__page > .il-layout-page > header .il-pagetitle {
    display: none !important;
}

/* Metabar passend zur 60px-Zeile */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
    min-height: 60px !important;
    height: 60px !important;

    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   EDUSPHERE – HEADER FINAL FIX
   ILIAS Grid bleibt bei 60px
   ========================================================= */

/* vorherige Verschiebung zurücknehmen */
body.c-layout__page > .il-layout-page > header {
    margin-left: 0 !important;
    width: 100% !important;

    background: #ffffff !important;
    border-bottom: 1px solid #e3e9ed !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* exakt an ILIAS-Grid anpassen */
body.c-layout__page > .il-layout-page > header .header-inner {
    height: 60px !important;
    min-height: 60px !important;

    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
}

/* Logo innerhalb der 60px-Zeile */
body.c-layout__page > .il-layout-page > header .il-logo {
    flex: 0 0 205px !important;

    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;

    overflow: hidden !important;
}

/* Original-ILIAS-Logo ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo img {
    display: none !important;
}

/* Klickfläche beibehalten */
body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body.c-layout__page > .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* mobilen Original-Header ausblenden */
body.c-layout__page > .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

/* alten Seitentitel ausblenden */
body.c-layout__page > .il-layout-page > header .il-pagetitle {
    display: none !important;
}

/* Metabar passend zur 60px-Zeile */
body.c-layout__page > .il-layout-page > header .il-maincontrols-metabar {
    min-height: 60px !important;
    height: 60px !important;

    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   EDUSPHERE – LINKE HAUPTNAVIGATION
   ========================================================= */

/* Hauptleiste */
body.c-layout__page .il-mainbar {
    background: #19465b !important;
    box-shadow: 1px 0 4px rgba(0,0,0,0.10) !important;
}

/* Navigationseinträge */
body.c-layout__page .il-mainbar-triggers .btn-bulky,
body.c-layout__page .il-mainbar-triggers .il-link.link-bulky,
body.c-layout__page .il-mainbar-tools-button .btn-bulky,
body.c-layout__page .il-mainbar-tools-button .il-link.link-bulky,
body.c-layout__page .il-mainbar-tool-trigger-item .btn-bulky,
body.c-layout__page .il-mainbar-tool-trigger-item .il-link.link-bulky {
    background: #19465b !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Labels */
body.c-layout__page .il-mainbar-triggers .bulky-label,
body.c-layout__page .il-mainbar-tools-button .bulky-label,
body.c-layout__page .il-mainbar-tool-trigger-item .bulky-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Icons weiß */
body.c-layout__page .il-mainbar-triggers .icon,
body.c-layout__page .il-mainbar-tools-button .icon,
body.c-layout__page .il-mainbar-tool-trigger-item .icon {
    filter: brightness(0) invert(1) !important;
}

/* Hover */
body.c-layout__page .il-mainbar-triggers .btn-bulky:hover,
body.c-layout__page .il-mainbar-triggers .il-link.link-bulky:hover,
body.c-layout__page .il-mainbar-tools-button .btn-bulky:hover,
body.c-layout__page .il-mainbar-tools-button .il-link.link-bulky:hover,
body.c-layout__page .il-mainbar-tool-trigger-item .btn-bulky:hover,
body.c-layout__page .il-mainbar-tool-trigger-item .il-link.link-bulky:hover {
    background: #245f7a !important;
}

/* Aktiver / aufgeklappter Eintrag */
body.c-layout__page .il-mainbar-triggers .btn-bulky.engaged,
body.c-layout__page .il-mainbar-triggers .il-link.link-bulky.engaged,
body.c-layout__page .il-mainbar-tools-button .btn-bulky.engaged,
body.c-layout__page .il-mainbar-tools-button .il-link.link-bulky.engaged,
body.c-layout__page .il-mainbar-tool-trigger-item .btn-bulky.engaged,
body.c-layout__page .il-mainbar-tool-trigger-item .il-link.link-bulky.engaged {
    background: #245f7a !important;
    color: #ffffff !important;
}

/* Aktiver Eintrag – Label */
body.c-layout__page .il-mainbar-triggers .engaged .bulky-label,
body.c-layout__page .il-mainbar-tools-button .engaged .bulky-label,
body.c-layout__page .il-mainbar-tool-trigger-item .engaged .bulky-label {
    color: #ffffff !important;
}

/* Aktiver Eintrag – Icon */
body.c-layout__page .il-mainbar-triggers .engaged .icon,
body.c-layout__page .il-mainbar-tools-button .engaged .icon,
body.c-layout__page .il-mainbar-tool-trigger-item .engaged .icon {
    filter: brightness(0) invert(1) !important;
}

/* Fokuszustand */
body.c-layout__page .il-mainbar-triggers .btn-bulky:focus-visible,
body.c-layout__page .il-mainbar-triggers .il-link.link-bulky:focus-visible {
    background: #245f7a !important;
    outline: 2px solid #ffffff !important;
    outline-offset: -3px !important;
}

/* kleine optische Trennung rechts */
body.c-layout__page .il-mainbar {
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}


/* =========================================================
   EDUSPHERE – ZWEITE NAVIGATIONSEBENE / SLATE
   Nur optische Anpassungen
   ========================================================= */

/* Grundfläche des aufgeklappten zweiten Menüs */
body.c-layout__page .il-mainbar-slates {
    background: #f7f9fa !important;
    border-right: 1px solid #dce4e8 !important;
    box-shadow: 3px 0 8px rgba(0,0,0,0.06) !important;
}

/* Einzelne Slate-Fläche */
body.c-layout__page .il-mainbar-slates .il-maincontrols-slate {
    background: #f7f9fa !important;
    color: #1d2935 !important;
}

/* Inhaltsbereich */
body.c-layout__page .il-mainbar-slates .il-maincontrols-slate-content {
    background: #f7f9fa !important;
    color: #1d2935 !important;
}

/* Überschriften innerhalb des zweiten Menüs */
body.c-layout__page .il-mainbar-slates h1,
body.c-layout__page .il-mainbar-slates h2,
body.c-layout__page .il-mainbar-slates h3,
body.c-layout__page .il-mainbar-slates h4,
body.c-layout__page .il-mainbar-slates .panel-title {
    color: #19465b !important;
    font-weight: 600 !important;
}

/* Menüeinträge */
body.c-layout__page .il-mainbar-slates .btn-bulky,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger {
    background: transparent !important;
    color: #1d2935 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Beschriftung */
body.c-layout__page .il-mainbar-slates .btn-bulky .bulky-label,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky .bulky-label,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger .bulky-label {
    color: #1d2935 !important;
}

/* Icons */
body.c-layout__page .il-mainbar-slates .btn-bulky .icon,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky .icon,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger .icon {
    filter: none !important;
}

/* Hover */
body.c-layout__page .il-mainbar-slates .btn-bulky:hover,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky:hover,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger:hover {
    background: #e8f0f4 !important;
    color: #19465b !important;
}

/* Hover Label */
body.c-layout__page .il-mainbar-slates .btn-bulky:hover .bulky-label,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky:hover .bulky-label,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger:hover .bulky-label {
    color: #19465b !important;
}

/* Aktiver / ausgewählter Eintrag */
body.c-layout__page .il-mainbar-slates .btn-bulky.engaged,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky.engaged,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger.engaged {
    background: #dcebf2 !important;
    color: #19465b !important;
}

/* Aktiver Labeltext */
body.c-layout__page .il-mainbar-slates .engaged .bulky-label {
    color: #19465b !important;
    font-weight: 600 !important;
}

/* Fokus – Tastaturbedienung sichtbar lassen */
body.c-layout__page .il-mainbar-slates .btn-bulky:focus-visible,
body.c-layout__page .il-mainbar-slates .il-link.link-bulky:focus-visible,
body.c-layout__page .il-mainbar-slates .c-drilldown__menulevel--trigger:focus-visible {
    background: #e8f0f4 !important;
    outline: 2px solid #245f7a !important;
    outline-offset: -2px !important;
}

/* Sekundäre Panels im Slate */
body.c-layout__page .il-mainbar-slates .panel-secondary {
    background: transparent !important;
    border-color: #dce4e8 !important;
    box-shadow: none !important;
}

/* Links im Slate */
body.c-layout__page .il-mainbar-slates a {
    color: #245f7a;
}

body.c-layout__page .il-mainbar-slates a:hover {
    color: #19465b;
}

/* Schließen-Schaltfläche – nur Farbe */
body.c-layout__page .il-mainbar-close-slates .btn-bulky {
    background: #19465b !important;
    color: #ffffff !important;
    border-color: #19465b !important;
}

body.c-layout__page .il-mainbar-close-slates .btn-bulky:hover {
    background: #245f7a !important;
    color: #ffffff !important;
}

body.c-layout__page .il-mainbar-close-slates .btn-bulky .glyph {
    color: #ffffff !important;
}


/* =========================================================
   EDUSPHERE – AKTIVER EINTRAG IM ZWEITEN MENÜ
   Nur optische Hervorhebung
   ========================================================= */

/* normaler Menüeintrag */
body.c-layout__page .il-mainbar-slates .btn-bulky,
body.c-layout__page .il-mainbar-slates .link-bulky {
    border-left: 3px solid transparent !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease !important;
}

/* Hover */
body.c-layout__page .il-mainbar-slates .btn-bulky:hover,
body.c-layout__page .il-mainbar-slates .link-bulky:hover {
    background-color: #e8f0f4 !important;
    border-left-color: #7fa8ba !important;
}

/* aktiver Menüpunkt */
body.c-layout__page .il-mainbar-slates .btn-bulky.engaged,
body.c-layout__page .il-mainbar-slates .link-bulky.engaged {
    background-color: #dcebf2 !important;
    border-left-color: #245f7a !important;
    color: #19465b !important;
}

/* aktive Beschriftung */
body.c-layout__page .il-mainbar-slates .btn-bulky.engaged .bulky-label,
body.c-layout__page .il-mainbar-slates .link-bulky.engaged .bulky-label {
    color: #19465b !important;
    font-weight: 600 !important;
}

/* aktive Icons weiterhin sichtbar */
body.c-layout__page .il-mainbar-slates .btn-bulky.engaged .icon,
body.c-layout__page .il-mainbar-slates .link-bulky.engaged .icon {
    filter: invert(34%) sepia(22%) saturate(1120%) hue-rotate(152deg)
            brightness(88%) contrast(88%) !important;
}

/* ILIAS-Pfeile bei engaged/disengaged bewusst NICHT verändern */


/* =========================================================
   EDUSPHERE – LOGIN ZWEISPALTIG
   Keine Änderung an Login-Funktion oder Formularstruktur
   ========================================================= */

/*
 * Nur die äußere StartupSection anfassen,
 * die tatsächlich das Loginformular enthält.
 */
.ilStartupSection:has(> form[name="login_form"]) {
    display: grid !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    width: min(1080px, calc(100vw - 60px)) !important;
    max-width: 1080px !important;

    margin: 45px auto 40px auto !important;

    background: #ffffff !important;

    border: 1px solid #e1e8ec !important;
    border-radius: 18px !important;

    box-shadow: 0 12px 35px rgba(25, 70, 91, 0.10) !important;

    overflow: hidden !important;
}


/* =========================================================
   LINKE SPALTE – EDUSPHERE BRANDING
   ========================================================= */

.ilStartupSection:has(> form[name="login_form"])::before {
    content:
        "Willkommen bei EduSphere\A\A"
        "Learning Space Plattform\A"
        "Digitale Lehre. Praktische Übung.\A"
        "Gemeinsam zum Erfolg.";

    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    box-sizing: border-box !important;

    min-height: 520px !important;

    padding: 245px 48px 55px 48px !important;

    background-color: #f2f7f9 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: 48px 75px !important;
    background-size: min(330px, calc(100% - 96px)) auto !important;

    color: #19465b !important;

    white-space: pre-line !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;

    border-right: 1px solid #e1e8ec !important;
}


/* erste Zeile des Branding-Textes etwas stärker */
.ilStartupSection:has(> form[name="login_form"])::before {
    letter-spacing: 0.01em;
}


/* =========================================================
   RECHTE SPALTE – LOGINFORMULAR
   ========================================================= */

.ilStartupSection:has(> form[name="login_form"])
> form[name="login_form"] {

    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;

    margin: 0 !important;

    background: #ffffff !important;
}


/*
 * Bestehende innere StartupSections:
 * Registrierung / Passwort vergessen
 */
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection {

    grid-column: 2 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: #ffffff !important;
}


/* Registrierungslinks etwas sauberer vom Formular trennen */
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSectionRegistrationLinks,
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection
.ilStartupSectionRegistrationLinks {

    margin: 0 !important;
    padding: 0 42px 34px 42px !important;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .ilStartupSection:has(> form[name="login_form"]) {
        display: block !important;

        width: min(560px, calc(100vw - 30px)) !important;
        max-width: 560px !important;

        margin: 25px auto 30px auto !important;
    }

    .ilStartupSection:has(> form[name="login_form"])::before {
        display: block !important;

        min-height: 260px !important;

        padding: 155px 28px 32px 28px !important;

        background-position: 28px 34px !important;
        background-size: min(285px, calc(100% - 56px)) auto !important;

        border-right: 0 !important;
        border-bottom: 1px solid #e1e8ec !important;

        font-size: 15px !important;
    }

    .ilStartupSection:has(> form[name="login_form"])
    > form[name="login_form"] {
        width: 100% !important;
    }

    .ilStartupSection:has(> form[name="login_form"])
    > .ilStartupSection {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   EDUSPHERE – LOGIN IM MOODLE-LOOK
   ========================================================= */

/* gesamte Loginfläche */
body:has(.ilStartupSection form[name="login_form"]) {
    background:
        url("/Customizing/skin/EduSphere/images/login_desktop.png")
        center center / cover no-repeat fixed !important;
}

/* ILIAS-Hintergrund im Inhaltsbereich transparent */
body:has(.ilStartupSection form[name="login_form"])
.il-layout-page,
body:has(.ilStartupSection form[name="login_form"])
#ilContentContainer,
body:has(.ilStartupSection form[name="login_form"])
#il_center_col {
    background: transparent !important;
}

/* äußeren Inhaltsbereich auf volle Fläche bringen */
body:has(.ilStartupSection form[name="login_form"])
#ilContentContainer {
    min-height: calc(100vh - 60px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 40px 7vw 40px 40px !important;
}

/* Bootstrap-Zeile/Spalte neutralisieren */
body:has(.ilStartupSection form[name="login_form"])
#ilContentContainer > .row {
    width: 100% !important;
    margin: 0 !important;
}

body:has(.ilStartupSection form[name="login_form"])
#il_center_col {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* =========================================================
   LOGIN-CARD
   ========================================================= */

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"]) {
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255,255,255,0.97) !important;

    border: 1px solid rgba(220,228,232,0.95) !important;
    border-radius: 14px !important;

    box-shadow: 0 12px 34px rgba(20,45,58,0.18) !important;

    overflow: hidden !important;
}

/* Formular */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] {
    padding: 34px 38px 22px 38px !important;
}

/* Überschrift */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] h2 {
    color: #19465b !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin: 0 0 26px 0 !important;
}

/* Pflichtangabe oben im Formular ausblenden */
body:has(.ilStartupSection form[name="login_form"])
.c-form__header .c-form__required {
    display: none !important;
}

/* Pflichtangabe unten ebenfalls ausblenden */
body:has(.ilStartupSection form[name="login_form"])
.c-form__footer .c-form__required {
    display: none !important;
}

/* Felder */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] input[type="text"],
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] input[type="password"] {
    height: 48px !important;

    border: 1px solid #cfd9de !important;
    border-radius: 7px !important;

    background: #ffffff !important;

    box-shadow: none !important;

    font-size: 15px !important;
}

/* Feldfokus */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] input[type="text"]:focus,
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] input[type="password"]:focus {
    border-color: #245f7a !important;
    box-shadow: 0 0 0 3px rgba(36,95,122,0.12) !important;
}

/* Labels */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] label {
    color: #344550 !important;
    font-weight: 500 !important;
}

/* Anmeldebutton */
body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] .c-form__actions .btn {
    width: 100% !important;
    min-height: 48px !important;

    background: #245f7a !important;
    border-color: #245f7a !important;

    color: #ffffff !important;

    border-radius: 7px !important;

    font-weight: 600 !important;
}

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection form[name="login_form"] .c-form__actions .btn:hover {
    background: #19465b !important;
    border-color: #19465b !important;
}

/* =========================================================
   LINKS UNTER DEM LOGIN
   ========================================================= */

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection {
    max-width: none !important;
    margin: 0 !important;

    padding: 0 38px 30px 38px !important;

    background: transparent !important;
}

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSectionRegistrationLinks {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    border-top: 1px solid #e6ecef !important;
    padding-top: 18px !important;
}

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSectionRegistrationLinks li {
    margin: 7px 0 !important;
}

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSectionRegistrationLinks a {
    color: #245f7a !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

body:has(.ilStartupSection form[name="login_form"])
.ilStartupSectionRegistrationLinks a:hover {
    color: #19465b !important;
    text-decoration: underline !important;
}

/* =========================================================
   HEADER AUF LOGINSEITE ZURÜCKHALTEND
   ========================================================= */

body:has(.ilStartupSection form[name="login_form"])
header {
    background: rgba(255,255,255,0.96) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    body:has(.ilStartupSection form[name="login_form"]) {
        background-position: center center !important;
    }

    body:has(.ilStartupSection form[name="login_form"])
    #ilContentContainer {
        justify-content: center !important;
        padding: 25px 18px !important;
    }

    body:has(.ilStartupSection form[name="login_form"])
    #il_center_col {
        justify-content: center !important;
    }

    body:has(.ilStartupSection form[name="login_form"])
    .ilStartupSection:has(> form[name="login_form"]) {
        max-width: 460px !important;
    }

    body:has(.ilStartupSection form[name="login_form"])
    .ilStartupSection form[name="login_form"] {
        padding: 28px 24px 20px 24px !important;
    }

    body:has(.ilStartupSection form[name="login_form"])
    .ilStartupSection:has(> form[name="login_form"])
    > .ilStartupSection {
        padding: 0 24px 26px 24px !important;
    }
}


/* =========================================================
   EDUSPHERE – LOGIN CARD KORREKTUR
   Moodle-Look / nur ILIAS Login
   ========================================================= */

/* Alte grafische Zusatzelemente der Login-Card entfernen */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])::before,
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])::after {
    display: none !important;
    content: none !important;
}

/* Card definitiv einspaltig */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"]) {
    display: block !important;

    width: 370px !important;
    min-width: 0 !important;
    max-width: 370px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255,255,255,0.98) !important;

    border: 1px solid #dfe7eb !important;
    border-radius: 12px !important;

    box-shadow: 0 12px 32px rgba(25,70,91,0.16) !important;

    overflow: hidden !important;
}

/* Formular darf keine alte Spaltenposition mehr besitzen */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> form[name="login_form"] {
    display: block !important;

    position: static !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 32px 32px 20px 32px !important;

    transform: none !important;

    background: transparent !important;

    box-sizing: border-box !important;
}

/* Alle Formularelemente innerhalb der Card */
body:has(form[name="login_form"])
form[name="login_form"] fieldset.c-input,
body:has(form[name="login_form"])
form[name="login_form"] .c-input__field {
    width: 100% !important;
    max-width: none !important;

    float: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

/* Überschrift */
body:has(form[name="login_form"])
form[name="login_form"] h2 {
    margin: 0 0 25px 0 !important;

    color: #19465b !important;

    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: left !important;
}

/* Eingabefelder */
body:has(form[name="login_form"])
form[name="login_form"] input[type="text"],
body:has(form[name="login_form"])
form[name="login_form"] input[type="password"] {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;
}

/* Buttonbereich */
body:has(form[name="login_form"])
form[name="login_form"] .c-form__footer,
body:has(form[name="login_form"])
form[name="login_form"] .c-form__actions {
    width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
}

/* Anmelden */
body:has(form[name="login_form"])
form[name="login_form"] .c-form__actions .btn {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 8px 0 0 0 !important;
}

/* Links unter dem Formular */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection {
    display: block !important;

    position: static !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 32px 27px 32px !important;

    transform: none !important;

    background: transparent !important;

    box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 850px) {

    body:has(form[name="login_form"])
    .ilStartupSection:has(> form[name="login_form"]) {
        width: 100% !important;
        max-width: 400px !important;
    }

}


/* =========================================================
   EDUSPHERE – LOGIN BUTTON FINAL
   ========================================================= */

body:has(form[name="login_form"])
form[name="login_form"] .c-form__footer {
    display: block !important;
    width: 100% !important;
}

body:has(form[name="login_form"])
form[name="login_form"] .c-form__actions {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body:has(form[name="login_form"])
form[name="login_form"] .c-form__actions .btn,
body:has(form[name="login_form"])
form[name="login_form"] button[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 10px 16px !important;

    background: #245f7a !important;
    border: 1px solid #245f7a !important;
    border-radius: 7px !important;

    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    text-align: center !important;
    box-sizing: border-box !important;
}

body:has(form[name="login_form"])
form[name="login_form"] .c-form__actions .btn:hover,
body:has(form[name="login_form"])
form[name="login_form"] button[type="submit"]:hover {
    background: #19465b !important;
    border-color: #19465b !important;
}


/* =========================================================
   EDUSPHERE – LOGIN CARD FEINSCHLIFF
   ========================================================= */

/* Bereich mit Registrierung / Passwortlinks kompakter */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection {
    padding: 0 32px 22px 32px !important;
}

/* Linkbereich */
body:has(form[name="login_form"])
.ilStartupSectionRegistrationLinks {
    padding-top: 13px !important;
    margin: 0 !important;
    border-top: 1px solid #e6ecef !important;
}

body:has(form[name="login_form"])
.ilStartupSectionRegistrationLinks li {
    margin: 0 !important;
    padding: 5px 0 !important;
}

/* Links */
body:has(form[name="login_form"])
.ilStartupSectionRegistrationLinks a {
    display: inline-block !important;
    color: #245f7a !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Leeren zusätzlichen Startup-Bereich entfernen */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> .ilStartupSection:empty {
    display: none !important;
}

/* Card-Höhe ausschließlich durch Inhalt bestimmen */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"]) {
    min-height: 0 !important;
    height: auto !important;
}


/* =========================================================
   EDUSPHERE – LOGIN HEADER
   quadratisches EduSphere Icon
   ========================================================= */

/* Header auf der Loginseite */
body:has(form[name="login_form"])
> .il-layout-page > header {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid #e3e9ed !important;
    box-shadow: 0 1px 3px rgba(25,70,91,0.08) !important;
}

/* Header-Innenbereich */
body:has(form[name="login_form"])
> .il-layout-page > header .header-inner {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 18px !important;
}

/* Logo-Bereich auf Loginseite */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo {
    position: relative !important;

    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/header_icon.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 46px 46px !important;

    overflow: hidden !important;
}

/* Originales ILIAS-Logo weiterhin ausblenden */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo img {
    display: none !important;
}

/* klickbare Fläche über dem EduSphere-Icon */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mobile-Originalsymbol nicht zusätzlich anzeigen */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

/* Seitentitel im Header auf der Loginseite ausblenden */
body:has(form[name="login_form"])
> .il-layout-page > header .il-pagetitle {
    display: none !important;
}


/* =========================================================
   EDUSPHERE – LOGIN HEADER ICON POSITION KORREKTUR
   ========================================================= */

body:has(form[name="login_form"])
> .il-layout-page > header .header-inner {
    padding-left: 20px !important;
    padding-right: 14px !important;
}

/* Logo-Container sauber zentrieren */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo {
    position: relative !important;

    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;

    background-size: 40px 40px !important;
    background-position: center center !important;
}

/* klickbare Fläche exakt auf das Icon begrenzen */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.hidden-xs {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
}

/* Metabar rechts vertikal sauber ausrichten */
body:has(form[name="login_form"])
> .il-layout-page > header .il-maincontrols-metabar {
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   EDUSPHERE – LOGIN HEADER ZURÜCK AUF BREITES LOGO
   ========================================================= */

body:has(form[name="login_form"])
> .il-layout-page > header .header-inner {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo {
    position: relative !important;

    flex: 0 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;

    overflow: hidden !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo img {
    display: none !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.hidden-xs {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.hidden-xs > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-logo > span.visible-xs-block {
    display: none !important;
}

body:has(form[name="login_form"])
> .il-layout-page > header .il-pagetitle {
    display: none !important;
}


/* =========================================================
   EDUSPHERE – LOGIN: LOGO ÜBER DEM LOGINBEREICH
   ========================================================= */

/* Auf der Loginseite kein Logo mehr links in der Kopfzeile */
body:has(form[name="login_form"])
> .il-layout-page > header .il-logo {
    display: none !important;
}

/* Login-Karte darf wieder ein Branding-Element erhalten */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])::before {
    content: "" !important;
    display: block !important;

    width: 100% !important;
    height: 82px !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 185px auto !important;

    background-color: #ffffff !important;

    border-bottom: 1px solid #e7ecef !important;

    box-sizing: border-box !important;
}

/* eventuell vorhandenes zweites Pseudo-Element weiterhin deaktivieren */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])::after {
    display: none !important;
    content: none !important;
}

/* Formular etwas kompakter an das Logo anschließen */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> form[name="login_form"] {
    padding-top: 25px !important;
}


/* =========================================================
   EDUSPHERE – LOGIN LOGOBEREICH KOMPAKT
   ========================================================= */

body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])::before {
    content: "" !important;
    display: block !important;

    width: 100% !important;

    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/Customizing/skin/EduSphere/images/Logo_quer_klein.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 155px auto !important;

    background-color: #ffffff !important;

    border-bottom: 1px solid #e7ecef !important;

    box-sizing: border-box !important;

    position: static !important;
    float: none !important;
    transform: none !important;
}

/* Formular etwas näher an das Logo */
body:has(form[name="login_form"])
.ilStartupSection:has(> form[name="login_form"])
> form[name="login_form"] {
    padding-top: 24px !important;
}