/* ===== Xinion Academy – LMS-Landingpage (Welle 1: Header / Hero / Footer, HPI-Style) =====
   Eingebunden via Theme-Template head-extra.html. Nur Layout/Struktur – Farben
   (#4F46E5) + Bilder bleiben unsere. Login-MFE ist NICHT betroffen (eigenes CSS).
   Texte sind Platzhalter aus dem Bestand und werden später final gesetzt. */
:root{
  --xi-brand:#4F46E5; --xi-700:#3730A3; --xi-ink:#1f2330; --xi-muted:#5b6172;
  --xi-line:#e7e8ee; --xi-soft:#f6f7fb; --xi-brand-50:#eef2ff;
}

/* ===== Einheitliche Schrift: Inter überall (ersetzt indigo Open Sans + Crimson-Serif). Icons/Monospace ausgenommen. ===== */
body, body *:not(i):not(svg):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="icon"]):not([class*="material"]):not(pre):not(code):not(kbd){
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ---------------- HEADER: nur sticky + Feinschliff (Indigo-Layout NICHT anfassen) ---------------- */
header.global-header{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--xi-line); box-shadow:0 1px 0 rgba(20,20,50,.02);
}
header.global-header .header-logo img{ height:30px; width:auto; }
header.global-header .sign-in-btn{
  background:var(--xi-brand) !important; color:#fff !important; border:none !important;
  border-radius:8px !important; padding:9px 18px !important; font-weight:600 !important;
}
header.global-header .sign-in-btn:hover{ background:var(--xi-700) !important; }
header.global-header .register-btn{
  background:#fff !important; color:var(--xi-ink) !important; border:1px solid var(--xi-line) !important;
  border-radius:8px !important; padding:9px 18px !important; font-weight:600 !important;
}
header.global-header .register-btn:hover{ border-color:var(--xi-brand) !important; color:var(--xi-brand) !important; }

/* ---------------- HERO: Titelbild NUR auf den Header (oben), darunter weiß ---------------- */
.home.style-logout{ background:none !important; }
.home.style-logout > header{
  display:block !important;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(250,248,255,0.91) 30%, rgba(199,189,248,0.74) 55%, rgba(139,124,238,0.46) 76%, rgba(49,46,129,0.12) 100%),
    url('/static/indigo/images/login-bg.jpg') center center / cover no-repeat !important;
  border-radius:24px !important;
  overflow:hidden !important;
  margin:24px auto 8px auto !important;
  max-width:1600px !important;
  width:calc(100% - 56px) !important;
}
.home.style-logout .outer-wrapper{
  max-width:900px !important; margin:0 auto !important; padding:40px 24px 31px !important;
}
.home.style-logout .title{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; width:100% !important;
}
.home.style-logout .heading-group{ text-align:center !important; width:100%; }
.home.style-logout .heading-group h1{
  font-size:46px !important; line-height:1.14 !important; font-weight:800 !important;
  letter-spacing:-.02em !important; color:var(--xi-ink) !important; margin:0 0 16px !important;
  text-align:center !important;
  text-shadow:0 4px 7px rgba(17,12,48,.55), 0 2px 3px rgba(17,12,48,.45) !important;
}
.home.style-logout .heading-group p{
  font-size:19px !important; line-height:1.55 !important; color:var(--xi-ink) !important;
  max-width:640px !important; margin:0 auto 36px !important; text-align:center !important;
  text-shadow:0 3px 6px rgba(17,12,48,.48), 0 1px 2px rgba(17,12,48,.4) !important;
}
/* Suche: eine zentrierte, gerundete Leiste */
.home.style-logout .course-search{ width:100%; max-width:680px !important; margin:0 auto !important; }
.home.style-logout .search-field-wrapper{
  display:flex !important; align-items:center !important; gap:8px !important; background:#fff !important;
  border:1px solid var(--xi-line) !important; border-radius:12px !important; padding:6px 6px 6px 16px !important;
  box-shadow:0 4px 18px rgba(31,27,90,.07) !important;
}
.home.style-logout .input-holder{ display:flex !important; align-items:center !important; gap:10px !important; flex:1 !important; margin:0 !important; }
.home.style-logout .search-input{
  border:none !important; box-shadow:none !important; height:46px !important;
  font-size:16px !important; width:100% !important; background:transparent !important;
}
.home.style-logout .search-input:focus{ outline:none !important; }
.home.style-logout .button-holder{ margin:0 !important; }
.home.style-logout .search-button{
  background:var(--xi-brand) !important; color:#fff !important; border:none !important; border-radius:9px !important;
  padding:0 22px !important; height:46px !important; font-weight:600 !important; font-size:15px !important;
}
.home.style-logout .search-button:hover{ background:var(--xi-700) !important; }

/* Kurs-Bereich darunter luftig zentriert */
.courses-container{ max-width:1180px !important; margin:0 auto !important; padding:52px 32px 72px !important; }

/* ---------------- FOOTER: aufgeräumt, luftig ---------------- */
.wrapper-footer{ background:#fff; border-top:1px solid var(--xi-line); margin-top:24px; }
.wrapper-footer #footer.tutor-container{ max-width:1180px; margin:0 auto; padding:46px 32px 30px; }
.wrapper-footer .footer-top{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.wrapper-footer .nav-colophon ol{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.wrapper-footer .nav-colophon a{ color:var(--xi-ink); font-weight:600; font-size:14px; }
.wrapper-footer .nav-colophon a:hover{ color:var(--xi-brand); }
.wrapper-footer .powered-area .logo-list{ display:flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0; color:var(--xi-muted); font-size:13px; }
.wrapper-footer .copyright-site, .wrapper-footer .copyright{ color:var(--xi-muted); font-size:13px; }
.wrapper-footer .copyright-site{ display:block; margin-top:18px; }

/* ================= WELLE 2: Kurskarten (Katalog) HPI-Style ================= */
/* Karte (indigos vorhandenes Listenlayout bleibt; nur die Karten-Optik) */
.courses-listing .course{
  width:100% !important; min-width:0 !important; justify-self:stretch !important; box-sizing:border-box !important; margin:0 !important; background:#fff !important;
  border:1px solid var(--xi-line) !important; border-radius:16px !important; overflow:hidden !important;
  box-shadow:none !important; display:flex !important; flex-direction:column !important;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
}
.courses-listing .course:hover{ box-shadow:0 12px 30px rgba(31,27,90,.13) !important; transform:translateY(-2px) !important; }
/* Bild 16:10 */
.courses-listing .course .course-image{ margin:0 !important; }
.courses-listing .course .cover-image{ margin:0 !important; }
.courses-listing .course .course-image img{
  width:100% !important; height:172px !important; object-fit:cover !important; display:block !important; border-radius:0 !important;
}
/* Info-Bereich */
.courses-listing .course .course-info{ display:flex !important; flex-direction:column !important; flex:1 !important; padding:20px 22px 22px !important; }
.courses-listing .course .course-name{ display:flex !important; flex-direction:column !important; gap:3px !important; margin:0 !important; order:1 !important; }
.courses-listing .course .course-title{ order:1 !important; font-size:17px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--xi-ink) !important; }
.courses-listing .course .course-code{ order:2 !important; font-size:12px !important; font-weight:600 !important; color:var(--xi-muted) !important; letter-spacing:.02em !important; }
.courses-listing .course .course-organization{ order:3 !important; font-size:13px !important; color:var(--xi-muted) !important; }
/* Kurzbeschreibung in der Kachel (Homepage-Highlights) */
.courses-listing .course .course-desc{ order:1 !important; margin:10px 0 0 !important; font-size:13.5px !important; line-height:1.5 !important; color:var(--xi-muted) !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
/* Homepage-Highlights: 4er-Grid (Startseite hat keinen .find-courses-Kontext fuers Basis-Grid) */
.home-highlights{ max-width:1180px !important; margin:0 auto !important; padding:28px 32px 72px !important; display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:26px !important; list-style:none !important; }
.home-highlights .courses-listing-item{ margin:0 !important; padding:0 !important; list-style:none !important; }
/* Nur 4 Kacheln zeigen; JS (index.html) mischt die Reihenfolge je Reload -> 4 zufaellige */
.home-highlights .courses-listing-item:nth-child(n+5){ display:none !important; }
@media (max-width:992px){ .home-highlights{ grid-template-columns:repeat(2,1fr) !important; padding:24px 20px 48px !important; } }
@media (max-width:600px){ .home-highlights{ grid-template-columns:1fr !important; } }
/* Datum als Meta-Zeile */
.courses-listing .course .course-date{ order:2 !important; margin:14px 0 0 !important; font-size:13px !important; color:var(--xi-muted) !important; display:flex !important; align-items:center !important; gap:8px !important; }
.courses-listing .course .course-date svg{ flex:0 0 auto !important; }
/* Button unten fixiert */
.courses-listing .course .learn-more{
  order:3 !important; margin-top:auto !important; align-self:stretch !important; text-align:center !important;
  background:var(--xi-brand) !important; color:#fff !important; border-radius:9px !important;
  padding:11px 16px !important; font-weight:600 !important; font-size:14px !important; margin-bottom:0 !important;
}
.courses-listing .course .learn-more:hover{ background:var(--xi-700) !important; color:#fff !important; }
/* Abstand Button -> Datum */
.courses-listing .course .course-info > .learn-more{ margin-top:16px !important; }

/* ===== Kachel-Zusatzinfo: Inline-Meta (Dauer/Abschluss) + Hover-Overlay (Kursinfo) ===== */
.courses-listing .course .cover-image{ position:relative !important; }
.courses-listing .course .course-meta{ order:2 !important; display:flex !important; flex-direction:column !important; gap:6px !important; margin:12px 0 0 !important; }
.courses-listing .course .course-meta .mi{ display:flex !important; align-items:flex-start !important; gap:8px !important; font-size:12.5px !important; line-height:1.4 !important; color:var(--xi-muted) !important; }
.courses-listing .course .course-meta .mi svg{ flex:0 0 auto !important; margin-top:1px !important; color:var(--xi-brand) !important; }
.courses-listing .course .course-meta .mi b{ font-weight:600 !important; color:var(--xi-ink) !important; }
/* Hover-Overlay ueber dem Kachelbild */
.courses-listing .course .course-hover{ position:absolute !important; inset:0 !important; background:linear-gradient(180deg, rgba(31,27,90,.94), rgba(49,46,129,.94)) !important; color:#fff !important; padding:16px 20px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:9px !important; opacity:0 !important; transition:opacity .2s ease !important; pointer-events:none !important; }
.courses-listing .course:hover .course-hover{ opacity:1 !important; }
.courses-listing .course .course-hover h4{ margin:0 0 2px !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important; opacity:.8 !important; color:#fff !important; }
.courses-listing .course .course-hover .hi{ display:flex !important; gap:8px !important; font-size:13px !important; line-height:1.35 !important; }
.courses-listing .course .course-hover .hi .k{ opacity:.82 !important; min-width:74px !important; flex:0 0 auto !important; }
.courses-listing .course .course-hover .hi .v{ font-weight:600 !important; }
/* Dark-Mode: Inline-Meta hell (Kachel ist dunkel); Hover-Overlay bleibt violett/weiss */
body.indigo-dark-theme .courses-listing .course .course-meta .mi{ color:#a6adba !important; }
body.indigo-dark-theme .courses-listing .course .course-meta .mi b{ color:#e8eaef !important; }
body.indigo-dark-theme .courses-listing .course .course-meta .mi svg{ color:#a5b4fc !important; }

/* ================= WELLE 2.1: HPI-Feinschliff (Typo, Abstände, Karten, Katalog) ================= */
/* Hero: Lesemaß + größere Subline */
.home.style-logout .heading-group{ max-width:780px !important; margin-left:auto !important; margin-right:auto !important; }
.home.style-logout .heading-group p{ font-size:20px !important; line-height:1.6 !important; max-width:600px !important; }

/* Konsistenter vertikaler Rhythmus (8er-Takt) */
.courses-container{ padding:0 32px 72px !important; }
.wrapper-footer #footer.tutor-container{ padding:22px 32px 12px !important; }

/* Kurskarten: 16:10-Bild, 2-Zeilen-Titel (höhenstabil), abgesetzte Metazeile, edler Hover */
.courses-listing .course .course-image img{ aspect-ratio:16/10 !important; height:auto !important; }
.courses-listing .course .course-title{ font-size:18px !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; min-height:2.5em !important; }
.courses-listing .course:hover{ box-shadow:0 14px 34px rgba(31,27,90,.12) !important; transform:translateY(-3px) !important; border-color:rgba(79,70,229,.35) !important; }
.courses-listing .course:hover .course-title{ color:var(--xi-brand) !important; }
.courses-listing .course .course-date{ border-top:1px solid var(--xi-line) !important; padding-top:14px !important; }

/* Katalog: Überschrift + Suche konsistent zum Hero */
.find-courses .course-heading-area h2, .find-courses h2:first-of-type{ font-size:32px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--xi-ink) !important; line-height:1.2 !important; }
/* Kursseiten-Titelbanner: Bild + violett-dunkler Verlauf, weisser Text (Light + Dark) */
.find-courses .course-heading-area{
  position:relative !important; box-sizing:border-box !important;
  width:min(calc(100vw - 86px), 1544px) !important;
  left:50% !important; transform:translateX(-50%) !important;
  margin:128px 0 30px 0 !important;
  border-radius:24px !important; overflow:hidden !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-start !important;
  min-height:447px !important;
  padding:90px max(44px, calc((min(100vw - 86px, 1544px) - 900px) / 2)) 31px !important;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(250,248,255,0.91) 30%, rgba(199,189,248,0.74) 55%, rgba(139,124,238,0.46) 76%, rgba(49,46,129,0.12) 100%),
    url('/static/indigo/images/kurse-titelbild.jpg') center / cover no-repeat !important;
}
.find-courses .course-heading-area h2{ color:var(--xi-ink) !important; text-shadow:0 4px 7px rgba(17,12,48,.55), 0 2px 3px rgba(17,12,48,.45) !important; margin:0 0 16px !important; font-size:46px !important; line-height:1.14 !important; }
.find-courses .course-heading-area p{ color:var(--xi-ink) !important; text-shadow:0 3px 6px rgba(17,12,48,.48), 0 1px 2px rgba(17,12,48,.4) !important; max-width:600px !important; font-size:20px !important; line-height:1.6 !important; }
body.indigo-dark-theme .find-courses .course-heading-area h2{ color:var(--xi-ink) !important; }
body.indigo-dark-theme .find-courses .course-heading-area p{ color:var(--xi-ink) !important; }
.discover-search .discovery-input, .discover-search .input-holder input{
  border-radius:12px !important; height:50px !important; border:1px solid var(--xi-line) !important;
  box-shadow:0 4px 18px rgba(31,27,90,.06) !important; font-size:16px !important; padding:0 16px !important;
}
.discover-search .discovery-submit, .discover-search .button.postfix{
  border-radius:10px !important; background:var(--xi-brand) !important; color:#fff !important; border:none !important; font-weight:600 !important;
}
.discover-search .discovery-submit:hover, .discover-search .button.postfix:hover{ background:var(--xi-700) !important; }
/* Katalog-Suchleiste: Filter / Suchfeld / Button gleichmäßig (50px, zentriert, Lupe im Feld) */
.find-courses .saerch-bar-discover{ display:flex !important; align-items:flex-start !important; gap:12px !important; }
.find-courses .filter-block{ flex:0 0 auto !important; }
.find-courses .filter-block .dropdown-toggle{ height:50px !important; display:inline-flex !important; align-items:center !important; box-sizing:border-box !important; border-radius:12px !important; margin:0 !important; }
.find-courses .discover-search{ flex:1 1 auto !important; min-width:0 !important; }
.find-courses .discover-search .wrapper-search-input{ display:flex !important; align-items:center !important; gap:12px !important; margin:0 !important; }
.find-courses .discover-search .input-holder{ flex:1 1 auto !important; min-width:0 !important; height:50px !important; display:flex !important; align-items:center !important; gap:10px !important; box-sizing:border-box !important; border:1px solid var(--xi-line) !important; border-radius:12px !important; padding:0 16px !important; background:#fff !important; box-shadow:0 4px 18px rgba(31,27,90,.06) !important; }
.find-courses .discover-search .input-holder svg{ position:static !important; flex:0 0 auto !important; }
.find-courses .discover-search .discovery-input, .find-courses .discover-search .input-holder input{ height:auto !important; border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; flex:1 1 auto !important; min-width:0 !important; }
.find-courses .discover-search .button-holder{ flex:0 0 auto !important; margin:0 !important; }
.find-courses .discover-search .discovery-submit, .find-courses .discover-search .button.postfix{ height:50px !important; display:inline-flex !important; align-items:center !important; box-sizing:border-box !important; padding:0 28px !important; border-radius:12px !important; }
/* Suchleiste IM Banner: 1:1 wie Home-Hero (zentrierte weisse Pille mit Suche-Button; Filter ausgeblendet wie auf der Startseite) */
.find-courses .course-heading-area p{ margin:0 0 30px !important; }
.find-courses .course-heading-area .saerch-bar-discover{ display:block !important; width:100% !important; max-width:680px !important; margin:auto auto 0 !important; align-self:center !important; }
.find-courses .course-heading-area .filter-block, .find-courses .course-heading-area #filter-bar, .find-courses .course-heading-area #discovery-message{ display:none !important; }
.find-courses .course-heading-area .discover-search{ width:100% !important; flex:none !important; }
.find-courses .course-heading-area .discover-search .wrapper-search-input{ display:flex !important; align-items:center !important; gap:8px !important; background:#fff !important; border:1px solid var(--xi-line) !important; border-radius:12px !important; padding:6px 6px 6px 16px !important; box-shadow:0 4px 18px rgba(31,27,90,.07) !important; margin:0 !important; }
.find-courses .course-heading-area .discover-search .input-holder{ flex:1 1 auto !important; height:46px !important; border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; border-radius:0 !important; }
.find-courses .course-heading-area .discover-search .discovery-submit, .find-courses .course-heading-area .discover-search .button.postfix{ height:46px !important; padding:0 22px !important; border-radius:9px !important; }

/* Button-Konsistenz: einheitlicher Radius + Übergang */
.btn, button.search-button, .learn-more, .sign-in-btn, .register-btn{ transition:background .15s ease, box-shadow .15s ease, border-color .15s ease !important; }

/* Responsive */
@media (max-width:768px){
  .home.style-logout{ margin:16px 14px 8px !important; width:calc(100% - 28px) !important; }
  .home.style-logout .outer-wrapper{ padding:42px 20px 36px !important; }
  .home.style-logout .heading-group h1{ font-size:32px !important; }
  .home.style-logout .heading-group p{ font-size:17px !important; }
  .courses-container{ padding:48px 20px !important; }
  .wrapper-footer .footer-top{ gap:18px !important; }
}

/* ================= REDESIGN: neue Startseiten-Sektionen (Säulen, Zielgruppen) ================= */
.xi-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.xi-eyebrow{ color:var(--xi-brand); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; }
.xi-sec{ font-size:32px; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:var(--xi-ink); }
.xi-sub{ color:var(--xi-muted); font-size:17px; line-height:1.6; margin:0 0 40px; max-width:none; }

/* 3 Säulen */
.xi-pillars{ background:#fff; }
.xi-pillars .xi-wrap{ padding:72px 32px; display:flex; gap:32px; }
.xi-pillar{ flex:1; text-align:center; padding:0 10px; }
.xi-pillar .xi-ic{ width:60px; height:60px; border-radius:16px; background:#f3f4f7; color:var(--xi-brand); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.xi-pillar .xi-ic svg{ width:28px; height:28px; stroke:currentColor; }
/* Hero: violetter Punkt (Akzent) */
.home.style-logout .heading-group h1 .xi-accent{ color:var(--xi-brand) !important; text-shadow:none !important; }
.home.style-logout .heading-group h1 .xi-accent-line{ color:var(--xi-brand) !important; }
.xi-pillar h3{ margin:0 0 8px; font-size:20px; color:var(--xi-ink); }
.xi-pillar p{ margin:0; color:var(--xi-muted); font-size:15px; line-height:1.6; }

/* Zielgruppen-Grid */
.xi-audience{ background:#EEF2FF; border-top:1px solid #E0E4FB; border-bottom:1px solid #E0E4FB; }
.xi-audience .xi-wrap{ padding:74px 32px; }
.xi-aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.xi-aud{ background:#fff; border:1px solid var(--xi-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:.18s ease; }
.xi-aud:hover{ box-shadow:0 14px 34px rgba(31,27,90,.12); transform:translateY(-3px); }
.xi-aud .xi-img{ height:6px; background-size:cover; background-position:center; }
.xi-aud .xi-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.xi-aud h3{ margin:0 0 8px; font-size:19px; color:var(--xi-ink); }
.xi-aud p{ margin:0 0 18px; color:var(--xi-muted); font-size:14.5px; line-height:1.6; flex:1; }
.xi-aud .xi-more{ color:var(--xi-brand); font-weight:700; font-size:14px; }

/* Highlights-Überschrift über courses_list */
.xi-hl-head{ max-width:1180px; margin:0 auto; padding:64px 32px 0; }

@media (max-width:768px){
  .xi-pillars .xi-wrap{ flex-direction:column; gap:26px; padding:48px 20px; }
  .xi-audience .xi-wrap{ padding:50px 20px; }
  .xi-aud-grid{ grid-template-columns:1fr; gap:18px; }
  .xi-sec{ font-size:25px; }
  .xi-hl-head{ padding:44px 20px 0; }
}

/* ================= REDESIGN: Header-Nav (3 Punkte) ================= */
/* Header-Zeile NUR Desktop: Logo links + Nav rechts. Auf Mobil greift indigos
   nativer Hamburger + Mobile-Menü (mein Flex wuerde das sonst ueberschreiben). */
@media (min-width:769px){
  header.global-header .main-header{ display:flex !important; align-items:center !important; gap:24px !important; flex-wrap:nowrap !important; width:100% !important; }
  header.global-header .header-logo{ flex:0 0 auto !important; display:flex !important; align-items:center !important; }
  header.global-header .nav-links{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:26px !important; float:none !important; flex:1 1 auto !important; }
  header.global-header .nav-links .main{ display:flex !important; align-items:center !important; gap:26px !important; float:none !important; margin:0 !important; }
  header.global-header .nav-links .secondary{ display:flex !important; align-items:center !important; gap:14px !important; float:none !important; margin:0 !important; }
  header.global-header .nav-links .secondary .btn-holder{ display:flex !important; align-items:center !important; gap:12px !important; }
  header.global-header .nav-links .nav-item{ display:flex !important; align-items:center !important; margin:0 !important; float:none !important; }
}
/* alle 3 Menüpunkte identisch (auch falls noch nav-tab dranhängt) */
header.global-header .nav-links .main .nav-item a,
header.global-header .nav-links .main .nav-tab a{
  font-weight:600 !important; color:var(--xi-ink) !important; font-size:15px !important;
  line-height:1 !important; text-decoration:none !important; border:none !important; padding:0 !important;
}
header.global-header .nav-links .main .nav-item a:hover,
header.global-header .nav-links .main .nav-tab a:hover{ color:var(--xi-brand) !important; }

/* ================= REDESIGN: dunkler Footer (Anthrazit, Spalten) ================= */
.wrapper-footer{ background:#222831 !important; border-top:none !important; margin-top:0 !important; padding:12px 0 14px !important; }
.xi-footer.tutor-container{ max-width:1180px !important; margin:0 auto !important; padding:22px 32px 12px !important; }
.xi-foot-cols{ display:grid !important; grid-template-columns:1.6fr 1fr 1fr 1fr !important; gap:40px !important; }
.xi-foot-brand .xi-foot-logo{ height:52px; filter:brightness(0) invert(1); opacity:.95; }
.xi-foot-brand p{ font-size:13.5px; line-height:1.5; margin:9px 0 0; color:#9aa3ae; max-width:250px; }
.xi-foot-col h5{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 11px; }
.xi-foot-col a{ display:block; color:#c7cdd6 !important; font-size:14px; margin-bottom:8px; font-weight:500; }
.xi-foot-col a:hover{ color:#fff !important; }
.xi-foot-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid #353c46; margin-top:8px; padding-top:6px; }
.xi-foot-copy, .xi-foot-copy *{ color:#9aa3ae !important; font-size:12.5px; line-height:1.5; }
.xi-foot-copy a{ color:#c7cdd6 !important; text-decoration:underline; }
.xi-foot-tech{ display:flex; align-items:center; gap:10px; color:#9aa3ae; font-size:12px; }
.xi-foot-tech img{ opacity:.85; }
.xi-foot-lang, .xi-foot-lang *{ color:#9aa3ae !important; }
@media (max-width:768px){
  .xi-foot-cols{ grid-template-columns:1fr 1fr !important; gap:28px !important; }
  .xi-foot-brand{ grid-column:1 / -1; }
  .xi-foot-bar{ flex-direction:column; align-items:flex-start; }
}

/* ================= Hero linksbündig (Titel/Subline/Suche fluchten links) ================= */
.home.style-logout .title{ align-items:flex-start !important; text-align:left !important; }
.home.style-logout .heading-group{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
.home.style-logout .heading-group h1{ text-align:left !important; }
.home.style-logout .heading-group p{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
.home.style-logout .course-search{ align-self:center !important; margin-left:auto !important; margin-right:auto !important; }

/* ================= KURS-DETAILSEITE (About) – HPI-Style ================= */
.course-info.about{ max-width:1180px !important; margin:0 auto !important; padding:10px 32px 56px !important; }
/* Detail- + Kursseite: 64px content-wrapper-Abstand (Basis-Theme, nicht ueberschreibbar)
   per negativer Margin neutralisieren -> Inhalt/Banner direkt unter das sticky-Menue */
.find-courses{ margin-top:-64px !important; }
.course-info.about{ margin-top:-64px !important; }
.course-info.about .intro-inner-wrapper{ margin:0 !important; max-width:none !important; padding-bottom:10px !important; }
/* Leerraum zwischen Hero-Bereich und Boxen reduzieren (Basis-Theme paddings) */
.course-info.about .info-profile{ padding-bottom:6px !important; }
/* Kopf: Titel/Org links, Kursbild rechts */
.course-info.about .profile-top{ align-items:flex-start !important; }
.course-info.about .info-profile h1{ font-size:34px !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.2 !important; color:var(--xi-ink) !important; margin:0 0 6px !important; }
.course-info.about .info-profile .org{ color:var(--xi-muted) !important; font-size:15px !important; font-weight:600 !important; }
.course-info.about .media .hero img{ border-radius:14px !important; border:1px solid var(--xi-line) !important; height:172px !important; object-fit:cover !important; width:100% !important; }
/* Enroll-CTA */
.course-info.about .main-cta{ margin:-50px 0 0 !important; }
.course-info.about .main-cta .register, .course-info.about .main-cta a > strong{ display:inline-block !important; background:var(--xi-brand) !important; color:#fff !important; border-radius:10px !important; padding:13px 28px !important; font-weight:600 !important; font-size:16px !important; text-decoration:none !important; }
.course-info.about .main-cta .register:hover{ background:var(--xi-700) !important; }
.course-info.about .main-cta .register.disabled, .course-info.about .main-cta .register.closed{ background:#9aa3ae !important; cursor:default !important; }
/* Enroll-CTA per JS in die Sidebar UNTER die Kurs-Info-Box verschoben -> volle Box-Breite (357px) */
.course-info.about .course-sidebar .main-cta{ margin:16px 0 0 !important; width:100% !important; }
.course-info.about .course-sidebar .main-cta .register{ display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; padding:15px 28px !important; margin:0 !important; }
/* Zwei-Spalten-Inhalt */
.course-info.about .about-content{ align-items:start !important; }
.course-info.about .details{ min-width:0 !important; }
.course-info.about .course-sidebar{ background:transparent !important; border:0 !important; padding:0 !important; }
.course-info.about .details .inner-wrapper{ font-size:16px !important; line-height:1.7 !important; color:#3a3f4c !important; background:rgba(79,70,229,.05) !important; border:1px solid rgba(79,70,229,.16) !important; border-radius:16px !important; padding:44px 32px !important; }
.course-info.about .details .inner-wrapper h1, .course-info.about .details .inner-wrapper h2{ font-size:23px !important; font-weight:700 !important; color:var(--xi-ink) !important; margin:6px 0 14px !important; }
.course-info.about .details .inner-wrapper ul{ padding-left:20px !important; }
.course-info.about .details .inner-wrapper li{ margin-bottom:8px !important; }
/* Sidebar: Summary als Karte */
.course-info.about .course-summary{ background:rgba(79,70,229,.05) !important; border:1px solid rgba(79,70,229,.16) !important; border-radius:16px !important; padding:44px 24px !important; }
.course-info.about .course-summary h2{ font-size:0 !important; margin:0 0 12px !important; }
.course-info.about .course-summary h2::after{ content:"Kurs-Info"; font-size:18px; font-weight:700; color:var(--xi-ink); }
.course-info.about .important-dates{ list-style:none !important; margin:0 !important; padding:0 !important; }
.course-info.about .important-dates-item{ display:grid !important; grid-template-columns:20px 1fr auto !important; align-items:center !important; column-gap:10px !important; padding:11px 0 !important; margin:0 !important; border-bottom:1px solid rgba(79,70,229,.12) !important; }
.course-info.about .important-dates-item:last-child{ border-bottom:none !important; }
.course-info.about .important-dates-item-title{ color:var(--xi-muted) !important; font-size:14px !important; margin:0 !important; }
.course-info.about .important-dates-item-text{ justify-self:end !important; text-align:right !important; font-weight:600 !important; color:var(--xi-ink) !important; font-size:14px !important; margin:0 !important; }
.course-info.about .important-dates-item svg, .course-info.about .important-dates-item .icon{ position:static !important; width:20px !important; height:20px !important; margin:0 !important; align-self:center !important; }
.course-info.about .important-dates-item svg path{ fill:var(--xi-brand) !important; }
.course-info.about .important-dates-item .icon{ color:var(--xi-brand) !important; }
.course-info.about .important-dates-item .xi-meta-icon path, .course-info.about .important-dates-item .xi-meta-icon circle, .course-info.about .important-dates-item .xi-meta-icon rect, .course-info.about .important-dates-item .xi-meta-icon line, .course-info.about .important-dates-item .xi-meta-icon polyline{ fill:none !important; stroke:var(--xi-brand) !important; }
.course-info.about .xi-meta-list{ margin:0 !important; padding:0 !important; list-style:none !important; }
.course-info.about .xi-meta-list .important-dates-item:first-child{ border-top:1px solid rgba(79,70,229,.12) !important; }
.course-info.about .course-summary .social-sharing{ display:none !important; }

/* ===================== THEME-TOGGLE (Sonne/Mond) ===================== */
header.global-header .theme-toggle-button{ display:inline-flex !important; align-items:center !important; gap:9px !important; margin-right:18px !important; }
header.global-header .theme-toggle-button .light-theme-icon, header.global-header .theme-toggle-button .dark-theme-icon{ display:inline-flex !important; align-items:center !important; }
.theme-toggle-button .light-theme-icon svg, .theme-toggle-button .dark-theme-icon svg{ width:17px !important; height:17px !important; }
.theme-toggle-button .light-theme-icon{ color:var(--xi-brand) !important; }
.theme-toggle-button .dark-theme-icon{ color:#9aa0ac !important; }
.theme-toggle-button #toggle-switch .switch{ position:relative !important; display:inline-block !important; width:44px !important; height:24px !important; margin:0 !important; }
.theme-toggle-button #toggle-switch .switch input{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; }
.theme-toggle-button #toggle-switch .slider{ position:absolute !important; inset:0 !important; cursor:pointer !important; background:#cbd0da !important; border:0 !important; border-radius:999px !important; transition:.2s !important; }
.theme-toggle-button #toggle-switch .slider:before{ content:"" !important; position:absolute !important; height:18px !important; width:18px !important; left:3px !important; top:3px !important; background:#fff !important; border-radius:50% !important; transition:.2s !important; box-shadow:0 1px 3px rgba(0,0,0,.25) !important; }
.theme-toggle-button #toggle-switch input:checked + .slider{ background:var(--xi-brand) !important; }
.theme-toggle-button #toggle-switch input:checked + .slider:before{ transform:translateX(20px) !important; }

/* ===================== DARK MODE (Anthrazit) ===================== */
body.indigo-dark-theme .theme-toggle-button .light-theme-icon{ color:#9aa0ac !important; }
body.indigo-dark-theme .theme-toggle-button .dark-theme-icon{ color:#a5b4fc !important; }
body.indigo-dark-theme .theme-toggle-button #toggle-switch .slider{ background:rgba(255,255,255,.18) !important; }
body.indigo-dark-theme .theme-toggle-button #toggle-switch input:checked + .slider{ background:var(--xi-brand) !important; }
body.indigo-dark-theme{ background:#222831 !important; color:#e8eaef !important; }
/* Header */
body.indigo-dark-theme header.global-header, body.indigo-dark-theme .global-header{ background:#1b212a !important; border-bottom:1px solid rgba(255,255,255,.08) !important; }
body.indigo-dark-theme header.global-header .nav-links .main .nav-item a, body.indigo-dark-theme header.global-header .nav-links .main .nav-tab a{ color:#e8eaef !important; }
body.indigo-dark-theme header.global-header .nav-links .main .nav-item a:hover{ color:#a5b4fc !important; }
body.indigo-dark-theme header.global-header .register-btn{ color:#e8eaef !important; border-color:rgba(255,255,255,.25) !important; background:transparent !important; }
/* 3 Säulen */
body.indigo-dark-theme .xi-pillars{ background:#222831 !important; }
body.indigo-dark-theme .xi-pillar h3{ color:#e8eaef !important; }
body.indigo-dark-theme .xi-pillar p{ color:#a6adba !important; }
body.indigo-dark-theme .xi-ic{ background:transparent !important; color:#a5b4fc !important; }
/* Lernpfade / Zielgruppen */
body.indigo-dark-theme .xi-audience{ background:#1b212a !important; }
body.indigo-dark-theme .xi-sec{ color:#e8eaef !important; }
body.indigo-dark-theme .xi-sub{ color:#a6adba !important; }
body.indigo-dark-theme .xi-aud{ background:#2b323d !important; border:1px solid rgba(255,255,255,.08) !important; }
body.indigo-dark-theme .xi-aud h3{ color:#e8eaef !important; }
body.indigo-dark-theme .xi-aud p{ color:#a6adba !important; }
/* Highlights-Überschrift (Home) bleibt im Dark-Mode hell */
body.indigo-dark-theme .xi-hl-head .xi-sec{ color:#e8eaef !important; }
/* Katalog-Banner hat helles Weiss->Violett-Overlay -> Text in BEIDEN Modi dunkel */
body.indigo-dark-theme .find-courses .course-heading-area h2, body.indigo-dark-theme .find-courses h2:first-of-type{ color:var(--xi-ink) !important; }
body.indigo-dark-theme .find-courses .course-heading-area p{ color:var(--xi-ink) !important; }
body.indigo-dark-theme .find-courses, body.indigo-dark-theme .courses-container{ background:transparent !important; }
/* Kurskarten (Startseite + Katalog) */
body.indigo-dark-theme .courses-listing .course, body.indigo-dark-theme .course{ background:#2b323d !important; border-color:rgba(255,255,255,.08) !important; }
body.indigo-dark-theme .courses-listing .course .course-title, body.indigo-dark-theme .course-title{ color:#e8eaef !important; }
body.indigo-dark-theme .courses-listing .course .course-organization, body.indigo-dark-theme .courses-listing .course .course-code, body.indigo-dark-theme .courses-listing .course .course-date, body.indigo-dark-theme .courses-listing .course .course-desc, body.indigo-dark-theme .course-organization, body.indigo-dark-theme .course-code{ color:#a6adba !important; }
/* Suchfelder */
body.indigo-dark-theme .search-field-wrapper, body.indigo-dark-theme .discover-search .input-holder, body.indigo-dark-theme .wrapper-search-input{ background:#2b323d !important; border-color:rgba(255,255,255,.1) !important; }
body.indigo-dark-theme .search-input, body.indigo-dark-theme .discovery-input{ background:transparent !important; color:#e8eaef !important; }
body.indigo-dark-theme .saerch-bar-discover .dropdown-toggle{ background:#2b323d !important; color:#e8eaef !important; border:1px solid rgba(255,255,255,.1) !important; }
/* Kurs-Detailseite */
body.indigo-dark-theme .course-info.about .info-profile h1{ color:#e8eaef !important; }
body.indigo-dark-theme .course-info.about .details .inner-wrapper{ color:#c4cad4 !important; background:rgba(99,102,241,.08) !important; border-color:rgba(129,140,248,.20) !important; }
body.indigo-dark-theme .course-info.about .course-summary{ background:rgba(99,102,241,.08) !important; border-color:rgba(129,140,248,.20) !important; }
body.indigo-dark-theme .course-info.about .details .inner-wrapper h1, body.indigo-dark-theme .course-info.about .details .inner-wrapper h2, body.indigo-dark-theme .course-info.about .course-summary h2::after{ color:#e8eaef !important; }
body.indigo-dark-theme .course-info.about .important-dates-item-title{ color:#a6adba !important; }
body.indigo-dark-theme .course-info.about .important-dates-item-text{ color:#e8eaef !important; }
body.indigo-dark-theme .course-info.about .important-dates-item{ border-bottom-color:rgba(255,255,255,.08) !important; }
body.indigo-dark-theme .course-info.about .xi-meta-list .important-dates-item:first-child{ border-top-color:rgba(255,255,255,.08) !important; }

/* ===== Legacy-Kurs-Tableiste (Kurs/Fortschritt/Daten/Dozent), z.B. auf der Dozent-Seite) ===== */
/* War: .course-material max-width:1920 + .course-tabs padding:15px 0 -> Tabs klebten in der */
/* linken Ecke. Jetzt zentriert auf Inhaltsbreite + horizontales Padding wie der Seiteninhalt. */
/* EXAKT wie die MFE-Tableiste (Kurs/Fortschritt/Daten): .container-xl max-width:1600 + 15px Padding
   -> beim Wechsel zu Dozent (Legacy) springt das Menue nicht mehr. */
.wrapper-course-material .course-material{ max-width:1600px !important; margin:0 auto !important; box-sizing:border-box !important; padding:0 15px !important; }
.wrapper-course-material .course-tabs{ padding-left:0 !important; padding-right:0 !important; }

/* === Xinion: Kategorie-Sidebar (/courses) === */
.xi-catlayout{ display:flex; gap:28px; align-items:flex-start; margin-top:8px; }
.xi-catlayout .course-holder{ flex:1 1 auto; min-width:0; }
.xi-catside{ flex:0 0 248px; position:sticky; top:16px; background:#fff; border:1px solid var(--xi-muted,#e5e7eb); border-radius:14px; padding:16px; box-sizing:border-box; }
.xi-catside .xi-cs-title{ margin:0 0 12px; font-size:15px; font-weight:700; color:var(--xi-ink,#1f1b5a); }
.xi-catside .xi-cs-search{ width:100%; box-sizing:border-box; padding:8px 12px; border:1.5px solid var(--xi-muted,#d1d5db); border-radius:8px; font-size:13.5px; margin-bottom:12px; }
.xi-catside .xi-cs-search:focus{ outline:none; border-color:var(--xi-brand,#4F46E5); }
.xi-catside .xi-cs-list{ list-style:none; margin:0; padding:0; max-height:360px; overflow-y:auto; }
.xi-catside .xi-cs-li{ margin:0; }
.xi-catside .xi-cs-item{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--xi-ink,#1f1b5a); }
.xi-catside .xi-cs-item:hover{ background:rgba(79,70,229,.06); }
.xi-catside .xi-cs-item input{ accent-color:var(--xi-brand,#4F46E5); width:16px; height:16px; flex:0 0 auto; margin:0; }
.xi-catside .xi-cs-name{ flex:1 1 auto; }
.xi-catside .xi-cs-n{ font-weight:700; font-size:11.5px; color:var(--xi-muted,#6b7280); background:rgba(0,0,0,.05); padding:1px 8px; border-radius:999px; }
.xi-catside .xi-cs-item.is-on{ background:rgba(79,70,229,.10); }
.xi-catside .xi-cs-item.is-on .xi-cs-name{ font-weight:700; color:var(--xi-brand,#4F46E5); }
.xi-catside .xi-cs-reset{ margin-top:12px; width:100%; padding:8px; border:1px solid var(--xi-muted,#d1d5db); background:#fff; border-radius:8px; font-size:13px; color:var(--xi-ink,#1f1b5a); cursor:pointer; }
.xi-catside .xi-cs-reset:hover{ border-color:var(--xi-brand,#4F46E5); color:var(--xi-brand,#4F46E5); }
.indigo-dark-theme .xi-catside{ background:#1f2330; border-color:rgba(255,255,255,.12); }
.indigo-dark-theme .xi-catside .xi-cs-title,.indigo-dark-theme .xi-catside .xi-cs-name{ color:#e8eaef; }
.indigo-dark-theme .xi-catside .xi-cs-search{ background:#171a24; border-color:rgba(255,255,255,.18); color:#e8eaef; }
.indigo-dark-theme .xi-catside .xi-cs-n{ background:rgba(255,255,255,.12); color:#cdd2e0; }
.indigo-dark-theme .xi-catside .xi-cs-item:hover{ background:rgba(129,140,248,.14); }
.indigo-dark-theme .xi-catside .xi-cs-item.is-on{ background:rgba(129,140,248,.18); }
.indigo-dark-theme .xi-catside .xi-cs-reset{ background:transparent; border-color:rgba(255,255,255,.2); color:#e8eaef; }
@media (max-width:820px){
  .xi-catlayout{ display:block; }
  .xi-catside{ position:static; width:100%; flex:none; margin-bottom:20px; }
  .xi-catside .xi-cs-list{ max-height:240px; }
}

/* === Xinion: einheitliche Lerntext-Schrift in ALLEN Kursen (Unit-iframe) === */
.xblock-student_view-html, .xblock-public_view-html,
.xblock-student_view-html *, .xblock-public_view-html * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.xblock-student_view-html, .xblock-public_view-html {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* === Xinion: Kurskacheln kompakter (Kursnr.+Dauer inline, date-Pille kleiner) === */
.courses-listing .course .course-info{ padding:16px 18px 16px !important; }
.courses-listing .course .course-organization{ display:none !important; }
.courses-listing .course .course-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 6px !important; }
.courses-listing .course .learn-more{ margin-top:6px !important; }
.courses-listing .course .course-date{ margin:8px 0 0 !important; padding:7px 12px !important; font-size:14px !important; font-weight:600 !important; justify-content:center !important; text-align:center !important; }
.courses-listing .course .course-date svg{ width:14px !important; height:14px !important; }
.courses-listing .course .course-meta{ flex-direction:column !important; flex-wrap:nowrap !important; gap:5px !important; margin-top:6px !important; }
.courses-listing .course .course-meta .mi{ font-size:12px !important; }

/* === Xinion: Katalog-Kacheln breiter (3 Spalten; #main schlaegt Basis-Float-Raster) === */
#main .courses-container .courses-listing{ display:flex !important; flex-wrap:wrap !important; gap:26px !important; align-items:stretch !important; }
#main .courses-container .courses-listing .courses-listing-item{ float:none !important; display:block !important; width:calc((100% - 52px)/3) !important; max-width:none !important; min-width:0 !important; margin:0 !important; max-height:none !important; }
@media (max-width:1150px){ #main .courses-container .courses-listing .courses-listing-item{ width:calc((100% - 26px)/2) !important; } }
@media (max-width:720px){ #main .courses-container .courses-listing .courses-listing-item{ width:100% !important; } }

/* === Xinion: Ansicht-Umschalter (Kacheln/Liste) + Listenansicht === */
.xi-viewbar{ display:flex; align-items:center; justify-content:stretch; gap:8px; margin:0 0 14px; }
.xi-catside .xi-viewbar .xi-vb-btn{ flex:1 1 0; justify-content:center; }
.xi-viewbar .xi-vb-label{ font-size:13px; color:var(--xi-muted,#6b7280); margin-right:2px; }
.xi-viewbar .xi-vb-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1.5px solid var(--xi-muted,#d1d5db); background:#fff; border-radius:8px; font-size:13px; color:var(--xi-ink,#1f1b5a); cursor:pointer; }
.xi-viewbar .xi-vb-btn:hover{ border-color:var(--xi-brand,#4F46E5); }
.xi-viewbar .xi-vb-btn.is-on{ background:var(--xi-brand,#4F46E5); border-color:var(--xi-brand,#4F46E5); color:#fff; }
.indigo-dark-theme .xi-viewbar .xi-vb-btn{ background:transparent; border-color:rgba(255,255,255,.2); color:#e8eaef; }
.indigo-dark-theme .xi-viewbar .xi-vb-btn.is-on{ background:var(--xi-brand,#4F46E5); border-color:var(--xi-brand,#4F46E5); color:#fff; }
#main .courses-container .course-holder.xi-list .courses-listing{ flex-direction:column !important; flex-wrap:nowrap !important; gap:14px !important; }
#main .courses-container .course-holder.xi-list .courses-listing-item{ width:100% !important; }
#main .courses-container .course-holder.xi-list .course{ flex-direction:row !important; align-items:stretch !important; }
#main .courses-container .course-holder.xi-list .course .course-image{ flex:0 0 260px !important; }
#main .courses-container .course-holder.xi-list .course .cover-image{ height:100% !important; min-height:150px !important; }
#main .courses-container .course-holder.xi-list .course .course-image img{ height:100% !important; width:100% !important; object-fit:cover !important; }
#main .courses-container .course-holder.xi-list .course .course-info{ flex:1 1 auto !important; }
@media (max-width:720px){ #main .courses-container .course-holder.xi-list .course{ flex-direction:column !important; } #main .courses-container .course-holder.xi-list .course .course-image{ flex:none !important; } }

/* === Xinion: Dark-Toggle neben Anmelden === */
.btn-holder .theme-toggle-button{ margin:0 0 0 14px !important; display:flex !important; align-items:center !important; }