/* user.css - cassiopeia_countdown (letztercountdown / lastcountdown / ultimoconteo)
 *
 * Decided by Stephan on 2026-11-11:
 *   1. The page looks like the J3 countdown sites, measured on the old site: fixed frames 960px wide (940 inside), the
 *      banner at its own 940x160 (never scaled up), the video at 940x226, sidebar 220 + 20 + content 700, black frames
 *      for header / menu / video / footer, a white frame round sidebar and article, the Orion nebula with the
 *      Horsehead behind it all. Articles refer to these differences between the sites.
 *   2. Long articles read like on whitecloudfarm.org: Literata 19px / 1.65, justified with hyphenation on wide
 *      screens, ragged-right below 600px (the wcf standard of 2026-06-16), near-black text (#0d0d0d, wanted).
 * The frames are drawn by the template's own index.php (cd-frame, cd-header, cd-nav, cd-banner, cd-main, cd-footer).
 * No dark mode for now; colours are tokens on :root so one can be added later.
 */
@import url("fonts.css");
@import url("legacy-content.css");
@import url("offcanvas.css");

:root {
  --cd-frame-w: 960px;               /* frame width at >= 980px viewport (old .container) */
  --cd-pad: 10px;                    /* frame padding, and the gap between frames */
  --cd-ink: #0d0d0d;                 /* body text - near black, as on the old sites */
  --cd-ink-soft: #4a4a4a;            /* meta lines, captions */
  --cd-paper: #ffffff;
  --cd-line: #b4b4b4;                /* the old 1px borders of modules and content */
  --cd-red: #c4121a;                 /* links in text: the old #ed1c24, darkened to 5.6:1 on white for 19px */
  --cd-red-bright: #ed1c24;          /* the old template colour: active menu item, carets, sidebar links */
  --cd-frame: #020202;               /* the old frames */
  --cd-bar: #323232;                 /* menu bar */
  --cd-bar-hover: #2e2e2e;
  --cd-sub-line: #cf551a;            /* submenu item lines */
  --cd-ui-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cd-read-font: "Literata", Georgia, "Times New Roman", serif;
  --cd-title-font: "Orbitron", "Open Sans", sans-serif;

  /* Cassiopeia's own tokens, so its buttons, pagination and focus rings follow the countdown colours */
  --cassiopeia-color-primary: #7d0a0f;
  --cassiopeia-color-link: var(--cd-red);
  --cassiopeia-color-hover: var(--cd-red-bright);
  --link-color: var(--cd-red);
  --link-hover-color: var(--cd-red-bright);
  --body-color: var(--cd-ink);
  --body-font-family: var(--cd-ui-font);
}

/* ---------- page: the nebula, exactly as the old body (unscaled, centred at the top, fixed) ---------- */
html {
  background: #000;
}
body.cd-site {
  margin: 8px;
  background: #000 url("../images/nebula-bg.jpg") 50% 0 / auto no-repeat fixed;
  color: var(--cd-ink);
  font-family: var(--cd-ui-font);
  font-size: 1rem;
}
a {
  color: var(--cd-red);
}
a:hover,
a:focus {
  color: var(--cd-red-bright);
}
/* links in the text: not underlined, as on the old site (Stephan, 11.11.: the underlines made the text restless);
   the underline appears under the pointer and on keyboard focus */
.cd-content a {
  text-decoration: none;
}
.cd-content a:hover,
.cd-content a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
:focus-visible {
  outline: 2px solid var(--cd-red-bright);
  outline-offset: 2px;
}
.cd-skip:focus {
  position: absolute;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: .5rem 1rem;
  background: #fff;
  color: #000;
}

/* ---------- frames: 960 (>= 980px) / 744 (768-979px) / full width (< 768px) ---------- */
.cd-frame {
  box-sizing: border-box;
  width: var(--cd-frame-w);
  margin: 10px auto 0;
  padding: var(--cd-pad);
}
@media (min-width: 768px) and (max-width: 979.98px) {
  :root {
    --cd-frame-w: 744px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --cd-frame-w: 100%;
  }
}
.cd-frame--dark {
  background: var(--cd-frame);
  color: #fff;
}
.cd-frame--light {
  background: var(--cd-paper);
}
.cd-header {
  margin-top: 2px;                   /* body margin 8 + 2 = the old 10px from the top */
}

/* ---------- header: the banner at its own size, search top right ---------- */
.cd-header {
  position: relative;
}
.cd-brand {
  display: block;
}
.cd-brand img {
  display: block;
  width: 100%;                       /* 940 at >= 980px: the image's own width */
  max-width: 940px;
  height: auto;
}
.cd-search {
  position: absolute;
  top: 14px;
  right: var(--cd-pad);
  width: 212px;
}
.cd-search input {
  background: rgba(0, 0, 0, .55);
  color: #eee;
  border: 1px solid #555;
  padding: .3rem .6rem;
  font-size: .9rem;
}
.cd-search input::placeholder {
  color: #9a9a9a;
}
.cd-search label,
.cd-search .visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
}
@media (max-width: 767.98px) {
  /* no room in the banner on phones: the box goes under it */
  .cd-search {
    position: static;
    width: auto;
    margin-top: var(--cd-pad);
  }
}

/* ---------- menu bar: 940 x 54, #323232, active item in the template red ---------- */
.cd-nav .navbar {
  padding: 0;
  margin: 0;
}
/* Cassiopeia lays the menu out in a row only inside its own .container-header - this page has its own frames */
.cd-nav .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 0 100%;
}
.cd-nav .mod-menu > li {
  position: relative;
}
.cd-nav .navbar-collapse.show {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .cd-nav .mod-menu {
    display: flex;
    flex-direction: row;
    flex: 1;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
  }
  /* deeper levels: an accordion INSIDE the dropdown (Stephan, 11.11.: preferred to the old fly-outs) - a click on
     an item's arrow opens its sub-list indented below it and pushes the rest down; a second click closes it */
  .cd-nav .metismenu.mod-menu .mm-collapse > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse > li > a {
    flex: 1 1 auto;
  }
  /* an item with a sub-list: the text stays the link, the WHOLE rest of the row is the arrow's button (Stephan,
     11.11. on prod: the 11 x 4 px triangle could hardly be hit - a click beside it did nothing or opened the page) */
  .cd-nav .metismenu.mod-menu .mm-collapse > li.parent > a {
    flex: 0 1 auto;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse > li.parent > .mm-toggler {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: flex-end;
    min-width: 36px;
    min-height: 30px;
    margin-right: -10px;             /* up to the row's edge (the li has 10px padding) */
    padding: 0 10px 0 12px;
    cursor: pointer;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse > li.parent > .mm-toggler:after {
    border-top-width: 6px;
    border-left-width: 6px;
    border-right-width: 6px;
  }
  /* Cassiopeia slides a sub-list open in .35s - felt like the menu was building slowly */
  .cd-nav .metismenu.mod-menu .mm-collapsing {
    transition-duration: .15s;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse > li.parent > ul {
    position: static;                /* Cassiopeia: relative + offsets; here simply in the flow */
    flex-basis: calc(100% + 20px);
    margin: 0 -10px;
    padding: 0 0 0 14px;
    min-width: 0;
    width: auto;
    max-width: none;
    background: #232323;             /* opaque: the row highlight above does not shine through */
    box-shadow: none;
  }
  .cd-nav .metismenu.mod-menu .mm-collapse > li.parent > ul > li {
    border-right: 0;
  }
  /* highlight only the row under the pointer, not the whole opened block above it */
  .cd-nav .metismenu.mod-menu .mm-collapse > li:hover:not(:has(li:hover)),
  .cd-nav .metismenu.mod-menu .mm-collapse > li:has(> :focus-visible) {
    background: #c4121a;             /* the red of the old dropdown, a shade darker for white text */
  }
  .cd-nav .metismenu.mod-menu .mm-collapse li a:hover,
  .cd-nav .metismenu.mod-menu .mm-collapse li a:focus-visible {
    text-decoration: none;
  }
  /* a mouse click on an arrow leaves no dotted focus box; the keyboard still gets a ring */
  .cd-nav .metismenu.mod-menu .mm-toggler:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}
@media (min-width: 768px) and (hover: hover) {
  /* the dropdown opens on hover (and keyboard focus) like the old menu; a click on the arrow still works for touch */
  /* A pointer that slips off the menu for a moment (a quick diagonal move from the bar to an arrow) must not shut the
     dropdown at once (Stephan, 11.11.: the menu "hung" on fast moves): it stays 0.3s - hidden, not removed, so the
     delay can work. Moving on to ANOTHER main item still closes it at once (no overlapping dropdowns). */
  .cd-nav .metismenu.mod-menu li.level-1.parent > .mm-collapse {
    display: block;
    height: auto !important;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear .3s, opacity .1s linear .2s;
  }
  .cd-nav .metismenu.mod-menu li.level-1.parent:hover > .mm-collapse,
  .cd-nav .metismenu.mod-menu li.level-1.parent:focus-within > .mm-collapse,
  .cd-nav .metismenu.mod-menu li.level-1.parent > .mm-collapse.mm-show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .cd-nav .metismenu.mod-menu:hover > li.level-1.parent:not(:hover) > .mm-collapse {
    visibility: hidden;
    opacity: 0;
    transition: none;
  }
}
.cd-nav .metismenu.mod-menu {
  background: var(--cd-bar) url("../images/nav_bg_default.png") repeat-x;
  min-height: 54px;
  margin: 0;
  padding: 0;
  font-family: var(--cd-ui-font);
  flex-wrap: wrap;
}
.cd-nav .metismenu.mod-menu > li.level-1 {
  padding: 0;
  font-size: 16px;
  line-height: 54px;
  color: #fff;
}
.cd-nav .metismenu.mod-menu > li.level-1 > a,
.cd-nav .metismenu.mod-menu > li.level-1 > span {
  display: block;
  padding: 0 4px 0 10px;
  color: #fff;
  text-decoration: none;
}
.cd-nav .metismenu.mod-menu > li.level-1:not(.parent) > a {
  padding-right: 10px;
}
.cd-nav .metismenu.mod-menu > li.level-1 > .mm-toggler {
  padding: 0 10px 0 0;
  color: #fff;
}
/* the old small red caret instead of Cassiopeia's big white triangle */
.cd-nav .metismenu.mod-menu .mm-toggler:after {
  border-top: 4px solid var(--cd-red-bright);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-inline-start: 3px;
}
.cd-nav .metismenu.mod-menu > li.level-1.active {
  background: var(--cd-red-bright);
}
.cd-nav .metismenu.mod-menu > li.level-1.active .mm-toggler:after {
  border-top-color: #fff;
}
.cd-nav .metismenu.mod-menu > li.level-1:not(.active):hover,
.cd-nav .metismenu.mod-menu > li.level-1:not(.active):focus-within {
  background: var(--cd-bar-hover);
}
.cd-nav .metismenu > li > a:after,
.cd-nav .metismenu > li > button:before {
  display: none;
}
.cd-nav .metismenu.mod-menu .mm-collapse {
  background: var(--cd-bar-hover);
  min-width: 14rem;
  width: max-content;
  max-width: 24rem;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.cd-nav .metismenu.mod-menu .mm-collapse > li {
  padding: 0 10px;
  font-size: 16px;
  line-height: 30px;
  border-top: 1px solid var(--cd-sub-line);
  border-right: 1px solid var(--cd-sub-line);
}
.cd-nav .metismenu.mod-menu .mm-collapse a,
.cd-nav .metismenu.mod-menu .mm-collapse button {
  color: #fff;
  text-decoration: none;
}
.cd-nav .metismenu.mod-menu .mm-collapse a:hover,
.cd-nav .metismenu.mod-menu .mm-collapse a:focus-visible {
  text-decoration: underline;
}
.cd-nav .metismenu.mod-menu .mm-collapse > li.active > a {
  color: #ff8a8e;
}
.cd-nav .navbar-toggler {
  color: #fff;
  border: 1px solid #666;
  padding: .35rem .6rem;
  margin: 6px;
}
/* the bar shows from 768px, as on the old site (Bootstrap would collapse it below 992px); below 768px the
   off-canvas accordion (offcanvas.css / offcanvas.php) replaces it */
@media (min-width: 768px) {
  .cd-nav .navbar-toggler {
    display: none;
  }
  .cd-nav .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}

/* ---------- video banner (home page): 940 x 226 in a black frame ---------- */
.cd-banner .video-container-slideshow {
  margin: 0;
}

/* ---------- main frame: white, sidebar 220 + 20 + content 700 (744px: 169 + 16 + 539) ---------- */
.cd-main {
  margin-bottom: 0;
}
.cd-main__grid {
  display: grid;
  grid-template-columns: 220px 700px;
  grid-template-areas: "side content";
  column-gap: 20px;
  align-items: start;
}
body:not(.has-sidebar-left):not(.has-sidebar-right) .cd-main__grid {
  grid-template-columns: 940px;
  grid-template-areas: "content";
}
.cd-content {
  grid-area: content;
  min-width: 0;
  box-sizing: border-box;
  background: var(--cd-paper) url("../images/container.png");
  border: 1px solid var(--cd-line);
  padding: 10px;                     /* as the old site: 678px inside - the width the article pictures were made for */
  margin-bottom: 10px;
}
.cd-sidebar {
  grid-area: side;
  min-width: 0;
}
@media (min-width: 768px) and (max-width: 979.98px) {
  .cd-main__grid {
    grid-template-columns: 169px 539px;
    column-gap: 16px;
  }
  body:not(.has-sidebar-left):not(.has-sidebar-right) .cd-main__grid {
    grid-template-columns: 724px;
  }
}
@media (max-width: 767.98px) {
  .cd-main__grid,
  body:not(.has-sidebar-left):not(.has-sidebar-right) .cd-main__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "side";
  }
  .cd-content {
    padding: 10px;
  }
}

/* ---------- the reading area ---------- */

/* page titles: the countdown title font */
.cd-content .page-header h1,
.cd-content .page-header h2,
.cd-content .item-title,
.cd-content > main > h1,
.com-content-category-blog > h1,
.com-content-featured > h1 {
  font-family: var(--cd-title-font);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.3;
  color: #1a1a1a;
  margin: .25rem 0 1rem;
}
.blog-item .page-header h2,
.blog-items:not(.items-leading) .item-title {
  font-size: 1.5rem;
}
@media (max-width: 575.98px) {
  /* Orbitron runs wide: on phones the title would break into three lines */
  .cd-content .page-header h1,
  .cd-content .page-header h2,
  .cd-content .item-title,
  .cd-content > main > h1 {
    font-size: 1.35rem;
  }
}
.cd-content .page-header h2 a,
.cd-content .item-title a {
  color: inherit;
  text-decoration: none;
}
.cd-content .page-header h2 a:hover,
.cd-content .item-title a:hover {
  color: var(--cd-red);
}

/* prose: Literata 19px / 1.65 (wcf reading standard) */
.com-content-article__body,
.cd-content .item-content,          /* blog lists and the home page (J6: .blog-featured .item-content) */
.category-desc {
  font-family: var(--cd-read-font);
  font-size: 19px;
  line-height: 1.65;
  color: var(--cd-ink);
}
.com-content-article__body p,
.item-content p,
.category-desc p {
  margin: 0 0 1em;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Lists: the old site's spacing in proportion (measured: list item line 20px, a paragraph inside an item 9px below
   it, no extra space between items) - i.e. half a line after a paragraph in a list, not the full 1em of prose */
.com-content-article__body li,
.item-content li {
  margin-bottom: 0;
}
.com-content-article__body li > p,
.item-content li > p {
  margin-bottom: .45em;
}
.com-content-article__body ul,
.com-content-article__body ol,
.item-content ul,
.item-content ol {
  margin-bottom: .75em;
}
/* A paragraph that only holds one span with its own (smaller) font size - the download lines on /downloads: its
   line box followed the 19px / 1.65 prose and stood 50px apart. Sized by the span alone, half a line below. */
.cd-content p:has(> span[style*="font-size"]:only-child) {
  line-height: 0;
  margin-bottom: .45em;
}
.cd-content p:has(> span[style*="font-size"]:only-child) > span {
  line-height: 1.5;
  font-family: var(--cd-ui-font);    /* as on the old site: these small lines (downloads) are set in Open Sans */
}
@media (max-width: 600px) {
  /* narrow lines: ragged right, as on whitecloudfarm.org; also beats inline justify */
  .com-content-article__body p,
  .item-content p,
  .category-desc p,
  .com-content-article__body [style*="text-align: justify"],
  .com-content-article__body [style*="text-align:justify"] {
    text-align: left !important;
  }
}

/* sub-headings inside articles stay in the UI font, clearly above the 19px body */
.com-content-article__body h2,
.item-content h2 {
  font-family: var(--cd-ui-font);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 1.6em 0 .6em;
}
.com-content-article__body h3,
.item-content h3 {
  font-family: var(--cd-ui-font);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 1.5em 0 .5em;
}
.com-content-article__body h4,
.item-content h4 {
  font-family: var(--cd-ui-font);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 1.3em 0 .4em;
}

/* quotations (.auto-style1: 3000+ Bible quotes) - indented as before, no longer at 13px */
.com-content-article__body .auto-style1,
.item-content .auto-style1 {
  font-size: 17px;
  line-height: 1.55;
  margin-left: 2.2em;
}
.com-content-article__body blockquote,
.item-content blockquote {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 1em 2.2em;
  padding: 0;
  border: 0;
}
/* legacy-content.css still says "blockquote p { line-height: 18px }" - right for the old 13px quote text, but at 17px
   it squeezed every quoted paragraph to 18px lines (body text: 31px). Same spacing as the .auto-style1 quotes. */
.com-content-article__body blockquote p,
.item-content blockquote p {
  line-height: 1.55;
}
@media (max-width: 600px) {
  .com-content-article__body .auto-style1,
  .item-content .auto-style1,
  .com-content-article__body blockquote,
  .com-content-article__body .ident1 {
    margin-left: 1em;
  }
}

/* drop cap: same idea as the old template, sized for the 19px body */
.com-content-article__body .text-drop-cap::first-letter,
.item-content .text-drop-cap::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: .82;
  margin: .08em .08em 0 0;
  font-weight: 700;
  color: var(--cd-ink);
}

/* a floated picture that would leave too little room for the text beside it (set by user.js, section 5):
   centred on its own line, the text continues below - as if it stood in a paragraph of its own */
.cd-content img.cd-unfloat {
  float: none !important;
  display: block;
  margin: .5em auto 1em !important;
}

/* images and tables inside the text */
.com-content-article__body img,
.item-content img {
  max-width: 100%;
  height: auto;
}
/* Tables keep the old site's small table type (Open Sans 11px / 18px, measured 2026-11-11): they were laid out
   for the 678px column at that size - the 19px reading type made 52 of 202 tables stick out of the frame. The
   reading rules above (19px, the 17px quotes) must not reach into a table either. */
.com-content-article__body table,
.cd-content .item-content table,
.cd-content .category-desc table {
  font-family: var(--cd-ui-font);
  font-size: 11px;
  line-height: 18px;
  hyphens: auto;                     /* as the old template's global body rule, incl. its limits: */
  -webkit-hyphens: auto;
  hyphenate-limit-chars: auto 5;     /* at least 5 letters before and after a break ("Nebukad-nezar", never
                                        "Nebu-kad-nezar") - this decides how wide the narrow columns are */
  -webkit-hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 4;
  overflow-wrap: break-word;
}
/* Bootstrap 5 keeps header cells on one line; Bootstrap 2 (the old site) let them wrap */
.com-content-article__body table th,
.cd-content .item-content table th {
  white-space: normal;
}
/* The articles' .table / .table-striped / .table-bordered were written for Bootstrap 2: bold header cells at the
   bottom, cells aligned to the top, grey stripes #e2e2e2 / #f0f0f0, lines #ddd (measured on the old site). Bootstrap
   5 centres cells vertically, uses medium weight headers, white stripes and blue-grey lines. */
.cd-content .table {
  --table-bg: transparent;           /* Cassiopeia's Bootstrap 5 build: variables without the "bs-" prefix */
  --table-striped-bg: #e2e2e2;
  --table-border-color: #ddd;
  border-color: #ddd;
}
.cd-content .table > :not(caption) > * > * {
  vertical-align: top;
  border-color: #ddd;
}
.cd-content .table th,
.cd-content .table > thead > tr > * {
  font-weight: 700;
  vertical-align: bottom;
}
.cd-content .table-striped > tbody > tr:nth-of-type(even) > * {
  --table-bg-type: #f0f0f0;
}
.com-content-article__body table p,
.com-content-article__body table li,
.cd-content .item-content table p,
.cd-content .item-content table li {
  font-size: inherit;
  line-height: inherit;
}
.com-content-article__body table .auto-style1,
.cd-content .item-content table .auto-style1 {
  font-size: 13px;                   /* legacy-content.css value, which the reading rule above would override */
  line-height: 18px;
}
.com-content-article__body .img_caption,
.com-content-article__body figcaption {
  font-family: var(--cd-ui-font);
  font-size: 14px;
  color: var(--cd-ink-soft);
}

/* article meta (author, dates) and the prev/next pager are UI, not prose */
.article-info,
.article-info dd,
.article-info dt,
.pagenavigation,
.pagination {
  font-family: var(--cd-ui-font);
  font-size: 14px;
  color: var(--cd-ink-soft);
}
.readmore .btn,
.btn-secondary {
  background: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
  color: #fff;
}
.readmore .btn:hover,
.btn-secondary:hover {
  background: var(--cd-red-bright);
  border-color: var(--cd-red-bright);
}

/* ---------- article navigation buttons (div.button-navigation > a.prev / a.next, 15 articles: "Zurück", "Home",
   "Weiter", "Über uns", ...) - in the look of the wcf pager instead of the old purple boxes: light grey, 4px corners,
   dark grey text, a chevron from Font Awesome (Stephan, 11.11.) ---------- */
.cd-content div.button-navigation {
  display: flow-root;
  margin: 1.5rem 0 .5rem;
}
.cd-content a.prev,
.cd-content a.next {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  padding: 5px 14px;
  border: 0;
  border-radius: 4px;
  background: #eee;
  color: #444;
  font-family: var(--cd-ui-font);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}
.cd-content a.prev:hover,
.cd-content a.prev:focus-visible,
.cd-content a.next:hover,
.cd-content a.next:focus-visible {
  background: #ddd;
  color: #111;
  text-decoration: none;
  box-shadow: none;
}
.cd-content a.prev::before,
.cd-content a.next::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8em;
  line-height: 1;
}
.cd-content a.prev::before {
  content: "\f053";                  /* chevron-left (was "❮ ") */
}
.cd-content a.next::after {
  content: "\f054";                  /* chevron-right (was " ❯") */
}

/* ---------- print button (user.js 6) at the top right of an article, where the old cog menu sat - the same light grey
   as the navigation buttons, a size smaller ---------- */
.cd-content .page-header.cd-has-print {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cd-content button.cd-print {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: .55rem 0 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 4px;
  background: #eee;
  color: #444;
  font-family: var(--cd-ui-font);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cd-content button.cd-print:hover,
.cd-content button.cd-print:focus-visible {
  background: #ddd;
  color: #111;
}
@media (max-width: 575.98px) {
  .cd-content button.cd-print {
    margin-top: 0;
    min-width: 40px;                     /* icon alone: still a finger-sized target */
    min-height: 34px;
    justify-content: center;
    font-size: 16px;
  }
  .cd-content .cd-print__label {          /* phones: the icon alone, the title says what it does */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- sidebar modules: the old boxes (1px #b4b4b4, light texture, 14px Open Sans, 16px bold titles) ---------- */
.cd-sidebar .card {
  background: var(--cd-paper) url("../images/module_bg_default.png");
  border: 1px solid var(--cd-line);
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  margin: 0 0 10px;
  padding: 10px;
}
.cd-sidebar .card-header {
  background: none;
  border: 0;
  padding: 0 0 5px;
  margin: 0 0 5px;
  font-family: var(--cd-ui-font);
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.cd-sidebar .card-body {
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
}
.cd-sidebar .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cd-sidebar .mod-menu li {
  border-bottom: 1px solid #e3e3e3;
  padding: .25rem 0;
}
.cd-sidebar .mod-menu a {
  color: var(--cd-red-bright);
  font-weight: 700;
  text-decoration: none;
}
.cd-sidebar .mod-menu a:hover,
.cd-sidebar .mod-menu a:focus {
  text-decoration: underline;
}

/* ---------- footer: black frame with the star clock, three columns of 300 ---------- */
.cd-footer {
  background: #000 url("../images/starclock-footer.jpg") 50% 50% / cover no-repeat;
  color: #999;
  font-family: var(--cd-ui-font);
  font-size: 13px;
  line-height: 18px;
  padding-top: 0;
  margin-bottom: 10px;
}
.cd-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
}
@media (max-width: 767.98px) {
  .cd-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cd-footer__grid > *,
.cd-footer__bottom > * {
  padding: 10px;
  margin-bottom: 10px;
  transition: background-color .2s ease;
}
/* a dark panel under the pointer, so the text reads over the star clock (old 11_footer.php, 2026-06) */
.cd-footer__grid > *:hover,
.cd-footer__bottom > *:hover {
  background: rgba(25, 30, 42, .95);
}
.cd-footer h3 {
  font-family: var(--cd-ui-font);
  font-size: 16px;
  font-weight: 700;
  color: #999;
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
  margin: 0 0 5px;
}
.cd-footer ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}
.cd-footer li {
  padding: 0;                        /* Joomla's mod_articles gives each item 3.25px top and bottom; old pitch: 18px */
  margin: 0;
}
.cd-footer a {
  color: #999;
  text-decoration: none;
}
.cd-footer a:hover,
.cd-footer a:focus {
  color: #fff;
  text-decoration: underline;
}
.cd-footer .footer-logo {
  color: #cfe26b;
}

/* ---------- AMPZ share sidebar: the open/close toggle on the left (old c_css.php fix of 2026-06-20) ----------
   Its icon inherits the near-black body text colour (#0d0d0d) and vanished on the black page background. */
.ampz_show_sidebar .ampz-icoon,
.ampz_hide_sidebar .ampz-icoon {
  color: #ffffff !important;
}
.ampz_show_sidebar,
#ampz_sidebar .ampz_hide_sidebar {
  background: rgba(0, 0, 0, .45) !important;
}

/* ---------- back to top: the same round dark button as wcf / web3 ---------- */
#back-top.back-to-top-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(26, 33, 43, .9);
  border: 1px solid #33414f;
  color: #e6ebf0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#back-top.back-to-top-link {
  text-decoration: none;             /* it is a link: no underline under the arrow */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#back-top.back-to-top-link:hover,
#back-top.back-to-top-link:focus {
  background: #222c38;               /* wcf dark mode hover */
  color: #e6ebf0;
}
/* the arrow: Font Awesome 7 Pro Light fa-arrow-up at 18px - the glyph of wcf (#wcf-to-top) and web3 - instead of
   Cassiopeia's icon-arrow-up (FA6 solid) */
#back-top .icon-arrow-up {
  display: none;
}
#back-top.back-to-top-link::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f062";
  font-size: 18px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- world-news slider (mod_articles, layout "slider") ---------- */
.cd-slider {
  font-family: var(--cd-ui-font);
}
.cd-slider__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: .6rem;
}
.cd-slider__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #9a9a9a;
  cursor: pointer;
}
.cd-slider__dot[aria-current="true"] {
  background: #5a9e2d;            /* the old slider's green bullet */
}
.cd-slider__title {
  font-size: 1rem;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.cd-slider__title a {
  color: var(--cd-red-bright);
  text-decoration: none;
}
.cd-slider__title a:hover,
.cd-slider__title a:focus {
  text-decoration: underline;
}
.cd-slider__image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #ccc;
  padding: 2px;
}
.cd-slider__meta {
  font-size: 13px;
  color: var(--cd-ink-soft);
  margin: .5rem 0 0;
}
.cd-slider__nav {
  display: none;
}
.cd-slider.is-ready .cd-slider__nav {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
}
.cd-slider__nav button {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: .1rem .6rem;
  color: #333;
  cursor: pointer;
}
.cd-slider:not(.is-ready) .cd-slider__slide + .cd-slider__slide {
  border-top: 1px solid #e3e3e3;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* ---------- news tabs below the article (#outer_tabs; replaces RegularLabs Tabs) ---------- */
/* one row on a desktop (Stephan, 11.11.): at 14px the five tabs fill the 644px column (before: 685px, "Weltnachrichten"
   in a second row); on narrower screens they wrap, as on the old site */
.cd-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 3px solid var(--cd-tab, #777);
  margin: 0 0 1rem;
}
.cd-tabs:not(.is-ready) .cd-tabs__list {
  display: none;
}
.cd-tabs__tab {
  --cd-tab: #777;
  flex: 1 0 auto;
  white-space: nowrap;
  text-align: center;
  font-family: var(--cd-ui-font);
  font-size: .875rem;
  font-weight: 600;
  padding: .4rem .6rem;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: #ececec;
  color: #222;
  cursor: pointer;
  border-top: 3px solid var(--cd-tab);
}
.cd-tabs__tab[aria-selected="true"] {
  background: var(--cd-tab);
  color: #fff;
}
.cd-tabs__tab--green  { --cd-tab: #3f8f2a; }
.cd-tabs__tab--grey   { --cd-tab: #6b6b6b; }
.cd-tabs__tab--orange { --cd-tab: #c96a00; }
.cd-tabs__tab--blue   { --cd-tab: #2a5fa8; }
.cd-tabs__tab--red    { --cd-tab: #c4121a; }
.cd-tabs__panel {
  font-family: var(--cd-read-font);
  font-size: 17px;
  line-height: 1.6;
}
.cd-tabs__panel h3.cd-tabs__heading {
  display: none;
}
.cd-tabs:not(.is-ready) .cd-tabs__panel h3.cd-tabs__heading {
  display: block;
  font-family: var(--cd-ui-font);
  font-size: 1.1rem;
}
.cd-tabs__panel img {
  max-width: 100%;
  height: auto;
}
.cd-content .card {
  margin-top: 2rem;
}

@media print {
  body.cd-site {
    background: #fff;
    margin: 0;
  }
  .cd-header,
  .cd-nav,
  .cd-banner,
  .cd-sidebar,
  .cd-footer,
  #back-top,
  .cd-print,
  .button-navigation,
  #lc-offcanvas,
  #ampz_sidebar,
  .ampz_show_sidebar,
  .ampz_container,
  .djacc,
  .cd-content > :not(main) {               /* breadcrumbs, main-top / main-bottom modules (news tabs) */
    display: none !important;              /* AMPZ / DJ-Accessibility set their own display inline */
  }
  .cd-content a {
    color: inherit;
  }
  .cd-frame,
  .cd-content {
    width: auto;
    border: 0;
    padding: 0;
    background: #fff;
  }
  .cd-main__grid {
    display: block;
  }
}