/* ==========================================================================
   Onoldinus Portal – Child-Template von Cassiopeia
   Desktop  ≥ 1024 px : feste Navigation links (264 px)
   Tablet   768–1023  : Icon-Leiste links (84 px)
   Smartphone < 768   : obere Leiste + ausfahrendes Menü
   Die Akzentfarbe kommt aus den Template-Optionen (--on-primary).
   ========================================================================== */

:root {
  --on-primary: #2b4c86;
  --on-primary-soft: color-mix(in srgb, var(--on-primary) 10%, #fff);
  --on-bg: #f5f6f8;
  --on-surface: #fff;
  --on-ink: #1f2430;
  --on-ink-2: #424a5a;
  --on-head: #161b26;
  --on-muted: #6a7282;
  --on-line: #e4e7ec;
  --on-line-strong: #ccd2db;
  --on-radius: 10px;
  --on-nav-w: 264px;
  --on-rail-w: 96px;
  --on-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --cassiopeia-font-family-body: var(--on-font);
  --cassiopeia-font-family-headings: var(--on-font);
  --body-font-family: var(--on-font);
  --body-color: var(--on-ink);
  --body-bg: var(--on-bg);
}

/* ---------- Grundgerüst ---------- */
body.on-portal {
  display: grid;
  grid-template-columns: var(--on-nav-w) minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  background: var(--on-bg);
  color: var(--on-ink);
  font-family: var(--on-font);
  font-size: 1rem;
  line-height: 1.55;
}

.on-portal h1, .on-portal h2, .on-portal h3, .on-portal h4 {
  color: var(--on-head);
  font-family: var(--on-font);
  font-weight: 650;
  line-height: 1.25;
}

.on-portal a { color: var(--on-primary); }
.on-portal a:hover { color: var(--link-hover-color); }

.on-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--on-primary); color: #fff !important; padding: 10px 16px; border-radius: 8px;
}
.on-skip:focus { top: 12px; }

.on-ic { display: block; flex: none; }

.on-iconbtn {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--on-line-strong); border-radius: 8px;
  background: var(--on-surface); color: var(--on-head);
  cursor: pointer;
}
.on-iconbtn:focus-visible,
.on-nav__link:focus-visible,
.on-nav__toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--on-primary) 45%, transparent); outline-offset: 2px; }

/* ---------- Marke ---------- */
.on-brand { display: flex; align-items: center; gap: 12px; color: var(--on-head) !important; text-decoration: none; min-width: 0; }
.on-brand__mark { color: var(--on-primary); flex: none; }
.on-brand__img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.on-brand__text { min-width: 0; }
.on-brand__text strong { display: block; font-size: 1.2rem; line-height: 1.15; font-weight: 700; letter-spacing: .01em; }
.on-brand__text small { display: block; font-size: .8rem; color: var(--on-muted); letter-spacing: .02em; }

/* ---------- Seitenleiste ---------- */
.on-sidenav {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--on-surface);
  border-right: 1px solid var(--on-line);
  padding: 20px 14px 16px;
  overflow-y: auto;
  z-index: 40;
}
.on-sidenav__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 20px; }
.on-nav-close { display: none; }
.on-sidenav__extra { padding: 12px 4px 0; }

/* Menü */
.on-nav, .on-nav__sub { list-style: none; margin: 0; padding: 0; }
.on-nav > li + li { margin-top: 2px; }
.on-nav li { position: relative; }

.on-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--on-ink-2) !important; font-weight: 550; font-size: .95rem;
  text-decoration: none;
}
.on-nav__link:hover { background: #f1f3f6; color: var(--on-head) !important; }
.on-nav__icon {
  width: 22px; text-align: center; flex: none;
  color: #8a93a3; font-size: 1.05rem; line-height: 1;
}
.on-nav__icon img { width: 20px; height: 20px; object-fit: contain; }
.on-nav__icon--letter {
  display: grid; place-items: center; height: 22px;
  border-radius: 6px; background: #eef0f4; font-size: .75rem; font-weight: 700; color: var(--on-muted);
}
.on-nav .active > .on-nav__link,
.on-nav .current > .on-nav__link { background: var(--on-primary-soft); color: var(--on-primary) !important; }
.on-nav .active > .on-nav__link .on-nav__icon,
.on-nav .current > .on-nav__link .on-nav__icon { color: var(--on-primary); }

.on-nav__heading {
  display: block; padding: 18px 12px 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #98a0ae;
}
.on-nav > li:first-child > .on-nav__heading { padding-top: 4px; }
.on-nav__sep { display: block; height: 1px; background: var(--on-line); margin: 10px 12px; }

/* Untermenüs */
.on-nav__toggle {
  position: absolute; right: 4px; top: 5px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--on-muted); cursor: pointer;
}
.on-nav__toggle svg { transition: transform .15s; }
.on-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.on-nav__toggle:hover { background: #eef0f4; }
.deeper > .on-nav__link { padding-right: 40px; }
.on-nav__sub { display: none; padding: 2px 0 4px 34px; }
.is-open > .on-nav__sub, .on-nav__sub--group { display: block; }
.on-nav__sub--group { padding-left: 0; }
.on-nav__sub .on-nav__link { padding: 7px 10px; font-size: .9rem; font-weight: 500; }
.on-nav__sub:not(.on-nav__sub--group) .on-nav__icon { display: none; }

/* Anmelde-Box */
.on-account {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 8px 0; margin-left: 0; margin-right: 0;
  border-top: 1px solid var(--on-line);
  font-size: .9rem;
}
.on-sidenav__nav + .on-account,
.on-sidenav__extra + .on-account { margin-top: auto; }
.on-account__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--on-primary-soft); color: var(--on-primary);
}
.on-account__avatar .on-ic { width: 18px; height: 18px; }
.on-account__text { min-width: 0; line-height: 1.3; }
.on-account__text strong { display: block; color: var(--on-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-account__text a, .on-account__logout button { font-size: .82rem; }
.on-account__logout { margin: 0; }
.on-account__logout button { border: 0; background: none; padding: 0; color: var(--on-primary); cursor: pointer; }
.on-account__logout button:hover { text-decoration: underline; }

/* ---------- Inhaltsbereich ---------- */
.on-mobilebar, .on-scrim { display: none; }
.on-wrap { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.on-topline {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--on-surface); border-bottom: 1px solid var(--on-line);
  padding: 12px 36px; min-height: 60px;
}
.on-topline__crumbs { min-width: 0; }
.on-topline .breadcrumb { margin: 0; padding: 0; background: none; font-size: .87rem; }
.on-topline .breadcrumb-item, .on-topline .breadcrumb-item a { color: var(--on-muted); }
.on-topline .breadcrumb-item.active { color: var(--on-ink-2); }
.on-topline .mod-breadcrumbs__here { display: none; }
.on-topline__search { width: 300px; flex: none; }
.on-topline__search form, .on-topline__search .mod-finder { margin: 0; }
.on-topline__search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.on-topline__search .form-control { border-radius: 8px; border-color: var(--on-line-strong); background: #fafbfc; font-size: .92rem; }
.on-topline__search .btn { border-radius: 0 8px 8px 0; }

.on-banner > * { margin: 0; }
.on-body { padding: 30px 36px 40px; max-width: 1240px; width: 100%; flex: 1; }
.on-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.has-sidebar-right .on-columns { grid-template-columns: minmax(0, 1fr) 320px; }
.on-main:focus { outline: none; }
.on-aside { display: grid; gap: 18px; align-content: start; }

.on-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.on-top-a { margin-bottom: 24px; }
.on-bottom-a, .on-bottom-b { margin-top: 24px; }

/* Modul-Karten (Chrome »card«) */
.on-portal .card {
  border: 1px solid var(--on-line); border-radius: var(--on-radius);
  background: var(--on-surface); box-shadow: none;
}
.on-portal .card-header {
  background: none; border-bottom: 0;
  padding: 18px 20px 0; font-size: 1rem; font-weight: 650; color: var(--on-head);
}
.on-portal .card-body { padding: 14px 20px 18px; }
.on-main > .card + *, .on-main > * + .card { margin-top: 18px; }

/* Listen in Modulen (z. B. Termine, Dokumente, Neueste Beiträge) */
.on-portal .card-body ul:not(.on-nav):not(.mod-login__options):not(.pagination) { list-style: none; padding: 0; margin: 0; }
.on-portal .card-body ul:not(.on-nav):not(.mod-login__options):not(.pagination) > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--on-line); font-size: .93rem;
}
.on-portal .card-body ul:not(.on-nav):not(.mod-login__options):not(.pagination) > li:first-child { border-top: 0; padding-top: 2px; }
.on-portal .card-body li > strong:first-child { color: var(--on-primary); min-width: 3.4em; font-variant-numeric: tabular-nums; }
.on-portal .card-body li a { color: var(--on-ink); text-decoration: none; font-weight: 500; }
.on-portal .card-body li a:hover { color: var(--on-primary); text-decoration: underline; }
.on-portal .card-body li small { margin-left: auto; color: var(--on-muted); font-size: .78rem; white-space: nowrap; }

/* ---------- Beiträge ---------- */
.on-main .page-header h1, .on-main > h1, .on-main .com-content-article h1 { font-size: 1.75rem; margin-bottom: .4rem; }
.on-main .blog-featured > .page-header, .on-main .com-content-category-blog > .page-header { margin-bottom: 1rem; }

.on-main .blog-items { margin: 0 0 1.25rem; gap: 18px; }
.on-main > .card.on-intro + #system-message-container + .blog-featured,
.on-main > .card.on-intro ~ .blog-featured { margin-top: 18px; }

/* Seitennavigation der Blogs */
.on-main .pagination__wrapper { display: flex; justify-content: center; }
.on-main .counter { display: none; }
.on-main .pagination .page-link { border-color: var(--on-line); color: var(--on-ink-2); }
.on-main .pagination .active .page-link { background: var(--on-primary); border-color: var(--on-primary); color: #fff; }
.on-main .blog-item {
  background: var(--on-surface); border: 1px solid var(--on-line); border-radius: var(--on-radius);
  padding: 20px; display: flex; flex-direction: column;
}
.on-main .blog-item .item-content { display: flex; flex-direction: column; flex: 1; }
.on-main .blog-item .item-title,
.on-main .blog-item .page-header h2 { font-size: 1.1rem; font-weight: 650; margin: 0 0 .5rem; }
.on-main .blog-item .item-title a,
.on-main .blog-item .page-header h2 a { color: var(--on-head); text-decoration: none; }
.on-main .blog-item .item-title a:hover,
.on-main .blog-item .page-header h2 a:hover { color: var(--on-primary); text-decoration: underline; }
.on-main .blog-item .item-image { margin: -20px -20px 14px; }
.on-main .blog-item .item-image img { width: 100%; border-radius: var(--on-radius) var(--on-radius) 0 0; }
.on-main .blog-item p { color: var(--on-ink-2); font-size: .95rem; }
.on-main .blog-item .readmore { margin-top: auto; }
.on-main .readmore .btn {
  background: none; border: 0; padding: 0; color: var(--on-primary); font-weight: 600; font-size: .92rem;
}
.on-main .readmore .btn:hover { text-decoration: underline; }
.on-main .readmore .icon-chevron-right, .on-main .readmore .icon-chevron-left { font-size: .75em; }

.on-main .article-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 .6rem;
  font-size: .82rem; color: var(--on-muted) !important;
}
/* Kategorie als Etikett ohne Vorsatz »Kategorie:« */
.on-main .article-info dd.category-name { font-size: 0; order: -1; }
.on-main .article-info dd.category-name a { font-size: .78rem; }
.on-main .article-info .article-info-term { display: none; }
.on-main .article-info dd { margin: 0; }
.on-main .article-info .category-name a {
  display: inline-block; padding: 1px 9px; border-radius: 20px;
  background: var(--on-primary-soft); color: var(--on-primary); font-weight: 600; text-decoration: none;
}
.on-main .article-info .icon-fw, .on-main .article-info [class^="icon-"] { display: none; }

/* Einzelner Beitrag lesefreundlich */
.on-main .com-content-article {
  background: var(--on-surface); border: 1px solid var(--on-line); border-radius: var(--on-radius);
  padding: 28px 32px;
}
.on-main .com-content-article__body { max-width: 72ch; }

/* Bootstrap-Anpassungen */
.on-portal .btn-primary { background: var(--on-primary); border-color: var(--on-primary); }
.on-portal .btn-primary:hover { background: var(--link-hover-color); border-color: var(--link-hover-color); }
.on-portal .form-control:focus { border-color: var(--on-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--on-primary) 20%, transparent); }

/* ---------- Fußzeile ---------- */
.on-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--on-line);
  padding: 18px 36px; color: var(--on-muted); font-size: .88rem;
}
.on-footer__mods ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.on-footer__mods a { color: var(--on-ink-2); text-decoration: none; }
.on-footer__mods a:hover { color: var(--on-primary); text-decoration: underline; }
.on-footer__mods p { margin: 0; }

/* Spalten im Blog: 3 → 2 → 1 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .on-main .blog-items.columns-3, .on-main .blog-items.columns-4 { grid-template-columns: 1fr 1fr; }
}

/* ======================= Tablet: Icon-Leiste ======================= */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.on-portal { grid-template-columns: var(--on-rail-w) minmax(0, 1fr); }
  .on-sidenav { padding: 16px 8px 12px; }
  .on-sidenav__head { justify-content: center; padding: 4px 0 14px; }
  .on-sidenav .on-brand__text { display: none; }
  .on-nav__link {
    flex-direction: column; gap: 4px; padding: 10px 2px;
    font-size: .68rem; text-align: center; line-height: 1.2;
  }
  .on-nav__icon { width: auto; font-size: 1.15rem; }
  .on-nav__icon--letter { width: 26px; height: 26px; }
  .on-nav__label { display: block; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .on-nav__heading { font-size: 0; padding: 0; height: 1px; background: var(--on-line); margin: 10px 8px; }
  .on-nav__toggle, .on-nav__sub:not(.on-nav__sub--group) { display: none !important; }
  .deeper > .on-nav__link { padding-right: 2px; }
  .on-sidenav__extra { display: none; }
  .on-account { justify-content: center; padding: 12px 0 0; }
  .on-account__text { display: none; }

  .on-topline { padding: 12px 24px; }
  .on-topline__search { width: 240px; }
  .on-body { padding: 24px; }
  .on-footer { padding: 16px 24px; }
  .has-sidebar-right .on-columns { grid-template-columns: minmax(0, 1fr); }
  .has-sidebar-right .on-aside { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .on-main .blog-items.columns-3, .on-main .blog-items.columns-4 { grid-template-columns: 1fr 1fr; }
}

/* ======================= Smartphone ======================= */
@media (max-width: 767.98px) {
  body.on-portal { display: block; }

  .on-mobilebar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    background: var(--on-surface); border-bottom: 1px solid var(--on-line);
    padding: 10px 14px;
  }
  .on-mobilebar .on-brand__mark, .on-mobilebar .on-brand__img { width: 32px; height: 32px; }
  .on-mobilebar .on-brand__text strong { font-size: 1.1rem; }
  .on-search-toggle { margin-left: auto; }

  .on-sidenav {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(300px, 86vw); height: auto;
    transform: translateX(-102%);
    transition: transform .22s ease, visibility 0s linear .22s;
    visibility: hidden;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .14);
    padding: 16px 14px;
  }
  .on-nav-is-open .on-sidenav { transform: none; visibility: visible; transition: transform .22s ease; }
  .on-nav-close { display: grid; }
  .on-sidenav__head { padding: 2px 4px 16px 8px; }
  .on-nav__link { padding: 12px; font-size: 1rem; }

  .on-nav-is-open .on-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(16, 22, 34, .42);
  }
  .on-nav-is-open { overflow: hidden; }

  .on-topline { display: none; padding: 10px 14px; }
  .on-search-is-open .on-topline { display: flex; }
  .on-topline__crumbs { display: none; }
  .on-topline__search { width: 100%; }

  .on-body { padding: 20px 16px 28px; }
  .on-main .page-header h1, .on-main > h1 { font-size: 1.5rem; }
  .has-sidebar-right .on-columns { grid-template-columns: minmax(0, 1fr); }
  .on-main .blog-items[class*="columns-"] { grid-template-columns: 1fr; }
  .on-main .com-content-article { padding: 20px 18px; }
  .on-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .on-footer { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .on-sidenav, .on-nav__toggle svg { transition: none !important; }
}

@media print {
  body.on-portal { display: block; }
  .on-sidenav, .on-mobilebar, .on-topline, .on-scrim { display: none !important; }
}

/* Einleitung als Modul (Modulklasse »on-intro«, Chrome card) */
.on-portal .card.on-intro { background: none; border: 0; }
.on-portal .card.on-intro .card-body { padding: 0 0 6px; }
.on-portal .card.on-intro h1 { font-size: 1.75rem; margin-bottom: .4rem; }
.on-portal .lead { color: var(--on-muted); font-size: 1.06rem; font-weight: 400; max-width: 62ch; }
@media (max-width: 767.98px) {
  .on-portal .card.on-intro h1 { font-size: 1.5rem; }
  .on-portal .lead { font-size: 1rem; }
}

/* Anmelde-, Registrierungs- und Profilseiten als Karte */
.on-main .com-users-login,
.on-main .com-users-logout,
.on-main .com-users-remind,
.on-main .com-users-reset,
.on-main .com-users-registration,
.on-main .com-users-profile {
  max-width: 520px;
  background: var(--on-surface); border: 1px solid var(--on-line); border-radius: var(--on-radius);
  padding: 28px 30px;
}
.on-main .com-users-login__options { margin-top: 14px; border: 0; }
.on-main .com-users-login__options .list-group-item { border: 0; padding: 4px 0; background: none; }
@media (max-width: 767.98px) {
  .on-main .com-users-login, .on-main .com-users-registration, .on-main .com-users-profile { padding: 20px 18px; max-width: none; }
}