/* =====================================================================
   FF Traun – Cassiopeia im OÖLFV Corporate Design  (v20)
   Weißer Header + Logo, Hero (Slider + Kacheln), graue Karten,
   GANZE Karte klickbar (Modul „fft-kachel-link"), Meta „Datum / Kategorie",
   roter Footer mit Partner-Leiste.
   Ablage: media/templates/site/cassiopeia/css/user.css
   ===================================================================== */

:root{
  --cd-red:#CF4128; --cd-red-d:#A5331F; --cd-grey:#727375; --cd-card:#f2f2f2;
  --hue:9; --template-special-color:var(--cd-red);
  --link-color:var(--cd-red); --template-link-color:var(--cd-red);
}

/* ---------- Typografie ---------- */
body{ font-family:"Helvetica Neue",Arial,sans-serif; line-height:1.5; color:#222; background:#fff; }
h1,h2,h3,h1 a,h2 a,h3 a,
.item-title,.item-title a,.page-header h1,.page-header h1 a{
  font-family:"Helvetica Neue",Arial,sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; color:var(--cd-grey);
}
.item-title a:hover,h1 a:hover,h2 a:hover,h3 a:hover{ color:var(--cd-red); }
a{ color:var(--cd-red); } a:hover,a:focus{ color:var(--cd-red-d); }

/* ---------- Kopfbereich weiß (wie OÖLFV) ---------- */
.header,.container-header{ background:#fff!important; background-image:none!important; border-bottom:1px solid #e6e6e6; }
.header a,.navbar-brand,.navbar-brand *{ color:#1c1c1c!important; }
.navbar .nav-link{
  color:#1c1c1c!important; text-transform:uppercase; font-weight:600;
  font-size:.95rem; letter-spacing:.03em;
}
.navbar .nav-link:hover,
.navbar .nav-item.active>.nav-link,
.navbar .nav-item.current>.nav-link{ color:var(--cd-red)!important; }
.navbar .nav-item.active>.nav-link{ text-decoration:none; }
/* „CASSIOPEIA"-Schriftzug dezent, bis das Logo gesetzt ist */
.navbar-brand{ font-weight:800; letter-spacing:.02em; }
/* Logo-Größe begrenzen */
.navbar-brand img,.header .logo img,.header-title img{ max-height:78px; width:auto; height:auto; }
/* Header über dem Hero halten, damit Dropdown-Menüs sichtbar sind */
.container-header,.header{ position:relative; z-index:30; }
.navbar .nav-child,.navbar .dropdown-menu,.mod-menu__sub{ z-index:1000; }

/* Dropdown-Untermenüs (Desktop) – Cassiopeia hat hier keine Hover-Regel */
@media (min-width:992px){
  .container-header .mod-menu .nav-item.deeper{ position:relative; }
  .container-header .mod-menu .nav-item.deeper:hover > .mod-menu__sub,
  .container-header .mod-menu .nav-item.deeper:focus-within > .mod-menu__sub{ display:block; }
  .container-header .mod-menu__sub{
    position:absolute; top:100%; left:0; min-width:230px;
    background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.15);
    padding:.4rem 0; z-index:1000; border-top:3px solid var(--cd-red);
  }
  .container-header .mod-menu__sub .nav-item{ display:block; width:100%; }
  .container-header .mod-menu__sub .nav-link{ padding:.45rem 1.1rem; text-transform:none; font-weight:500; letter-spacing:0; }
  .container-header .mod-menu__sub .nav-item.deeper:hover > .mod-menu__sub{ top:0; left:100%; }
}

/* ---------- Hero (nur Startseite): Slider links + Kacheln rechts ---------- */
.container-banner{ max-width:none!important; }
.fft-hero{
  max-width:1320px; margin:1.75rem auto .5rem; padding:0;
  display:grid; grid-template-columns:2.4fr 1fr; gap:1.25rem;
}
@media(max-width:1360px){ .fft-hero{ padding:0 1rem; } }
.fft-hero__main{ position:relative; border-radius:6px; overflow:hidden; min-height:460px; background:#ddd; }
.fft-hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .8s ease;
}
.fft-hero__slide.is-active{ opacity:1; }
.fft-hero__dots{ position:absolute; left:0; right:0; bottom:14px; z-index:2; display:flex; justify-content:center; gap:.5rem; }
.fft-hero__dot{ width:11px; height:11px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; }
.fft-hero__dot.is-active{ background:#fff; }
.fft-hero__aside{ display:grid; grid-template-rows:1fr 1fr; gap:1.25rem; }
.fft-hero__tile{
  border-radius:6px; overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; padding:1.5rem; color:#fff; min-height:220px; cursor:default;
}
.fft-hero__tile h3{ color:#fff; margin:0; text-transform:uppercase; font-size:1.3rem; letter-spacing:.02em; }
.fft-hero__tile p{ margin:.35rem 0 0; opacity:.92; line-height:1.4; }
.fft-hero__stat{ display:block; font-size:2.8rem; font-weight:800; line-height:1; margin-bottom:.15rem; }
.fft-hero__tile--einsatz{ background:var(--cd-red); }
.fft-hero__tile--werbung{ background:#1c1c1c; }
@media(max-width:900px){
  .fft-hero{ grid-template-columns:1fr; }
  .fft-hero__main{ min-height:300px; }
  .fft-hero__aside{ grid-template-rows:auto auto; }
}

/* ---------- Einheitliches Karten-Raster ---------- */
.blog-item{ float:none!important; width:auto!important; margin:0!important; }
*:not(.blog-item):has(> .blog-item){ display:grid!important; grid-template-columns:repeat(3,1fr); gap:1.75rem; float:none!important; }
@media(max-width:992px){ *:not(.blog-item):has(> .blog-item){ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ *:not(.blog-item):has(> .blog-item){ grid-template-columns:1fr; } }

/* ---------- Karten (klickbar über Bild + Titel) ---------- */
.blog-item{
  background:var(--cd-card); border:none; border-radius:4px; box-shadow:none;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.blog-item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.12); transform:translateY(-2px); }
.blog-item .item-image,.blog-item .item-image.left{ float:none!important; margin:0!important; width:100%; overflow:hidden; }
.blog-item .item-image img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .35s ease; }
.blog-item:hover .item-image img{ transform:scale(1.04); }
.blog-item .item-content{ padding:1rem 1.25rem 1.4rem; display:flex; flex-direction:column; }
.blog-item .item-title, .blog-item h2, .blog-item h3{ margin:.15rem 0 .55rem; line-height:1.2; }
.blog-item .item-title a, .blog-item h2 a, .blog-item h3 a,
.blog-item h2, .blog-item h3{
  font-size:1.15rem; line-height:1.2; display:block;
  text-transform:none !important; letter-spacing:0; color:#1c1c1c; font-weight:700;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}
.blog-item .item-title a:hover, .blog-item h2 a:hover, .blog-item h3 a:hover{ color:var(--cd-red); }
.blog-item .item-content > p{ color:#555; line-height:1.55; margin:0; }


/* ---------- GANZE Karte klickbar → übernimmt das Modul „fft-kachel-link" ----------
   (reines CSS-Overlay funktioniert in der Joomla-Verschachtelung nicht zuverlässig,
   daher per kleinem JS-Modul; hier nur Cursor + echte Links nach oben legen) */
.blog-item{ position:relative; cursor:pointer; }
.blog-item .item-content a,
.blog-item .article-info a{ position:relative; z-index:2; }

/* ---------- Meta wie OÖLFV: „DATUM / Kategorie", klein & grau ---------- */
.blog-item .article-info{
  font-size:.82rem; color:var(--cd-grey); text-transform:none; letter-spacing:0;
  margin:0 0 .5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
}
.blog-item .article-info dd{ margin:0; }
.blog-item .published{ order:1; }
.blog-item .category-name{ order:2; }
.blog-item .category-name::before{ content:"/"; margin-right:.35rem; }
.blog-item .article-info a{ color:var(--cd-grey); }
.blog-item .article-info a:hover{ color:var(--cd-red); }
.article-info-term,
.blog-item .createdby,
.blog-item .hits{ display:none!important; }
.blog-item .article-info .fa,
.blog-item .article-info [class*="icon-"]{ display:none!important; }

/* ---------- „Weiterlesen"-Button entfällt (Karte ist klickbar) ---------- */
.readmore{ display:none!important; }

.btn-primary{ background:var(--cd-red); border-color:var(--cd-red); }
.btn-primary:hover{ background:var(--cd-red-d); border-color:var(--cd-red-d); }
.container-component{ background:transparent; }

/* ---------- Unterseiten (Einzelartikel) wie OÖLFV: Info-Block ausblenden ----------
   Autor / Kategorie / Datum / Zugriffe / Details / Icons – nur auf Einzelartikeln,
   die Kacheln (.blog-item) behalten ihre „Datum / Kategorie"-Zeile. */
.item-page .article-info,
.com-content-article .article-info,
.item-page .article-info-term,
.item-page .icons,
.item-page .print-icon,
.item-page .email-icon,
.item-page .actions{ display:none !important; }
.item-page .page-header{ margin-bottom:1.25rem; }

/* Unterseiten wie OÖLFV/LFK: zentrierte, schmale Lesespalte + volle Bildbreite */
.item-page{ font-size:1.03rem; max-width:800px; margin-left:auto; margin-right:auto; }
.item-page .page-header h1{ color:#3f3f3f; letter-spacing:.01em; margin:0 0 1.25rem; }
/* Haupt-/Beitragsbild volle Spaltenbreite statt klein gefloatet */
.item-page .item-image,
.item-page figure.item-image{ float:none !important; width:100% !important; margin:0 0 1.6rem !important; }
.item-page .item-image img{ width:100%; height:auto; border-radius:8px; display:block; box-shadow:0 10px 26px rgba(0,0,0,.12); }
/* erste Textzeile als „Lead" etwas kräftiger (wie LFK) */
.item-page .item-image + p{ font-size:1.15rem; color:#1c1c1c; font-weight:500; line-height:1.6; }
/* Zurück/Weiter dezenter */
.item-page .pagination a, .item-page .pager a, .com-content-article__navigation a{ border-radius:4px; }

/* ---------- Feature-Block „Bild + rotes Panel" (OÖLFV/LFK-Stil) ---------- */
.fft-feature{ position:relative; margin:2.75rem 0; }
.fft-feature__panel{
  background:var(--cd-red); color:#fff; border-radius:2px;
  margin-left:100px; padding:2.6rem 2.6rem 2.6rem 44%;
  min-height:330px; display:flex; flex-direction:column; justify-content:center;
}
.fft-feature__panel h3{ color:#fff; text-transform:uppercase; letter-spacing:.01em; font-size:1.55rem; line-height:1.15; margin:0 0 1rem; }
.fft-feature__panel p{ color:#fff; line-height:1.6; margin:0 0 .8rem; }
.fft-feature__panel p:last-child{ margin-bottom:0; }
.fft-feature__panel a{ color:#fff; text-decoration:underline; }
.fft-feature__media{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:46%; z-index:2; }
.fft-feature__media img{ width:100%; height:auto; display:block; border-radius:2px; box-shadow:0 14px 34px rgba(0,0,0,.28); margin:0; }
/* Variante „Bild rechts": <div class="fft-feature fft-feature--right"> */
.fft-feature--right .fft-feature__panel{ margin-left:0; margin-right:100px; padding:2.6rem 44% 2.6rem 2.6rem; }
.fft-feature--right .fft-feature__media{ left:auto; right:0; }
@media(max-width:760px){
  .fft-feature{ display:flex; flex-direction:column; }
  .fft-feature__media, .fft-feature--right .fft-feature__media{ position:static; transform:none; width:100%; left:auto; right:auto; order:1; }
  .fft-feature__panel, .fft-feature--right .fft-feature__panel{ margin:0; padding:1.6rem; min-height:0; order:2; }
}
.item-page p{ line-height:1.65; margin:0 0 .75rem; }
.item-page ul, .item-page ol{ line-height:1.75; margin:.2rem 0 1.2rem 1.3rem; }
.item-page li{ margin:.3rem 0; }
.item-page h2, .item-page h3, .item-page h4{
  color:var(--cd-grey); text-transform:uppercase; letter-spacing:.01em;
  line-height:1.2; margin:1.9rem 0 .6rem;
}
.item-page a{ color:var(--cd-red); }
.item-page a:hover{ color:var(--cd-red-d); }
.item-page img{ max-width:100%; height:auto; border-radius:6px; }
/* große, im Text eingebettete (gefloatete) Bilder nicht den Text einquetschen lassen */
.item-page img[style*="float"]{ max-width:46%; margin:0 1.6rem 1rem 0; }
@media(max-width:760px){
  .item-page img[style*="float"]{ float:none !important; max-width:100%; margin:0 0 1rem; display:block; }
}

/* ---------- Alt eingebettete Berichts-Kacheln in Artikeln schlicht darstellen ---------- */
.blog-item .blog-item{ background:transparent!important; box-shadow:none!important; padding:0!important; margin:1.25rem 0 0!important; border-radius:0!important; transform:none!important; }
.blog-item .blog-item:hover{ transform:none!important; box-shadow:none!important; }
.blog-item .blog-item .item-title a{ font-size:1.05rem!important; color:#1c1c1c!important; }

/* ---------- Pagination mittig, Zähler „Seite x von y" darunter zentriert ---------- */
.w-100:has(> .pagination__wrapper){ display:flex; flex-direction:column; align-items:center; }
.w-100:has(> .pagination__wrapper) .pagination__wrapper{ order:1; }
.w-100:has(> .pagination__wrapper) .counter{ order:2; float:none!important; text-align:center; padding:.35rem 0 0!important; margin:0; }
.pagination__wrapper .pagination{ justify-content:center; flex-wrap:wrap; }
/* aktive Seitenzahl in CD-Rot statt Bootstrap-Blau */
.pagination .page-link{ color:var(--cd-red); }
.pagination .page-link:hover{ color:var(--cd-red-d); }
.pagination .active .page-link,
.pagination .page-item.active .page-link{ background:var(--cd-red)!important; border-color:var(--cd-red)!important; color:#fff!important; }

/* ---------- Roter Footer (aktiv, sobald Footer-Modul angelegt) ---------- */
.container-footer, footer.container-footer{ background:var(--cd-red); color:#fff; position:relative; overflow:hidden; }
/* Flammenrad-Wasserzeichen unten rechts (Bild: /images/flammenrad.png, hell/transparent) */
.container-footer::after{ content:""; position:absolute; right:130px; bottom:-40px; width:680px; height:776px; background:url('/images/flammenrad.svg') no-repeat right bottom/contain; opacity:.9; pointer-events:none; z-index:0; }
.fft-footer{ position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:3rem 1rem 1.5rem; color:#fff; }
.fft-footer a{ color:#fff; text-decoration:none; } .fft-footer a:hover{ text-decoration:underline; }

/* Partner-Leiste */
.fft-partner{ padding:.5rem 0 2.5rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.2); margin-bottom:2.5rem; }
.fft-partner__title{ color:#fff; text-transform:uppercase; letter-spacing:.03em; font-size:1.7rem; font-weight:700; margin:0 0 1.9rem; }
.fft-partner__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.75rem; }
.fft-partner__item{
  background:#fff; border-radius:4px; min-height:210px; padding:1.25rem 1.5rem; flex:0 1 400px;
  display:flex; align-items:center; justify-content:center;
  color:#1c1c1c; font-weight:800; font-size:1.15rem; text-transform:uppercase;
  letter-spacing:.02em; text-decoration:none; transition:box-shadow .15s ease;
}
.fft-partner__item img{ max-width:100%; max-height:165px; height:auto; display:block; }
.fft-partner__item:hover{ text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.18); }
@media(max-width:600px){ .fft-partner__item{ flex-basis:100%; } }

.fft-footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.fft-footer__claim{ font-size:1.6rem; font-weight:700; line-height:1.2; text-transform:none; }
.fft-footer__col h4{ text-transform:uppercase; font-size:.95rem; letter-spacing:.03em; margin:0 0 .8rem; color:#fff; }
.fft-footer__col ul{ list-style:none; margin:0; padding:0; }
.fft-footer__col li{ margin:.35rem 0; }
.fft-footer__col p{ line-height:1.6; }
.fft-footer__bar{ margin:2.5rem auto 0; padding:1.25rem 0 0; border-top:1px solid rgba(255,255,255,.25); }

/* runde Social-Icons */
.fft-footer__social{ display:flex; gap:.75rem; margin-bottom:1.25rem; }
.fft-footer__social a{
  width:40px; height:40px; border:1px solid rgba(255,255,255,.65); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.fft-footer__social a:hover{ background:#fff; color:var(--cd-red); text-decoration:none; }
.fft-footer__social svg{ width:18px; height:18px; fill:currentColor; }
.fft-footer__bottomrow{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; }
.fft-footer__links a, .fft-footer__copy a{ text-decoration:underline; }
@media(max-width:800px){ .fft-footer__inner{ grid-template-columns:1fr 1fr; } .fft-footer__bottomrow{ flex-direction:column; align-items:flex-start; gap:.5rem; } }

/* =====================================================================
   INHALTS-NORMALISIERUNG (v14)
   Alte Beiträge wurden über die Jahre aus Word/altem Editor eingefügt und
   tragen fest eingebaute Inline-Stile (font-family, 13px, feste Farben,
   Hintergründe, <font>-Tags). Dadurch sehen Listen- und Unterseiten
   uneinheitlich aus. Hier ziehen wir alles auf EINE einheitliche
   Typografie und einheitliche Abstände – ohne die Inhalte zu ändern.
   Rein gestalterisch, jederzeit reversibel.
   ===================================================================== */

/* 1) Eingebaute Schrift-/Farb-/Hintergrund-Stile im Fließtext neutralisieren */
.item-content, .item-page,
.item-content p, .item-content span, .item-content div, .item-content li, .item-content td,
.item-page p,  .item-page span,  .item-page div,  .item-page li,  .item-page td,
.item-content font, .item-page font{
  font-family:"Helvetica Neue",Arial,sans-serif !important;
  letter-spacing:normal !important;
}
/* feste Pixel-Schriftgrößen aus Alt-Inhalten aufheben – Größe kommt vom Design */
.item-content [style*="font-size"], .item-page [style*="font-size"],
.item-content font[size], .item-page font[size]{ font-size:inherit !important; }
/* eingefügte Textfarben / farbige Hintergründe vereinheitlichen (Links bleiben rot) */
.item-content [style*="color"]:not(a):not(a *),
.item-page  [style*="color"]:not(a):not(a *){ color:inherit !important; }
.item-content [style*="background"], .item-page [style*="background"]{ background:transparent !important; }
.item-content font[color], .item-page font[color]{ color:inherit !important; }

/* 2) Einheitliche Absatz- und Listenabstände im Fließtext */
.item-content > *:first-child, .item-page .com-content-article__body > *:first-child{ margin-top:0 !important; }
.item-content p{ margin:0 0 .75rem !important; line-height:1.65 !important; }
.item-content ul, .item-content ol{ margin:.2rem 0 1rem 1.3rem !important; line-height:1.7; }
.item-content h1,.item-content h2,.item-content h3,.item-content h4{ margin:1.4rem 0 .5rem !important; }
/* leere Absätze / <br>-Ketten aus Alt-Inhalten nicht als Riesenlücke zeigen */
.item-content p:empty, .item-page p:empty{ display:none !important; }
.item-content br + br, .item-page br + br{ display:none; }

/* 3) Im Text eingebettete Bilder einheitlich einbinden */
.item-content img{ max-width:100% !important; height:auto !important; border-radius:6px; }
.item-content img[width]{ width:auto !important; }
.item-content img[align="right"], .item-content img[style*="float:right"], .item-content img[style*="float: right"]{
  float:right; max-width:42%; margin:.2rem 0 1rem 1.4rem !important;
}
.item-content img[align="left"], .item-content img[style*="float:left"], .item-content img[style*="float: left"]{
  float:left; max-width:42%; margin:.2rem 1.4rem 1rem 0 !important;
}
@media(max-width:760px){
  .item-content img[align], .item-content img[style*="float"]{ float:none !important; max-width:100% !important; margin:0 0 1rem !important; display:block; }
}

/* 4) Tabellen aus Alt-Inhalten lesbar & randlos machen */
.item-content table, .item-page table{
  width:100% !important; max-width:100%; border-collapse:collapse; margin:0 0 1.2rem;
  font-family:"Helvetica Neue",Arial,sans-serif;
}
.item-content table td, .item-content table th,
.item-page table td, .item-page table th{
  border:1px solid #e3e3e3; padding:.5rem .7rem; vertical-align:top;
}

/* 5) Listen-/Kategorieseiten: gleiche Höhe & sauberer Anrisstext je Karte */
.blog-item .item-content{ min-height:0; }
.blog-item .item-content p{
  font-family:"Helvetica Neue",Arial,sans-serif !important; font-size:.98rem !important;
  color:#555 !important; line-height:1.55 !important; margin:0 !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-item .item-content font, .blog-item .item-content span{ font-size:inherit !important; color:inherit !important; background:transparent !important; }

/* =====================================================================
   TAGS/BADGES im CD (v15): dezente rote Chips statt Bootstrap-Blau
   ===================================================================== */
ul.tags{ list-style:none; margin:.2rem 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
ul.tags li{ margin:0; }
ul.tags .badge, .tags .badge, a.tag-link.badge, .com-tags .badge{
  background:#fff !important; color:var(--cd-red) !important;
  border:1px solid var(--cd-red); border-radius:3px;
  font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:.3em .6em; text-decoration:none; transition:background .15s ease,color .15s ease;
}
ul.tags .badge:hover, .tags .badge:hover{ background:var(--cd-red) !important; color:#fff !important; }
/* auf den grauen Karten: Chips über den Kachel-Link legen (klickbar halten) */
.blog-item ul.tags a{ position:relative; z-index:2; }

/* =====================================================================
   TAG-FILTERLEISTE oben (v16, OÖLFV-Stil) + Karten-Badges ausblenden
   ===================================================================== */
/* Badges auf den Übersichtskarten NICHT mehr zeigen – Filter sitzt oben */
.blog-item ul.tags{ display:none !important; }

/* Leiste */
.fft-tagbar{
  max-width:1320px; margin:1.5rem auto .25rem; padding:0 0 1rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .55rem;
  border-bottom:1px solid #e6e6e6;
}
.fft-tagbar__label{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; color:#1c1c1c; font-size:.95rem;
  padding:.45rem .9rem .45rem 0; border-bottom:3px solid var(--cd-red);
  margin-bottom:-1rem; padding-bottom:calc(1rem + .45rem);
}
.fft-tagbar__chip{
  border:1px solid #cfcfcf; border-radius:3px; background:#fff;
  color:#1c1c1c !important; font-size:.86rem; font-weight:600;
  padding:.45rem .95rem; text-decoration:none !important;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  white-space:nowrap;
}
.fft-tagbar__chip:hover{ border-color:var(--cd-red); color:var(--cd-red) !important; }
.fft-tagbar__chip.is-active{
  background:var(--cd-red); border-color:var(--cd-red); color:#fff !important;
}
@media(max-width:760px){
  .fft-tagbar{ gap:.4rem; }
  .fft-tagbar__chip{ font-size:.8rem; padding:.35rem .7rem; }
}

/* Auf Artikelseiten bleiben die (roten) Chips unter dem Beitrag erhalten */
.item-page ul.tags{ margin-top:1.5rem; }

/* Tag-Seiten: Kopf aufräumen (Filterfeld/Anzeige-Dropdown wirken altbacken) */
.com-tags-tag .com-tags-tag__filters,
.com-tags-tag .btn-toolbar,
.com-tags-tag .js-stools{ display:none !important; }

/* =====================================================================
   TAG-SEITEN als Karten-Raster wie die Startseite (v17)
   Markup: ul.com-tags-tag__category > li.list-group-item
           { h3>a Titel | a>img Bild | span.tag-body Teaser }
   ===================================================================== */
.com-tags-tag__category.list-group{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:1.75rem;
  border:none; padding:0; margin:1rem 0 2rem;
}
@media(max-width:992px){ .com-tags-tag__category.list-group{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .com-tags-tag__category.list-group{ grid-template-columns:1fr; } }

.com-tags-tag__category > .list-group-item{
  display:flex; flex-direction:column; padding:0; margin:0;
  background:var(--cd-card); border:none !important; border-radius:4px; overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.com-tags-tag__category > .list-group-item:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.12); transform:translateY(-2px); background:var(--cd-card);
}
/* Bild (Direktkind-Link) nach oben, randlos, feste Höhe */
.com-tags-tag__category > .list-group-item > a{ order:-1; display:block; overflow:hidden; }
.com-tags-tag__category > .list-group-item > a img{
  width:100%; height:210px; object-fit:cover; display:block; transition:transform .35s ease;
}
.com-tags-tag__category > .list-group-item:hover > a img{ transform:scale(1.04); }
/* Titel wie auf den Startseiten-Karten */
.com-tags-tag__category > .list-group-item h3{
  order:0; margin:.9rem 1.25rem .35rem; line-height:1.2;
}
.com-tags-tag__category > .list-group-item h3 a{
  font-size:1.15rem; font-weight:700; color:#1c1c1c; text-transform:none !important;
  letter-spacing:0; text-decoration:none; display:block;
  overflow-wrap:anywhere; word-break:break-word;
}
.com-tags-tag__category > .list-group-item h3 a:hover{ color:var(--cd-red); }
/* Teaser */
.com-tags-tag__category > .list-group-item .tag-body{
  order:1; display:block; margin:0 1.25rem 1.4rem; color:#555; line-height:1.55; font-size:.98rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.com-tags-tag__category > .list-group-item .tag-body p{ margin:0; }
/* Karten ohne Bild: oben etwas Luft */
.com-tags-tag__category > .list-group-item h3:first-child{ margin-top:1.1rem; }
/* Artikel ohne Intro-Bild: kaputtes <img src="/"> samt Link ausblenden (v18) */
.com-tags-tag__category > .list-group-item > a:has(> img[src="/"]),
.com-tags-tag__category > .list-group-item > a:has(> img:not([src])),
.com-tags-tag__category > .list-group-item > a:has(> img[src=""]){ display:none; }

/* =====================================================================
   ARTIKELSEITE (v19): Meta-Zeile "Datum / Autor / Kategorie" oben zeigen,
   Tags im Artikel im Filter-Chip-Design
   ===================================================================== */
/* Meta-Zeile wieder einblenden (überschreibt das frühere display:none) */
.item-page .article-info{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:.35rem;
  font-size:.88rem; color:var(--cd-grey); margin:0 0 1.4rem;
}
.item-page .article-info dd{ margin:0; }
.item-page .article-info .published,
.item-page .article-info .create{ order:1; }
.item-page .article-info .createdby{ order:2; }
.item-page .article-info .createdby::before{ content:"/"; margin-right:.35rem; }
.item-page .article-info .category-name{ order:3; }
.item-page .article-info .category-name::before{ content:"/"; margin-right:.35rem; }
.item-page .article-info .hits,
.item-page .article-info .article-info-term{ display:none !important; }
.item-page .article-info a{ color:var(--cd-grey); }
.item-page .article-info a:hover{ color:var(--cd-red); }

/* Tags im Artikel: gleiche Chips wie die Filterleiste (überschreibt btn-info-Blau) */
ul.tags{ list-style:none; padding:0; margin:.25rem 0 1.4rem; display:flex; flex-wrap:wrap; gap:.5rem; }
ul.tags li{ margin:0; padding:0; }
ul.tags a, ul.tags a.btn, ul.tags a.btn-info, ul.tags a.badge{
  background:#fff !important; border:1px solid #cfcfcf !important; border-radius:3px;
  color:#1c1c1c !important; font-size:.86rem; font-weight:600; line-height:1;
  padding:.45rem .95rem; text-decoration:none !important; text-transform:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
ul.tags a:hover{ border-color:var(--cd-red) !important; color:var(--cd-red) !important; background:#fff !important; }

/* =====================================================================
   ARTIKEL-BLÄTTERN (v20): defekte Legacy-Icons ersetzen + CD-Look
   (Joomla 6 hinterlegt icon-chevron-* nicht mehr mit einem Symbol)
   ===================================================================== */
.item-page .icon-chevron-left,
.item-page .icon-chevron-right{ display:none !important; }
.item-page a.btn.previous::before{ content:"‹"; margin-right:.45rem; font-weight:700; }
.item-page a.btn.next::after{ content:"›"; margin-left:.45rem; font-weight:700; }
.item-page a.btn.previous,
.item-page a.btn.next{
  background:#fff !important; border:1px solid #cfcfcf !important; color:#1c1c1c !important;
  border-radius:3px; font-weight:600; font-size:.9rem; padding:.5rem 1rem;
  text-decoration:none !important; transition:border-color .15s ease, color .15s ease;
}
.item-page a.btn.previous:hover,
.item-page a.btn.next:hover{ border-color:var(--cd-red) !important; color:var(--cd-red) !important; }