/*
 * Course detail view — a rebuild of the CAMPUSonline course page layout
 * (topbar, breadcrumb, sticky section navigation, card sections).
 *
 * The chrome only renders in standalone mode (.ces-co--standalone); embedded in
 * a normal page the same markup keeps just the cards and the sidebar.
 */

.ces-co {
    --ces-co-bar: #3d4a56;
    --ces-co-accent: #7ba7d7;
    --ces-co-accent-soft: #dce8f5;
    --ces-co-link: #3d7ebd;
    --ces-co-border: #dfe3e8;
    --ces-co-head: #eef1f5;
    --ces-co-muted: #6b7480;
    --ces-co-fixed-offset: 0px;
    --ces-co-sticky-gap: 1rem;
    --ces-co-sticky-top: calc(var(--ces-co-fixed-offset) + var(--ces-co-sticky-gap));

    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

/*
 * The chrome sits in the normal flow, inside the content column. Site themes
 * that style bare landmark elements have pulled it out before (the PH-OÖ
 * template pins <header> with position:fixed), so the layout-critical
 * properties are asserted here rather than assumed.
 */
.ces-co .ces-co-topbar,
.ces-co .ces-co-breadcrumb {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    min-width: 0;
    float: none;
    z-index: auto;
    box-sizing: border-box;
}

/* --- Topbar ------------------------------------------------------------- */
.ces-co-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem .9rem;
    background: var(--ces-co-bar);
    color: #fff;
    font-size: 12px;
}
.ces-co-brand { display: flex; align-items: center; flex: 0 0 auto; }
.ces-co-brand img { display: block; height: 22px; width: auto; }
.ces-co-topbar-right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ces-co-maintenance { color: #f0d48a; }
.ces-co-maintenance strong { color: #f0d48a; }
.ces-co-login { color: #fff; text-decoration: none; }
.ces-co-login:hover { text-decoration: underline; }
.ces-co-lang a { color: #fff; text-decoration: none; opacity: .75; }
.ces-co-lang a.is-active { opacity: 1; font-weight: 700; text-decoration: underline; }
.ces-co-lang-sep { opacity: .5; margin: 0 .2rem; }

/* --- Breadcrumb --------------------------------------------------------- */
.ces-co-breadcrumb {
    padding: .45rem .9rem;
    background: #fafafa;
    border-bottom: 1px solid var(--ces-co-border);
    font-size: 12px;
    color: #555;
}

/* --- Search in the breadcrumb bar --------------------------------------- */
.ces-co-breadcrumb { display: flex; align-items: center; gap: .75rem; }
.ces-co-crumbs { flex: 1 1 auto; min-width: 0; }
.ces-co-searchbtn { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: #555; line-height: 1; padding: .1rem .3rem; }
.ces-co-search { display: flex; gap: .4rem; flex: 1 1 22rem; }
.ces-co-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: .25rem .5rem; border: 1px solid var(--ces-co-border); border-radius: 3px; font-size: 13px; }
.ces-co-search select { border: 1px solid var(--ces-co-border); border-radius: 3px; background: #fff; font-size: 12px; text-transform: uppercase; color: var(--ces-co-link); }
.ces-co-search button[type="submit"] {
    border: 1px solid var(--ces-co-accent);
    border-radius: 3px;
    background: var(--ces-co-accent-soft);
    color: #33628f;
    font-size: 12px;
    padding: .25rem .7rem;
    cursor: pointer;
}

/* --- Directory results -------------------------------------------------- */
.ces-co-main--wide { max-width: 52rem; margin: 0 auto; }
.ces-search-term { font-size: .8em; color: var(--ces-co-muted); }
.ces-hits { list-style: none; margin: 0; padding: 0; }
.ces-hit { display: flex; flex-direction: column; gap: .1rem; padding: .5rem 0; border-bottom: 1px solid var(--ces-co-border); }
.ces-hit:last-child { border-bottom: 0; }
.ces-hit-title { font-weight: 600; }
.ces-hit-sub { color: var(--ces-co-muted); font-size: 13px; }
.ces-hit-meta { color: var(--ces-co-link); font-size: 12px; }

/* --- Layout ------------------------------------------------------------- */
.ces-co-body { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.75rem 1rem; }
.ces-co-sidebar { flex: 0 0 12rem; position: sticky; top: 1rem; top: var(--ces-co-sticky-top, 1rem); }
.ces-co-main { flex: 1 1 auto; min-width: 0; }
.ces-card[id] { scroll-margin-top: 1rem; scroll-margin-top: var(--ces-co-sticky-top, 1rem); }

.ces-co-back { display: block; margin-bottom: .6rem; color: var(--ces-co-link); text-decoration: none; font-size: 13px; }
.ces-co-back:hover { text-decoration: underline; }

.ces-co-toc { border: 1px solid var(--ces-co-border); border-radius: 3px; overflow: hidden; background: #fff; }
.ces-co-toc a {
    display: block;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--ces-co-border);
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.ces-co-toc a:last-child { border-bottom: 0; }
.ces-co-toc a:hover { background: #f5f7f9; }
.ces-co-toc a.is-active { background: var(--ces-co-accent); color: #fff; font-weight: 700; }

.ces-co-regbtn {
    display: block;
    margin-top: .9rem;
    padding: .45rem .6rem;
    border: 1px solid var(--ces-co-accent);
    border-radius: 3px;
    background: var(--ces-co-accent-soft);
    color: #33628f;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.ces-co-regstate { margin: .5rem 0 0; text-align: center; font-size: 12px; color: var(--ces-co-muted); }

/* --- Cards -------------------------------------------------------------- */
.ces-card { border: 1px solid var(--ces-co-border); border-radius: 3px; background: #fff; margin-bottom: 1.25rem; }
.ces-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: .7rem .9rem;
    background: var(--ces-co-head);
    border-bottom: 1px solid var(--ces-co-border);
    font-size: 1.15rem;
    font-weight: 400;
}
.ces-card-body { padding: .9rem; }
.ces-card-foot { border-top: 1px solid var(--ces-co-border); padding: .5rem .9rem; background: #fbfbfc; }

.ces-view-toggle { display: flex; gap: 0; }
.ces-view-toggle button {
    border: 0;
    background: transparent;
    padding: .35rem .7rem;
    cursor: pointer;
    color: #555;
    line-height: 1;
}
.ces-view-toggle button.is-active { background: var(--ces-co-accent-soft); }

/* --- Collapsibles ------------------------------------------------------- */
.ces-collapse {
    border: 0;
    background: transparent;
    padding: .4rem 0;
    color: var(--ces-co-link);
    cursor: pointer;
    font-size: 13px;
}
.ces-collapse::before { content: "\25BE"; display: inline-block; margin-right: .4rem; transition: transform .15s; }
.ces-collapse[aria-expanded="false"]::before { transform: rotate(-90deg); }

.ces-group { border-bottom: 1px solid var(--ces-co-border); padding: .4rem .9rem .9rem; }
.ces-group:last-child { border-bottom: 0; }
.ces-group-people { padding: .4rem 0 .6rem; border-bottom: 1px dashed var(--ces-co-border); margin-bottom: .6rem; font-size: 13px; }

/* --- Dates -------------------------------------------------------------- */
.ces-past-toggle { border: 0; background: transparent; padding: .2rem 0 .6rem; color: var(--ces-co-link); cursor: pointer; font-size: 13px; }

.ces-date { display: flex; gap: .9rem; align-items: flex-start; padding: .45rem 0; }
.ces-date.is-cancelled { text-decoration: line-through; color: #999; }
.ces-date-tile {
    flex: 0 0 4rem;
    border: 1px solid var(--ces-co-link);
    border-radius: 3px;
    padding: .3rem;
    text-align: center;
    line-height: 1.1;
}
.ces-date-tile--series { border-color: #333; }
.ces-date-day { display: block; font-size: 1.5rem; font-weight: 700; }
.ces-date-month { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.ces-date-info { display: flex; flex-direction: column; gap: .15rem; }
.ces-date-room,
.ces-date-range { color: var(--ces-co-link); font-size: 13px; }

/* --- Gleiche Lehrveranstaltungen ---------------------------------------- */
.ces-same-course { border-left: 3px solid var(--ces-co-accent); padding: .5rem .75rem; margin-bottom: .6rem; background: #fbfbfc; }
.ces-same-course-code { color: var(--ces-co-muted); margin-right: .5rem; }
.ces-same-course-meta { display: flex; gap: .75rem; font-size: 12px; color: var(--ces-co-muted); margin: .2rem 0; }
.ces-same-course-people { font-size: 13px; }

.ces-same-semester { border-bottom: 1px solid var(--ces-co-border); padding: .4rem .9rem .9rem; }
.ces-same-semester:last-child { border-bottom: 0; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 800px) {
    .ces-co-body { flex-direction: column; padding: 1rem .75rem; }
    .ces-co-sidebar { position: static; flex-basis: auto; width: 100%; }
    .ces-detail-row { flex-direction: column; }
}

/* --- Standalone page ---------------------------------------------------- */
/*
 * The standalone page type brings no site stylesheet along, so the few document
 * level rules the layout relies on are set here.
 */
body.ces-standalone-page {
    margin: 0;
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.ces-standalone-page .ces-co-main { max-width: 62rem; }