/*
 * Runa's Blog — Gestaltung
 * ========================
 *
 * Kind-Template von Cassiopeia. Wird von Joomla als LETZTE Stildatei geladen
 * und überschreibt damit die Vorgaben des Elterntemplates.
 *
 * Fassung 2: gegen das tatsächlich ausgelieferte Markup von csruna.de
 * geschrieben, nicht gegen angenommene Klassennamen.
 *
 * Hinweis zu :root:root — Cassiopeias index.php setzt einige Variablen über
 * ein <style>-Element im Kopf, das nach dieser Datei kommt. Der doppelte
 * Selektor erhöht die Spezifität und gewinnt unabhängig von der Reihenfolge.
 */

/* ================================================ 1. Farb- und Maßtokens */

:root:root {
  --farbe-grund: #ffffff;
  --farbe-band: #f5f6f8;
  --farbe-linie: #e3e6ec;
  --farbe-linie-zart: #eef0f4;

  --farbe-text: #1b1e2b;
  --farbe-text-leise: #5d6474;
  --farbe-text-sehr-leise: #858c9c;

  --farbe-akzent: #232845;
  --farbe-akzent-hell: #3a4270;
  --farbe-akzent-kontrast: #ffffff;
  --farbe-akzent-schleier: rgba(35, 40, 69, 0.08);

  --breite-text: 43rem;

  /*
   * Innenbreite der Kopfleiste. Entspricht Cassiopeias Inhaltsbereich
   * (4 Rasterspalten à 19.875rem plus 3 Zwischenräume), damit Blogname
   * und Menü genau über dem Text darunter stehen.
   */
  --breite-kopf: 1344px;

  --radius: 5px;
  --radius-pille: 800px;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:root {
    --farbe-grund: #13151d;
    --farbe-band: #191c26;
    --farbe-linie: #2b3040;
    --farbe-linie-zart: #232735;

    --farbe-text: #e7e9f0;
    --farbe-text-leise: #a2a9ba;
    --farbe-text-sehr-leise: #7b8294;

    --farbe-akzent: #97a6dd;
    --farbe-akzent-hell: #b3bee9;
    --farbe-akzent-kontrast: #13151d;
    --farbe-akzent-schleier: rgba(151, 166, 221, 0.14);
  }
}

/* ========================================== 2. Anschluss an Cassiopeia */

:root:root {
  --cassiopeia-color-primary: var(--farbe-akzent);
  --cassiopeia-color-link: var(--farbe-akzent);
  --cassiopeia-color-hover: var(--farbe-akzent-hell);
  --link-color: var(--farbe-akzent);
  --link-hover-color: var(--farbe-akzent-hell);

  --template-bg-light: var(--farbe-band);
  --template-text-dark: var(--farbe-text);
  --template-text-light: var(--farbe-akzent-kontrast);
  --template-link-color: var(--farbe-akzent);
  --template-special-color: var(--farbe-akzent);

  --cassiopeia-font-family-body: var(--schrift);
  --cassiopeia-font-family-headings: var(--schrift);
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 650;

  --bs-body-bg: var(--farbe-grund);
  --bs-body-color: var(--farbe-text);
  --bs-border-color: var(--farbe-linie);
  --bs-link-color: var(--farbe-akzent);
  --bs-link-hover-color: var(--farbe-akzent-hell);
  --bs-emphasis-color: var(--farbe-text);
  --bs-secondary-color: var(--farbe-text-leise);
}

/* ============================================================ 3. Grundlagen */

body.site {
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--farbe-text);
  text-wrap: balance;
}

a { color: var(--farbe-akzent); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--farbe-akzent-hell); }

:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

hr { border-color: var(--farbe-linie); opacity: 1; }

/* ============================================ 4. Kopfbereich und Navigation */

/*
 * Kopfleiste als EINE Zeile: Blogname links, Menü rechts.
 *
 * Cassiopeia stapelt hier zwei .grid-child-Blöcke untereinander, weshalb das
 * Menü als eigene Zeile darunter erschien. Ab Tablet-Breite werden die beiden
 * zu einer Flexzeile zusammengezogen.
 *
 * Die Innenbreite wird über padding begrenzt statt über max-width – sonst
 * würde der dunkle Balken mitschrumpfen und nicht mehr über die volle
 * Fensterbreite laufen.
 *
 * Die Kurzform "background" setzt zugleich Cassiopeias Farbverlauf zurück.
 */
.container-header {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
  border-bottom: none;
  box-shadow: none;
  padding-block: 0.7rem;
  padding-inline: max(1rem, calc((100% - var(--breite-kopf)) / 2));
}

@media (prefers-color-scheme: dark) {
  .container-header {
    background: var(--farbe-band);
    color: var(--farbe-text);
    border-bottom: 1px solid var(--farbe-linie);
  }
}

@media (min-width: 48rem) {
  .container-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    row-gap: 0.35rem;
  }

  /*
   * Cassiopeia gibt .grid-child eigene Innenabstände und eine eigene
   * Breite mit. Beides stört in einer Flexzeile und wird zurückgesetzt.
   */
  .container-header > .grid-child {
    margin-inline: 0;
    padding: 0;
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  /* Schiebt das Menü an den rechten Rand */
  .container-header > .container-nav {
    margin-left: auto;
    padding-top: 0;
  }
}

/* Schmale Displays: weiterhin gestapelt, aber ohne doppelte Abstände */
@media (max-width: 47.99rem) {
  .container-header > .grid-child {
    padding-inline: 0;
    padding-block: 0.15rem;
  }
}

/*
 * Cassiopeia legt Logo und Untertitel als Geschwister in .navbar-brand:
 *   <div class="navbar-brand">
 *     <a class="brand-logo">…</a>
 *     <div class="site-description">…</div>
 *   </div>
 *
 * Deshalb muss .navbar-brand eine SPALTE sein, sonst steht der Untertitel
 * neben dem Blognamen statt darunter. Der Blogname selbst (.brand-logo)
 * bleibt eine Zeile, damit Logo und Text nebeneinander stehen können.
 */
.container-header .navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  color: inherit;
  text-decoration: none;
}

.container-header .brand-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

/* Falls der Blogname als Text statt als Bild gesetzt ist */
.container-header .brand-logo span {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
}

/*
 * Cassiopeias mitgeliefertes Logo ist eine dunkle Grafik und verschwindet
 * auf dunklem Grund. Bis ein eigenes Logo gesetzt ist, wird es aufgehellt.
 * Sobald du im Templatestil einen Seitentitel als Text einträgst, greift
 * diese Regel nicht mehr, weil dann kein <img> mehr ausgegeben wird.
 */
.container-header img.logo {
  max-height: 2.4rem;
  width: auto;
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  .container-header img.logo { filter: none; }
}

/* Steht durch die Spaltenrichtung oben bereits eine Zeile tiefer –
   width: 100% ist dafür nicht mehr nötig und war ohnehin wirkungslos. */
.container-header .site-description {
  margin-top: 0.05rem;
  font-size: 0.87rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  opacity: 0.8;
}

/*
 * Hauptmenü (Modul auf Position "menu").
 *
 * Markup laut modules/mod_menu/tmpl/default.php:
 *   <ul class="mod-menu mod-list nav">
 *     <li class="nav-item item-101 default current active"><a>…</a></li>
 *   </ul>
 *
 * Die Anordnung neben dem Blognamen regelt der Flexblock weiter oben.
 * Hier geht es nur um das Aussehen der Einträge selbst.
 */
.container-nav {
  padding-top: 0;
}

.container-header .mod-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container-header .mod-menu .nav-item { list-style: none; }

.container-header .mod-menu a {
  display: block;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  color: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  opacity: 1;
}

/* "current" markiert die aufgerufene Seite, "active" den Pfad dorthin */
.container-header .mod-menu .current > a,
.container-header .mod-menu .active > a {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* Aufklapp-Knopf für Untermenüs */
.container-header .mod-menu__toggle-sub {
  padding: 0.35rem 0.4rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
}

/* Untermenü */
.container-header .mod-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-color-scheme: dark) {
  .container-header .mod-menu a:hover,
  .container-header .mod-menu a:focus,
  .container-header .mod-menu .current > a,
  .container-header .mod-menu .active > a {
    background: var(--farbe-akzent-schleier);
    color: var(--farbe-akzent);
  }
}

/* Auf schmalen Displays darf das Menü umbrechen statt zu quetschen */
@media (max-width: 34rem) {
  .container-header .mod-menu { gap: 0.1rem; }
  .container-header .mod-menu a {
    padding-inline: 0.5rem;
    font-size: 0.88rem;
  }
}

/* ========================================================= 5. Seitenraster */

.site-grid { background: var(--farbe-grund); }

.container-component { padding-block: 2rem 3.5rem; }

/* --------------------------------------------------------- Brotkrumen */

.mod-breadcrumbs__wrapper { margin-bottom: 1.75rem; }

ol.mod-breadcrumbs.breadcrumb {
  background: transparent;
  padding: 0 !important;
  margin: 0;
  font-size: 0.8rem;
  color: var(--farbe-text-sehr-leise);
}

.mod-breadcrumbs__here { color: var(--farbe-text-sehr-leise); }

ol.mod-breadcrumbs a {
  color: var(--farbe-text-leise);
  text-decoration: none;
}

ol.mod-breadcrumbs a:hover {
  color: var(--farbe-akzent);
  text-decoration: underline;
}

/* ================================= 6. Seitenüberschrift der Blogansicht */

.blog-featured > .page-header,
.blog > .page-header,
.com-content-category-blog > .page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.15rem;
  border-bottom: 2px solid var(--farbe-akzent);
}

.blog-featured > .page-header h1,
.blog > .page-header h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 700;
  margin: 0;
}

/*
 * Kategoriebeschreibung, falls in der Kategorie hinterlegt. Steht zwischen
 * Überschrift und Artikelliste und erklärt, worum es in der Rubrik geht.
 */
.com-content-category-blog__children,
.category-desc {
  max-width: var(--breite-text);
  margin: 0 0 2rem;
  color: var(--farbe-text-leise);
  font-size: 1.02rem;
  line-height: 1.65;
}

.category-desc p:last-child { margin-bottom: 0; }

/* ===================================== 7. Artikelliste (echtes Markup) */

/* Cassiopeias Mehrspaltigkeit aufheben – wir wollen eine dichte Liste */
.blog-items,
.blog-items.masonry-2,
.blog-items.masonry-3,
.blog-items.masonry-4,
.blog-items.columns-2,
.blog-items.columns-3 {
  display: block !important;
  columns: auto !important;
  margin: 0;
}

.blog-items .blog-item {
  padding-block: 1.85rem;
  border-bottom: 1px solid var(--farbe-linie);
  break-inside: auto;
}

.blog-items .blog-item:first-child { padding-top: 0.5rem; }
.blog-items .blog-item:last-child { border-bottom: none; }

/*
 * Überschrift eines Listeneintrags – Joomla liefert ZWEI Varianten:
 *
 *   Startseite (Hervorgehobene):  <h2 class="item-title">
 *   Kategorieseite (Kategorieblog): <div class="page-header"><h2>
 *
 * Beide müssen abgedeckt sein, sonst ist die Überschrift in genau einer
 * der beiden Ansichten ungestaltet.
 */
.blog-item h2.item-title,
.blog-item .item-title,
.blog-item .item-content > .page-header h2 {
  margin: 0 0 0.55rem;
  font-size: 1.4rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* Der .page-header IM Eintrag ist keine Seitenüberschrift – Bootstraps
   Abstände und Linien dort zurücknehmen. */
.blog-item .item-content > .page-header {
  margin: 0;
  padding: 0;
  border: none;
}

.blog-item .item-title a,
.blog-item .item-content > .page-header h2 a {
  color: var(--farbe-text);
  text-decoration: none;
}

.blog-item .item-title a:hover,
.blog-item .item-content > .page-header h2 a:hover {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Der erste Beitrag der Startseite darf größer sein */
.items-leading .blog-item:first-child .item-title {
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2rem);
}

.blog-item .item-content > p,
.blog-item .item-content > div > p {
  max-width: var(--breite-text);
  color: var(--farbe-text-leise);
  line-height: 1.68;
}

/*
 * Kein Abschneiden per CSS mehr.
 *
 * Wie lang der Anriss ist, entscheidet die Weiterlesen-Trennung im Artikel
 * selbst (im Editor: Cursor setzen, Knopf "Weiterlesen"). Das ist die
 * richtige Stelle dafür – CSS würde nur Text verstecken, ohne dass es einen
 * Weg zum Weiterlesen gäbe.
 */

.blog-item .readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.blog-item .readmore .btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--farbe-akzent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-item .readmore .btn:hover { text-decoration: underline; }

/* =========================== 8. Metazeile (dl.article-info, echtes Markup) */

/*
 * Die Beschriftungen ("Kategorie:", "Veröffentlicht:") entfernen die
 * Layout-Überschreibungen in html/layouts/. Hier geht es nur noch darum,
 * die verbliebenen Angaben in eine ruhige Zeile zu bringen.
 */
dl.article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/*
 * Bootstrap setzt über .text-muted eine eigene Farbe mit !important und
 * senkt sie zusätzlich auf 75 % Deckkraft. Auf kleiner Schrift wird das
 * unleserlich. Hier wird das zurückgeholt – ebenfalls mit !important,
 * weil man gegen !important sonst nicht ankommt.
 */
dl.article-info,
dl.article-info.text-muted,
dl.article-info.text-muted dd,
dl.article-info.text-muted a,
dl.article-info.text-muted time {
  color: var(--farbe-text-leise) !important;
}

/* Das Datum ist eine Information, kein Kleingedrucktes */
dl.article-info dd.published time,
dl.article-info dd.create time {
  color: var(--farbe-text) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Kategorie-Pille behält ihre eigene Farbgebung */
dl.article-info.text-muted dd.category-name a {
  color: var(--farbe-akzent-kontrast) !important;
}

/* Trennpunkt zwischen den Angaben statt bloßem Abstand */
dl.article-info dd + dd::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--farbe-text-sehr-leise);
}

/* Vor der Kategorie-Pille stört der Trennpunkt */
dl.article-info dd.category-name + dd::before,
dl.article-info dd + dd.category-name::before {
  content: none;
  margin-right: 0;
}

dl.article-info dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* „Details" ist eine reine Beschriftung ohne Informationswert */
dl.article-info dt.article-info-term {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Aufrufzähler gehört nicht in einen Blog dieser Art */
dl.article-info dd.hits { display: none; }

dl.article-info .icon-user,
dl.article-info .icon-folder-open,
dl.article-info .icon-calendar,
dl.article-info .icon-eye {
  color: var(--farbe-text-sehr-leise);
  font-size: 0.85em;
}

/* Kategorie als Pille hervorheben */
dl.article-info dd.category-name a {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
}

dl.article-info dd.category-name a:hover {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-kontrast);
}

/* ===================================================== 9. Einzelartikel */

.item-page > .page-header,
.com-content-article > .page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 2px solid var(--farbe-akzent);
}

.item-page .page-header h1,
.item-page .page-header h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.item-page,
.com-content-article {
  font-size: 1.075rem;
  line-height: 1.72;
}

.item-page > p,
.item-page > div > p,
.com-content-article__body p {
  max-width: var(--breite-text);
}

.item-page h2,
.com-content-article__body h2 {
  margin-top: 2.2em;
  margin-bottom: 0.65em;
  font-size: 1.42em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--farbe-linie);
}

.item-page h3,
.com-content-article__body h3 {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font-size: 1.16em;
}

.item-page blockquote,
.com-content-article__body blockquote {
  max-width: var(--breite-text);
  margin-inline: 0;
  padding: 0.15em 0 0.15em 1.25em;
  border-left: 3px solid var(--farbe-akzent);
  color: var(--farbe-text-leise);
  font-style: normal;
}

.item-page blockquote cite,
.com-content-article__body blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.87em;
  font-style: normal;
  color: var(--farbe-text-sehr-leise);
}

.item-page ul,
.item-page ol,
.com-content-article__body ul,
.com-content-article__body ol {
  max-width: var(--breite-text);
}

.item-page li + li { margin-top: 0.35em; }
.item-page li::marker { color: var(--farbe-text-sehr-leise); }

.item-page table,
.com-content-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}

.item-page th, .item-page td,
.com-content-article__body th,
.com-content-article__body td {
  padding: 0.55em 0.75em;
  border: 1px solid var(--farbe-linie);
  text-align: left;
  vertical-align: top;
}

.item-page th,
.com-content-article__body th { background: var(--farbe-band); }

.item-page img,
.com-content-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ============================================ 10. Schlagworte als Pillen */

.com-content-article__tags,
ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

ul.tags > li > a,
.tags .tag-name,
a.badge {
  display: inline-block;
  padding: 0.2rem 0.62rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent-schleier);
  color: var(--farbe-akzent);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

ul.tags > li > a:hover,
.tags .tag-name:hover,
a.badge:hover {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
}

/* ============================== 11. Module, Blättern, Schaltflächen */

.card {
  background: var(--farbe-band);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}

.card + .card { margin-top: 1.25rem; }

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--farbe-linie);
  padding: 0.8rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.card .card-body { padding: 0.9rem 1.1rem; }

.card ul { list-style: none; margin: 0; padding: 0; }
.card li + li { border-top: 1px solid var(--farbe-linie); }

.card li > a {
  display: block;
  padding-block: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--farbe-text);
  text-decoration: none;
}

.card li > a:hover { color: var(--farbe-akzent); }

.btn, .btn-primary { border-radius: var(--radius); font-weight: 600; }

.btn-primary {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--farbe-akzent-hell);
  border-color: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-kontrast);
}

.btn-secondary, .btn-outline-primary {
  background: transparent;
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent);
}

.btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
}

.pagination { gap: 0.25rem; }

.pagination .page-link {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-grund);
  color: var(--farbe-akzent);
  font-weight: 600;
}

.pagination .page-item.active .page-link {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
}

.form-control, .form-select {
  background: var(--farbe-grund);
  border-color: var(--farbe-linie);
  border-radius: var(--radius);
  color: var(--farbe-text);
}

.form-control:focus, .form-select:focus {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px var(--farbe-akzent-schleier);
}

/* ========================================================= 12. Fußbereich */

.container-footer {
  background: var(--farbe-band);
  border-top: 1px solid var(--farbe-linie);
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
}

.container-footer a { color: var(--farbe-text-leise); }
.container-footer a:hover { color: var(--farbe-akzent); }

.back-to-top-link {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-kontrast);
  border-radius: var(--radius);
}

/*
 * Aus dem Chatfenster eingefügte Absätze bringen fremde Klassen mit
 * (font-claude-response-body o. ä.). Die sind wirkungslos, weil es dazu
 * kein CSS gibt – hier wird nur sichergestellt, dass sie es auch bleiben.
 */
.item-page [class*="font-claude"],
.blog-item [class*="font-claude"] {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}