/* WEKA-Optik für ILIAS 9 (Delos) – Designsystem A „Klar & lösungsorientiert“ (design/weka-redesign.html).
   Reine Überlagerung aus dem WekaCoach-Plugin, ILIAS-Kern/Skin bleiben unberührt. */
:root { --w-blue:#1746d1; --w-blue-d:#1239ad; --w-deep:#0b1b45; --w-ice:#eef3fc; --w-line:#dfe6f3; --w-mut:#55617d; --w-acc:#ff8a00; }
html, body { font-family: Inter, system-ui, sans-serif !important; color: var(--w-deep); -webkit-font-smoothing: antialiased; }
body, .il-layout-page-content, #mainspacekeeper { background: #f7f9fd !important; }
a, a:visited { color: var(--w-blue); }
a:hover, a:focus { color: var(--w-blue-d); }
h1, h2, h3, h4, .ilHeader, .panel-title, .il-item-title { font-family: 'Inter Tight', Inter, sans-serif !important; color: var(--w-deep); }

/* Kopfzeile + Wortmarke */
header { background: #fff !important; border-bottom: 1px solid var(--w-line) !important; box-shadow: none !important; }
.il-logo img { display: none !important; }
.il-logo a, .il-logo { display: flex; align-items: center; text-decoration: none !important; }

/* Hauptleiste links: tiefe WEKA-Fläche */
.il-maincontrols-mainbar, .il-mainbar, .il-mainbar .il-mainbar-triggers { background: var(--w-deep) !important; border: 0 !important; }
.il-mainbar .btn-bulky { background: transparent !important; color: #b9c6e6 !important; border-radius: 12px !important; margin: 4px 6px !important; width: auto !important; }
.il-mainbar .btn-bulky .bulky-label { font: 600 11px Inter, sans-serif !important; color: inherit !important; }
.il-mainbar .btn-bulky img, .il-mainbar .btn-bulky .icon { filter: brightness(0) invert(1); opacity: .75; }
.il-mainbar .btn-bulky:hover, .il-mainbar .btn-bulky.engaged { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.il-mainbar .btn-bulky.engaged img { opacity: 1; }
.il-mainbar .btn-bulky.engaged { box-shadow: inset 3px 0 0 var(--w-acc); }
.il-maincontrols-slate { background: #fff !important; border-right: 1px solid var(--w-line) !important; }

/* Seitentitel, Brotkrumen, Reiter */
.il-page-content-header, h1.ilHeader { font: 800 clamp(28px, 3vw, 40px)/1.08 'Inter Tight', Inter, sans-serif !important; letter-spacing: -.03em; color: var(--w-deep) !important; }
.breadcrumb, .il-header-locator { background: transparent !important; font-size: 13px !important; color: var(--w-mut) !important; }
.breadcrumb a { color: var(--w-mut) !important; } .breadcrumb a:hover { color: var(--w-blue) !important; }
#ilTab { border: 0 !important; display: flex; gap: 6px; flex-wrap: wrap; }
#ilTab > li > a { border: 1px solid var(--w-line) !important; border-radius: 999px !important; padding: 7px 16px !important; background: #fff !important;
  color: var(--w-deep) !important; font: 500 14px Inter, sans-serif !important; }
#ilTab > li.active > a, #ilTab > li > a:hover { background: var(--w-deep) !important; color: #fff !important; border-color: var(--w-deep) !important; }
.ilTabsContentOuter { border: 0 !important; }

/* Karten/Panels */
.panel, .ilBlock, .il-card { border: 1px solid var(--w-line) !important; border-radius: 20px !important; box-shadow: none !important; background: #fff !important; overflow: hidden; }
.panel > .panel-heading, .ilBlockHeader { background: #fff !important; border-bottom: 1px solid var(--w-line) !important; padding: 16px 20px !important; }
.panel-title, .ilBlockHeader h2, .ilBlockHeader h3 { font: 700 18px 'Inter Tight', Inter, sans-serif !important; letter-spacing: -.01em; }
.ilCLI.ilObjListRow { border-radius: 14px; padding: 14px 16px !important; margin: 6px 0; transition: background .15s; }
.ilCLI.ilObjListRow:hover { background: var(--w-ice); }
.il_ContainerItemTitle, .il_ContainerItemTitle a { font: 600 16px Inter, sans-serif !important; color: var(--w-blue) !important; }
.ilListItemSection, .il_Description, .il_Description_no_margin { color: var(--w-mut) !important; }
.ilContainerBlockHeader, .ilContainerBlockHeader h2 { background: transparent !important; border: 0 !important; font: 700 13px Inter, sans-serif !important;
  letter-spacing: .12em; text-transform: uppercase; color: var(--w-blue) !important; }

/* Buttons */
.btn { border-radius: 10px !important; font: 600 14px Inter, sans-serif !important; }
.btn-default { background: #fff !important; border: 1px solid var(--w-line) !important; color: var(--w-deep) !important; }
.btn-default:hover { border-color: var(--w-blue) !important; color: var(--w-blue) !important; }
.btn-primary { background: var(--w-blue) !important; border-color: var(--w-blue) !important; color: #fff !important; }
.btn-primary:hover { background: var(--w-blue-d) !important; }

/* Hinweise, Fuß */
.alert-info { background: var(--w-ice) !important; border: 0 !important; border-radius: 14px !important; color: var(--w-deep) !important; }
footer { background: #fff !important; border-top: 1px solid var(--w-line) !important; color: var(--w-mut) !important; font-size: 13px; }

/* Login-Seite */
.il-layout-page-content .ilStartupSection, #il_startup_logo { border-radius: 20px; }

/* --- Feinschliff „modern“ --- */
/* Seitenleiste: keine grauen Blöcke/Bögen, klare Pillen */
.il-mainbar .btn-bulky, .il-mainbar .btn-bulky:focus { border: 0 !important; outline: none !important; box-shadow: none !important; }
.il-mainbar .btn-bulky::after, .il-mainbar .btn-bulky::before { display: none !important; }
.il-mainbar .il-mainbar-entries > li, .il-mainbar li { border: 0 !important; background: transparent !important; }
.il-mainbar .btn-bulky.engaged { background: rgba(255,255,255,.10) !important; box-shadow: inset 3px 0 0 var(--w-acc) !important; }
.il-mainbar .btn-bulky { padding: 12px 4px !important; gap: 6px; }
/* Kalender: heute in WEKA-Blau, ruhige Kopfzeile */
.il-calendar-today, td.today, .ilCalendarToday, .il_calendar_today, td.ilToday, .ilCalendarSelected { background: var(--w-blue) !important; color: #fff !important; border-radius: 8px; }
.ilCalendarToday a, td.today a { color: #fff !important; }
/* Gruppenbalken in Listen (z. B. „Arbeitssicherheit“) */
.ilContainerBlockHeader, .ilContainerListItemOuter + .ilContainerBlockHeader, .il-item-group-title, .ilBlockHeader.ilContainerBlockHeader,
div.ilContainerBlock > .ilContainerBlockHeader { background: transparent !important; border: 0 !important; padding: 18px 16px 4px !important; }
.ilContainerBlockHeader h3, .ilContainerBlockHeader .ilHeader, .il-item-group-title h3 { font: 700 12px Inter, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: var(--w-blue) !important; }
/* Technische Eigenschaftszeilen ausblenden (z. B. „Anmeldung: Keine Anmeldung möglich“) */
.ilListItemSection.il_ItemProperties, .il_ItemProperties { display: none !important; }
.ilCLI.ilObjListRow { border-bottom: 1px solid var(--w-line); }
/* Dropdown-/Aktionen-Knöpfe rund und leise */
.dropdown-toggle.btn-default, .btn-ctrl { border-radius: 10px !important; }
/* Kopfzeile: Profil-Avatar in WEKA-Blau */
.il-avatar, .il-avatar-letter { background: var(--w-blue) !important; }
/* echte Selektoren aus dem DOM (ILIAS 9.24) */
td.calminitoday, td.calminitoday .il_calmini_monthday { background: var(--w-blue) !important; color: #fff !important; border-radius: 8px; }
td.calminitoday a { color: #fff !important; }
.il-item-group > h3 { background: transparent !important; border: 0 !important; padding: 18px 16px 4px !important; margin: 0 !important;
  font: 700 12px Inter, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: var(--w-blue) !important; }
.il-mainbar-entries > li { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.il-mainbar-entries > li::before, .il-mainbar-entries > li::after { display: none !important; }
.il-item-group { background: transparent !important; }
.il-item .media-body > .row { display: none !important; }   /* Eigenschaftsraster („Anmeldung: …“) im neuen UI-Item */
.il-item .media-body > hr, .il-item hr { display: none !important; }
.il-item { border-bottom: 1px solid var(--w-line); padding: 14px 16px !important; border-radius: 14px; transition: background .15s; }
.il-item:hover { background: var(--w-ice); }
.il-item-title, .il-item-title a { font: 600 16px Inter, sans-serif !important; color: var(--w-blue) !important; }
.il-item-description { color: var(--w-mut) !important; font-size: 14px; }
/* Seitenleiste: volle Breite (Beschriftungen nicht abschneiden), auch Link-Einträge (Dashboard) ohne grauen Block */
.il-mainbar .btn-bulky, .il-mainbar .link-bulky { width: calc(100% - 8px) !important; margin: 4px !important; padding: 10px 2px !important; }
.il-mainbar .link-bulky { background: transparent !important; color: #b9c6e6 !important; border-radius: 12px !important; border: 0 !important; }
.il-mainbar .link-bulky .bulky-label { font: 600 11px Inter, sans-serif !important; color: inherit !important; }
.il-mainbar .link-bulky img { filter: none !important; }
.il-mainbar .link-bulky:hover, .il-mainbar .link-bulky.engaged, .il-mainbar li.active .link-bulky { background: rgba(255,255,255,.10) !important; color: #fff !important; }
.il-mainbar .bulky-label { white-space: normal; hyphens: auto; line-height: 1.2; }

/* ===== Layout nach Skin-Konzept (design/ilias-skin-weka.html), aufgebaut von js/weka-layout.js ===== */
.il-logo > a, .il-logo img { display: none !important; }
.il-logo { display: flex !important; align-items: center; }
.il-pagetitle { display: block !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.wk-tt { font: 700 15px 'Inter Tight', Inter, sans-serif; color: var(--w-deep); line-height: 1.2; }
.wk-tt small { display: block; font: 500 12px Inter, sans-serif; color: var(--w-mut); }
.header-inner { gap: 16px; }
.wk-search { flex: 1; max-width: 460px; margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--w-ice); border-radius: 12px; padding: 0 14px; color: var(--w-mut); }
.wk-search svg { width: 18px; height: 18px; flex: none; }
.wk-search input { flex: 1; border: 0; background: transparent; padding: 10px 0; font: 500 14px Inter, sans-serif; color: var(--w-deep); outline: none; min-width: 0; }
.wk-mb-logo { display: block; text-align: center; font: 800 18px 'Inter Tight', Inter, sans-serif; color: #fff !important; letter-spacing: -.02em; padding: 14px 0 12px; text-decoration: none !important; }
.wk-mb-logo span { color: var(--w-acc); }
.il-avatar, .il-avatar-letter { border-radius: 12px !important; }

/* Dashboard */
body.wk-dash-on #fixed_content > *:not(#wk-dash) { display: none !important; }
body.wk-dash-on .il-page-content-header, body.wk-dash-on .ilHeader { display: none !important; }
#wk-dash { padding: 8px 0 48px; }
.wk-hello { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.wk-cont { background: var(--w-deep); color: #fff; border-radius: 24px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.wk-cont::after { content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(23,70,209,.9), transparent 70%); }
.wk-cont > * { position: relative; z-index: 1; }
.wk-k { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fb2e6; }
.wk-cont h2 { color: #fff !important; font: 700 clamp(24px, 3vw, 34px)/1.1 'Inter Tight', Inter, sans-serif !important; letter-spacing: -.02em; max-width: 480px; margin: 0; }
.wk-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: #c3cde8; font-size: 14px; }
.wk-pb { height: 8px; background: rgba(255,255,255,.15); border-radius: 99px; max-width: 380px; }
.wk-pb i { display: block; height: 100%; background: var(--w-acc); border-radius: 99px; }
.wk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font: 600 14px Inter, sans-serif; border: 0; cursor: pointer; text-decoration: none !important; }
.wk-btn-w { background: #fff; color: var(--w-deep) !important; }
.wk-btn-p { background: var(--w-blue); color: #fff !important; }
.wk-btn-p:hover { background: var(--w-blue-d); }
.wk-btn-s { background: #fff; border: 1px solid var(--w-line); color: var(--w-deep) !important; width: 100%; justify-content: center; }
.wk-btn-s:hover { border-color: var(--w-blue); color: var(--w-blue) !important; }
.wk-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wk-kpi { background: #fff; border-radius: 20px; padding: 20px; border: 1px solid var(--w-line); }
.wk-kpi b { font: 800 34px/1.1 'Inter Tight', Inter, sans-serif; display: block; letter-spacing: -.03em; color: var(--w-deep); }
.wk-kpi span { font-size: 13px; color: var(--w-mut); }
.wk-kpi.wk-warn { background: #fff4e6; border-color: #ffd9a8; } .wk-kpi.wk-warn b { color: #c25f00; }
.wk-sh { display: flex; justify-content: space-between; align-items: end; margin: 40px 0 16px; gap: 16px; flex-wrap: wrap; }
.wk-sh h2 { font: 700 24px 'Inter Tight', Inter, sans-serif !important; margin: 0; }
.wk-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-filters span { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--w-line); font-size: 13px; font-weight: 500; cursor: pointer; }
.wk-filters span.on { background: var(--w-deep); color: #fff; border-color: var(--w-deep); }
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.wk-tile { background: #fff; border-radius: 20px; border: 1px solid var(--w-line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; color: var(--w-deep) !important; text-decoration: none !important; }
.wk-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,27,69,.1); }
.wk-hd { height: 96px; position: relative; padding: 16px; }
.wk-tag { background: rgba(255,255,255,.92); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; float: right; color: var(--w-deep); }
.wk-ico { position: absolute; left: 16px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(11,27,69,.12); }
.wk-ico img { background: none !important; padding: 0 !important; }
.wk-bd { padding: 32px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wk-bd h3 { font: 700 17px/1.25 'Inter Tight', Inter, sans-serif !important; margin: 0; }
.wk-bd p { font-size: 13px; color: var(--w-mut); margin: 0; }
.wk-pr { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--w-mut); }
.wk-pr div { flex: 1; height: 6px; background: var(--w-ice); border-radius: 99px; }
.wk-pr i { display: block; height: 100%; border-radius: 99px; background: var(--w-blue); }
.wk-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 32px; }
.wk-card { background: #fff; border: 1px solid var(--w-line); border-radius: 20px; padding: 20px; }
.wk-card h3 { font: 700 16px 'Inter Tight', Inter, sans-serif !important; margin: 0 0 10px; }
.wk-card p { color: var(--w-mut); font-size: 14px; margin: 0 0 14px; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chips button { border: 1px solid var(--w-line); background: var(--w-ice); color: var(--w-deep); border-radius: 999px; padding: 8px 14px; font: 500 13px Inter, sans-serif; cursor: pointer; }
.wk-chips button:hover { background: var(--w-blue); color: #fff; border-color: var(--w-blue); }
.wk-lucy { background: linear-gradient(135deg, #fff, var(--w-ice)); }
.wk-cats a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #eef1f7; color: var(--w-deep) !important; font-weight: 500; font-size: 14px; text-decoration: none !important; }
.wk-cats a:last-child { border: 0; } .wk-cats a span { margin-left: auto; color: var(--w-blue); }
.wk-cats img { background: none !important; padding: 0 !important; width: 24px !important; height: 24px !important; }

/* Kursseite */
.wk-chead { background: #fff; border: 1px solid var(--w-line); border-radius: 24px; overflow: hidden; margin: 8px 0 20px; }
.wk-top { display: flex; gap: 20px; align-items: center; padding: 28px; flex-wrap: wrap; }
.wk-bigic { width: 72px; height: 72px; border-radius: 20px; background: var(--w-ice); display: grid; place-items: center; flex: none; }
.wk-bigic img { background: none !important; padding: 0 !important; width: 44px !important; height: 44px !important; }
.wk-ttl h1 { font: 800 clamp(24px, 3vw, 34px)/1.1 'Inter Tight', Inter, sans-serif !important; letter-spacing: -.02em; margin: 0; color: var(--w-deep); }
.wk-ttl p { color: var(--w-mut); font-size: 14px; margin: 4px 0 0; }
.wk-act { margin-left: auto; display: flex; gap: 8px; }
.wk-chead .wk-tabs { border-top: 1px solid var(--w-line) !important; padding: 0 20px; margin: 0 !important; }
.wk-chead #ilTab { gap: 4px !important; }
.wk-chead #ilTab > li > a { border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--w-mut) !important; padding: 14px 12px !important;
  border-bottom: 2px solid transparent !important; font: 500 14px Inter, sans-serif !important; }
.wk-chead #ilTab > li.active > a, .wk-chead #ilTab > li > a:hover { color: var(--w-deep) !important; border-bottom-color: var(--w-blue) !important; font-weight: 600 !important; background: none !important; }
body.wk-crs-on .breadcrumb { margin-bottom: 0; }
.wk-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
body.wk-crs-on .ilRightColumn, body.wk-crs-on #il_right_col, body.wk-crs-on .ilContainerRightColumn { display: none !important; }
body.wk-crs-on #il_center_col { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }
.wk-side .wk-card { margin-bottom: 16px; }
.wk-ring { width: 140px; height: 140px; margin: 8px auto 12px; border-radius: 50%; background: conic-gradient(var(--w-blue) 0 var(--p), var(--w-ice) var(--p) 100%); display: grid; place-items: center; }
.wk-ring div { width: 108px; height: 108px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; font: 800 28px 'Inter Tight', Inter, sans-serif; color: var(--w-deep); }
.wk-ring small { display: block; font: 500 11px Inter, sans-serif; color: var(--w-mut); }
.wk-side ul { list-style: none; font-size: 14px; display: grid; gap: 8px; padding: 0; margin: 0; }
.wk-side li { display: flex; justify-content: space-between; } .wk-side li span { color: var(--w-mut); }
.wk-cert { background: var(--w-deep) !important; border: 0 !important; } .wk-cert h3 { color: #fff !important; } .wk-cert p { color: #b9c6e6 !important; }
.wk-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 1000px) { .wk-hello, .wk-two, .wk-cgrid { grid-template-columns: 1fr; } .wk-search { display: none; } }

/* ===== Platz für Lucy (rechts unten) – wichtige Inhalte nicht rechts ===== */
/* ILIAS scrollt im Hauptbereich, nicht im body: dort Platz schaffen */
/* (offen: Platz schafft das Ladeskript über body padding-right – ILIAS-Layout folgt der body-Breite) */
html.wkc-state-mini #mainspacekeeper, html.wkc-state-closed #mainspacekeeper { padding-bottom: 160px !important; }
/* Kursseite: Fortschritt/Zertifikat links, Inhalt rechts daneben */
.wk-cgrid { grid-template-columns: 300px minmax(0, 1fr) !important; }
.wk-cgrid > .wk-side { order: -1; }
/* Kurskopf: Hauptaktion links unter dem Titel statt rechts außen */
.wk-top { flex-wrap: wrap; }
.wk-act { margin-left: 92px !important; flex-basis: 100%; }
/* Dashboard: Weiterlernen-Karte (wichtig) links, Kennzahlen rechts bleiben; Kacheln reflowen mit dem Platz */
@media (max-width: 1000px) { .wk-cgrid { grid-template-columns: 1fr !important; } .wk-act { margin-left: 0 !important; } }
/* ILIAS nutzt 100vh: kein Abstand am body unten, sondern im Scrollbereich (#mainspacekeeper, oben gesetzt) */
html.wkc-state-mini body, html.wkc-state-closed body { padding-bottom: 0 !important; }
/* Design-Schalter in der Kopfzeile */
.wk-skin-switch { display: flex; align-items: center; gap: 2px; background: var(--w-ice); border-radius: 10px; padding: 3px; flex: none; }
.wk-skin-switch button { border: 0; background: none; color: var(--w-mut); font: 600 12px Inter, sans-serif; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.wk-skin-switch button.on { background: #fff; color: var(--w-deep); box-shadow: 0 1px 4px rgba(11,27,69,.12); }
.wk-skin-switch .wk-sep { width: 1px; height: 16px; background: var(--w-line); margin: 0 4px; }
.wk-search { margin-left: auto; }
/* Login-Seite */
body.wk-login h2 { font: 800 clamp(28px, 3.4vw, 42px)/1.08 'Inter Tight', Inter, sans-serif !important; letter-spacing: -.03em; color: var(--w-deep); margin: 8px 0 6px; }
body.wk-login h2 span { color: var(--w-blue); }
.wk-login-lead { color: var(--w-mut); font-size: 16px; margin: 0 0 18px; max-width: 520px; }
body.wk-login .il-standard-form { background: #fff; border: 1px solid var(--w-line); border-radius: 20px; padding: 24px 28px; box-shadow: 0 20px 50px rgba(11,27,69,.08); }
body.wk-login .il-standard-form-header { display: none; }
.wk-cert .wk-btn { margin-top: 4px; width: 100%; justify-content: center; }