/* UW/H Lernplattform — shared chrome styles (ported from the corporate design) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: 'Lato', system-ui, sans-serif; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c4d0de; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes atlasDot { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes atlasIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

textarea { font-family: inherit; }
a { text-decoration: none; }

/* hover behaviours ported from the design's style-hover attributes */
.navlink:not(.active):hover { background: rgba(255,255,255,0.07) !important; }
.card-hover:hover { border-color: #c2cfdd !important; box-shadow: 0 6px 18px rgba(16,42,67,0.07) !important; }
.coursecard:hover { box-shadow: 0 8px 22px rgba(16,42,67,0.08) !important; border-color: #c2cfdd !important; }
.libcard:hover { box-shadow: 0 7px 20px rgba(16,42,67,0.08) !important; border-color: #c2cfdd !important; }
.chip:hover { border-color: #c2cfdd !important; background: #f5f8fb !important; }
.rowhover:hover { background: #f5f8fb !important; }
.bright:hover { filter: brightness(1.08); }
.iconbtn:hover { background: #f5f8fb !important; }
.linkbtn:hover { color: #004F9F !important; }
.ghostbtn:hover { border-color: #5a7aa0 !important; }
.amber:hover { filter: brightness(1.05); }

/* Reader (Lese-Tutor, reader.js) */
.rd-article { max-width: 720px; margin: 0 auto; font-size: 16.5px; line-height: 1.78; color: #1f2d3a; }
.rd-sec { position: relative; padding: 4px 0 4px 52px; margin-bottom: 18px; border-radius: 10px; transition: background .4s; }
.rd-sec h3 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; margin: 18px 0 8px; color: #16222e; }
.rd-sec p { margin: 0; white-space: pre-line; }
.rd-num { position: absolute; left: 0; top: 6px; width: 38px; text-align: right; font-size: 11px; font-weight: 700; color: #b9c6d4; user-select: none; }
.rd-sec.rd-seen .rd-num { color: #4E9E2E; }
.rd-sec.rd-engaged .rd-num { color: #004F9F; }
.rd-ask { position: absolute; left: 0; top: 26px; width: 38px; display: flex; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.rd-sec:hover .rd-ask, .rd-sec:focus-within .rd-ask { opacity: 1; }
.rd-ask button { cursor: pointer; width: 24px; height: 24px; border-radius: 7px; border: 1px solid #c4d6ea; background: #e6eef7; color: #004F9F; font-weight: 800; font-size: 13px; font-family: inherit; }
.rd-sec.rd-flash { background: #fff4cc; }
.rd-sec.rd-active { background: #f1f6fc; }
.rd-article ::selection { background: #ffe58f; }
#rd-popover { position: absolute; z-index: 40; display: none; gap: 6px; flex-wrap: wrap; max-width: min(420px, calc(100% - 16px)); background: #14283f; border-radius: 12px; padding: 8px; box-shadow: 0 10px 28px rgba(16,42,67,.28); }
#rd-popover button { cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #eaf1f8; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 6px 10px; }
#rd-popover button:hover { background: rgba(255,255,255,.18); }
#rd-anchor { display: none; align-items: center; gap: 8px; font-size: 12px; color: #42525f; background: #fff7d6; border: 1px solid #f0dd9a; border-radius: 9px; padding: 7px 10px; margin-bottom: 8px; }
#rd-anchor.on { display: flex; }
.rd-chat-toggle { display: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; color: #004F9F; background: #e6eef7; border: 1px solid #c4d6ea; border-radius: 6px; padding: 5px 8px; }
/* Touch-Geräte kennen kein Hover: das „?“ je Abschnitt bleibt sichtbar. */
@media (hover: none) { .rd-ask { opacity: .75; } }

/* Markdown-Rendering in Ava-Bubbles (tutor.js mdToHtml) */
.md-body p { margin: 0 0 10px; }
.md-body p:last-child, .md-body ul:last-child, .md-body ol:last-child, .md-body table:last-child { margin-bottom: 0; }
.md-body h4 { margin: 12px 0 6px; font-size: 14.5px; font-weight: 800; }
.md-body h4:first-child { margin-top: 0; }
.md-body ul, .md-body ol { margin: 0 0 10px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body hr { border: none; border-top: 1px solid #dce3eb; margin: 12px 0; }
.md-body code { background: #eef2f7; border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.md-body table { border-collapse: collapse; margin: 4px 0 10px; font-size: 13.5px; display: block; overflow-x: auto; max-width: 100%; }
.md-body th, .md-body td { border: 1px solid #dce3eb; padding: 5px 9px; text-align: left; }
.md-body th { background: #f5f8fb; font-weight: 700; }

/* ---- Responsive (Vor-Freeze-Paket, 25.09.2026) ---------------------------
   Die Templates tragen ihr Layout als Inline-Styles. Diese Regeln überschreiben
   sie unterhalb der Umbrüche, deshalb !important. Sie gelten, bis die neue
   UI-Shell nach dem Freeze die Inline-Styles ablöst.
   r-page     Seitenrahmen, schmalere Ränder
   r-bar      Kopfleisten, schmalere Ränder
   r-pad(-x)  Innenabstand (nur seitlich)
   r-stack    Raster wird unter 1024 px einspaltig
   r-stack-sm Raster wird unter 700 px einspaltig
   r-grid4    Vierer-Raster wird unter 700 px zweispaltig
   r-wrap     Flex-Zeile darf unter 700 px umbrechen
   r-scroll-x Chip-Zeile scrollt unter 700 px seitlich statt umzubrechen
   r-hide-md / r-hide-sm  unter 1024 / 700 px ausblenden */
.nav-toggle, .side-close { display: none; cursor: pointer; border: none; background: transparent; color: inherit; font-family: inherit; }
.nav-toggle { width: 40px; height: 40px; flex: none; margin-left: -8px; border-radius: 8px; align-items: center; justify-content: center; color: #16222e; }
.side-close { width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; color: #cfe0f0; }
.side-backdrop { display: none; }

@media (max-width: 1023px) {
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; overflow-y: auto; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(6, 22, 42, .3); }
  body.nav-open .side { transform: none; }
  body.nav-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6, 22, 42, .45); }
  .nav-toggle, .side-close { display: flex; }
  .r-bar { padding: 10px 16px !important; gap: 10px !important; }
  .r-page { padding: 20px 16px 40px !important; }
  .r-pad { padding: 16px !important; }
  .r-pad-x { padding-left: 16px !important; padding-right: 16px !important; }
  .r-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .r-stack > * { min-width: 0; }
  .r-hide-md { display: none !important; }
  .r-chatpage { display: block !important; height: auto !important; }
  .r-chatcol { height: calc(100vh - 61px); height: calc(100dvh - 61px); }
  .r-rail { width: auto !important; border-left: none !important; border-top: 1px solid #dce3eb; }
  .r-title { font-size: 17px !important; margin-top: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
  .r-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-stack-sm { grid-template-columns: minmax(0, 1fr) !important; }
  .r-stack-sm > * { min-width: 0; }
  .r-break-sm { order: 3; flex-basis: 100% !important; text-align: center; }
  .r-hide-sm { display: none !important; }
  .r-wrap { flex-wrap: wrap !important; }
  .r-scroll-x { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; flex-basis: 100%; min-width: 0; scrollbar-width: none; }
  .r-scroll-x::-webkit-scrollbar { display: none; }
  .r-scroll-x > * { flex: none; }
  .r-h1 { font-size: 26px !important; }
}

/* Reader unter 1024 px: Text oben, Ava darunter (einklappbar, reader.js). */
@media (max-width: 1023px) {
  .rd-layout { flex-direction: column; }
  .rd-textcol { flex: 1 1 0 !important; min-height: 0; }
  .rd-textpad { padding: 18px 16px 48px !important; }
  .rd-chat { width: auto !important; flex: 0 0 48% !important; min-height: 0; border-left: none !important; border-top: 1px solid #cdd8e4; box-shadow: 0 -6px 18px rgba(16, 42, 67, .08); }
  .rd-chat.rd-chat-min { flex: 0 0 auto !important; }
  .rd-chat.rd-chat-min .rd-thread, .rd-chat.rd-chat-min .rd-composer { display: none !important; }
  .rd-chat-toggle { display: inline-block; }
}
@media (max-width: 700px) {
  .rd-sec { padding-left: 34px; }
  .rd-num, .rd-ask { width: 26px; }
  .rd-article { font-size: 16px; line-height: 1.7; }
  .rd-progress { width: 104px !important; }
  .rd-progress span span { display: inline; }
}