@charset "UTF-8";

/* Lokale Schriften */
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-600italic.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-v35-latin-700italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-200.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-200italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-300.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-300italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-600italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-700italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-800.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/karla-v33-latin-800italic.woff2") format("woff2");
}

:root {
  --kw-red: #e3000f;
  --kw-red-dark: #790000;
  --kw-card-background: #fff;
  --kw-button-background: #eee;
  --kw-button-hover: #4a4a4a;
  --kw-text: #222;
  --kw-card-radius: 12px;
  --kw-card-shadow: 0 4px 20px rgb(0 0 0 / 8%);
  --kw-card-gap: 30px;
  --kw-card-padding: 20px;
  --kw-blog-column-gap: 18px;
  --kw-blog-image-gap: 0;
  --kw-blog-title-gap: 10px;
  --kw-blog-category-gap: 8px;
  --kw-readmore-gap: 8px;
  --kw-link-line-height: 2px;
  --kw-content-spacing: 30px;
}

html,
body {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 20px;
  font-weight: 400;
  scroll-padding-top: 100px;
}

/* Menü */
#sp-header :is(
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span
),
.offcanvas-menu :is(
  ul.menu > li > a,
  ul.menu > li > span,
  ul.menu li ul li a,
  ul.menu li ul li span
) {
  font-size: 18px !important;
  text-transform: uppercase !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--kw-red) !important;
  font-family: "Karla", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* Link-Hover: Linie von links nach rechts in aktueller Linkfarbe */
body a:not(.btn):not([class*="btn"]):not(.readmore):not(.read-more):not(:has(img)),
#sp-header :is(
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
),
.offcanvas-menu :is(
  ul.menu > li > a,
  ul.menu li ul li a
) {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--kw-link-line-height);
  transition: color 0.2s ease, background-size 0.25s ease;
}

body a:not(.btn):not([class*="btn"]):not(.readmore):not(.read-more):not(:has(img)):is(:hover, :focus-visible),
#sp-header :is(
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
):is(:hover, :focus-visible),
.offcanvas-menu :is(
  ul.menu > li > a,
  ul.menu li ul li a
):is(:hover, :focus-visible) {
  background-size: 100% var(--kw-link-line-height);
}

/* Menü-Hover separat positionieren, damit die Linie direkt unter dem Text sitzt */
#sp-header .sp-megamenu-parent > li > a {
  position: relative;
  background-image: none !important;
}

#sp-header .sp-megamenu-parent > li > a::after {
  position: absolute;
  right: 15px;
  bottom: 25px;
  left: 15px;
  height: var(--kw-link-line-height);
  content: "";
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

#sp-header .sp-megamenu-parent > li > a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  position: relative;
  background-image: none !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: var(--kw-link-line-height);
  content: "";
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

#sp-main-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kategorieüberschrift in der Blogansicht */
.view-category #sp-main-body :is(.blog, .com-content-category-blog, .article-list) > :is(
  .page-header,
  .category-title,
  h1
) {
  margin: 38px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

.view-category #sp-main-body :is(.blog, .com-content-category-blog, .article-list) > :is(
  .page-header,
  .category-title
) :is(h1, h2) {
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
}

.view-category #sp-main-body :is(
  .category-desc,
  .category-description,
  .com-content-category-blog__description
) {
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left !important;
}

.view-category #sp-main-body :is(
  .category-desc,
  .category-description,
  .com-content-category-blog__description
) p {
  margin: 0 0 10px !important;
  line-height: 1.5;
}

#sp-main-body .com-content-category-blog > :is(.page-header, .category-title, h1) {
  margin: 38px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

#sp-main-body .com-content-category-blog :is(
  .category-desc,
  .category-description,
  .com-content-category-blog__description
) {
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Einzelartikel */
.view-article #sp-main-body :is(.article-details, .com-content-article, .item-page) {
  margin-top: 50px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--kw-card-background);
  border-radius: var(--kw-card-radius);
  box-shadow: var(--kw-card-shadow);
}

/*
 * Blogkarten für Joomla-Core- und Helix-Ultimate-Ausgaben.
 * Die Karten werden zu Flex-Containern und füllen dadurch ihre jeweilige
 * Grid-/Bootstrap-Spalte vollständig aus.
 */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(.blog-item, .article-list .article) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-bottom: var(--kw-card-gap);
  padding: var(--kw-card-padding);
  align-self: stretch;
  overflow: hidden;
  background: var(--kw-card-background);
  border-radius: var(--kw-card-radius);
  box-shadow: var(--kw-card-shadow);
}

/* Alle Spalten einer Zeile werden auf die Höhe des längsten Artikels gestreckt. */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(.blog-items, .items-row, .article-list > .row) {
  --bs-gutter-x: var(--kw-blog-column-gap);
  align-items: stretch;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-items:not(.row),
  .com-content-category-blog__items:not(.row)
) {
  column-gap: var(--kw-blog-column-gap);
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-items > .item,
  .blog-items > [class*="col-"],
  .items-row > [class*="col-"],
  .items-row > .item,
  .article-list > .row > [class*="col-"],
  .com-content-category-blog__items > .com-content-category-blog__item
) {
  display: flex;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item .item-content,
  .blog-item .article-body,
  .blog-item .article-introtext,
  .blog-item .item-introtext,
  .article-list .article .article-body,
  .article-list .article .article-introtext,
  .com-content-category-blog__item .item-content,
  .com-content-category-blog__item .article-body,
  .com-content-category-blog__item .article-introtext
) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

#sp-main-body .com-content-category-blog :is(.blog-items, .items-row, .article-list > .row) {
  --bs-gutter-x: var(--kw-blog-column-gap);
  align-items: stretch;
}

#sp-main-body .com-content-category-blog :is(
  .blog-item,
  .article-list .article
) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  align-self: stretch;
}

#sp-main-body .com-content-category-blog :is(
  .blog-item .item-content,
  .blog-item .article-body,
  .blog-item .article-introtext,
  .blog-item .item-introtext,
  .article-list .article .article-body,
  .article-list .article .article-introtext
) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

/* Verlinkte Überschriften in Blog- und Einzelartikeln */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(h1, h2, h3, h4, h5, h6) a {
  color: var(--kw-red) !important;
  font-family: "Karla", sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(h1, h2, h3, h4, h5, h6) a:is(:hover, :focus-visible) {
  color: var(--kw-red-dark) !important;
}

/* Weiterlesen-Bereich immer am unteren Kartenrand */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .article-footer-wrap,
  .readmore,
  .read-more,
  .btn-readmore,
  .article-readmore,
  .article-read-more
) {
  margin-top: auto !important;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item .readmore,
  .blog-item .read-more,
  .blog-item .btn-readmore,
  .blog-item .article-readmore,
  .blog-item .article-read-more,
  .article-list .article .readmore,
  .article-list .article .read-more,
  .article-list .article .btn-readmore,
  .article-list .article-readmore,
  .article-list .article-read-more
) {
  width: 100%;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding-top: var(--kw-readmore-gap) !important;
}

#sp-main-body .com-content-category-blog :is(
  .article-footer-wrap,
  .readmore,
  .read-more,
  .btn-readmore,
  .article-readmore,
  .article-read-more
) {
  margin-top: auto !important;
}

#sp-main-body .com-content-category-blog :is(
  .blog-item .readmore,
  .blog-item .read-more,
  .blog-item .btn-readmore,
  .blog-item .article-readmore,
  .blog-item .article-read-more,
  .article-list .article .readmore,
  .article-list .article .read-more,
  .article-list .article .btn-readmore,
  .article-list .article-readmore,
  .article-list .article-read-more
) {
  width: 100%;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding-top: var(--kw-readmore-gap) !important;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item .readmore a,
  .blog-item .read-more a,
  .blog-item .btn-readmore a,
  .blog-item a.readmore,
  .blog-item a.read-more,
  .blog-item a.btn-readmore,
  .blog-item .article-readmore a,
  .blog-item .article-read-more a,
  .article-list .article-readmore a,
  .article-list .article-read-more a,
  .article-list .article a.readmore,
  .article-list .article a.read-more,
  .article-list .article a.btn-readmore,
  .article-list .article-footer-wrap a.btn
) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 40px;
  padding: 8px 18px;
  color: var(--kw-text) !important;
  background-color: var(--kw-button-background) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 4px;
  text-align: center;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item .readmore a,
  .blog-item .read-more a,
  .blog-item .btn-readmore a,
  .blog-item a.readmore,
  .blog-item a.read-more,
  .blog-item a.btn-readmore,
  .blog-item .article-readmore a,
  .blog-item .article-read-more a,
  .article-list .article-readmore a,
  .article-list .article-read-more a,
  .article-list .article a.readmore,
  .article-list .article a.read-more,
  .article-list .article a.btn-readmore,
  .article-list .article-footer-wrap a.btn
):is(:hover, :focus-visible) {
  color: #fff !important;
  background-color: var(--kw-button-hover) !important;
  background-image: none !important;
}

/* Joomla-Einleitungsbild und Beitragsbild */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(
  .item-image img,
  .article-intro-image img,
  .article-full-image img,
  .intro-image img,
  .full-image img
) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 20px !important;
  border-radius: 6px;
}

/* Bilder im Artikelinhalt behalten ihre im Artikel gesetzten Größen */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page
) :is(.article-body, .com-content-article__body, .item-page, .entry-content) img {
  max-width: 100%;
}

/* Float-Klassen nur bei Joomla-Einleitungsbild und Beitragsbild neutralisieren */
#sp-main-body :is(
  .item-image.float-start,
  .item-image.float-end,
  .article-intro-image.float-start,
  .article-intro-image.float-end,
  .article-full-image.float-start,
  .article-full-image.float-end,
  .intro-image.float-start,
  .intro-image.float-end,
  .full-image.float-start,
  .full-image.float-end
) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
}

/* Einheitliche Innenabstände für Artikelinhalte */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(p:not(.readmore):not(.read-more), ul, ol, blockquote) {
  margin-right: var(--kw-content-spacing);
  margin-bottom: 20px;
  margin-left: var(--kw-content-spacing);
  line-height: 1.7;
}

/* Blogkarten haben bereits eigenes Padding; zusätzliche 30-px-Ränder entfallen. */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article
) :is(p:not(.readmore):not(.read-more), ul, ol, blockquote) {
  margin-right: 0 !important;
  margin-bottom: 16px;
  margin-left: 0 !important;
  line-height: 1.55;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article
) :is(h1, h2, h3, h4, h5, h6),
#sp-main-body .com-content-category-blog :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(h1, h2, h3, h4, h5, h6) {
  margin: 20px 0 var(--kw-blog-title-gap) !important;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article
) :is(ul, ol) {
  padding-left: 1.25em;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(h1, h2, h3, h4, h5, h6) {
  margin-right: var(--kw-content-spacing);
  margin-left: var(--kw-content-spacing);
}

/* Beitragsinformationen */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(.article-info, .article-info-term, .tags, .pagenavigation, .icons) {
  margin-right: 20px;
  margin-left: 20px;
}

/* Kategorie-/Beitragsinfos in Blogkarten linksbündig zur Überschrift und zum Text */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(
  .article-info,
  .article-info-term,
  .category-name,
  .parent-category-name,
  .article-category,
  .tags
) {
  margin: 0 0 var(--kw-blog-category-gap) !important;
  padding: 0 !important;
  line-height: 1.25;
  text-align: left !important;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(.article-info dd, .article-info dt, .article-info li) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
}

#sp-main-body .com-content-category-blog :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(.article-info, .category-name, .parent-category-name, .article-category) {
  margin: 0 0 var(--kw-blog-category-gap) !important;
  padding: 0 !important;
  line-height: 1.25;
  text-align: left !important;
}

/* Tabellen */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) table {
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  border-collapse: collapse;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) :is(th, td) {
  padding: 10px;
}

/* Inhaltsverzeichnis und Navigation innerhalb eines Artikels */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) nav {
  margin: 0 20px 20px;
}

@media (max-width: 768px) {
  :root {
    --kw-card-radius: 10px;
    --kw-card-padding: 15px;
    --kw-content-spacing: 10px;
  }

  :is(.view-category, .com-content-category-blog) #sp-main-body :is(.blog-item, .article-list .article) {
    height: auto;
    padding: var(--kw-card-padding);
  }
}

/* Blendet das Featured-Badge in der Beitragsübersicht und Detailansicht aus */
.featured-article-badge,
.article-details .featured-article-badge {
  display: none !important;
}

/* Blogkarten-Bilder bündig bis an den Kartenrand */
:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(
  .item-image,
  .article-intro-image,
  .article-full-image,
  .intro-image,
  .full-image
),
#sp-main-body .com-content-category-blog :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(
  .item-image,
  .article-intro-image,
  .article-full-image,
  .intro-image,
  .full-image
) {
  width: calc(100% + var(--kw-card-padding) + var(--kw-card-padding)) !important;
  max-width: calc(100% + var(--kw-card-padding) + var(--kw-card-padding)) !important;
  margin: calc(-1 * var(--kw-card-padding)) calc(-1 * var(--kw-card-padding)) var(--kw-blog-image-gap) !important;
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: var(--kw-card-radius) var(--kw-card-radius) 0 0;
  box-shadow: none !important;
}

:is(.view-category, .com-content-category-blog) #sp-main-body :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(
  .item-image img,
  .article-intro-image img,
  .article-full-image img,
  .intro-image img,
  .full-image img
),
#sp-main-body .com-content-category-blog :is(
  .blog-item,
  .article-list .article,
  .com-content-category-blog__item
) :is(
  .item-image img,
  .article-intro-image img,
  .article-full-image img,
  .intro-image img,
  .full-image img
) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: var(--kw-card-radius) var(--kw-card-radius) 0 0;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Schlagwörter */
#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) .tags {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) .tags li {
  margin: 0 6px 6px 0 !important;
  padding-left: 0 !important;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) .tags :is(a, .btn, .badge) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  border-radius: 4px !important;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) .tags :is(a, .btn, .badge) {
  text-decoration: none !important;
  background-image: linear-gradient(var(--kw-red), var(--kw-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--kw-link-line-height);
  transition: color 0.2s ease, background-size 0.25s ease, background-color 0.2s ease;
}

#sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page,
  .blog-item,
  .article-list .article
) .tags :is(a, .btn, .badge):is(:hover, :focus-visible) {
  background-size: 100% var(--kw-link-line-height);
}

@media (max-width: 768px) {
  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.15 !important;
  }

  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h1 {
    font-size: 36px !important;
  }

  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h2 {
    font-size: 30px !important;
  }

  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h3 {
    font-size: 24px !important;
  }
}

/* Artikelansicht: H1-Überschriften kompakter */
.view-article #sp-main-body :is(
  .article-details,
  .com-content-article,
  .item-page
) h1 {
  font-size: 44px !important;
  line-height: 1.12 !important;
}

@media (max-width: 1199.98px) {
  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h1 {
    font-size: 38px !important;
  }
}

@media (max-width: 768px) {
  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 575.98px) {
  .view-article #sp-main-body :is(
    .article-details,
    .com-content-article,
    .item-page
  ) h1 {
    font-size: 30px !important;
  }
}