/* ==========================================================
   Handballkreis Lenne-Sieg – Design für Cassiopeia (Joomla 6)
   Stand: Oktober 2026 (v2: Listen, Unterkategorien, Untermenüs)
   Ablage: Template-Stil Cassiopeia > Dateien > css/user.css
   Ändert nur die Darstellung, keine Inhalte.
   ========================================================== */

/* ---------- 1. Farben & Grundwerte ---------- */
:root {
  --cassiopeia-color-primary: #053ca1;   /* Blau aus dem Kopfbild */
  --cassiopeia-color-hover:   #042d78;
  --cassiopeia-color-link:    #053ca1;

  --hk-navy:   #0b2557;                  /* dunkles Blau für Menü/Footer */
  --hk-blue:   #053ca1;
  --hk-sky:    #3f8cff;                  /* helles Akzentblau (Logo-Schwung) */
  --hk-tint:   #f1f5fd;                  /* sehr helles Blau für Flächen */
  --hk-bg:     #e6ebf4;                  /* Seitenhintergrund */
  --hk-text:   #1c2433;
  --hk-muted:  #5d6779;
  --hk-line:   #dde3ee;
  --hk-radius: 10px;
  --hk-shadow: 0 1px 2px rgba(11,37,87,.06), 0 6px 20px rgba(11,37,87,.07);
}

body {
  background: var(--hk-bg);
  color: var(--hk-text);
  line-height: 1.6;
}

/* ---------- 2. Seitenrahmen (Box-Layout) ---------- */
.container-header,
.site-grid,
.container-footer {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.site-grid {
  background: #fff;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
/* Cassiopeia setzt über jedes Element 1em Abstand – oben entfernen,
   damit Inhalt und Seitenleiste bündig beginnen */
.site-grid > .grid-child > * { margin-top: 0; }
.site-grid > .container-component > main { margin-top: .25rem; }

/* ---------- 3. Kopfbereich ---------- */
.container-header {
  background: var(--hk-navy);
  background-image: none;
  margin-top: 1.5rem;
  border-radius: var(--hk-radius) var(--hk-radius) 0 0;
  box-shadow: none;
  overflow: visible;           /* sonst werden Untermenüs abgeschnitten */
  position: relative;
  z-index: 20;
}
.container-header .grid-child { padding: 0; }
.container-header .navbar-brand {
  width: 100%;
  margin: 0;
  padding: 0;
}
.container-header .brand-logo {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--hk-radius) var(--hk-radius) 0 0;
}
.container-header .brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -2.5%;           /* dunklen Bildrand unten ausblenden */
}

/* Menüleiste */
.container-header .container-nav {
  background: linear-gradient(90deg, var(--hk-navy) 0%, var(--hk-blue) 100%);
  border-top: 3px solid var(--hk-sky);
  margin: 0;
  padding: 0 1rem;
  position: relative;
}
.container-header .mod-menu {
  gap: .1rem;
  flex-wrap: wrap;
}
.container-header .mod-menu > li,
.container-header .metismenu > li.metismenu-item {
  margin: 0;
  padding: 0 !important;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button {
  display: block;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem .75rem;
  border-bottom: 3px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  border-bottom-color: var(--hk-sky);
  background: rgba(255,255,255,.08);
}
.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > a:hover {
  text-decoration: none;
}
/* Untermenüs (sobald im Menümodul „Untermenüpunkte anzeigen“ aktiv ist) */
.container-header .mod-menu > li > button.mm-toggler {
  padding-left: 0;
  padding-right: .7rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
}
.container-header .mod-menu > li.parent > a {
  padding-right: .35rem;
}
/* Cassiopeias Unterstrich-Linie unter Menüpunkt und Pfeil entfernen */
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before {
  display: none !important;
}
/* Menüpunkt und Pfeil leuchten beim Überfahren gemeinsam auf */
.container-header .mod-menu > li.parent:hover > a,
.container-header .mod-menu > li.parent:hover > button.mm-toggler {
  background: rgba(255,255,255,.1);
}
/* gepunkteten Fokusrahmen nur bei Tastaturbedienung zeigen */
.container-header .metismenu.mod-menu .metismenu-item > button:focus:not(:focus-visible),
.container-header .metismenu.mod-menu .metismenu-item > a:focus:not(:focus-visible) {
  outline: none;
}
.container-header .metismenu.mod-menu .mm-collapse {
  background: #fff;
  border-top: 3px solid var(--hk-sky);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 30px rgba(11,37,87,.18);
  min-width: 15rem;
  padding: .35rem 0;
}
.container-header .metismenu.mod-menu .mm-collapse > li {
  padding: 0 !important;
  font-size: .92rem;
  display: block;
}
.container-header .metismenu.mod-menu .mm-collapse > li > a {
  display: block;
  color: var(--hk-text);
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  padding: .55rem 1.1rem;
  border-left: 3px solid transparent;
}
.container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
.container-header .metismenu.mod-menu .mm-collapse > li.active > a {
  background: var(--hk-tint);
  color: var(--hk-blue);
  border-left-color: var(--hk-blue);
  text-decoration: none;
}

.container-header .navbar-toggler {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  margin: .6rem 0;
}

/* Suchfeld im Kopf (nur Handy/Tablet sichtbar) */
.container-header .container-search {
  margin: 0;
  padding: .6rem 0;
}
.container-header .container-search input {
  border-radius: 999px;
  border: 0;
  padding: .45rem 1rem;
  font-size: .9rem;
}

/* ---------- 4. Startseite: Beiträge als Karten ---------- */
.blog-item {
  background: #fff;
  border: 1px solid var(--hk-line);
  border-top: 0 !important;
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow);
  padding: 1.4rem 1.5rem 1.25rem !important;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.blog-item::after {                     /* Farbleiste oben */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hk-blue), var(--hk-sky));
}

/* Erster (Top-)Beitrag auf der Startseite hervorgehoben */
.blog-featured .items-leading .blog-item {
  background: linear-gradient(135deg, var(--hk-tint) 0%, #fff 70%);
  border-left: 5px solid var(--hk-blue);
  padding-left: 1.75rem !important;
}
.blog-featured .items-leading .blog-item::before {
  content: "Top-Thema";
  display: inline-block;
  align-self: flex-start;
  background: var(--hk-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

/* Weitere Beiträge auf großen Bildschirmen zweispaltig */
@media (min-width: 992px) {
  .blog-featured .blog-items:not(.items-leading) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .blog-featured .blog-items:not(.items-leading) .blog-item {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .blog-featured .blog-items:not(.items-leading) .item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .blog-featured .blog-items:not(.items-leading) .readmore {
    margin-top: auto;
  }
}

/* Beitragsinfos (z. B. Kategorie) als Etikett über dem Titel */
.blog-item .item-content {
  display: flex;
  flex-direction: column;
}
.blog-item .article-info {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .6rem;
  padding: 0;
}
.blog-item .article-info .article-info-term { display: none; }   /* „Details“ */
.blog-item .article-info dd {
  margin: 0;
  font-size: .8rem;
  color: var(--hk-muted);
}
.blog-item .article-info .category-name {
  font-size: 0;                                                /* „Kategorie:“ ausblenden */
  line-height: 1.5;
  background: var(--hk-tint);
  color: var(--hk-blue);
  border: 1px solid #d6e2f8;
  border-radius: 999px;
  padding: .15rem .6rem;
}
.blog-item .article-info .category-name [class^="icon-"] { display: none; }
.blog-item .article-info .category-name > span:not([class]),
.blog-item .article-info .category-name > a {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
/* Veröffentlichungsdatum oben rechts in derselben Zeile */
.blog-item .article-info .published,
.blog-item .article-info .create,
.blog-item .article-info .modified {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--hk-muted);
  white-space: nowrap;
}
.blog-item .article-info :is(.published, .create, .modified) [class^="icon-"] {
  color: var(--hk-sky);
  font-size: .85em;
  margin: 0;
}

/* Beim Top-Thema stehen beide Etiketten nebeneinander */
.blog-featured .items-leading .blog-item:has(.article-info)::before { display: none; }
.blog-featured .items-leading .article-info::before {
  content: "Top-Thema";
  background: var(--hk-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  line-height: 1.5;
}

/* Beitragstitel */
.item-title,
.blog-item .page-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: .75rem;
}
.item-title a,
.page-header h2 a {
  color: var(--hk-navy);
  text-decoration: none;
}
.item-title a:hover,
.page-header h2 a:hover {
  color: var(--hk-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Überschriften IM Beitragstext vereinheitlichen
   (Autoren nutzen H2–H6 oft als Schriftgröße) */
.blog-item .item-content :is(h1,h2,h3,h4,h5,h6):not(.item-title, .page-header *),
.com-content-article__body :is(h1,h2,h3,h4,h5,h6) {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--hk-text);
  margin: .35rem 0 .5rem;
}

.blog-item p,
.com-content-article__body p {
  margin-bottom: .6rem;
}
.blog-item img,
.com-content-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* „Weiterlesen“-Knopf: kurz statt kompletter Titel
   (der volle Titel bleibt für Screenreader im aria-label) */
.blog-item .readmore {
  margin: .75rem 0 0;
}
.blog-item .readmore a {
  font-size: 0;
  display: inline-flex;
  align-items: center;
  background: var(--hk-blue);
  border: 0;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  color: #fff;
  text-decoration: none;
  transition: background-color .15s;
}
.blog-item .readmore a [class^="icon-"] { display: none; }
.blog-item .readmore a::after {
  content: "Weiterlesen  \2192";
  font-size: .85rem;
  font-weight: 600;
  white-space: pre;
}
.blog-item .readmore a:hover,
.blog-item .readmore a:focus {
  background: var(--hk-navy);
  color: #fff;
}

/* ---------- 5. Einzelner Beitrag ---------- */
.item-page .page-header h1,
.com-content-category-blog > .page-header h1,
.blog-featured > .page-header h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--hk-navy);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 3px solid var(--hk-sky);
  display: inline-block;
}

/* ---------- 6. Kontaktlisten (z. B. Vorstand) ----------
   Unterstrichene Zeilen wie „Vorsitzender:“ werden zu Zwischenüberschriften */
.item-content p:has(> span[style*="underline"]:only-child),
.com-content-article__body p:has(> span[style*="underline"]:only-child) {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hk-blue);
  border-top: 1px solid var(--hk-line);
  padding-top: .9rem;
  margin: 1rem 0 .25rem;
}
.item-content p > span[style*="underline"]:only-child,
.com-content-article__body p > span[style*="underline"]:only-child {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.item-content p:has(> span[style*="underline"]:only-child) ~ p,
.com-content-article__body p:has(> span[style*="underline"]:only-child) ~ p {
  margin-bottom: .2rem;
}

/* ---------- 7. Tabellen (Listenansichten) ---------- */
.category.table,
main table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius);
  overflow: hidden;
}
main table th {
  background: var(--hk-tint);
  color: var(--hk-navy);
}
main table td,
main table th {
  padding: .65rem .9rem;
  border-top: 1px solid var(--hk-line);
}
main table tr:first-child th,
main table thead tr:first-child th { border-top: 0; }
main table tbody tr:hover { background: #f8faff; }

/* ---------- 7b. Beitragslisten (z. B. „Aktuelles“) ----------
   Die Tabelle wird zu einer ruhigen Liste mit Pfeil je Eintrag */
.com-content-category__table.table {
  border: 0;
  border-radius: 0;
  overflow: visible;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}
.com-content-category__table tbody {
  display: grid;
  gap: .6rem;
}
.com-content-category__table tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  background: #fff !important;
  border: 1px solid var(--hk-line);
  border-left: 4px solid var(--hk-blue);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11,37,87,.05);
  padding: .8rem 1rem;
  position: relative;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.com-content-category__table tbody tr:hover {
  box-shadow: var(--hk-shadow);
  border-left-color: var(--hk-sky);
  transform: translateY(-1px);
}
.com-content-category__table tbody :is(th, td) {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.com-content-category__table .list-title {
  flex: 1 1 15rem;
  font-weight: 600;
  font-size: 1rem;
}
.com-content-category__table .list-title a {
  color: var(--hk-navy);
  text-decoration: none;
}
.com-content-category__table .list-title a::after {     /* ganze Zeile klickbar */
  content: "";
  position: absolute;
  inset: 0;
}
.com-content-category__table tbody tr::after {
  content: "\2192";
  color: var(--hk-blue);
  font-weight: 700;
  margin-left: auto;
}
/* Datum, Autor, Zugriffe (falls im Menüpunkt eingeschaltet) */
.com-content-category__table tbody td {
  font-size: .82rem;
  color: var(--hk-muted);
  white-space: nowrap;
}
.com-content-category__table tbody td.list-date {
  order: -1;
  flex: 0 0 9.5rem;                 /* feste Breite → Titel stehen bündig untereinander */
  text-align: center;
  background: var(--hk-tint) !important;
  color: var(--hk-blue);
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .6rem !important;
}

/* Überschrift und „Einträge pro Seite“ in einer Zeile, damit die Liste weiter oben beginnt */
.content-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}
.content-category > *,
.content-category > form > * { grid-column: 1 / -1; }
.content-category > form { display: contents; }
.content-category > h1 {
  grid-column: 1 / -1 !important;
  grid-row: 1;
  justify-self: start;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hk-navy);
  margin: 0 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 3px solid var(--hk-sky);
}
.content-category .com-content-category__pagination.btn-group {
  grid-column: 2 !important;
  grid-row: 2;
  float: none !important;
  margin: 0 0 1rem;
}

/* Werkzeugleiste: Titelfilter links, „Einträge pro Seite“ rechts */
.content-category .com-content__filter {
  grid-column: 1 !important;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  max-width: 30rem;
  width: 100%;
}
.com-content__filter #filter-search {
  flex: 1 1 auto !important;
  min-width: 0;
  border: 1px solid var(--hk-line);
  border-radius: 999px;
  padding: .5rem 1rem .5rem 2.4rem;
  font-size: .95rem;
  color: var(--hk-text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6779' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .9rem center / 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.com-content__filter #filter-search:focus {
  outline: 0;
  border-color: var(--hk-sky);
  box-shadow: 0 0 0 3px rgba(63,140,255,.2);
}
.com-content__filter .btn {
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem 1rem;
  white-space: nowrap;
}
.com-content__filter .btn-primary {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
}
.com-content__filter .btn-primary:hover {
  background: var(--hk-navy);
  border-color: var(--hk-navy);
}
.com-content__filter .btn-secondary {
  background: none;
  border: 0;
  color: var(--hk-muted);
  padding-inline: .4rem;
}
.com-content__filter .btn-secondary:hover {
  color: var(--hk-blue);
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .content-category .com-content__filter {
    grid-column: 1 / -1 !important;
    max-width: none;
  }
  .content-category .com-content-category__pagination.btn-group {
    grid-column: 1 / -1 !important;
    grid-row: 3;
    justify-self: end;
  }
}
/* Auswahl „Anzeige #“ */
.com-content-category__pagination.btn-group {
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.com-content-category__pagination.btn-group::before {
  content: "Einträge pro Seite";
  font-size: .85rem;
  color: var(--hk-muted);
}
.com-content-category__pagination .form-select {
  border-radius: 999px;
  width: auto;
}
.com-content-category__navigation { margin-top: 1.25rem; }

/* ---------- 7c. Unterkategorien gut sichtbar ganz oben ---------- */
.com-content-category-blog,
.com-content-category {
  display: flex;
  flex-direction: column;
}
.com-content-category-blog > .page-header,
.com-content-category > .page-header,
.com-content-category-blog > .category-desc,
.com-content-category > .category-desc {
  order: -3;
}
.cat-children {
  order: -2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  background: var(--hk-tint);
  border-radius: var(--hk-radius);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
}
.cat-children > h3 {                       /* „Unterkategorien“ → „In diesem Bereich“ */
  grid-column: 1 / -1;
  font-size: 0;
  margin: 0;
}
.cat-children > h3::after {
  content: "In diesem Bereich";
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-blue);
}
.cat-children > div {
  background: #fff;
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  padding: .9rem 1rem;
  position: relative;
  box-shadow: 0 1px 2px rgba(11,37,87,.05);
  transition: box-shadow .15s, border-color .15s;
}
.cat-children > div:hover {
  box-shadow: var(--hk-shadow);
  border-color: var(--hk-sky);
}
.cat-children .item-title,
.cat-children .page-header {
  font-size: 1.02rem !important;
  margin: 0 0 .3rem;
  padding: 0;
  border: 0;
}
.cat-children .item-title a {
  color: var(--hk-navy);
  text-decoration: none;
}
.cat-children .item-title a::before {
  content: "\203A  ";
  color: var(--hk-sky);
  font-weight: 700;
  white-space: pre;
}
.cat-children .item-title a::after {      /* ganze Kachel klickbar */
  content: "";
  position: absolute;
  inset: 0;
}
.cat-children .category-desc,
.cat-children .category-desc :is(h1,h2,h3,h4,h5,h6,p) {
  font-size: .85rem;
  font-weight: 400;
  color: var(--hk-muted);
  margin: 0;
  line-height: 1.45;
}

/* ---------- 7d. Modul „In diesem Bereich“ (Menümodul mit Modulklasse hk-bereich) ----------
   Zeigt die Unterpunkte des aktuellen Menübereichs als Kacheln.
   Ist es auf der Seite vorhanden, wird Joomlas eigener Unterkategorien-Block ausgeblendet. */
body:has(.hk-bereich) .cat-children { display: none; }

.hk-bereich.card {
  background: var(--hk-tint);
  border: 0;
  border-radius: var(--hk-radius);
  box-shadow: none;
  padding: 1rem 1.25rem 1.15rem;
  margin-bottom: 1.75rem;
}
.hk-bereich .card-header {
  background: none;
  border: 0;
  padding: 0 0 .7rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-blue);
}
.hk-bereich .card-body { padding: 0; }
.hk-bereich .mod-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hk-bereich .mod-menu > li { margin: 0; padding: 0; }
.hk-bereich .mod-menu > li > a {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  padding: .8rem 1rem;
  color: var(--hk-navy);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11,37,87,.05);
  transition: box-shadow .15s, border-color .15s;
}
.hk-bereich .mod-menu > li > a::before {
  content: "\203A";
  color: var(--hk-sky);
  font-weight: 700;
}
.hk-bereich .mod-menu > li > a:hover {
  box-shadow: var(--hk-shadow);
  border-color: var(--hk-sky);
}
/* aktuell geöffnete Seite hervorheben */
.hk-bereich .mod-menu > li.current > a,
.hk-bereich .mod-menu > li.active > a {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
  color: #fff;
}
.hk-bereich .mod-menu > li.current > a::before,
.hk-bereich .mod-menu > li.active > a::before { color: #fff; }

/* ---------- 7e. Breadcrumb („Startseite › Bereich › Seite“) ---------- */
.mod-breadcrumbs__wrapper { margin: 0 0 .5rem; }
.mod-breadcrumbs.breadcrumb {
  background: none;
  padding: 0 !important;
  margin: 0;
  font-size: .85rem;
  flex-wrap: wrap;
  row-gap: .2rem;
}
.mod-breadcrumbs__here { display: none; }        /* „Aktuelle Seite:“ ausblenden */
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  color: var(--hk-sky);
  font-weight: 700;
  padding: 0 .5rem;
  float: none;
}
.mod-breadcrumbs a {
  color: var(--hk-muted);
  text-decoration: none;
}
.mod-breadcrumbs a:hover {
  color: var(--hk-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mod-breadcrumbs .breadcrumb-item.active {
  color: var(--hk-navy);
  font-weight: 600;
}

/* ---------- 7f. Personenkacheln (Kontakte einer Kategorie, z. B. Vorstand) ----------
   Gehört zum Template-Override html/com_contact/category/default_items.php */
.contact-category > h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hk-navy);
  margin: 0 0 1.25rem;
  padding-bottom: .35rem;
  border-bottom: 3px solid var(--hk-sky);
  display: inline-block;
}
.contact-category > .category-desc:empty { display: none; }

/* Sofortsuche über den Kacheln */
.hk-team__search {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
}
.hk-team__input {
  flex: 0 1 26rem;
  min-width: 0;
  border: 1px solid var(--hk-line);
  border-radius: 999px;
  padding: .55rem 1rem .55rem 2.4rem;
  font-size: .95rem;
  color: var(--hk-text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6779' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .9rem center / 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.hk-team__input:focus {
  outline: 0;
  border-color: var(--hk-sky);
  box-shadow: 0 0 0 3px rgba(63,140,255,.2);
}
.hk-team__count { font-size: .85rem; color: var(--hk-muted); white-space: nowrap; }
.hk-team__count:empty { display: none; }

/* Suchfeld in die Zeile der Überschrift (rechts) – auf dem Handy darunter */
.contact-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}
.contact-category > *,
.contact-category .com-contact-category__items > * { grid-column: 1 / -1; }
.contact-category > h1 { grid-column: 1; grid-row: 1; justify-self: start; }
.contact-category .com-contact-category__items { display: contents; }
.contact-category .com-contact-category__items > .hk-team__search {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0 0 1.25rem;
}
.contact-category .hk-team__input { flex: 0 0 18rem; }
.contact-category .hk-team__count { order: -1; }       /* „4 von 11“ links vom Feld */
@media (max-width: 575.98px) {
  .contact-category .com-contact-category__items > .hk-team__search {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }
  .contact-category .hk-team__input { flex: 1 1 auto; }
}
.hk-person[hidden] { display: none; }
.hk-team__empty {
  background: var(--hk-tint);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  color: var(--hk-muted);
  margin: 0;
}

.hk-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}
.hk-person {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--hk-line);
  border-radius: 10px;
  box-shadow: var(--hk-shadow);
  padding: 1.1rem 1rem 1rem;
  position: relative;
  overflow: hidden;
}
.hk-person::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hk-blue), var(--hk-sky));
}
/* Foto rund – ohne Foto: Initialen auf blauem Verlauf */
.hk-person__img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hk-blue), var(--hk-sky));
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hk-person__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}
.hk-person__body {
  min-width: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--hk-text);
}
.hk-person__fn {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hk-blue);
  margin-bottom: .15rem;
}
.hk-person__name {
  font-size: 1.05rem !important;
  font-weight: 700;
  margin: 0 0 .4rem;
  line-height: 1.3;
}
.hk-person__name a {
  color: var(--hk-navy);
  text-decoration: none;
}
.hk-person__name a:hover {
  color: var(--hk-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hk-person__row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .2rem;
  color: var(--hk-muted);
  overflow-wrap: anywhere;
}
.hk-person__row [class^="icon-"] {
  flex: 0 0 1rem;
  color: var(--hk-sky);
  font-size: .85em;
  text-align: center;
}
.hk-person__row a {
  color: var(--hk-text);
  text-decoration: none;
}
.hk-person__row a:hover {
  color: var(--hk-blue);
  text-decoration: underline;
}

/* ---------- 7g. Kontakt-Detailseite: links Angaben, rechts Kontaktformular ---------- */
.com-contact.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0 1.5rem;
  align-items: start;
}
.com-contact > .page-header { grid-column: 1 / -1; }
.com-contact > .page-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hk-navy);
  margin: 0 0 1.25rem;
  padding-bottom: .35rem;
  border-bottom: 3px solid var(--hk-sky);
  display: inline-block;
}
.com-contact > h2 { display: none; }                       /* „Kontaktformular“ */

.com-contact__container,
.com-contact__form {
  background: #fff;
  border: 1px solid var(--hk-line);
  border-radius: 10px;
  box-shadow: var(--hk-shadow);
  padding: 1.25rem 1.25rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.com-contact__container::before,
.com-contact__form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hk-blue), var(--hk-sky));
}
.com-contact .com-contact__container { display: block; grid-column: 1; }
.com-contact__form { grid-column: 2; grid-row: 2 / span 3; }
.com-contact__container > h2 {
  font-size: .75rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-blue);
  margin: 0 0 .75rem;
}
.com-contact__container dl { margin: 0; }
.com-contact .dl-horizontal dd { padding-left: 0; }

/* Funktion */
.com-contact .contact-position.dl-horizontal { display: block !important; margin-bottom: .75rem; }
.contact-position dt { display: none; }
.contact-position dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hk-navy);
}
.contact-image { margin-bottom: 1rem; }
.contact-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50% !important;
}

/* Adresse & Telefon: Symbol links, Text rechts, PLZ vor Ort */
.com-contact .com-contact__info { display: block; width: 100%; }
.com-contact .com-contact__address.dl-horizontal {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: .35rem;
  width: 100%;
  font-size: .92rem;
  color: var(--hk-text);
}
.com-contact__address::after { content: ""; order: 9; flex: 0 0 100%; height: 0; }
.com-contact__address dt { flex: 0 0 1.6rem; margin: 0; color: var(--hk-sky); order: 20; }
.com-contact__address dd { margin: 0; flex: 0 0 calc(100% - 1.6rem); order: 21; }
.com-contact__address dt:has(.icon-address) { order: 1; }
.com-contact__address dd:has(.contact-street) { order: 2; }
.com-contact__address dd:has(.contact-postcode) { order: 3; flex: 0 0 auto; margin-left: 1.6rem; margin-right: .3em; }
.com-contact__address dd:has(.contact-suburb) { order: 4; flex: 1 1 0%; min-width: 0; }
.com-contact__address dd:has(.contact-state),
.com-contact__address dd:has(.contact-country) { order: 5; margin-left: 1.6rem; flex-basis: calc(100% - 1.6rem); }
.com-contact__address dt:has(.icon-phone)    { order: 10; } .com-contact__address dd:has(.contact-telephone) { order: 11; }
.com-contact__address dt:has(.icon-mobile)   { order: 12; } .com-contact__address dd:has(.contact-mobile)    { order: 13; }
.com-contact__address dt:has(.icon-fax)      { order: 14; } .com-contact__address dd:has(.contact-fax)       { order: 15; }
.com-contact__address dt:has(.icon-envelope) { order: 16; } .com-contact__address dd:has(.contact-emailto)   { order: 17; }
.com-contact__address dt:has(.icon-home)     { order: 18; } .com-contact__address dd:has(.contact-webpage)   { order: 19; }
.com-contact__address a { color: var(--hk-text); text-decoration: none; }
.com-contact__address a:hover { color: var(--hk-blue); text-decoration: underline; }

/* Kontaktformular */
.com-contact__form form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.com-contact__form fieldset { margin: 0; padding: 0; border: 0; }
.com-contact__form legend {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hk-navy);
  margin: 0 0 .25rem;
  float: none;
  width: auto;
}
.com-contact__form .field-spacer { margin-bottom: .75rem; }
.com-contact__form .field-spacer label { font-size: .78rem; font-weight: 400; color: var(--hk-muted); }
.com-contact__form .field-spacer .red,
.com-contact__form .star { color: #c0392b; }
.com-contact__form .control-group { display: block; margin-bottom: .9rem; }
.com-contact__form .control-label {
  width: auto !important;
  float: none !important;
  padding: 0;
  margin-bottom: .3rem;
  text-align: left;
}
.com-contact__form .control-label label { font-size: .85rem; font-weight: 600; color: var(--hk-text); }
.com-contact__form .controls { margin-left: 0 !important; }
.com-contact__form .form-control {
  width: 100%;
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  padding: .55rem .8rem;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.com-contact__form textarea.form-control { min-height: 9rem; resize: vertical; }
.com-contact__form .form-control:focus {
  outline: 0;
  border-color: var(--hk-sky);
  box-shadow: 0 0 0 3px rgba(63,140,255,.2);
}
/* „Kopie erhalten“: Häkchen vor dem Text */
.com-contact__form .control-group:has(#jform_contact_email_copy) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
}
.com-contact__form .control-group:has(#jform_contact_email_copy) .control-label { margin: 0; }
.com-contact__form .control-group:has(#jform_contact_email_copy) label { font-weight: 400; }
.com-contact__form .form-check { margin: 0; padding-left: 1.5em; }
.com-contact__form .btn-primary {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
  border-radius: 999px;
  padding: .6rem 1.4rem;
  font-weight: 600;
}
.com-contact__form .btn-primary:hover { background: var(--hk-navy); border-color: var(--hk-navy); }

@media (max-width: 767.98px) {
  .com-contact.contact { grid-template-columns: 1fr; row-gap: 1rem; }
  .com-contact .com-contact__container,
  .com-contact__form { grid-column: 1; grid-row: auto; }
}

/* ---------- 7h. Suchergebnisse (Smart Search) ---------- */
.com-finder__search { margin-bottom: .75rem !important; }
.com-finder .form-inline { display: block; }
.com-finder .form-inline > label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-blue);
  margin: 0 0 .5rem;
}
.com-finder .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-width: 42rem;
}
.com-finder .input-group > .awesomplete { flex: 1 1 16rem; min-width: 0; position: relative; }
.com-finder #q {
  width: 100%;
  border: 1px solid var(--hk-line);
  border-radius: 999px !important;
  padding: .6rem 1rem .6rem 2.5rem;
  font-size: 1rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6779' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem center / 1rem;
}
.com-finder #q:focus {
  outline: 0;
  border-color: var(--hk-sky);
  box-shadow: 0 0 0 3px rgba(63,140,255,.2);
}
.com-finder .input-group > .btn {
  border-radius: 999px !important;
  font-weight: 600;
  padding: .6rem 1.2rem;
  margin: 0 !important;
}
.com-finder .input-group > .btn-primary { background: var(--hk-blue); border-color: var(--hk-blue); }
.com-finder .input-group > .btn-primary:hover { background: var(--hk-navy); border-color: var(--hk-navy); }
.com-finder__search .input-group > .btn-primary [class^="icon-"] { display: none; }   /* Lupe im „Suchen“-Knopf */
.com-finder .input-group > .btn-secondary {
  background: none;
  border: 0;
  color: var(--hk-muted);
  padding-inline: .5rem;
}
.com-finder .input-group > .btn-secondary:hover { color: var(--hk-blue); text-decoration: underline; }

/* Vorschlagsliste wie in der Seitenleiste */
.com-finder .awesomplete > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 1000;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hk-line);
  border-top: 3px solid var(--hk-sky);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 30px rgba(11,37,87,.18);
}
.com-finder .awesomplete > ul::before { display: none; }
.com-finder .awesomplete > ul > li {
  padding: .45rem 1rem;
  font-size: .9rem;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.com-finder .awesomplete > ul > li:hover,
.com-finder .awesomplete > ul > li[aria-selected="true"] {
  background: var(--hk-tint);
  border-left-color: var(--hk-blue);
}
.com-finder .awesomplete mark { background: none; color: var(--hk-blue); font-weight: 700; padding: 0; }

/* Erweiterte Suche: Tipps, Zeitraum, Filter – als Karte */
.com-finder__advanced {
  background: #fff;
  border: 1px solid var(--hk-line);
  border-radius: 10px;
  box-shadow: var(--hk-shadow);
  padding: 1.25rem;
  margin: 0 0 1.5rem;
}
.com-finder__tips { background: var(--hk-tint); border: 0; border-radius: 10px; font-size: .88rem; }
.com-finder__advanced .com-finder__tips { margin-bottom: 1.25rem !important; }
.com-finder__advanced .com-finder__tips .card-body { padding: .9rem 1rem; }
.com-finder__advanced .com-finder__tips p { margin: 0 0 .3rem; }
.com-finder__advanced .com-finder__tips p:last-child { margin: 0; }

#finder-filter-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
}
/* Zeitraum: Startdatum | Enddatum */
#finder-filter-select-dates {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#finder-filter-select-dates br { display: none; }
#finder-filter-select-dates .filter-date {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
#finder-filter-select-dates .filter-date > label:not(.visually-hidden),
.com-finder__filter .filter-branch .control-label label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-blue);
  margin: 0 0 .4rem;
}
#finder-filter-select-dates .filter-date > label:not(.visually-hidden) { flex: 0 0 100%; }
#finder-filter-select-dates .form-select {
  width: auto !important;
  margin: 0 !important;
  border-radius: 8px;
  border-color: var(--hk-line);
}
#finder-filter-select-dates .field-calendar { flex: 1 1 7rem; min-width: 0; }
#finder-filter-select-dates .field-calendar .input-group {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100%;
  max-width: none;
}
#finder-filter-select-dates .field-calendar .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 1px solid var(--hk-line);
  border-radius: 8px 0 0 8px !important;
  padding: .45rem .75rem;
}
#finder-filter-select-dates .field-calendar .form-control:focus {
  outline: 0;
  border-color: var(--hk-sky);
  box-shadow: 0 0 0 3px rgba(63,140,255,.2);
}
#finder-filter-select-dates .field-calendar .btn {
  border-radius: 0 8px 8px 0 !important;
  padding: .45rem .8rem !important;
  font-weight: 400;
}
/* Filter: Typ | Kategorie */
.com-finder__filter .filter-branch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
}
.com-finder__filter .filter-branch .control-group { margin: 0; }
.com-finder__filter .filter-branch .control-label { width: auto; float: none; padding: 0; }
.com-finder__filter .filter-branch .controls { margin: 0; }
.com-finder__filter .filter-branch .form-select {
  width: 100%;
  max-width: none;
  border-radius: 8px;
  border-color: var(--hk-line);
}
/* „Autor“ (nur „Super User“) und „Sprache“ (nur Deutsch) bringen hier nichts */
.com-finder__filter .control-group:has(#tax-author),
.com-finder__filter .control-group:has(#tax-language) { display: none; }
@media (max-width: 575.98px) {
  #finder-filter-window,
  #finder-filter-select-dates,
  .com-finder__filter .filter-branch { grid-template-columns: 1fr; }
}

/* „Für den Suchbegriff … wurden 8 Ergebnisse gefunden“ */
.com-finder__explained { font-size: .9rem; color: var(--hk-muted); margin: .5rem 0 1rem; }
.com-finder__explained p { margin: 0; }
.com-finder__explained .term { color: var(--hk-navy); font-weight: 700; }
.com-finder__explained a { color: var(--hk-blue); text-decoration: none; font-weight: 600; }

/* Treffer als Karten: Kategorie-Etikett, Titel, Datum + Auszug */
.com-finder__results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.com-finder__results-list > .result__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hk-line);
  border-left: 4px solid var(--hk-blue);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11,37,87,.05);
  padding: 1rem 1.2rem;
  margin: 0;
  position: relative;
  transition: box-shadow .15s, border-color .15s;
}
.com-finder__results-list > .result__item:hover { box-shadow: var(--hk-shadow); border-left-color: var(--hk-sky); }
.com-finder__results-list > .result__item::after { display: none; }   /* Trennlinie */
.result__title { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.result__title-link { color: var(--hk-navy); text-decoration: none; }
.result__title-link::after { content: ""; position: absolute; inset: 0; }   /* ganze Karte klickbar */
.result__title-link:hover .result__title-text { color: var(--hk-blue); text-decoration: underline; text-underline-offset: 3px; }
.result__title-url { display: none; }                                    /* lange Adresse ausblenden */
.result__description { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--hk-text); }
/* Datum oben rechts mit Kalendersymbol – wie auf der Startseite */
.result__date {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--hk-muted);
  white-space: nowrap;
}
.result__date::after { content: none !important; }   /* Joomlas „ - “ hinter dem Datum */
.result__date::before {
  content: "\f073";                         /* Kalender (Font Awesome von Joomla) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--hk-sky);
  font-size: .85em;
}
.result__taxonomy {
  order: -1;
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0 9rem 0 0;                      /* Platz für das Datum rechts */
  min-height: 1.4rem;
  display: flex;
  gap: .4rem;
}
.result__taxonomy-item { margin: 0; }
.result__taxonomy-item::before,
.result__taxonomy-item::after { display: none !important; content: none !important; }
.result__taxonomy--Type,
.result__taxonomy--Author,
.result__taxonomy--Language { display: none; }                          /* „Typ“, „Autor: Super User“ */
.result__taxonomy--Category {
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--hk-tint);
  color: var(--hk-blue);
  border: 1px solid #d6e2f8;
  border-radius: 999px;
  padding: .15rem .6rem;
  line-height: 1.5;
}
.result__taxonomy--Category > span { display: none; }                   /* „Kategorie:“ */
.com-finder mark { background: #fff1b8; color: inherit; padding: 0 .1em; border-radius: 3px; }
.com-finder__navigation { margin-top: 1.25rem; }

/* ---------- 8. Seitenleiste ---------- */
.container-sidebar-right .card {
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.container-sidebar-right .card-header {
  background: var(--hk-navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border: 0;
  margin: 0;
}
.container-sidebar-right .card-body { padding: 1rem; }
.site-grid > .container-sidebar-right > .card { margin: 0 0 1.25rem; }
.container-sidebar-right .card-body:has(.mod-finder) { padding: .75rem; }

/* Suchvorschläge: Kasten darf die Liste nicht abschneiden */
.site-grid > .container-sidebar-right > .card:has(.mod-finder) {
  overflow: visible;
  position: relative;
  z-index: 30;
}
.mod-finder .awesomplete { position: relative; display: block; }
.mod-finder .awesomplete > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 1000;
  min-width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hk-line);
  border-top: 3px solid var(--hk-sky);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 30px rgba(11,37,87,.18);
}
.mod-finder .awesomplete > ul::before { display: none; }
.mod-finder .awesomplete > ul > li {
  padding: .45rem 1rem;
  font-size: .9rem;
  color: var(--hk-text);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.mod-finder .awesomplete > ul > li:hover,
.mod-finder .awesomplete > ul > li[aria-selected="true"] {
  background: var(--hk-tint);
  color: var(--hk-navy);
  border-left-color: var(--hk-blue);
}
.mod-finder .awesomplete mark {
  background: none;
  color: var(--hk-blue);
  font-weight: 700;
  padding: 0;
}

.sidebar-right .mod-finder .awesomplete,
.sidebar-right .mod-finder input {
  display: block;
  width: 100%;
}
.sidebar-right .mod-finder input {
  border-radius: 999px;
  padding: .45rem 1rem;
}

/* Modul „Schnellzugriff“ (Eigenes Modul mit Modulklasse hk-schnellzugriff):
   Links als Buttons, der erste hervorgehoben */
.hk-schnellzugriff .card-body { padding: .9rem; }
.hk-schnellzugriff ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.hk-schnellzugriff li { margin: 0; padding: 0; }
.hk-schnellzugriff a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--hk-blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: .75rem 1rem;
  transition: background-color .15s, transform .15s;
}
.hk-schnellzugriff a::after {
  content: "\2192";
  font-weight: 700;
  opacity: .85;
}
.hk-schnellzugriff a:hover,
.hk-schnellzugriff a:focus {
  background: var(--hk-navy);
  color: #fff;
  transform: translateY(-1px);
}
.hk-schnellzugriff li + li a {
  background: #fff;
  color: var(--hk-blue);
  border: 1px solid var(--hk-line);
}
.hk-schnellzugriff li + li a:hover {
  background: var(--hk-tint);
  color: var(--hk-navy);
}

/* Liste „Neueste Beiträge“ */
.mod-articleslatest {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mod-articleslatest li {
  border-bottom: 1px solid var(--hk-line);
  padding: .55rem 0 .55rem 1rem;
  position: relative;
  font-size: .9rem;
  line-height: 1.4;
}
.mod-articleslatest li:last-child { border-bottom: 0; }
.mod-articleslatest li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hk-sky);
}
.mod-articleslatest a {
  color: var(--hk-text);
  text-decoration: none;
}
.mod-articleslatest a:hover { color: var(--hk-blue); text-decoration: underline; }

/* Zufallsbild */
.sidebar-right .mod-randomimage img,
.sidebar-right .random-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---------- 9. Blätterfunktion ---------- */
.pagination {
  flex-wrap: wrap;
  gap: .3rem;
}
.pagination .page-link {
  border-radius: 999px !important;
  border: 1px solid var(--hk-line);
  min-width: 2.3rem;
  text-align: center;
  color: var(--hk-navy);
}
.pagination .active .page-link {
  background: var(--hk-blue);
  border-color: var(--hk-blue);
  color: #fff;
}
@media (max-width: 575.98px) {
  .pagination .page-item:not(.active):not(:first-child):not(:nth-child(2)):not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
}

/* ---------- 10. Fußbereich ---------- */
.container-footer {
  background: var(--hk-navy);
  background-image: none;
  border-top: 3px solid var(--hk-sky);
  border-radius: 0 0 var(--hk-radius) var(--hk-radius);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}
.container-footer .grid-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: 1.1rem 1.5rem;
}
.container-footer p { margin: 0; color: rgba(255,255,255,.8); }
.container-footer .mod-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.container-footer .mod-menu li { margin: 0; padding: 0; }
.container-footer a { color: #fff; text-decoration: none; }
.container-footer a:hover { text-decoration: underline; }

/* „Nach oben“-Knopf: Pfeil immer sichtbar (weiß auf Blau) */
.back-to-top-link {
  background: var(--hk-blue);
  color: #fff;
  border-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(11,37,87,.25);
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background: var(--hk-navy);
  color: #fff;
}

/* ---------- 11. Tastatur-Fokus gut sichtbar ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--hk-sky);
  outline-offset: 2px;
}

/* ---------- 11b. Kleine Desktops: Menü kompakter, damit es in eine Zeile passt ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .container-nav { padding: 0 .5rem; }
  .container-header .mod-menu > li > a {
    font-size: .72rem;
    letter-spacing: .02em;
    padding: 1rem .5rem;
  }
  .container-header .mod-menu > li > button.mm-toggler { padding-right: .45rem; }
}

/* ---------- 12. Handy & Tablet ---------- */
@media (max-width: 991.98px) {
  .container-header,
  .container-footer {
    margin: 0;
    border-radius: 0;
  }
  .site-grid { padding-top: 1rem; }
  .container-header .brand-logo { border-radius: 0; }
  .container-header .container-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .75rem;
    padding: 0 1rem;
  }
  .container-header .container-search { flex: 1; }
  /* aufgeklapptes Menü nimmt die volle Breite, Suche rutscht darunter */
  .container-header .container-nav:has(.navbar-collapse.show, .navbar-collapse.collapsing) .navbar {
    flex: 1 1 100%;
  }
  .container-header .navbar-collapse .mod-menu,
  .container-header .navbar-collapse .mod-menu > li {
    width: 100%;
  }
  .container-header .navbar-collapse .mod-menu > li > a {
    flex: 1 1 auto;
  }
  .container-header .navbar-collapse .mod-menu > li {
    flex-wrap: wrap;
  }
  .container-header .mod-menu > li > button.mm-toggler {
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* Untermenü im aufgeklappten Handy-Menü: eingerückte Liste statt Popup */
  .container-header .metismenu.mod-menu .mm-collapse {
    position: static;
    flex: 1 1 100%;
    background: rgba(0,0,0,.18);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
  .container-header .metismenu.mod-menu .mm-collapse > li > a {
    color: #fff;
    padding: .7rem .5rem .7rem 1.75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
  .container-header .metismenu.mod-menu .mm-collapse > li.active > a {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: var(--hk-sky);
  }
  .container-header .mod-menu > li > a {
    padding: .8rem .5rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .container-header .mod-menu > li.active > a {
    border-bottom-color: rgba(255,255,255,.12);
    border-left: 3px solid var(--hk-sky);
  }

  .blog-item { padding: 1.1rem 1.1rem 1rem !important; }
  .blog-featured .items-leading .blog-item { padding-left: 1.25rem !important; }
  .item-title,
  .blog-item .page-header h2 { font-size: 1.2rem; }
  .item-page .page-header h1 { font-size: 1.5rem; }

  .container-footer .grid-child {
    flex-direction: column;
    text-align: center;
  }
}

/* Nur auf dem Handy: Kopfbild auf den Logo-Teil zuschneiden, damit es lesbar bleibt
   (auf Tablets passt das ganze Bild) */
@media (max-width: 575.98px) {
  .container-header .brand-logo img {
    aspect-ratio: 2.29 / 1;
    object-fit: cover;
    object-position: right center;
    margin-bottom: -5%;
  }
}