/**
 * TFK headline typography.
 *
 * Local variable font file:
 * themes/custom/themag_st/assets/fonts/plus-jakarta-sans/
 * plus-jakarta-sans-variable.ttf
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src:
    url("../fonts/plus-jakarta-sans/plus-jakarta-sans-variable.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --tfk-font-heading:
    "Plus Jakarta Sans",
    var(--tfk-font-body);

  --tfk-editorial-link: #79a95a;
  --tfk-editorial-link-hover: #5f8f42;
  --tfk-badge-surface-mix: #ffffff;
  --tfk-badge-text-mix: #2a2520;
  --tfk-format-badge-bg: rgba(42, 37, 32, 0.06);
  --tfk-format-badge-border: rgba(42, 37, 32, 0.08);
  --tfk-format-badge-text: rgba(42, 37, 32, 0.78);
}

:root.themag-dark {
  --tfk-editorial-link:
    color-mix(in srgb, #79a95a 76%, #ffffff);

  --tfk-editorial-link-hover:
    color-mix(in srgb, #79a95a 58%, #ffffff);

  --tfk-badge-surface-mix:
    var(--mag-bg-default);

  --tfk-badge-text-mix:
    #ffffff;

  --tfk-format-badge-bg:
    rgba(255, 255, 255, 0.10);

  --tfk-format-badge-border:
    rgba(255, 255, 255, 0.16);

  --tfk-format-badge-text:
    var(--mag-text-primary);
}

/* Editorial-Fließtext */
.node__content .field--name-body,
.node__content .field--type-text-with-summary,
.text-formatted {
  max-width: 44rem;
}

.node__content .field--name-body p,
.node__content .field--type-text-with-summary p,
.text-formatted p {
  font-family: var(--tfk-font-body);
  font-size: 1.14rem;
  line-height: 1.57;
  color: var(--mag-text-primary);
  margin: 0 0 1.65rem;
  letter-spacing: 0;
}

.node__content .field--name-body p:last-child,
.node__content .field--type-text-with-summary p:last-child,
.text-formatted p:last-child {
  margin-bottom: 0;
}

/* Links im Fließtext */
.node__content .field--name-body p a,
.node__content .field--type-text-with-summary p a,
.text-formatted p a {
  color: var(--tfk-editorial-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.node__content .field--name-body p a:hover,
.node__content .field--type-text-with-summary p a:hover,
.text-formatted p a:hover {
  color: var(--tfk-editorial-link-hover);
}

/* Überschriften im Artikelkontext etwas harmonischer */
.node__content .field--name-body h2,
.node__content .field--type-text-with-summary h2,
.text-formatted h2 {
  font-family: var(--tfk-font-heading);
  font-size: 2.05rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--mag-headline);
  margin: 0 0 1.15rem;
}

/* Mobile */
@media (max-width: 767.98px) {
  .node__content .field--name-body,
  .node__content .field--type-text-with-summary,
  .text-formatted {
    max-width: 100%;
  }

  .node__content .field--name-body p,
  .node__content .field--type-text-with-summary p,
  .text-formatted p {
    font-size: 1.04rem;
    line-height: 1.72;
    margin-bottom: 1.3rem;
  }

  .node__content .field--name-body h2,
  .node__content .field--type-text-with-summary h2,
  .text-formatted h2 {
    font-size: 1.7rem;
  }
}

/* Artikelüberschrift h1 */

h1.article-title,
.article-title {
  font-family: var(--tfk-font-heading);
  font-weight: 700;
  font-size: 2.45rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--mag-headline);
}
@media (min-width: 992px) {
  h1.article-title,
  .article-title {
    font-size: 2.85rem;
  }
}

/* Kapitelüberschrift h2 */

.node__content .field--name-body h2,
.node__content .field--type-text-with-summary h2,
.text-formatted h2 {
  font-family: var(--tfk-font-heading);
  font-size: 1.72rem;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mag-headline);
  margin: 2rem 0 0.8rem;
}

@media (max-width: 767.98px) {
  .node__content .field--name-body h2,
  .node__content .field--type-text-with-summary h2,
  .text-formatted h2 {
    font-size: 1.48rem;
    line-height: 1.26;
    margin: 1.65rem 0 0.7rem;
  }
}

/* Bullet Points im Editor */

.node__content .field--name-body ul,
.node__content .field--type-text-with-summary ul,
.text-formatted ul,
.node__content .field--name-body ol,
.node__content .field--type-text-with-summary ol,
.text-formatted ol {
  margin: 0.4rem 0 1.5rem;
  padding-left: 1.35rem;
}

.node__content .field--name-body li,
.node__content .field--type-text-with-summary li,
.text-formatted li {
  font-family: var(--tfk-font-body);
  font-size: 1.14rem;
  line-height: 1.2;
  color: var(--mag-text-primary);
  margin-bottom: 0.42rem;
}

.node__content .field--name-body li::marker,
.node__content .field--type-text-with-summary li::marker,
.text-formatted li::marker {
  color: var(--mag-text-secondary);
}

@media (max-width: 767.98px) {
  .node__content .field--name-body ul,
  .node__content .field--type-text-with-summary ul,
  .text-formatted ul,
  .node__content .field--name-body ol,
  .node__content .field--type-text-with-summary ol,
  .text-formatted ol {
    padding-left: 1.2rem;
  }

  .node__content .field--name-body li,
  .node__content .field--type-text-with-summary li,
  .text-formatted li {
    font-size: 1.04rem;
    line-height: 1.55;
  }
}

/* Fließtext */
.node__content .field--name-body p,
.node__content .field--type-text-with-summary p,
.text-formatted p {
  line-height: 1.57;
}

/* Listen */
.node__content .field--name-body li,
.node__content .field--type-text-with-summary li,
.text-formatted li {
  line-height: 1.2;
}

/* Lead - Text */

.node__content .field--name-field-lead,
.node__content .article-lead,
.node__content .lead {
  font-family: var(--tfk-font-body);
  font-size: 1.42rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mag-text-secondary);
  max-width: 44rem;
  margin: 2rem 0 2.1rem;
}

.node__content .field--name-field-lead p,
.node__content .article-lead p,
.node__content .lead p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
}

@media (max-width: 767.98px) {
  .node__content .field--name-field-lead,
  .node__content .article-lead,
  .node__content .lead {
    font-size: 1.18rem;
    line-height: 1.48;
    margin: 1.5rem 0 1.7rem;
    max-width: 100%;
  }
}


/* ========================================
   Artikel Views 
   - Landingpages
======================================== */


/* Artikel Bilder */

.image.teaser__image,
.image.teaser__image > a,
.image.teaser__image .field--name-field-teaser-media,
.image.teaser__image .field--name-field-image {
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.image.teaser__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Artikel Überschriften */


.teaser__headline,
.teaser__headline a,
.teaser__headline .field--name-title {
  font-family: var(--tfk-font-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mag-headline);
}

/*
 * TheMAG highlights card and item headlines with a dark background on hover.
 * The title field is rendered as a nested span and therefore needs the same
 * hover/focus color as the surrounding link.
 */
.teaser--card .teaser__headline a:hover,
.teaser--card .teaser__headline a:focus-visible,
.teaser--item .teaser__headline a:hover,
.teaser--item .teaser__headline a:focus-visible {
  color: var(--mag-headline-hover);
  background-color: var(--mag-headline-hover-bg);
}

.teaser--card
  .teaser__headline
  a:hover
  .field--name-title,
.teaser--card
  .teaser__headline
  a:focus-visible
  .field--name-title,
.teaser--item
  .teaser__headline
  a:hover
  .field--name-title,
.teaser--item
  .teaser__headline
  a:focus-visible
  .field--name-title {
  color: var(--mag-headline-hover);
}

.teaser--medium-card .teaser__headline {
  font-size: 1.42rem;
  margin-bottom: 0.4rem;
}

@media (min-width: 992px) {
  .teaser--medium-card .teaser__headline {
    font-size: 1.34rem;
  }
}

/* Artikel Überschriften - Runde Ecken - Bei teaser--small-compact */

article.teaser--compact.teaser--small-compact {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--small-compact .teaser__media,
article.teaser--compact.teaser--small-compact .teaser__image,
article.teaser--compact.teaser--small-compact .teaser__image > a,
article.teaser--compact.teaser--small-compact .teaser__image img {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--small-compact .teaser__headline,
article.teaser--compact.teaser--small-compact .teaser__headline a,
article.teaser--compact.teaser--small-compact .teaser__headline .field--name-title,
article.teaser--compact.teaser--small-compact .teaser__channel a,
article.teaser--compact.teaser--small-compact .teaser__authored,
article.teaser--compact.teaser--small-compact .teaser__authored a,
article.teaser--compact.teaser--small-compact .date,
article.teaser--compact.teaser--small-compact .author {
  color: #ffffff;
}

/* Artikel Überschriften - Runde Ecken - Bei teaser--medium-compact */

article.teaser--compact.teaser--medium-compact {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--medium-compact .teaser__media,
article.teaser--compact.teaser--medium-compact .teaser__image,
article.teaser--compact.teaser--medium-compact .teaser__image > a,
article.teaser--compact.teaser--medium-compact .teaser__image img {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--medium-compact .teaser__headline,
article.teaser--compact.teaser--medium-compact .teaser__headline a,
article.teaser--compact.teaser--medium-compact .teaser__headline .field--name-title,
article.teaser--compact.teaser--medium-compact .teaser__channel a,
article.teaser--compact.teaser--medium-compact .teaser__authored,
article.teaser--compact.teaser--medium-compact .teaser__authored a,
article.teaser--compact.teaser--medium-compact .date,
article.teaser--compact.teaser--medium-compact .author {
  color: #ffffff;
}

/* Artikel Überschriften - Runde Ecken - Bei teaser--large-compact */

article.teaser--compact.teaser--large-compact {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--large-compact .teaser__media,
article.teaser--compact.teaser--large-compact .teaser__image,
article.teaser--compact.teaser--large-compact .teaser__image > a,
article.teaser--compact.teaser--large-compact .teaser__image picture,
article.teaser--compact.teaser--large-compact .teaser__image img {
  border-radius: 14px;
  overflow: hidden;
}

article.teaser--compact.teaser--large-compact .teaser__headline,
article.teaser--compact.teaser--large-compact .teaser__headline a,
article.teaser--compact.teaser--large-compact .teaser__headline .field--name-title {
  color: #ffffff;
}

/* Artikel Karten - Rahmen mit runden oberen Ecken - Bei teaser--medium-card-square-image */

article.teaser--card.teaser--bordered.teaser--medium-card-square-image {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

article.teaser--card.teaser--bordered.teaser--medium-card-square-image .teaser__media,
article.teaser--card.teaser--bordered.teaser--medium-card-square-image .teaser__image,
article.teaser--card.teaser--bordered.teaser--medium-card-square-image .teaser__image > a,
article.teaser--card.teaser--bordered.teaser--medium-card-square-image .teaser__image img {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}


/* Artikel Karten - Channel und Beitragsformat */

/* Artikel Karten - Channel und Beitragsformat */
/* Einheitliches Label-System für:
   - teaser--medium-card
   - teaser--medium-card-square-image
   - teaser--small-item
   - teaser--medium-item
   - teaser--small-compact
   - teaser--medium-compact
   - teaser--large-compact
*/

/* =========================
   Gemeinsame Meta-Struktur
   ========================= */

.teaser--medium-card .teaser-meta,
.teaser--medium-card-square-image .teaser-meta,
.teaser--small-item .teaser-meta--item,
.teaser--medium-item .teaser-meta--item,
.teaser--small-compact .teaser-meta--compact,
.teaser--medium-compact .teaser-meta--compact,
.teaser--large-compact .teaser-meta--large-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.teaser--medium-card .teaser-meta,
.teaser--medium-card-square-image .teaser-meta,
.teaser--medium-item .teaser-meta--item {
  margin: 0 0 6px 0;
}

.teaser--small-item .teaser-meta--item,
.teaser--small-compact .teaser-meta--compact,
.teaser--medium-compact .teaser-meta--compact {
  margin: 0 0 4px 0;
}

.teaser--large-compact .teaser-meta--large-compact {
  justify-content: left;
  align-items: center;
  gap: 6px;
  margin: 0 0 .6667rem 0;
}

.teaser--medium-card .teaser-meta__channel,
.teaser--medium-card .teaser-meta__format,
.teaser--medium-card-square-image .teaser-meta__channel,
.teaser--medium-card-square-image .teaser-meta__format,
.teaser--small-item .teaser-meta__channel,
.teaser--small-item .teaser-meta__format,
.teaser--medium-item .teaser-meta__channel,
.teaser--medium-item .teaser-meta__format,
.teaser--small-compact .teaser-meta__channel,
.teaser--small-compact .teaser-meta__format,
.teaser--medium-compact .teaser-meta__channel,
.teaser--medium-compact .teaser-meta__format,
.teaser--large-compact .teaser-meta__channel,
.teaser--large-compact .teaser-meta__format {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.teaser--medium-card .teaser-meta__channel .field,
.teaser--medium-card .teaser-meta__format .field,
.teaser--medium-card .teaser-meta__channel .field__item,
.teaser--medium-card .teaser-meta__format .field__item,
.teaser--medium-card-square-image .teaser-meta__channel .field,
.teaser--medium-card-square-image .teaser-meta__format .field,
.teaser--medium-card-square-image .teaser-meta__channel .field__item,
.teaser--medium-card-square-image .teaser-meta__format .field__item,
.teaser--small-item .teaser-meta__channel .field,
.teaser--small-item .teaser-meta__format .field,
.teaser--small-item .teaser-meta__channel .field__item,
.teaser--small-item .teaser-meta__format .field__item,
.teaser--medium-item .teaser-meta__channel .field,
.teaser--medium-item .teaser-meta__format .field,
.teaser--medium-item .teaser-meta__channel .field__item,
.teaser--medium-item .teaser-meta__format .field__item,
.teaser--small-compact .teaser-meta__channel .field,
.teaser--small-compact .teaser-meta__format .field,
.teaser--small-compact .teaser-meta__channel .field__item,
.teaser--small-compact .teaser-meta__format .field__item,
.teaser--medium-compact .teaser-meta__channel .field,
.teaser--medium-compact .teaser-meta__format .field,
.teaser--medium-compact .teaser-meta__channel .field__item,
.teaser--medium-compact .teaser-meta__format .field__item,
.teaser--large-compact .teaser-meta__channel .field,
.teaser--large-compact .teaser-meta__format .field,
.teaser--large-compact .teaser-meta__channel .field__item,
.teaser--large-compact .teaser-meta__format .field__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* =========================
   Headline-Größen aus Original teaser.css
   ========================= */

.teaser--medium-card .teaser__headline {
  font-size: 1.6667rem;
}

@media (min-width: 992px) {
  .teaser--medium-card .teaser__headline {
    font-size: 1.4rem;
  }
}

@media (min-width: 992px) {
  .teaser--medium-card-square-image .teaser__headline {
    font-size: 1.7rem;
  }
}

.teaser--small-item .teaser__headline {
  font-size: 1.4rem;
}

@media (min-width: 768px) {
  .teaser--small-item .teaser__headline {
    font-size: 1.222rem;
  }
}

@media (min-width: 768px) {
  .teaser--medium-item .teaser__headline {
    font-size: 1.4444rem;
  }
}

.teaser--small-compact .teaser__headline {
  font-size: 1.222rem;
}

@media (min-width: 992px) {
  .teaser--medium-compact .teaser__headline {
    font-size: 1.6667rem;
  }
}

@media (min-width: 768px) {
  .teaser--large-compact .teaser__headline {
    font-size: 2.444rem;
    line-height: 1;
  }
}

/* =========================
   Headline-Link-Verhalten
   ========================= */

.teaser--medium-card .teaser__headline a,
.teaser--medium-card-square-image .teaser__headline a,
.teaser--small-item .teaser__headline a,
.teaser--medium-item .teaser__headline a,
.teaser--small-compact .teaser__headline a,
.teaser--medium-compact .teaser__headline a,
.teaser--large-compact .teaser__headline a {
  text-decoration: none;
}

/* =========================
   Large compact Ergänzungen
   ========================= */

.teaser--large-compact .teaser__headline {
  margin: 0;
}

@media (min-width: 768px) {
  .teaser--large-compact .teaser__content {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
  }

  .teaser--large-compact .teaser__body,
  .teaser--large-compact .teaser__body .field--type-text-with-summary {
    display: block;
    margin-top: .6rem;
    padding-left: 4rem;
    padding-right: 4rem;
    font-size: .8889rem;
    line-height: 1.2rem;
  }
}

.teaser--large-compact .teaser__authored {
  justify-content: center;
}

/* =========================
   Medium item body aus Original teaser.css
   ========================= */

@media (min-width: 768px) {
  .teaser--medium-item .teaser__body {
    margin-top: .5rem;
    font-size: .7778rem;
  }
}

/* =========================
   Compact Meta-Abstände
   ========================= */

.teaser--small-compact .teaser-meta__channel + .teaser-meta__format,
.teaser--medium-compact .teaser-meta__channel + .teaser-meta__format,
.teaser--large-compact .teaser-meta__channel + .teaser-meta__format {
  margin-left: 4px;
}

.teaser--small-compact .teaser-meta__channel + .teaser-meta__format {
  margin-top: 9px;
}

.teaser--large-compact .teaser-meta__channel + .teaser-meta__format {
  margin-top: 9px;
}

/* =========================
   Channel Badge für Standard-Teaser
   ========================= */

.teaser--medium-card .field--name-field-channel .field__item,
.teaser--medium-card-square-image .field--name-field-channel .field__item,
.teaser--small-item .field--name-field-channel .field__item,
.teaser--medium-item .field--name-field-channel .field__item,
.teaser--medium-compact .field--name-field-channel .field__item {
  margin: 0;
}

.teaser--medium-card .field--name-field-channel .channel-badge,
.teaser--medium-card-square-image .field--name-field-channel .channel-badge,
.teaser--small-item .field--name-field-channel .channel-badge,
.teaser--medium-item .field--name-field-channel .channel-badge,
.teaser--medium-compact .field--name-field-channel .channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--channel-color) 12%, var(--tfk-badge-surface-mix));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--channel-color) 16%, var(--tfk-badge-surface-mix));
}

.teaser--medium-card .field--name-field-channel .channel-badge a,
.teaser--medium-card-square-image .field--name-field-channel .channel-badge a,
.teaser--small-item .field--name-field-channel .channel-badge a,
.teaser--medium-item .field--name-field-channel .channel-badge a,
.teaser--medium-compact .field--name-field-channel .channel-badge a {
  color: color-mix(in srgb, var(--channel-color) 58%, var(--tfk-badge-text-mix));
  text-decoration: none;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaser--medium-card .field--name-field-channel .channel-badge i,
.teaser--medium-card-square-image .field--name-field-channel .channel-badge i,
.teaser--small-item .field--name-field-channel .channel-badge i,
.teaser--medium-item .field--name-field-channel .channel-badge i,
.teaser--medium-compact .field--name-field-channel .channel-badge i {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 999px;
  margin: 0;
  flex: 0 0 auto;
  opacity: 1 !important;
  background-color: var(--channel-color);
}

.teaser--medium-card .field--name-field-channel .channel-badge i::before,
.teaser--medium-card .field--name-field-channel .channel-badge i::after,
.teaser--medium-card-square-image .field--name-field-channel .channel-badge i::before,
.teaser--medium-card-square-image .field--name-field-channel .channel-badge i::after,
.teaser--small-item .field--name-field-channel .channel-badge i::before,
.teaser--small-item .field--name-field-channel .channel-badge i::after,
.teaser--medium-item .field--name-field-channel .channel-badge i::before,
.teaser--medium-item .field--name-field-channel .channel-badge i::after,
.teaser--medium-compact .field--name-field-channel .channel-badge i::before,
.teaser--medium-compact .field--name-field-channel .channel-badge i::after {
  display: none;
}

/* =========================
   Small compact: Channel + Format
   ========================= */

.teaser--small-compact .teaser-meta__channel,
.teaser--small-compact .teaser-meta__format,
.teaser--small-compact .field--name-field-beitragsformat-ref,
.teaser--small-compact .field--name-field-beitragsformat-ref .field__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.teaser--small-compact .teaser__channel {
  --badge-color: rgb(157, 244, 17);
  --badge-bg: rgba(157, 244, 17, 0.12);
  --badge-border: rgba(157, 244, 17, 0.16);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--badge-bg);
  box-shadow: inset 0 0 0 1px var(--badge-border);
}

.teaser--small-compact .teaser__channel a {
  color: var(--badge-color) !important;
  text-decoration: none !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaser--small-compact .teaser__channel i {
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  margin: 0;
  border-radius: 999px;
  flex: 0 0 auto;
}

.teaser--small-compact .teaser__channel i::before,
.teaser--small-compact .teaser__channel i::after {
  display: none;
}

/* small-compact Format */
.teaser--small-compact .field--name-field-beitragsformat-ref a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: #fff !important;
  text-decoration: none;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* =========================
   Medium compact: Channel + Format
   ========================= */

.teaser--medium-compact .teaser-meta__channel,
.teaser--medium-compact .teaser-meta__format,
.teaser--medium-compact .field--name-field-beitragsformat-ref,
.teaser--medium-compact .field--name-field-beitragsformat-ref .field__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.teaser--medium-compact .teaser__channel {
  --badge-color: rgb(157, 244, 17);
  --badge-bg: rgba(157, 244, 17, 0.16);
  --badge-border: rgba(157, 244, 17, 0.34);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--badge-bg);
  box-shadow: inset 0 0 0 1px var(--badge-border);
  color: var(--badge-color) !important;
}

.teaser--medium-compact .teaser__channel a,
.teaser--medium-compact .teaser-meta__channel a {
  color: inherit !important;
  text-decoration: none !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaser--medium-compact .teaser__channel i {
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  margin: 0;
  border-radius: 999px;
  flex: 0 0 auto;
}

.teaser--medium-compact .teaser__channel i::before,
.teaser--medium-compact .teaser__channel i::after {
  display: none;
}

.teaser--medium-compact .teaser-meta__channel + .teaser-meta__format {
  margin-top: 9px;
}

/* medium-compact Format */
.teaser--medium-compact .field--name-field-beitragsformat-ref a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: #fff !important;
  text-decoration: none;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* =========================
   Large compact: Channel aus View Custom Text
   ========================= */

.teaser--large-compact .teaser-meta__channel,
.teaser--large-compact .teaser-meta__format,
.teaser--large-compact .field--name-field-beitragsformat-ref,
.teaser--large-compact .field--name-field-beitragsformat-ref .field__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.teaser--large-compact .teaser__channel,
.teaser--large-compact .field--name-field-beitragsformat-ref a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}

.teaser--large-compact .teaser__channel {
  gap: 6px;
  background-color: color-mix(in srgb, rgb(191, 88, 64) 16%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(191, 88, 64) 28%, white);
}

.teaser--large-compact .teaser__channel a {
  display: inline-block;
  color: rgb(191, 88, 64) !important;
  text-decoration: none !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaser--large-compact .teaser__channel i {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  margin: 0;
  border-radius: 999px;
  flex: 0 0 auto;
  background-color: rgb(191, 88, 64);
}

.teaser--large-compact .teaser__channel i::before,
.teaser--large-compact .teaser__channel i::after {
  display: none;
}

/* =========================
   Beitragsformat / Content-Label
   ========================= */

.teaser--medium-card .field--name-field-beitragsformat-ref a,
.teaser--medium-card-square-image .field--name-field-beitragsformat-ref a,
.teaser--small-item .field--name-field-beitragsformat-ref a,
.teaser--medium-item .field--name-field-beitragsformat-ref a,
.teaser--medium-compact .field--name-field-beitragsformat-ref a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: var(--tfk-format-badge-bg);
  box-shadow: inset 0 0 0 1px var(--tfk-format-badge-border);
  color: var(--tfk-format-badge-text);
  text-decoration: none;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;
}

.teaser--large-compact .field--name-field-beitragsformat-ref a {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* =========================
   Kleine Robustheitsregeln
   ========================= */

.teaser--medium-card .field--name-field-channel a,
.teaser--medium-card-square-image .field--name-field-channel a,
.teaser--small-item .field--name-field-channel a,
.teaser--medium-item .field--name-field-channel a,
.teaser--medium-compact .field--name-field-channel a,
.teaser--small-compact .teaser__channel a,
.teaser--large-compact .teaser__channel a,
.teaser--medium-card .field--name-field-beitragsformat-ref a,
.teaser--medium-card-square-image .field--name-field-beitragsformat-ref a,
.teaser--small-item .field--name-field-beitragsformat-ref a,
.teaser--medium-item .field--name-field-beitragsformat-ref a,
.teaser--small-compact .field--name-field-beitragsformat-ref a,
.teaser--medium-compact .field--name-field-beitragsformat-ref a,
.teaser--large-compact .field--name-field-beitragsformat-ref a {
  text-decoration: none;
}

.teaser--medium-card .field--name-field-channel,
.teaser--medium-card-square-image .field--name-field-channel,
.teaser--small-item .field--name-field-channel,
.teaser--medium-item .field--name-field-channel,
.teaser--medium-compact .field--name-field-channel,
.teaser--small-compact .teaser-meta__channel,
.teaser--large-compact .teaser-meta__channel,
.teaser--medium-card .field--name-field-beitragsformat-ref,
.teaser--medium-card-square-image .field--name-field-beitragsformat-ref,
.teaser--small-item .field--name-field-beitragsformat-ref,
.teaser--medium-item .field--name-field-beitragsformat-ref,
.teaser--small-compact .field--name-field-beitragsformat-ref,
.teaser--medium-compact .field--name-field-beitragsformat-ref,
.teaser--large-compact .field--name-field-beitragsformat-ref {
  min-width: 0;
}