/* Logo/Titel + Description sauber in einer Linie */
.header .navbar-brand{
  display:flex;
  align-items:center;           /* vertikal am Logo mittig */
  gap:clamp(.8rem, 1vw + .4rem, 1.6rem);
  flex-wrap:nowrap;
}

/* Typo & Farbe */
.header .navbar-brand .site-description__name{
  font-size:clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  font-weight:700;
  color:#FDB515;                /* Gold */
  line-height:1.1;
}

.header .navbar-brand .site-description__tagline{
  font-size:clamp(.9rem, 0.75rem + 0.35vw, 1.05rem);
  font-weight:500;
  color:#FDB515;                /* gleiches Gold */
  opacity:.95;
  line-height:1.2;
}

/* Logo nicht zu hoch (optional) */
.header .navbar-brand .brand-logo img{
  max-height:150px;
  height:auto;
  width:auto;
}

/* Auf sehr schmalen Screens umbrechen erlauben */
@media (max-width:576px){
  .header .navbar-brand{ flex-wrap:wrap; }
  .header .navbar-brand .site-description{ margin-top:.25rem; }
}

/* === Navigation: Pill Tabs === */
.header .container-nav .mod-menu {
  display: flex;
  gap: .4rem;
  justify-content: center;
}

.header .container-nav .mod-menu > li > a {
  text-decoration: none;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

/* Hover-Effekt */
.header .container-nav .mod-menu > li > a:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-1px);
}

/* Aktives oder aktuelles Menüelement */
.header .container-nav .mod-menu > li.current > a,
.header .container-nav .mod-menu > li.active > a {
  background: #FDB515; /* Gold */
  color: #0b1f3a;      /* Navy-Schrift auf Gold */
}

/* Pfeile für Dropdowns */
.header .container-nav .mod-menu > li.parent > a span::after {
  content: "▾";
  font-size: .8rem;
  margin-left: .4rem;
  opacity: .85;
}

/* Dropdown-Menüs */
.header .container-nav .mod-menu ul {
  background: #1f2a4a;
  border-radius: 10px;
  padding: .4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.header .container-nav .mod-menu ul li a {
  color: #fff;
  padding: .55rem .9rem;
  border-radius: 8px;
  display: block;
  white-space: nowrap;
  transition: background .15s ease;
}

.header .container-nav .mod-menu ul li a:hover {
  background: rgba(201,162,39,.2);
}

/* === Header: Navy-Gradient mit dezenter Tiefe === */
:root{
  /* Falls du magst, zentrale Farben einmal definieren */
  --fg-navy-1: #1f2a4a;  /* oben heller */
  --fg-navy-2: #113a6b;  /* Mitte */
  --fg-navy-3: #0b1f3a;  /* unten dunkler */
  --fg-gold:   #FDB515;
}

.header.container-header.full-width{
  /* weicher, vertikaler Verlauf */
  background: linear-gradient(180deg, var(--fg-navy-1) 0%, var(--fg-navy-2) 58%, var(--fg-navy-3) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);        /* leichte Kante unten */
  box-shadow: 0 8px 24px rgba(0,0,0,.18) inset;          /* sachter Tiefenlook */
}

/* Menü-Links bleiben gut lesbar */
.header .container-nav .mod-menu > li > a{
  color:#fff;
}

/* Aktive Pill etwas plastischer */
.header .container-nav .mod-menu > li.current > a,
.header .container-nav .mod-menu > li.active  > a{
  background: var(--fg-gold);
  color:#0b1f3a;
  box-shadow: 0 4px 14px rgba(201,162,39,.35);
}

/* Fokus-Ring für Tastatur-Nutzer */
.header .container-nav .mod-menu > li > a:focus-visible{
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

/* Optional: Sticky-Header Schatten nur beim Scrollen stärker */
@media (prefers-reduced-motion: no-preference){
  .header.container-header.full-width{
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
  }
}

/* === Rechte Sidebar: Grundlook für alle Cards === */
.container-sidebar-right .sidebar-right.card{
  background:#fff;
  border:1px solid #e8ecf3;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
  margin: 1rem 0 1rem 0;
}

/* Card-Header */
.container-sidebar-right .sidebar-right.card > .card-header{
  margin:0;
  padding:.9rem 1rem;
  font-size:1.1rem;
  font-weight:800;
  line-height:1.2;
  background:linear-gradient(180deg,#f7f9fd 0%, #eef2f9 100%);
  border-bottom:1px solid #e8ecf3;
  color:#0b1f3a;
}

/* Card-Body */
.container-sidebar-right .sidebar-right.card > .card-body{
  padding:.8rem .95rem 1rem;
}

.container-sidebar-right .sidebar-right.card p{
  margin:.55rem 0;
  color:#39424e;
}

.container-sidebar-right .sidebar-right.card a{
  color:#0f3c8c;
  text-decoration:none;
  border-bottom:1px solid rgba(15,60,140,.25);
}
.container-sidebar-right .sidebar-right.card a:hover{
  border-bottom-color:rgba(15,60,140,.6);
}

/* Medienkarten (Bild allein): Kanten bündig */
.container-sidebar-right .sidebar-right.card .mod-custom img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* Tabelle neutralisieren -> Listendarstellung */
.container-sidebar-right .sidebar-right.card.mod--events table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.container-sidebar-right .sidebar-right.card.mod--events td{
  display:block;
  padding:.65rem 0;
  border-top:1px solid #eef0f6;
}
.container-sidebar-right .sidebar-right.card.mod--events td.mod_events_latest_first{
  border-top:none;
}

/* Eventtitel */
.container-sidebar-right .sidebar-right.card.mod--events .mod_events_latest_content{
  display:block;
  font-weight:350;
  color:#0b1f3a;
  line-height:1.25;
}

/* Datum-Zeile als Badge */
.container-sidebar-right .sidebar-right.card.mod--events .mod_events_latest_date{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  background:#e9eef7;
  color:#113a6b;
  padding:.2rem .2rem;
  border-radius:999px;
}

/* Pseudo-Icon (falls <span class="icon-calendar"> drin ist) */
.container-sidebar-right .sidebar-right.card.mod--events .icon-calendar{
  display:inline-block;
  width:1rem; height:1rem;
  mask: none; /* sichert generische Darstellung */
  margin-right:.35rem;
}
.container-sidebar-right .sidebar-right.card.mod--events .icon-calendar::before{
  content:"📅"; /* simple, überall sichtbar */
  margin-right:.2rem;
}

/* „Ganzen Kalender ansehen“ als Button */
.container-sidebar-right .sidebar-right.card.mod--events .mod_events_latest_callink{
  margin-top:.6rem;
}
.container-sidebar-right .sidebar-right.card.mod--events .mod_events_latest_callink a{
  display:inline-block;
  margin-top:.25rem;
  padding:.5rem .8rem;
  border-radius:999px;
  background:#e9eef7;
  border:none;
  color:#113a6b;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.container-sidebar-right .sidebar-right.card.mod--events .mod_events_latest_callink a:hover{
  background:#FDB515; color:#0b1f3a;
  box-shadow:0 4px 12px rgba(201,162,39,.25);
}

.container-sidebar-right .sidebar-right.card.mod--note{
  border-color:#f0e6c8;
  background:linear-gradient(180deg,#fff 0%, #fffdfa 100%);
}
.container-sidebar-right .sidebar-right.card.mod--note > .card-header{
  background:linear-gradient(180deg,#fff7df 0%, #fff1c9 100%);
  border-bottom-color:#f0e6c8;
  color:#5a4500;
}
.container-sidebar-right .sidebar-right.card.mod--note a{
  color:#5a4500;
  border-bottom:1px solid rgba(90,69,0,.35);
}
.container-sidebar-right .sidebar-right.card.mod--note a:hover{
  color:#0b1f3a; border-bottom-color:#FDB515;
}
/* =============== VARIABLEN =============== */
.com-content-category-blog{
  --gap: 2rem;
  --radius: 16px;
  --border: #e8ecf3;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --navy: #0b1f3a;
  --gold: #C9A227;
  --ink: #39424e;
}

/* =============== 1) STRUKTUR-FIX =============== */
/* Columns aus – echtes Grid an (dein Container hat columns-2) */
.com-content-category-blog__items.columns-2{
  column-count: initial !important;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 768px){
  .com-content-category-blog__items.columns-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* Jede Karte kapselt ihren Inhalt (kein „Ineinanderlaufen“) */
.com-content-category-blog__item{
  display: flow-root;     /* eigener BFC */
  break-inside: avoid;    /* falls Columns doch irgendwo eingreifen */
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.com-content-category-blog__item .item-content{ padding:1rem 1.1rem; }

/* Floats in der ÜBERSICHT neutralisieren */
.com-content-category-blog .item-content img[style*="float:"],
.com-content-category-blog .item-content .image-placeholderR{
  float:none !important;
  display:block !important;
  margin:.5rem .5rem .75rem .5rem !important;
  max-width:100% !important;
}
.com-content-category-blog .item-content::after{ content:""; display:block; clear:both; }

/* Tabellen innerhalb der Cards brav machen */
.com-content-category-blog__item table{
  width:100%; max-width:100%; border-collapse:separate;
}

/* Inline-<style> direkt im Teaser ausblenden (nur Listenansicht) */
.com-content-category-blog__item > .item-content > style{ display:none !important; }

/* =============== 2) OPTIK =============== */
/* Überschrift/Link: deine blauen, dicken Unterstreichungen weg */
.com-content-category-blog .page-header{ margin:0 0 .35rem 0; padding:0; border:0; }
.com-content-category-blog .page-header h2{
  margin:0;
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.6rem);
  line-height:1.25;
  color: var(--navy);
}
.com-content-category-blog .page-header h2 a{
  color: inherit;
  text-decoration: none !important;     /* Unterstreichung wirklich aus */
  border: 0 !important;                 /* falls global border-bottom gesetzt war */
  box-shadow: none !important;
}
.com-content-category-blog .page-header h2 a:hover{
  text-decoration: none;
  border-bottom: 2px solid rgba(11,31,58,.25);
}

/* dünne Akzentlinie unter der Headline (statt Monsterlinie aus Inline-Styles) */
.com-content-category-blog .page-header + *{
  border-top: 2px solid rgba(11,31,58,.12);
  margin-top:.35rem; padding-top:.6rem;
}

/* Textfarbe/Ausrichtung vereinheitlichen (keine Center/Justify-Ausreißer) */
.com-content-category-blog .item-content p{
  color: var(--ink);
  margin:.6rem 0;
  text-align:start !important; /* überschreibt center/justify aus Artikel-Styles */
}

/* Bilder hübsch, aber zurückhaltend */
.com-content-category-blog .item-content img{
  max-width:100% !important; height:auto !important;
  border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06);
  margin:.5rem 0 .75rem 0 !important;
}

/* „Weiterlesen“ als Gold-Pill */
.com-content-category-blog .readmore .btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .9rem; border-radius:999px;
  background:var(--gold); color:var(--navy);
  border:none; font-weight:700; text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .15s ease, transform .05s ease;
}
.com-content-category-blog .readmore .btn:hover{
  box-shadow:0 4px 14px rgba(201,162,39,.35);
  transform: translateY(-1px);
}
.com-content-category-blog .readmore{ margin-top:.5rem; padding-top:.6rem; border-top:1px dashed #e3e7f0; }

/* =============== 3) GLOBAL-FALLSTRICK (falls du eine globale A-Formatierung hast) =============== */
/* Nimmt Unterstreichungen/border-bottoms nur IN DER NEWS-ÜBERSICHT raus */
.com-content-category-blog a{
  text-decoration:none;
  border-bottom:0;
  box-shadow:none;
}