/* =========================================================
   BÖDEKER – ZENTRALE JOOMLA-STYLES
   Datei: /shared-assets/joomla/common.css
   Auf allen Domains identisch; Domainwerte kommen aus der lokalen user.css
   ========================================================= */

:root {
  /* Automatisch aus der Primärfarbe abgeleitete Linien */
  --site-header-border:
    color-mix(
      in srgb,
      var(--site-primary) 14%,
      transparent
    );

  --site-border:
    color-mix(
      in srgb,
      var(--site-primary) 18%,
      transparent
    );

  --site-border-strong:
    color-mix(
      in srgb,
      var(--site-primary) 32%,
      transparent
    );

  /* Headerabmessungen */
  --site-header-height: 72px;
  --site-header-height-compact: 58px;
  --site-header-height-mobile: 72px;
  --site-header-height-mobile-compact: 58px;
  --site-header-transition: 180ms ease;

  /* Layout */
  --site-content-width: 780px;
  --site-text-width: 680px;
  --site-sidebar-width: 340px;
  --site-gap: 42px;

  --site-layout-width: calc(
    var(--site-content-width) +
    var(--site-sidebar-width) +
    var(--site-gap)
  );

  /* Formen */
  --site-radius-sm: 8px;
  --site-radius: 14px;
  --site-radius-lg: 20px;

  /* Schatten automatisch aus der Primärfarbe */
  --site-shadow-sm:
    0 4px 14px
    color-mix(
      in srgb,
      var(--site-primary-dark) 7%,
      transparent
    );

  --site-shadow:
    0 10px 28px
    color-mix(
      in srgb,
      var(--site-primary-dark) 11%,
      transparent
    );

  /* Lesefortschritt */
  --site-reading-progress-height: 4px;
}



/* =========================================================
   2. BASIS / LAYOUT
   ========================================================= */

body {
  --site-header-current-height: var(--site-header-height);

  color: var(--site-text);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--site-primary) 4%, transparent),
      transparent 34rem
    ),
    var(--site-bg);
}

body:has(.container-header.is-compact) {
  --site-header-current-height: var(--site-header-height-compact);
}

a {
  color: var(--site-primary);
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  color: var(--site-accent);
}

/* Gesamtlayout zentrieren */

.site-grid,
.grid-child {
  max-width: var(--site-layout-width);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  /*
    Cassiopeia arbeitet mit Grid-Linien. Deshalb nicht einfach auf zwei
    Spalten reduzieren, sonst kann die Sidebar über dem Content liegen.
  */

  .site-grid {
    max-width: var(--site-layout-width);
    column-gap: 0;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] minmax(0, var(--site-content-width))
      [main-end] var(--site-gap)
      [sidebar-start] minmax(0, var(--site-sidebar-width))
      [sidebar-end] minmax(0, 1fr)
      [full-end];
  }

  .container-component {
    grid-column: main-start / main-end;
    width: 100%;
    max-width: var(--site-content-width);
  }

  .container-sidebar-right,
  .sidebar-right {
    grid-column: sidebar-start / sidebar-end;
    width: 100%;
    max-width: var(--site-sidebar-width);
  }
}

/* =========================================================
   3. HEADER – LOGO, MENÜ, SUCHE UND STICKY-ZUSTAND
   Voraussetzung: „Sticky Header“ im Template-Stil aktivieren
   ========================================================= */

.container-header {
  --header-row-height: var(--site-header-height);
  --header-logo-width: var(--site-header-logo-width);
  --header-nav-offset: var(--site-header-nav-offset);

  background: var(--site-header-bg);
  color: var(--site-header-text);
  box-shadow: 0 1px 0 var(--site-header-border);

  transition:
    box-shadow var(--site-header-transition),
    background-color var(--site-header-transition);
}

.container-header.is-compact {
  --header-row-height: var(--site-header-height-compact);
  --header-logo-width: var(--site-header-logo-width-compact);
  --header-nav-offset: var(--site-header-nav-offset-compact);

  box-shadow:
    0 1px 0 var(--site-header-border),
    0 8px 24px color-mix(in srgb, var(--site-primary-dark) 8%, transparent);
}

/* Joomla setzt bei aktivierter Option beide Klassen. */
.container-header.position-sticky,
.container-header.sticky-top {
  top: 0;
  z-index: 1030;
}

.container-header a,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: var(--site-header-text);
}

.container-header nav,
.container-header .container-search {
  margin-top: 0;
}

.container-header .navbar-brand {
  margin: 0;
  padding: 0;
}

.container-header .brand-logo {
  display: inline-flex;
  align-items: center;
}

.container-header .brand-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;

  transition:
    max-width var(--site-header-transition),
    max-height var(--site-header-transition);
}

@media (min-width: 992px) {
  .container-header {
    display: grid;
    grid-template-columns:
      minmax(1rem, 1fr)
      minmax(0, var(--site-layout-width))
      minmax(1rem, 1fr);
  }

  .container-header > .grid-child:has(.navbar-brand),
  .container-header > .container-nav {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-height: var(--header-row-height);
    margin: 0;
    padding: 0;

    transition:
      min-height var(--site-header-transition),
      padding var(--site-header-transition);
  }

  /* Logo linksbündig auf derselben Flucht wie der Content. */
  .container-header > .grid-child:has(.navbar-brand) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
  }

  .container-header .navbar-brand {
    pointer-events: auto;
  }

  .container-header .brand-logo img {
    max-width: var(--header-logo-width);
    max-height: calc(var(--header-row-height) - 20px);
  }

  /* Navigation beginnt rechts neben dem Logo. */
  .container-header > .container-nav {
    display: flex;
    align-items: center;
    padding-left: var(--header-nav-offset);
  }

  .container-header > .container-nav > nav,
  .container-header > .container-nav .navbar {
    flex: 1 1 auto;
  }
}

@media (max-width: 991.98px) {
  body {
    --site-header-current-height: var(--site-header-height-mobile);
  }

  body:has(.container-header.is-compact) {
    --site-header-current-height: var(--site-header-height-mobile-compact);
  }

  .container-header {
    --header-row-height: var(--site-header-height-mobile);
    --header-logo-width: var(--site-header-logo-width-mobile);

    position: relative;
    display: grid;
    grid-template-columns:
      1rem
      minmax(0, 1fr)
      1rem;
  }

  .container-header.is-compact {
    --header-row-height: var(--site-header-height-mobile-compact);
    --header-logo-width: var(--site-header-logo-width-mobile-compact);
  }

  /* Cassiopeia setzt den Header mobil sonst wieder auf position: relative. */
  .container-header.position-sticky,
  .container-header.sticky-top {
    position: sticky !important;
    top: 0;
  }

  .container-header > .grid-child:has(.navbar-brand),
  .container-header > .container-nav {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-height: var(--header-row-height);
    margin: 0;

    transition: min-height var(--site-header-transition);
  }

  /* Logo exakt mittig. */
  .container-header > .grid-child:has(.navbar-brand) {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px;
    pointer-events: none;
  }

  .container-header .navbar-brand {
    position: static;
    transform: none;
    pointer-events: auto;
  }

  .container-header .brand-logo img {
    max-width: var(--header-logo-width);
    max-height: calc(var(--header-row-height) - 20px);
  }

  /* Hamburger links, Suche rechts. */
  .container-header > .container-nav {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    pointer-events: none;
  }

  .container-header > .container-nav > * {
    pointer-events: auto;
  }

  .container-header > .container-nav .navbar {
    position: static;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .container-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--site-primary);
    background: transparent;
    border-color: currentColor;
  }

  .container-header .container-search {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
  }

  /* Ausgeklapptes Menü unterhalb der kompakten Headerzeile. */
  .container-header .navbar-collapse {
    position: absolute;
    top: var(--header-row-height);
    right: 0;
    left: 0;
    z-index: 1060;
    max-height: calc(100vh - var(--header-row-height));
    padding: 1rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--site-border);
    box-shadow: var(--site-shadow);
  }
}

/* =========================================================
   4. ARTIKELTYPOGRAFIE
   ========================================================= */

.com-content-article,
.article,
main .item-page {
  color: var(--site-text);
  font-size: 1.1rem;
}

/*
 * Überschriften im normalen Artikel schwarz.
 * Farbige Mitbox-Überschriften sind ausdrücklich ausgenommen.
 */

.com-content-article :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
):not(
  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4
),
.item-page :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
):not(
  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4
),
.page-header h1 {
  color: var(--site-text);
}

.com-content-article h1,
.item-page h1,
.page-header h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: var(--site-text-width);
  margin-bottom: 1rem;
}

.com-content-article h2,
.item-page h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 2.2rem;
  margin-bottom: 0.75rem;
}

.com-content-article h3,
.item-page h3 {
  font-weight: 750;
  margin-top: 1.8rem;
}

.com-content-article h4,
.com-content-article h5,
.com-content-article h6,
.item-page h4,
.item-page h5,
.item-page h6 {
  font-weight: 750;
}

.com-content-article p,
.item-page p {
  line-height: 1.72;
  margin-bottom: 1.05rem;
}

.com-content-article li,
.item-page li {
  line-height: 1.68;
  margin-bottom: 0.35rem;
}

.com-content-article > p:first-of-type,
.item-page > p:first-of-type {
  font-size: 1.06em;
  line-height: 1.72;
}

/* Lesebreite für normalen Fließtext begrenzen.
   Bewusst nicht nur direkte Kind-Elemente, weil Joomla/JCE häufig Wrapper einfügt. */

.com-content-article :where(p, ul, ol, h1, h2, h3, h4, h5, h6),
.item-page :where(p, ul, ol, h1, h2, h3, h4, h5, h6) {
  max-width: var(--site-text-width);
}

/* Breite Elemente und deren Inhalte wieder auf volle Contentbreite setzen */

.com-content-article :where(figure, .item-image, table, .site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4),
.item-page :where(figure, .item-image, table, .site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4) {
  max-width: var(--site-content-width);
}

/* Inhalte innerhalb breiter Boxen sollen nicht künstlich schmal werden */

.com-content-article :where(figure, .item-image, table, .site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .site-download-box, .article-toc, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4),
.item-page :where(figure, .item-image, table, .site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .site-download-box, .article-toc, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4) {
  width: 100%;
  max-width: var(--site-content-width);
}

/* Inhalte innerhalb breiter Boxen nutzen deren volle Innenbreite. */

.com-content-article :where(.site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4) :where(p, ul, ol, h2, h3, h4, h5, h6),
.item-page :where(.site-quicklinks, .site-impuls, .site-impuls-thinking, .pareto-impuls, .site-merksatz, .site-takeaway, .box_well, .mitbox, .mitbox_bp, .mitbox_bp2, .mitbox_bp3, .mitbox_bp4) :where(p, ul, ol, h2, h3, h4, h5, h6) {
  max-width: none;
}


/* Sprungmarken bleiben unter dem Sticky Header sichtbar. */

.com-content-article :is(h2, h3, h4, h5, h6)[id],
.item-page :is(h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: calc(var(--site-header-current-height) + 1.5rem);
}

/* =========================================================
   5. JOOMLA-/BOOTSTRAP-BUTTONS
   ========================================================= */

.btn-primary {
  color: #fff;
  background-color: var(--site-primary);
  border-color: var(--site-primary);
  border-radius: var(--site-radius-sm);
  font-weight: 750;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--site-primary) 22%, transparent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: color-mix(in srgb, var(--site-primary) 86%, black);
  border-color: color-mix(in srgb, var(--site-primary) 86%, black);
}

/* =========================================================
   ARTIKEL – KATEGORIEZEILE OBERHALB DER H1
   Diesen Block ersetzt den bisherigen .article-category-trail-Block
   in /shared-assets/joomla/common.css
   ========================================================= */

.article-category-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;

  width: fit-content;
  max-width: min(100%, var(--site-text-width));
  margin: 1.25rem 0 0.72rem;
  padding: 0.28rem;

  color: var(--site-primary-dark);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 6%, white),
      color-mix(in srgb, var(--site-primary) 2%, white)
    );
  border: 1px solid var(--site-border);
  border-radius: 999px;
  box-shadow:
    0 3px 10px
    color-mix(
      in srgb,
      var(--site-primary-dark) 6%,
      transparent
    );

  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.25;
}

.article-category-trail::before {
  content: "Thema";

  flex: 0 0 auto;
  padding: 0.34rem 0.22rem 0.34rem 0.52rem;

  color: var(--site-muted, #667085);

  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-category-trail a {
  display: inline-flex;
  align-items: center;

  min-height: 32px;
  padding: 0.34rem 0.62rem;

  color: var(--site-primary-dark);
  background: var(--site-card-bg, #fff);
  border: 1px solid
    color-mix(
      in srgb,
      var(--site-primary) 16%,
      transparent
    );
  border-radius: 999px;

  text-decoration: none;
  text-underline-offset: 0.18em;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.article-category-trail a:hover,
.article-category-trail a:focus-visible {
  color: var(--site-primary-dark);
  background:
    color-mix(
      in srgb,
      var(--site-accent) 10%,
      white
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-accent) 34%,
      transparent
    );

  text-decoration: none;
  transform: translateY(-1px);
}

.article-category-trail a:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--site-primary) 28%,
      transparent
    );
  outline-offset: 2px;
}

.article-category-trail__separator {
  color: var(--site-accent);

  font-size: 1.05em;
  font-weight: 800;
  line-height: 1;
}

/* Abstand zwischen Kategoriezeile und Joomla-Titelblock */
.article-category-trail + .page-header {
  margin-top: 0;
}

.article-category-trail + .page-header h1,
.article-category-trail + .page-header h2 {
  margin-top: 0;
}

@media (max-width: 575.98px) {
  .article-category-trail {
    gap: 0.22rem 0.32rem;
    margin-top: 1rem;
    margin-bottom: 0.58rem;
    padding: 0.22rem;

    font-size: 0.82rem;
  }

  .article-category-trail::before {
    padding-left: 0.42rem;
    font-size: 0.7rem;
  }

  .article-category-trail a {
    min-height: 30px;
    padding: 0.3rem 0.52rem;
  }
}

@media print {
  .article-category-trail {
    box-shadow: none;
  }
}


/* =========================================================
   7. LESEFORTSCHRITT
   Blueprints: Fortschrittsfarbe = Akzent-Orange
   ========================================================= */

.reading-progress {
  position: sticky;
  top: var(--reading-progress-top, 0);
  z-index: 1029;

  transition: top var(--site-header-transition);

  width: 100%;
  height: var(--site-reading-progress-height);

  pointer-events: none;
}

/* Bei aktivem Sticky Header sitzt der Balken direkt darunter. */
.container-header:is(.position-sticky, .sticky-top) + .reading-progress {
  top: var(--site-header-current-height);
}

.reading-progress__track {
  width: min(
    calc(100% - 2rem),
    var(--site-layout-width)
  );

  height: 100%;
  margin-inline: auto;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

.reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;

  background:
    var(
      --site-reading-progress,
      var(--site-accent)
    );
  border-radius: inherit;

  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.reading-progress[hidden] {
  display: none;
}

@media (max-width: 575.98px) {
  .reading-progress__track {
    width: calc(100% - 2rem);
  }
}

@media print {
  .reading-progress {
    display: none !important;
  }
}

/* =========================================================
   8. BREADCRUMBS
   Abgerundete Breadcrumb-Box in Hero-Breite
   ========================================================= */

/*
 * Die Breadcrumb-Position folgt auf Desktop derselben Grid-Spalte
 * wie der Artikel und das Hero-Bild.
 */
.container-breadcrumbs {
  justify-self: start;

  width: 100%;
  max-width: var(--site-content-width);
  margin: 0.9rem 0 0;
}

@media (min-width: 992px) {
  .container-breadcrumbs {
    grid-column: main-start / main-end;
  }
}

.container-breadcrumbs .breadcrumb,
.container-breadcrumbs .mod-breadcrumbs,
.breadcrumb.mod-breadcrumbs {
  width: 100%;
  max-width: var(--site-content-width);

  margin: 0;
  padding: 0.62rem 0.9rem;

  color: var(--site-muted);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 3%, white),
      #fff
    );

  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);

  font-size: 0.82rem;
  line-height: 1.45;
}

.breadcrumb a,
.mod-breadcrumbs a {
  color: var(--site-primary);
  font-weight: 650;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible,
.mod-breadcrumbs a:hover,
.mod-breadcrumbs a:focus-visible {
  color: var(--site-accent);
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--site-accent);
}

@media (max-width: 991.98px) {
  .container-breadcrumbs {
    max-width: 100%;
    margin-top: 0.75rem;
    padding-inline: 1rem;
  }
}

@media (max-width: 480px) {
  .container-breadcrumbs {
    padding-inline: 0.85rem;
  }

  .container-breadcrumbs .breadcrumb,
  .container-breadcrumbs .mod-breadcrumbs,
  .breadcrumb.mod-breadcrumbs {
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    font-size: 0.78rem;
  }
}

/* =========================================================
   9. SCHNELLEINSTIEG / QUICKLINKS / DREI KERNPUNKTE
   JCE-freundliche Liste mit verlinkten und unverlinkten Punkten
  Desktop: drei Spalten
  Mobil: kompakte Linkliste
   ========================================================= */

.site-quicklinks {
  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.35rem 0 1.15rem;
  overflow: hidden;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.site-quicklinks > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* Einzelner Kernpunkt */

.site-quicklinks > ul > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;

  min-width: 0;
  min-height: 64px;
  max-width: none;

  margin: 0;
  padding: 0.8rem 1rem;

  color: var(--site-primary-dark);
  border-right: 1px solid var(--site-border);

  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.3;
}

.site-quicklinks > ul > li:last-child {
  border-right: 0;
}


/* Hakenkreis bei allen Punkten */

.site-quicklinks > ul > li::before {
  content: "✓";

  display: inline-grid;
  place-items: center;

  width: 24px;
  height: 24px;

  color: var(--site-accent);
  background: #fff;

  border: 2px solid var(--site-accent);
  border-radius: 50%;

  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}


/* Verlinkte Punkte */

.site-quicklinks > ul > li > a {
  display: block;

  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.site-quicklinks > ul > li:has(> a) {
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.site-quicklinks > ul > li:has(> a):hover,
.site-quicklinks > ul > li:has(> a):focus-within {
  color: var(--site-primary);

  background:
    color-mix(
      in srgb,
      var(--site-primary) 4%,
      white
    );
}

.site-quicklinks > ul > li > a:focus-visible {
  outline:
    3px solid color-mix(
      in srgb,
      var(--site-primary) 20%,
      transparent
    );

  outline-offset: 3px;
}


/* Mobil */

@media (max-width: 767.98px) {

  .site-quicklinks {
    margin-top: 1.1rem;
    border-radius: 10px;
  }

  .site-quicklinks > ul {
    grid-template-columns: 1fr;
  }

  .site-quicklinks > ul > li {
    grid-template-columns:
      26px
      minmax(0, 1fr);

    min-height: 50px;

    padding: 0.65rem 0.85rem;

    border-right: 0;
    border-bottom: 1px solid var(--site-border);

    font-size: 0.88rem;
  }

  .site-quicklinks > ul > li:last-child {
    border-bottom: 0;
  }

  .site-quicklinks > ul > li::before {
    width: 22px;
    height: 22px;

    font-size: 0.7rem;
  }

  /* Nur verlinkte Punkte erhalten rechts einen Pfeil */

  .site-quicklinks > ul > li:has(> a) {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      16px;
  }

  .site-quicklinks > ul > li:has(> a)::after {
    content: "›";

    justify-self: end;

    color: var(--site-muted);

    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
  }
}

/* =========================================================
   10. BEITRAGS- UND ARTIKELBILDER
   Große Bilder bis 780 px, kleine Bilder bleiben klein.
   Rechts-/linksbündige Bilder können vom Text umflossen werden.
   ========================================================= */

/* Alle Artikelbilder bleiben responsiv, werden aber niemals
   pauschal auf die volle Breite vergrößert. HTML-Breiten aus
   JCE (z. B. width="180") bleiben dadurch wirksam. */

.com-content-article img,
.item-page img {
  max-width: 100%;
  height: auto;
}

/* Ein Absatz, der ausschließlich ein Bild enthält, darf die
   volle Contentbreite von 780 px nutzen. Gleiches gilt für
   ein verlinktes Einzelbild und ein einzelnes <picture>. */

.com-content-article p:has(> img:only-child),
.item-page p:has(> img:only-child),
.com-content-article p:has(> a:only-child > img:only-child),
.item-page p:has(> a:only-child > img:only-child),
.com-content-article p:has(> picture:only-child),
.item-page p:has(> picture:only-child),
.com-content-article figure:not(.item-image),
.item-page figure:not(.item-image) {
  width: 100%;
  max-width: var(--site-content-width);
  margin-top: 1.8rem;
  margin-bottom: 2rem;
}

/* Einzelbilder als Block ausgeben. Ihre natürliche oder in
   JCE festgelegte Breite bleibt erhalten. */

.com-content-article p:has(> img:only-child) > img,
.item-page p:has(> img:only-child) > img,
.com-content-article p:has(> a:only-child > img:only-child) > a,
.item-page p:has(> a:only-child > img:only-child) > a,
.com-content-article p:has(> a:only-child > img:only-child) > a > img,
.item-page p:has(> a:only-child > img:only-child) > a > img,
.com-content-article p:has(> picture:only-child) > picture,
.item-page p:has(> picture:only-child) > picture,
.com-content-article p:has(> picture:only-child) img,
.item-page p:has(> picture:only-child) img,
.com-content-article figure:not(.item-image) img,
.item-page figure:not(.item-image) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* In der Artikel-Einzelansicht bleibt das Joomla-Hero-/Beitragsbild
   780 px breit bzw. füllt auf kleineren Displays die verfügbare Breite.
   Für Vorschaubilder im Kategorie-Blog gilt die Ausnahme in Abschnitt 23. */

.item-image,
figure.item-image {
  position: relative;
  width: 100%;
  max-width: var(--site-content-width);
  margin: 1.2rem 0 1rem;
  overflow: hidden;
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.item-image img,
figure.item-image img,
.com-content-article .item-image img,
.item-page .item-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

figure.item-image figcaption,
.item-image figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  padding: 0.75rem 1rem;

  color: #fff;
    background:
    color-mix(
      in srgb,
      var(--site-media-bar, #760e0f) 86%,
      transparent
    );

  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

/* Rechtsbündig in einen Absatz integrierte Bilder. Unterstützt
   Bootstrap-, klassische JCE- und Inline-Ausrichtungen. */

.com-content-article img.float-end,
.item-page img.float-end,
.com-content-article img.right,
.item-page img.right,
.com-content-article img[style*="float: right"],
.item-page img[style*="float: right"],
.com-content-article img[style*="float:right"],
.item-page img[style*="float:right"] {
  float: right;
  max-width: min(45%, 320px);
  margin: 0.3rem 0 1rem 1.25rem;
}

/* Linksbündig umflossene Bilder. */

.com-content-article img.float-start,
.item-page img.float-start,
.com-content-article img.left,
.item-page img.left,
.com-content-article img[style*="float: left"],
.item-page img[style*="float: left"],
.com-content-article img[style*="float:left"],
.item-page img[style*="float:left"] {
  float: left;
  max-width: min(45%, 320px);
  margin: 0.3rem 1.25rem 1rem 0;
}

/* Der Absatz umfasst ein umflossenes Bild auch dann vollständig,
   wenn nur wenig Text daneben steht. */

.com-content-article p:has(img.float-end),
.item-page p:has(img.float-end),
.com-content-article p:has(img.float-start),
.item-page p:has(img.float-start),
.com-content-article p:has(img.right),
.item-page p:has(img.right),
.com-content-article p:has(img.left),
.item-page p:has(img.left),
.com-content-article p:has(img[style*="float:"]),
.item-page p:has(img[style*="float:"]) {
  display: flow-root;
}

/* Optionale Größenklassen für JCE. Direkte Breitenangaben im
   JCE funktionieren auch ohne diese Klassen. */

.com-content-article img.img-small,
.item-page img.img-small {
  width: min(180px, 100%);
}

.com-content-article img.img-medium,
.item-page img.img-medium {
  width: min(300px, 100%);
}

.com-content-article img.img-large,
.item-page img.img-large {
  width: min(480px, 100%);
}

/* Auf kleinen Displays keine schmalen Textspalten neben Bildern. */

@media (max-width: 575.98px) {
  .com-content-article img.float-end,
  .item-page img.float-end,
  .com-content-article img.float-start,
  .item-page img.float-start,
  .com-content-article img.right,
  .item-page img.right,
  .com-content-article img.left,
  .item-page img.left,
  .com-content-article img[style*="float: right"],
  .item-page img[style*="float: right"],
  .com-content-article img[style*="float:right"],
  .item-page img[style*="float:right"],
  .com-content-article img[style*="float: left"],
  .item-page img[style*="float: left"],
  .com-content-article img[style*="float:left"],
  .item-page img[style*="float:left"] {
    float: none !important;
    display: block;
    max-width: 100%;
    margin: 1rem auto !important;
  }
}

/* =========================================================
   11. INHALTSVERZEICHNIS / QUICK INDEX
   ========================================================= */

.article-toc {
  --toc-background: #f7f9fc;
  --toc-border: #d8e0e8;
  --toc-divider: #dfe5eb;

  position: relative;
  width: 100%;
  max-width: var(--site-content-width);
  margin: 1rem 0 2rem;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #fbfcfe 0%,
      var(--toc-background) 100%
    );

  border: 1px solid var(--toc-border);
  border-top: 4px solid var(--site-primary);
  border-radius: 0.7rem;

  box-shadow:
    0 0.25rem 0.9rem rgba(0, 0, 0, 0.05);
}


/* Überschrift */

.article-toc__heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  margin: 0 !important;
  padding: 1.1rem 1.4rem 0.65rem;

  color: var(
    --template-special-color,
    var(--site-primary)
  );

  font-family:
    var(--cassiopeia-font-family-headings, inherit);

  font-size:
    clamp(1.15rem, 1.05rem + 0.4vw, 1.45rem);

  font-weight: 700;
  line-height: 1.25;
}


/* Rundes Listen-Symbol */

.article-toc__heading::before {
  content: "";

  flex: 0 0 40px;
  width: 40px;
  height: 40px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 11px 12px,
      #fff 0 1.7px,
      transparent 1.9px
    ),
    radial-gradient(
      circle at 11px 20px,
      #fff 0 1.7px,
      transparent 1.9px
    ),
    radial-gradient(
      circle at 11px 28px,
      #fff 0 1.7px,
      transparent 1.9px
    ),
    linear-gradient(
      #fff,
      #fff
    ) 18px 11px / 12px 2px no-repeat,
    linear-gradient(
      #fff,
      #fff
    ) 18px 19px / 12px 2px no-repeat,
    linear-gradient(
      #fff,
      #fff
    ) 18px 27px / 12px 2px no-repeat,
    var(--site-primary);
}

.article-toc__heading strong {
  font-weight: inherit;
}


/* Aufklappbarer Inhaltsbereich */

.article-toc__content {
  position: relative;
  overflow: hidden;

  transition:
    max-height 0.35s ease;
}


/* Sanfter Verlauf am unteren Rand */

.article-toc.is-collapsible:not(.is-open)
.article-toc__content::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 4rem;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(247, 249, 252, 0),
      var(--toc-background) 92%
    );
}


/* Quickindex-Card neutralisieren */

.article-toc .rl_quickindex.card {
  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.article-toc .rl_quickindex .card-body {
  padding: 0.15rem 1.4rem 0.4rem;
}


/* Oberste Verzeichnisebene */

.article-toc .index-level-2 {
  margin: 0;
  padding-left: 2.25rem;
}

.article-toc .index-level-2 > .index-item {
  padding: 0.58rem 0.25rem 0.58rem 0.2rem;

  line-height: 1.4;

  border-bottom:
    1px solid var(--toc-divider);
}

.article-toc .index-level-2 > .index-item:last-child {
  border-bottom: 0;
}

.article-toc .index-level-2 > .index-item::marker {
  color: var(--body-color, #222);
  font-variant-numeric: tabular-nums;
}


/* Untergeordnete Verzeichnisebenen */

.article-toc .index-level-3 {
  margin-top: 0.4rem;
  padding-left: 1.5rem;
}

.article-toc .index-level-3 > .index-item {
  padding: 0.35rem 0;
  border: 0;
}


/* Links */

.article-toc .index-link {
  color: var(--link-color);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.article-toc .index-link:hover,
.article-toc .index-link:focus-visible {
  color: var(--site-accent);

  text-decoration: underline;
}


/* Schaltfläche */

.article-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  max-width: calc(100% - 2rem);
  margin: 0.85rem auto 1rem;
  padding: 0.65rem 1.1rem;

  color: #fff;
  background: var(--site-primary);

  border: 1px solid var(--site-primary);
  border-radius: 0.45rem;

  font: inherit;
  font-weight: 700;
  line-height: 1.25;

  cursor: pointer;

  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.article-toc__toggle[hidden] {
  display: none !important;
}

.article-toc__toggle:hover {
  filter: brightness(0.92);
}

.article-toc__toggle:active {
  transform: translateY(1px);
}

.article-toc__toggle:focus-visible {
  outline: 3px solid rgba(0, 77, 145, 0.25);
  outline-offset: 3px;
}


/* Pfeil im Button */

.article-toc__toggle-icon {
  width: 0.6rem;
  height: 0.6rem;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform:
    translateY(-0.12rem)
    rotate(45deg);

  transition:
    transform 0.25s ease;
}

.article-toc.is-open
.article-toc__toggle-icon {
  transform:
    translateY(0.14rem)
    rotate(225deg);
}


/* Mobil */

@media (max-width: 575.98px) {

  .article-toc {
    margin-top: 1rem;
    border-radius: 0.55rem;
  }

  .article-toc__heading {
    gap: 0.7rem;
    padding: 1rem 1rem 0.55rem;
    font-size: 1.15rem;
  }

  .article-toc .rl_quickindex .card-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .article-toc .index-level-2 {
    padding-left: 2rem;
  }

  .article-toc__toggle {
    width: calc(100% - 2rem);
    max-width: none;
    white-space: normal;
    text-align: center;
  }
}


/* Animationen bei entsprechender Systemeinstellung abschalten */

@media (prefers-reduced-motion: reduce) {

  .article-toc__content,
  .article-toc__toggle,
  .article-toc__toggle-icon {
    transition: none;
  }
}

/* =========================================================
   12. MARKEN-IMPULS
   ========================================================= */

.site-impuls {
  position: relative;
  margin: 2.2rem 0;
  padding: 1.55rem 2rem 1.45rem;
  min-height: 225px;
  border: 1px solid color-mix(in srgb, var(--site-primary) 24%, transparent);
  border-radius: var(--site-radius-lg);
  background:
    linear-gradient(color-mix(in srgb, var(--site-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--site-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--site-primary) 7%, white), #ffffff);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--site-primary-dark) 8%, transparent);
  overflow: hidden;
}

.site-impuls::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 10px;
  height: 50px;
  background: var(--site-accent);
  border-radius: 0 9px 9px 0;
}


.site-impuls p {
  position: relative;
  z-index: 1;
  max-width: var(--site-text-width);
  margin: 0 0 0.85rem;
  line-height: 1.55;
}

.site-impuls > p:first-child {
  margin-bottom: 0.45rem;
}

.site-impuls > p:first-child strong {
  display: block;
  color: var(--site-primary-dark);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.site-impuls > p:nth-child(2) {
  color: var(--site-primary-dark);
  font-size: clamp(1.12rem, 1.75vw, 1.32rem);
  font-weight: 650;
  line-height: 1.55;
}

/*
 * Zeitangabe: normal große Fließtextschrift.
 * Die am Absatzanfang stehende Stoppuhr wird über ::first-letter
 * gezielt größer dargestellt.
 */
.site-impuls > p:last-child {
  display: block;

  margin-top: 1.05rem;
  margin-bottom: 0;

  color: var(--site-primary);

  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
}

.site-impuls > p:last-child::first-letter {
  font-size: 1.65rem;
  line-height: 0.7;
}

/* Falls ein erklärender Zwischensatz ergänzt wird:
   Absatz 3 wird dann als Hauptimpuls betont. */

.site-impuls > p:nth-child(3):not(:last-child) {
  color: var(--site-primary-dark);
  font-size: clamp(1.18rem, 2vw, 1.42rem);
  font-weight: 750;
  line-height: 1.45;
}

/* =========================================================
   DENK-IMPULS / SITE-IMPULS-THINKING
   Gleiche Gestaltung wie site-impuls, mit Gehirn + Funke
   ========================================================= */

.site-impuls-thinking {
  position: relative;

  width: 100%;
  max-width: var(--site-content-width);

  min-height: 225px;
  margin: 2.2rem 0;
  padding: 1.55rem 2rem 1.45rem;
  overflow: hidden;

  background:
    linear-gradient(
      color-mix(in srgb, var(--site-primary) 5%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--site-primary) 5%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 7%, white),
      #fff
    );
  background-size: 24px 24px, 24px 24px, auto;

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-primary) 24%,
      transparent
    );
  border-radius: var(--site-radius-lg);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--site-primary-dark) 8%, transparent);
}

/* Orangefarbener Seitenakzent wie beim normalen Denk-Impuls. */

.site-impuls-thinking::before {
  content: "";

  position: absolute;
  top: 1.45rem;
  left: 0;

  width: 10px;
  height: 50px;

  background: var(--site-accent);
  border-radius: 0 9px 9px 0;
}

/* Gehirn und Kreis werden als eine Einheit zentriert ausgegeben. */

.site-impuls-thinking::after {
  content: "";

  position: absolute;
  top: 2.35rem;
  right: 2.15rem;
  z-index: 0;

  width: 124px;
  height: 124px;

  background:
    var(--site-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 22c-7 0-12 5-12 12 0 1 0 2 .4 3-5 2-8.4 7-8.4 13 0 7 5.5 12.7 12.3 13-.2 1-.3 2-.3 3 0 7.7 6.3 14 14 14 3.5 0 6.7-1.3 9-3.5 2.3 2.2 5.5 3.5 9 3.5 7.7 0 14-6.3 14-14 0-1-.1-2-.3-3 6.8-.3 12.3-6 12.3-13 0-6-3.4-11-8.4-13 .3-1 .4-2 .4-3 0-7-5-12-12-12-3.5 0-6.6 1.3-9 3.4-2.4-2.1-5.5-3.4-9-3.4Z'/%3E%3Cpath d='M48 21v54'/%3E%3Cpath d='M36 33c4 1 6 4 6 8'/%3E%3Cpath d='M60 33c-4 1-6 4-6 8'/%3E%3Cpath d='M33 49c4 1 7 4 7 8'/%3E%3Cpath d='M63 49c-4 1-7 4-7 8'/%3E%3Cpath d='M38 65c4 1 6 3 6 6'/%3E%3Cpath d='M58 65c-4 1-6 3-6 6'/%3E%3C/g%3E%3C/svg%3E")
    center / 78px 78px no-repeat;

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-accent) 18%,
      transparent
    );
  border-radius: 50%;
}

.site-impuls-thinking > p {
  position: relative;
  z-index: 1;

  max-width: calc(100% - 190px);
  margin: 0 0 0.85rem;

  line-height: 1.55;
}

.site-impuls-thinking > p:first-child {
  margin-bottom: 0.45rem;
}

.site-impuls-thinking > p:first-child strong {
  display: block;

  color: var(--site-primary-dark);

  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.site-impuls-thinking > p:nth-child(2) {
  color: var(--site-primary-dark);

  font-size: clamp(1.12rem, 1.75vw, 1.32rem);
  font-weight: 650;
  line-height: 1.55;
}

/*
 * Die Stoppuhr steht bereits im HTML.
 * Es wird deshalb kein zweites Symbol per CSS ergänzt.
 */

.site-impuls-thinking > p:last-child {
  display: block;

  margin-top: 1.05rem;
  margin-bottom: 0;

  color: var(--site-primary);

  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
}

.site-impuls-thinking > p:last-child::first-letter {
  font-size: 1.65rem;
  line-height: 0.7;
}

/* Falls ein erklärender Zwischensatz ergänzt wird. */

.site-impuls-thinking > p:nth-child(3):not(:last-child) {
  color: var(--site-primary-dark);

  font-size: clamp(1.18rem, 2vw, 1.42rem);
  font-weight: 750;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .site-impuls-thinking {
    min-height: 0;
    padding: 1.25rem 1.15rem 1.2rem;
  }

  .site-impuls-thinking::before {
    top: 1.25rem;

    width: 7px;
    height: 42px;
  }

  .site-impuls-thinking::after {
    top: 1.2rem;
    right: 1.1rem;

    width: 96px;
    height: 96px;

    background-size: 60px 60px;
  }

  .site-impuls-thinking > p {
    max-width: calc(100% - 125px);
  }

  .site-impuls-thinking > p:first-child strong {
    font-size: clamp(1.4rem, 5.6vw, 1.75rem);
  }

  .site-impuls-thinking > p:nth-child(2) {
    font-size: 1.03rem;
  }

  .site-impuls-thinking > p:last-child {
    margin-top: 0.85rem;

    font-size: 1.05rem;
  }

  .site-impuls-thinking > p:last-child::first-letter {
    font-size: 1.55rem;
  }
}

@media (max-width: 575.98px) {
  .site-impuls-thinking::after {
    top: 0.85rem;
    right: 0.8rem;

    width: 70px;
    height: 70px;

    background-size: 44px 44px;
  }

  .site-impuls-thinking > p {
    max-width: 100%;
  }

  .site-impuls-thinking > p:first-child,
  .site-impuls-thinking > p:nth-child(2) {
    padding-right: 4.9rem;
  }

  .site-impuls-thinking > p:nth-child(2) {
    font-size: 1rem;
  }

  .site-impuls-thinking > p:last-child {
    font-size: 1.02rem;
  }

  .site-impuls-thinking > p:last-child::first-letter {
    font-size: 1.5rem;
  }
}


/* =========================================================
   13. MERKSATZ
   ========================================================= */

.site-merksatz {
  position: relative;
  margin: 1.7rem 0;
  padding: 1.2rem 1.35rem 1.25rem 4.2rem;
  border: 1px solid var(--site-border-strong);
  border-left: 4px solid var(--site-accent);
  border-radius: var(--site-radius);
  background: linear-gradient(180deg, var(--site-soft-primary), #fff);
  box-shadow: var(--site-shadow-sm);
}

.site-merksatz::before {
  content: "“";
  position: absolute;
  left: 1.15rem;
  top: 0.65rem;
  color: var(--site-accent);
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
}

.site-merksatz p {
  margin: 0 0 0.45rem;
}

.site-merksatz p:last-child {
  margin-bottom: 0;
}

.site-merksatz > p:first-child strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--site-primary-dark);
  font-size: 0.98rem;
  font-weight: 850;
}

.site-merksatz > p:nth-child(2),
.site-merksatz > p:last-child {
  color: var(--site-primary-dark);
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  font-weight: 800;
}

/* =========================================================
   14. ZUM MITNEHMEN
   Eigenständige, gut erkennbare Praxis-Box
   ========================================================= */

.site-takeaway {
  position: relative;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.7rem 0;
  padding: 1.15rem 4.6rem 1.2rem 1.35rem;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--site-secondary) 13%, white),
      #fff 68%
    );

  border: 1px solid color-mix(
    in srgb,
    var(--site-secondary) 38%,
    transparent
  );
  border-left: 5px solid var(--site-secondary);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.site-takeaway::before {
  content: "✓";

  position: absolute;
  top: 1rem;
  right: 1.15rem;

  display: inline-grid;
  place-items: center;

  width: 38px;
  height: 38px;

  color: #fff;
  background: var(--site-secondary);
  border: 4px solid color-mix(
    in srgb,
    var(--site-secondary) 14%,
    white
  );
  border-radius: 50%;

  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.site-takeaway p {
  margin: 0 0 0.5rem;
  line-height: 1.62;
}

.site-takeaway p:last-child {
  margin-bottom: 0;
}

.site-takeaway > p:first-child {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  margin: 0 0 0.8rem;
  padding: 0.34rem 0.75rem;

  color:
    color-mix(
      in srgb,
      var(--site-secondary) 82%,
      black
    );

  background:
    color-mix(
      in srgb,
      var(--site-secondary) 13%,
      white
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-secondary) 30%,
      transparent
    );

  border-radius: 999px;

  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.site-takeaway > p:first-child strong {
  color: inherit;
  font: inherit;
}

.site-takeaway > p:nth-child(2),
.site-takeaway > p:last-child {
  color: var(--site-text);

  font-size: 1rem;
  font-weight: 650;
}



/* =========================================================
   14A. PARETO-IMPULS
   Klasse: pareto-impuls
   Automatische Überschrift: „Pareto-Tipp“
   ========================================================= */

.pareto-impuls {
  position: relative;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.9rem 0 2.2rem;
  padding: 5rem 4.9rem 4.35rem 1.5rem;
  overflow: visible;

  color: var(--site-text);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--site-primary) 7%, white),
      #fff 68%
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-primary) 35%,
      transparent
    );
  border-left: 5px solid var(--site-accent);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-sm);
}

/* Überschrift wird vollständig aus der CSS erzeugt. */

.pareto-impuls::before {
  content: "Pareto-Tipp";

  position: absolute;
  top: 1.1rem;
  left: 1.35rem;

  display: inline-flex;
  align-items: center;

  min-height: 40px;
  padding: 0.42rem 0.95rem 0.42rem 2.35rem;

  color: #fff;

  background:
    radial-gradient(
      circle at 1.15rem 50%,
      var(--site-accent) 0 0.45rem,
      transparent 0.48rem
    ),
    var(--site-primary);

  border-radius: 999px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--site-primary-dark) 12%, transparent);

  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

/* Variables Markensymbol ohne fest codierte Domainfarbe. */
.pareto-impuls::after {
  content: "✓";

  position: absolute;
  top: 1.1rem;
  right: 1.25rem;

  display: inline-grid;
  place-items: center;

  width: 44px;
  height: 44px;

  color: #fff;
  background: var(--site-accent);
  border-radius: 50%;

  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}


.pareto-impuls > p {
  width: auto;
  max-width: none;

  margin: 0;

  color: var(--site-text);

  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  font-weight: 620;
  line-height: 1.58;
}

.pareto-impuls > p strong {
  color: var(--site-primary);
  font-weight: 850;
}

/* Informationsschalter unten rechts. Der vollständige Button
   wird zentral durch user.js erzeugt. Der Tooltip funktioniert
   per Maus, Tastatur und auf Touch-Geräten durch Antippen. */

.pareto-impuls__info {
  position: absolute;
  right: 1.15rem;
  bottom: 0.9rem;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  margin: 0;
  padding: 0.3rem 0.4rem;

  color: var(--site-primary);
  background: transparent;
  border: 0;
  border-radius: 999px;

  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.3;

  cursor: pointer;
}

.pareto-impuls__info::before {
  content: "i";

  display: inline-grid;
  place-items: center;

  width: 22px;
  height: 22px;

  color: var(--site-primary);
  background: #fff;
  border: 2px solid currentColor;
  border-radius: 50%;

  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}

.pareto-impuls__info:hover,
.pareto-impuls__info:focus-visible,
.pareto-impuls__info.is-open,
.pareto-impuls__info[aria-expanded="true"] {
  color: var(--site-accent);
  background: var(--site-soft-accent);
}

.pareto-impuls__info:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--site-primary) 22%,
      transparent
    );
  outline-offset: 3px;
}

.pareto-impuls__tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);

  width: min(370px, calc(100vw - 3rem));
  padding: 0.95rem 1rem;

  color: var(--site-text);
  background: rgba(255, 255, 255, 0.98);

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);

  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  white-space: normal;

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}

.pareto-impuls__tooltip::before {
  content: none !important;
  display: none !important;
}

.pareto-impuls__tooltip::after {
  content: "";

  position: absolute;
  right: 1.5rem;
  bottom: -0.55rem;

  width: 1rem;
  height: 1rem;

  background: #fff;
  border-right: 1px solid var(--site-border-strong);
  border-bottom: 1px solid var(--site-border-strong);

  transform: rotate(45deg);
}

.pareto-impuls__info:hover .pareto-impuls__tooltip,
.pareto-impuls__info:focus .pareto-impuls__tooltip,
.pareto-impuls__info:focus-visible .pareto-impuls__tooltip,
.pareto-impuls__info.is-open .pareto-impuls__tooltip,
.pareto-impuls__info[aria-expanded="true"] .pareto-impuls__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/* =========================================================
   15. ABSCHNITTS-SIEGEL
   ========================================================= */

.com-content-article h2[data-site-label]::before,
.item-page h2[data-site-label]::before {
  content: attr(data-site-label);
  display: table;
  margin-bottom: 0.35rem;
  padding: 0.16rem 0.5rem;
  color: var(--site-accent);
  background: var(--site-soft-accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   16. ZITATE / BLOCKQUOTES
   ========================================================= */

blockquote {
  position: relative;
  margin: 1.8rem 0;
  padding: 1.15rem 1.35rem 1.15rem 1.45rem;
  border-left: 5px solid var(--site-accent);
  border-radius: var(--site-radius);
  background: linear-gradient(180deg, var(--site-soft-primary), #fff);
  box-shadow: var(--site-shadow-sm);
}

blockquote p {
  margin: 0 0 0.8rem;
  padding: 0;
  color: var(--site-primary-dark);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  font-style: italic;
  font-weight: 500;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   17. LEGACY-CONTENT-BOXEN
   ========================================================= */

.zwischenueberschrift {
  display: block;
  margin: 1.25rem 0 0.55rem;
  padding-top: 0;
  color: var(--site-primary-dark);
  font-size: 1.12rem;
  line-height: 1.45;
  font-weight: 800;
}

/* Neutrale Content-Box / alte box_well */

.box_well {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  min-height: 20px;
  background: linear-gradient(180deg, var(--site-soft), #fff);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.box_well > *:first-child {
  margin-top: 0;
}

.box_well > *:last-child {
  margin-bottom: 0;
}

/* Farbige Hinweis-/CTA-Boxen:
   Alte Klassen bleiben erhalten.
   .mitbox      = Rot
   .mitbox_bp   = Primärfarbe
   .mitbox_bp2  = Akzentfarbe
   .mitbox_bp3  = Sekundärfarbe
   .mitbox_bp4  = Braun
*/

.mitbox,
.mitbox_bp,
.mitbox_bp2,
.mitbox_bp3,
.mitbox_bp4 {
  display: block;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  color: #fff;
  border: 0;
  border-radius: var(--site-radius);
  text-align: center;
  line-height: 1.45;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 750;
  text-decoration: none;
  white-space: normal;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--site-primary-dark) 12%, transparent);
}

:is(
  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4
) > :is(p, h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

.mitbox {
  background: var(--site-red);
}

.mitbox_bp {
  background: var(--site-primary);
}

.mitbox_bp2 {
  background: var(--site-accent);
}

.mitbox_bp3 {
  background: var(--site-secondary);
}

.mitbox_bp4 {
  background: var(--site-brown);
}

.mitbox a,
.mitbox_bp a,
.mitbox_bp2 a,
.mitbox_bp3 a,
.mitbox_bp4 a {
  color: #fff;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.mitbox a:hover,
.mitbox_bp a:hover,
.mitbox_bp2 a:hover,
.mitbox_bp3 a:hover,
.mitbox_bp4 a:hover {
  color: #fff;
  opacity: 0.88;
}

/* =========================================================
   18. TABELLEN
   ========================================================= */

.com-content-article table,
.item-page table,
table {
  width: 100%;
  margin: 1.4rem auto;
  border: 1px solid var(--site-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--site-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--site-shadow-sm);
  font-size: 1rem;
  line-height: 1.45;
}

.com-content-article th,
.com-content-article td,
.item-page th,
.item-page td,
th,
td {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  vertical-align: middle;
}

.com-content-article th,
.item-page th,
.tabellenueberschrift,
tr.tabellenueberschrift,
td.tabellenueberschrift,
th.tabellenueberschrift {
  background: var(--site-primary);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 800;
}

.tabellenueberschrift a,
tr.tabellenueberschrift a,
td.tabellenueberschrift a,
th.tabellenueberschrift a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tabellenueberschrift a:hover,
tr.tabellenueberschrift a:hover,
td.tabellenueberschrift a:hover,
th.tabellenueberschrift a:hover {
  color: var(--site-soft-accent);
}

.tabellezelle1 {
  background-color: color-mix(in srgb, var(--site-primary) 9%, white);
}

.tabellezelle2 {
  background-color: color-mix(in srgb, var(--site-primary) 4%, white);
}

.tabellezelle1 td,
.tabellezelle2 td {
  vertical-align: middle;
  padding: 0.65rem 0.75rem;
}

.tabellezelle_anmerkungen {
  padding: 0.45rem 0.6rem;
  background-color: #fff;
  color: var(--site-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* =========================================================
   19. SIDEBAR-KARTEN
   Einheitliches Kartensystem für Module
   ========================================================= */

/*
 * Die Sidebar beginnt auf Desktop etwas tiefer und richtet
 * sich dadurch an der Kategoriezeile oberhalb der H1 aus.
 */
@media (min-width: 992px) {
  .container-sidebar-right,
  .sidebar-right {
    align-self: start;
    padding-top: 1.2rem;
  }
}


/* Abstand zwischen den einzelnen Modulen */

.container-sidebar-right > * + *,
.sidebar-right > * + * {
  margin-top: 1.35rem;
}


/* Grundgestaltung aller Sidebar-Module */

.container-sidebar-right .card,
.container-sidebar-right .moduletable,
.sidebar-right .card,
.sidebar-right .moduletable,
aside .card,
aside .moduletable {
  margin-bottom: 0;
  overflow: hidden;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);

  box-shadow:
    0 6px 18px color-mix(in srgb, var(--site-primary-dark) 6%, transparent);
}


/* Joomla-Card-Überschrift neutralisieren */

.container-sidebar-right .card-header,
.sidebar-right .card-header,
aside .card-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  margin: 0;
  padding: 1.1rem 1.25rem 0.7rem;

  color: var(--site-primary-dark);
  background: transparent;
  border: 0;

  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}


/* Innenabstände von Joomla-Cards */

.container-sidebar-right .card-body,
.sidebar-right .card-body,
aside .card-body {
  padding: 0.2rem 1.25rem 1.2rem;
}


/* Module ohne Card-Chrome */

.container-sidebar-right .moduletable,
.sidebar-right .moduletable,
aside .moduletable {
  padding: 1.2rem 1.25rem;
}

.container-sidebar-right .moduletable > h3,
.sidebar-right .moduletable > h3,
aside .moduletable > h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  margin: 0 0 0.85rem;
  padding: 0;

  color: var(--site-primary-dark);

  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}


/* Allgemeine Typografie */

.container-sidebar-right p,
.sidebar-right p,
aside p {
  margin-top: 0;
  margin-bottom: 0.85rem;

  font-size: 0.94rem;
  line-height: 1.55;
}

.container-sidebar-right p:last-child,
.sidebar-right p:last-child,
aside p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SIDEBAR – LINKLISTEN
   Modulklasse: site-side-links
   ========================================================= */

.site-side-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-side-links li {
  margin: 0;
  padding: 0;

  border-top:
    1px solid color-mix(
      in srgb,
      var(--site-primary) 11%,
      transparent
    );
}

.site-side-links li:first-child {
  border-top: 0;
}

.site-side-links a {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: 0.4rem;

  padding: 0.68rem 0;

  color: var(--site-primary);

  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.4;

  text-decoration: none;
}

.site-side-links a::before {
  content: "›";

  color: var(--site-accent);

  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.05;
}

.site-side-links a:hover,
.site-side-links a:focus-visible {
  color: var(--site-accent);
}

.site-side-links a:hover::before,
.site-side-links a:focus-visible::before {
  transform: translateX(2px);
}


/* =========================================================
   SIDEBAR – DOWNLOADS
   Modulklasse: site-side-download
   ========================================================= */

/*
 * Großes, klares Download-Symbol:
 * blauer Pfeil auf heller Kreisfläche mit kleinem orangefarbenem Badge.
 */
.site-side-download .card-header::before,
.site-side-download.moduletable > h3::before {
  content: "";

  display: block;

  flex: 0 0 46px;
  width: 46px;
  height: 46px;

  background:
    var(--site-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 10v20m-7-7 7 7 7-7M14 37h20' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 27px 27px
    no-repeat;

  box-sizing: border-box;
  border: 4px solid color-mix(in srgb, var(--site-primary) 12%, white);
  border-radius: 50%;
}

.site-side-download ul {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.site-side-download li {
  margin: 0;
  padding: 0;

  border-top:
    1px solid color-mix(
      in srgb,
      var(--site-primary) 10%,
      transparent
    );
}

.site-side-download li:first-child {
  border-top: 0;
}

.site-side-download li a {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: 0.4rem;

  padding: 0.58rem 0;

  color: var(--site-primary);

  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;

  text-decoration: none;
}

.site-side-download li a::before {
  content: "›";

  color: var(--site-accent);

  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.05;
}

.site-side-download li a:hover,
.site-side-download li a:focus-visible {
  color: var(--site-accent);
}


/* Link „Alle Downloads“ */

.site-side-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  margin-top: 0.85rem;

  color: var(--site-accent);

  font-size: 0.92rem;
  font-weight: 800;

  text-decoration: none;
}

.site-side-more::after {
  content: "→";

  font-size: 1.15rem;
  line-height: 1;
}

.site-side-more:hover,
.site-side-more:focus-visible {
  color:
    color-mix(
      in srgb,
      var(--site-accent) 82%,
      black
    );
}

/* =========================================================
   SIDEBAR – NEWSLETTER
   Modulklasse: site-side-newsletter
   ========================================================= */

/*
 * Großes Newsletter-Symbol:
 * Umschlag auf heller Kreisfläche mit orangefarbener Benachrichtigung.
 */
.site-side-newsletter .card-header::before,
.site-side-newsletter.moduletable > h3::before {
  content: "";

  display: block;

  flex: 0 0 46px;
  width: 46px;
  height: 46px;

  background:
    var(--site-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='13' width='32' height='23' rx='3' fill='none' stroke='white' stroke-width='3'/%3E%3Cpath d='m10 16 14 11 14-11' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 27px 27px
    no-repeat;

  box-sizing: border-box;
  border: 4px solid color-mix(in srgb, var(--site-primary) 12%, white);
  border-radius: 50%;
}

.site-side-newsletter input[type="email"],
.site-side-newsletter input[type="text"] {
  width: 100%;
  min-height: 44px;

  margin: 0 0 0.65rem;
  padding: 0.65rem 0.75rem;

  color: var(--site-text);
  background: #fff;

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);
}

.site-side-newsletter input[type="email"]:focus,
.site-side-newsletter input[type="text"]:focus {
  border-color: var(--site-primary);

  outline:
    3px solid color-mix(
      in srgb,
      var(--site-primary) 18%,
      transparent
    );

  outline-offset: 1px;
}

.site-side-newsletter button,
.site-side-newsletter input[type="submit"],
.site-side-newsletter .btn,
.site-side-newsletter .site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  padding: 0.7rem 1rem;

  color: #fff;
  background: var(--site-primary);

  border: 1px solid var(--site-primary);
  border-radius: var(--site-radius-sm);

  font: inherit;
  font-weight: 800;

  cursor: pointer;
}

.site-side-newsletter button:hover,
.site-side-newsletter button:focus-visible,
.site-side-newsletter input[type="submit"]:hover,
.site-side-newsletter input[type="submit"]:focus-visible,
.site-side-newsletter .btn:hover,
.site-side-newsletter .btn:focus-visible,
.site-side-newsletter .site-button:hover,
.site-side-newsletter .site-button:focus-visible {
  color: #fff;

  background:
    color-mix(
      in srgb,
      var(--site-primary) 86%,
      black
    );

  border-color:
    color-mix(
      in srgb,
      var(--site-primary) 86%,
      black
    );
}

.site-side-newsletter .site-note,
.site-side-newsletter small {
  display: block;

  margin-top: 0.6rem;

  color: var(--site-muted);

  font-size: 0.78rem;
  line-height: 1.45;
}

/* =========================================================
   SIDEBAR – INSPIRATION UND BÜCHER
   Modulklassen:
   site-side-card site-inspiration-card
   site-side-card site-book-card
   ========================================================= */

/* Verlässlicher Innenabstand – unabhängig vom Modulstil */

.site-side-card {
  position: relative;
  padding: 1.25rem;
}

.site-side-card .mod-custom,
.site-side-card .custom,
.site-side-card .card-body {
  margin: 0;
  padding: 0;
}

.site-side-card > *:first-child,
.site-side-card .mod-custom > *:first-child,
.site-side-card .custom > *:first-child {
  margin-top: 0;
}

.site-side-card > *:last-child,
.site-side-card .mod-custom > *:last-child,
.site-side-card .custom > *:last-child {
  margin-bottom: 0;
}


/* Gemeinsame Modultitel */

.site-inspiration-card > h3,
.site-inspiration-card .card-header,
.site-book-card > h3,
.site-book-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  margin: 0 0 1rem;
  padding: 0;

  color: var(--site-primary-dark);
  background: transparent;
  border: 0;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}


/* Einheitliche Symbolfläche wie bei Download und Newsletter */

.site-inspiration-card > h3::before,
.site-inspiration-card .card-header::before,
.site-book-card > h3::before,
.site-book-card .card-header::before {
  display: inline-grid;
  place-items: center;

  flex: 0 0 46px;
  width: 46px;
  height: 46px;

  border-radius: 50%;

  font-weight: 800;
  line-height: 1;
}


/*
 * Alte dekorative Birne bzw. Blase rechts sicher entfernen.
 * Die zusätzlichen Selektoren decken frühere Modulklassennamen ab.
 */
.site-inspiration-card::after,
.site-side-feature::after,
.site-feature-card::after,
.site-book-card::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   INSPIRATION
   ========================================================= */

.site-inspiration-card {
  border-left: 4px solid var(--site-secondary) !important;

  background:
    linear-gradient(
      145deg,
      #fff 0%,
      color-mix(in srgb, var(--site-secondary) 7%, white) 100%
    ) !important;
}

.site-inspiration-card > h3::before,
.site-inspiration-card .card-header::before {
  content: "✦";

  color: var(--site-secondary);
  background:
    color-mix(
      in srgb,
      var(--site-secondary) 13%,
      white
    );

  font-size: 1.65rem;
}


/* =========================================================
   BÜCHER
   ========================================================= */

.site-book-card {
  border-top: 4px solid var(--site-accent) !important;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      color-mix(in srgb, var(--site-accent) 4%, white) 100%
    ) !important;
}

.site-book-card > h3::before,
.site-book-card .card-header::before {
  content: "";


  box-sizing: border-box;
  background-color: var(--site-primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M4 6c10-3 20 0 28 7v29c-8-6-18-9-28-6V6Zm56 0c-10-3-20 0-28 7v29c8-6 18-9 28-6V6Z' fill='none' stroke='white' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M32 13v29' fill='none' stroke='white' stroke-width='4'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 29px 22px;
  border: 4px solid color-mix(in srgb, var(--site-primary) 12%, white);
}


/* Leitzeile innerhalb beider Karten */

.site-card-lead {
  margin: 0 0 0.7rem !important;

  color: var(--site-primary-dark);

  font-size: 1.15rem !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35 !important;
}


/* Normaler Beschreibungstext */

.site-inspiration-card p,
.site-book-card p {
  margin: 0 0 0.9rem;

  color: var(--site-text);

  font-size: 0.94rem;
  line-height: 1.55;
}


/* Abschlusslink */

.site-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  margin-top: 0.15rem;

  color: var(--site-accent);

  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.3;

  text-decoration: none;
}

.site-card-link::after {
  content: "→";

  font-size: 1.1rem;
  line-height: 1;

  transition: transform 0.2s ease;
}

.site-card-link:hover,
.site-card-link:focus-visible {
  color:
    color-mix(
      in srgb,
      var(--site-accent) 82%,
      black
    );

  text-decoration: underline;
}

.site-card-link:hover::after,
.site-card-link:focus-visible::after {
  transform: translateX(3px);
}

/* =========================================================
   20. RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
  .site-grid,
  .grid-child {
    max-width: 100%;
  }

  main {
    padding-inline: 1rem;
  }

  .com-content-article,
  .article,
  main .item-page {
    font-size: 1.05rem;
  }

  .com-content-article :where(p, ul, ol, h1, h2, h3, h4, h5, h6),
  .item-page :where(p, ul, ol, h1, h2, h3, h4, h5, h6) {
    max-width: 100%;
  }

  .com-content-article h1,
  .item-page h1,
  .page-header h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }



  .site-impuls {
    min-height: 0;
    padding: 1.25rem 1.15rem 1.2rem;
  }

  .site-impuls::before {
    top: 1.25rem;
    width: 7px;
    height: 42px;
  }


  .site-impuls p {
    max-width: 100%;
  }


  .site-impuls > p:first-child strong {
    font-size: clamp(1.4rem, 5.6vw, 1.75rem);
    font-weight: 800;
  }

  .site-impuls > p:nth-child(2) {
    font-size: 1.03rem;
    font-weight: 650;
    line-height: 1.55;
  }

  .site-impuls > p:last-child {
    margin-top: 0.85rem;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .site-impuls > p:last-child::first-letter {
    font-size: 1.55rem;
  }


/* =========================================================
   Pareto-Tipp
   ========================================================= */


  .pareto-impuls {
    padding: 4.75rem 4.2rem 4.2rem 1.15rem;

    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--site-primary) 7%, white),
        #fff 68%
      );
  }

  .pareto-impuls::after {
    top: 1rem;
    right: 0.9rem;
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }

  .pareto-impuls::before {
    top: 1rem;
    left: 1rem;

    min-height: 38px;
    padding: 0.38rem 0.8rem 0.38rem 2.15rem;

    font-size: 0.9rem;
  }

  .pareto-impuls > p {
    font-size: 1.03rem;
  }

  .pareto-impuls__info {
    right: 0.8rem;
    bottom: 0.75rem;

    font-size: 0.8rem;
  }

  .pareto-impuls__tooltip {
    right: -0.2rem;

    width: min(330px, calc(100vw - 2.4rem));
  }


  .site-merksatz {
    padding: 1.05rem 1rem 1.1rem 3.4rem;
  }

  .site-merksatz::before {
    left: 0.85rem;
    font-size: 3.2rem;
  }

  .site-takeaway {
    padding-right: 4.15rem;
  }

  .site-takeaway::before {
    top: 0.9rem;
    right: 0.85rem;

    width: 34px;
    height: 34px;

    border-width: 3px;

    font-size: 0.9rem;
  }

  .site-takeaway > p:first-child {
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.65rem;

    font-size: 0.96rem;
  }

  blockquote {
    padding: 1rem 1rem 1rem 1.1rem;
  }

  blockquote p {
    font-size: 1.08rem;
  }

  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4 {
    font-size: 1.05rem;
    padding: 0.8rem 0.9rem;
  }

  .com-content-article table,
  .item-page table,
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.95rem;
    white-space: normal;
  }

  .com-content-article th,
  .com-content-article td,
  .item-page th,
  .item-page td,
  th,
  td {
    padding: 0.55rem 0.6rem;
  }

  aside,
  .sidebar-right,
  .container-sidebar-right {
    margin-top: 2rem;
  }
}

@media (max-width: 480px) {
  main {
    padding-inline: 0.85rem;
  }

  .com-content-article,
  .article,
  main .item-page {
    font-size: 1.02rem;
  }

  .site-quicklinks,
  .site-impuls,
  .site-impuls-thinking,
  .pareto-impuls,
  .site-merksatz,
  .site-takeaway,
  .box_well,
  blockquote,
  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4 {
    border-radius: 12px;
  }

  figure.item-image figcaption,
  .item-image figcaption {
    font-size: 1.05rem;
    padding: 0.55rem 0.7rem;
  }



  .site-impuls > p:nth-child(2) {
    font-size: 1rem;
  }



  .pareto-impuls {
    margin-bottom: 2rem;
    padding: 4.45rem 1rem 4.25rem;

    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--site-primary) 7%, white),
        #fff 68%
      );
  }

  .pareto-impuls::after {
    top: 0.85rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }

  .pareto-impuls::before {
    top: 0.85rem;
    left: 0.8rem;

    min-height: 34px;
    padding: 0.34rem 0.7rem 0.34rem 1.95rem;

    font-size: 0.82rem;
  }

  .pareto-impuls > p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .pareto-impuls__info {
    right: 0.55rem;
    bottom: 0.65rem;

    font-size: 0.76rem;
  }

  .pareto-impuls__tooltip {
    right: -0.15rem;

    width: min(300px, calc(100vw - 1.8rem));
    padding: 0.85rem 0.9rem;

    font-size: 0.82rem;
  }


  .site-merksatz {
    padding-left: 3rem;
  }

  .site-merksatz::before {
    left: 0.72rem;
    font-size: 2.9rem;
  }

  .site-takeaway {
    padding: 1rem 3.85rem 1rem 1rem;
  }

  .site-takeaway::before {
    top: 0.85rem;
    right: 0.75rem;

    width: 32px;
    height: 32px;
  }

  .site-takeaway > p:first-child {
    max-width: calc(100% - 2.4rem);
    padding: 0.28rem 0.58rem;

    font-size: 0.92rem;
  }

  .site-impuls > p:last-child {
    font-size: 1.02rem;
  }

  .site-impuls > p:last-child::first-letter {
    font-size: 1.5rem;
  }

  .com-content-article table,
  .item-page table,
  table {
    font-size: 0.9rem;
  }
}

/* =========================================================
   21. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .pareto-impuls__tooltip {
    transition: none !important;
  }
}

/* =========================================================
   DOWNLOADBOX IM ARTIKEL
   ========================================================= */

.site-download-box {
  box-sizing: border-box;

  width: 100%;
  max-width: var(--site-content-width, 780px);

  margin: 1.6rem 0 2rem;
  padding: 1.05rem 1.1rem 1rem;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--site-secondary, #809023) 7%, #fff),
      #fff 58%
    );

  border: 1px solid var(--site-border, rgba(0, 62, 121, 0.16));
  border-left: 4px solid var(--site-secondary, #809023);
  border-radius: var(--site-radius, 14px);
  box-shadow: var(
    --site-shadow-sm,
    0 4px 14px color-mix(in srgb, var(--site-primary-dark) 6%, transparent)
  );
}

.site-download-box__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  margin-bottom: 0.8rem;
}

.site-download-box__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;

  width: 38px;
  height: 38px;

  color: var(--site-secondary, #809023);
  background:
    color-mix(
      in srgb,
      var(--site-secondary, #809023) 12%,
      #fff
    );

  border-radius: 50%;
}

.site-download-box__icon svg,
.site-download-box__arrow svg {
  display: block;

  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-download-box__heading {
  margin: 0;

  color: #000000;

  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.site-download-box__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;

  min-height: 58px;
  padding: 0.72rem 0.8rem;

  color: #000000;
  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--site-border, rgba(0, 62, 121, 0.16));
  border-radius: var(--site-radius-sm, 10px);

  text-decoration: none;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.site-download-box__link:hover,
.site-download-box__link:focus-visible {
  color: var(--site-primary, #003e79);
  background:
    color-mix(
      in srgb,
      var(--site-primary, #003e79) 4%,
      #fff
    );

  border-color:
    color-mix(
      in srgb,
      var(--site-primary, #003e79) 28%,
      transparent
    );

  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--site-primary-dark) 9%, transparent);
}

.site-download-box__link:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--site-primary, #003e79) 22%,
      transparent
    );
  outline-offset: 3px;
}

/* Dateityp-Abzeichen */

.site-download-box__type {
  display: inline-grid;
  place-items: center;

  min-width: 50px;
  min-height: 34px;
  padding: 0.25rem 0.45rem;

  color: #fff;
  background: var(--site-accent, #e75112);
  border-radius: 7px;

  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.035em;
}

/* Dezente, gelernte Dateityp-Farben */

.site-download-box__type--pdf {
  background: #b42318;
}

.site-download-box__type--word {
  background: #185abd;
}

.site-download-box__type--excel {
  background: #217346;
}

.site-download-box__type--powerpoint {
  background: #c43e1c;
}

.site-download-box__type--audio {
  background: #7057a8;
}

.site-download-box__type--video {
  background: #9a3412;
}

.site-download-box__type--archive {
  background: #59636e;
}

.site-download-box__type--image {
  background: #426b1f;
}

.site-download-box__type--file {
  background: var(--site-primary, #003e79);
}

.site-download-box__label {
  min-width: 0;

  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

.site-download-box__arrow {
  display: inline-grid;
  place-items: center;

  width: 28px;
  height: 28px;

  color: var(--site-primary, #003e79);
  border-radius: 50%;
}

.site-download-box__arrow svg {
  width: 18px;
  height: 18px;
}

.site-download-box__note {
  margin: 0.65rem 0.15rem 0;

  color: var(--site-muted, #66717e);

  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 575.98px) {
  .site-download-box {
    margin: 1.35rem 0 1.7rem;
    padding: 0.9rem;

    border-radius: 11px;
  }

  .site-download-box__header {
    gap: 0.6rem;
    margin-bottom: 0.65rem;
  }

  .site-download-box__icon {
    width: 34px;
    height: 34px;
  }

  .site-download-box__heading {
    font-size: 0.98rem;
  }

  .site-download-box__link {
    grid-template-columns: auto minmax(0, 1fr) 20px;
    gap: 0.65rem;

    min-height: 54px;
    padding: 0.65rem;
  }

  .site-download-box__type {
    min-width: 45px;
    min-height: 31px;

    font-size: 0.64rem;
  }

  .site-download-box__label {
    font-size: 0.89rem;
  }

  .site-download-box__arrow {
    width: 20px;
    height: 20px;
  }

  .site-download-box__note {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-download-box__link {
    transition: none;
  }
}

/* =========================================================
   DETAILSBOXEN
   Automatisch für alle <details> innerhalb eines Beitrags
   ========================================================= */

.com-content-article details,
.item-page details {
  width: 100%;
  max-width: var(--site-content-width);

  margin: 0.8rem 0;
  overflow: hidden;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: 10px;

  box-shadow: var(--site-shadow-sm);
}

.com-content-article details + details,
.item-page details + details {
  margin-top: 0.65rem;
}


/* Klickbare Titelzeile */

.com-content-article details > summary,
.item-page details > summary {
  display: grid;
  grid-template-columns:
    28px
    minmax(0, 1fr)
    18px;

  align-items: center;
  gap: 0.75rem;

  min-height: 54px;

  margin: 0;
  padding: 0.75rem 1rem;

  color: var(--site-primary-dark);

  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.4;

  list-style: none;
  cursor: pointer;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


/* Standardmarker der Browser entfernen */

.com-content-article details > summary::-webkit-details-marker,
.item-page details > summary::-webkit-details-marker {
  display: none;
}

.com-content-article details > summary::marker,
.item-page details > summary::marker {
  content: "";
}


/* Runde Plus-/Minusmarke */

.com-content-article details > summary::before,
.item-page details > summary::before {
  content: "+";

  display: inline-grid;
  place-items: center;

  width: 24px;
  height: 24px;

  color: var(--site-accent);
  background: #fff;

  border: 2px solid var(--site-accent);
  border-radius: 50%;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}


/* Pfeil rechts */

.com-content-article details > summary::after,
.item-page details > summary::after {
  content: "›";

  justify-self: end;

  color: var(--site-muted);

  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;

  transition: transform 0.2s ease;
}


/* Hover und Tastaturfokus */

.com-content-article details > summary:hover,
.com-content-article details > summary:focus-visible,
.item-page details > summary:hover,
.item-page details > summary:focus-visible {
  color: var(--site-primary);

  background:
    color-mix(
      in srgb,
      var(--site-primary) 4%,
      white
    );
}

.com-content-article details > summary:focus-visible,
.item-page details > summary:focus-visible {
  outline:
    3px solid color-mix(
      in srgb,
      var(--site-primary) 20%,
      transparent
    );

  outline-offset: -3px;
}


/* Geöffneter Zustand */

.com-content-article details[open],
.item-page details[open] {
  padding-bottom: 1rem;
}

.com-content-article details[open] > summary,
.item-page details[open] > summary {
  margin-bottom: 1rem;

  color: var(--site-primary);
  border-bottom: 1px solid var(--site-border);
}

.com-content-article details[open] > summary::before,
.item-page details[open] > summary::before {
  content: "−";

  color: #fff;
  background: var(--site-accent);
}

.com-content-article details[open] > summary::after,
.item-page details[open] > summary::after {
  transform: rotate(90deg);
}


/* Inhalte ohne zusätzlichen Wrapper einrücken */

.com-content-article details > :not(summary),
.item-page details > :not(summary) {
  width: auto;
  max-width: none;

  margin-right: 1.1rem;
  margin-left: 3.55rem;
}

.com-content-article details > :not(summary):first-of-type,
.item-page details > :not(summary):first-of-type {
  margin-top: 0;
}

.com-content-article details > :not(summary):last-child,
.item-page details > :not(summary):last-child {
  margin-bottom: 0;
}


/* Listen innerhalb der Detailsbox */

.com-content-article details > ul,
.com-content-article details > ol,
.item-page details > ul,
.item-page details > ol {
  padding-left: 1.4rem;
}


/* Bilder innerhalb der Detailsbox */

.com-content-article details img,
.item-page details img {
  max-width: 100%;
  height: auto;
}


/* Mobil kompakter */

@media (max-width: 575.98px) {

  .com-content-article details > summary,
  .item-page details > summary {
    grid-template-columns:
      24px
      minmax(0, 1fr)
      16px;

    gap: 0.65rem;

    min-height: 50px;

    padding: 0.65rem 0.85rem;

    font-size: 0.9rem;
  }

  .com-content-article details > summary::before,
  .item-page details > summary::before {
    width: 22px;
    height: 22px;

    font-size: 0.9rem;
  }

  .com-content-article details > :not(summary),
  .item-page details > :not(summary) {
    margin-right: 0.9rem;
    margin-left: 3.15rem;
  }
}

/* =========================================================
   AUTORENBOX
   ========================================================= */

.author-box {
  width: 100%;
  max-width: var(--site-content-width);

  margin-top: 2.2rem;
  overflow: hidden;

  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.author-box > .row {
  margin: 0;
}

.author-box > .row > .col-12:first-child {
  width: 100%;
  max-width: none;
  padding: 0;
}

.com-content-article .author-box .card-header,
.item-page .author-box .card-header {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 1rem 1.25rem;

  color: #000;
  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--site-primary) 4%,
        white
      ),
      #f7f7f7
    );

  border: 0;
  border-bottom: 1px solid var(--site-border);
  border-radius:
    calc(var(--site-radius) - 1px)
    calc(var(--site-radius) - 1px)
    0
    0;

  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 850;
  line-height: 1.25;
}

.author-box .card-body {
  padding: 1.35rem 1.5rem;
}

.author-box .card-title {
  margin-top: 0;
  margin-bottom: 0.8rem;

  color: #000;
}

.author-box .card-text {
  max-width: none;
}

.author-box .card-text p {
  max-width: none;
}

.author-box .card-text > :last-child {
  margin-bottom: 0;
}

.author-box img {
  display: block;
  width: 100%;
  height: auto;
}


/* Mobil */

@media (max-width: 767.98px) {
  .author-box .card-body {
    padding: 1.1rem;
  }

  .com-content-article .author-box .card-header,
  .item-page .author-box .card-header {
    padding: 0.85rem 1rem;

    font-size: 1.3rem;
  }
}
/* =========================================================
   22. MULTI-DOMAIN-ERGÄNZUNGEN
   Header, mobiles Menü, Footer und YouTube-Komponente greifen
   auf die Variablen aus Abschnitt 1A zurück.
   Dieser Block bleibt auf allen Domains identisch.
   ========================================================= */

/* Header-Navigation und Symbole */
.container-header a,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: var(--site-header-link, var(--site-header-text));
}

.container-header a:hover,
.container-header a:focus-visible,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible,
.container-header .mod-menu > li > span:hover {
  color: var(--site-header-link-hover, var(--site-accent));
}

.container-header .navbar-toggler {
  color: var(--site-header-icon, var(--site-primary));
}

.container-header.is-compact {
  box-shadow:
    0 1px 0 var(--site-header-border),
    0 8px 24px
      color-mix(
        in srgb,
        var(--site-primary-dark) 8%,
        transparent
      );
}

/* Mobiles Aufklappmenü */
@media (max-width: 991.98px) {
  .container-header .navbar-collapse {
    color: var(--site-mobile-menu-text, var(--site-text));
    background: var(--site-mobile-menu-bg, #ffffff);
  }

  .container-header .navbar-collapse a,
  .container-header .navbar-collapse .mod-menu > li > a,
  .container-header .navbar-collapse .mod-menu > li > span {
    color: var(--site-mobile-menu-link, var(--site-primary-dark));
  }

  .container-header .navbar-collapse a:hover,
  .container-header .navbar-collapse a:focus-visible,
  .container-header .navbar-collapse .mod-menu > li > a:hover,
  .container-header .navbar-collapse .mod-menu > li > a:focus-visible {
    color: var(--site-mobile-menu-link-hover, var(--site-accent));
  }
}

/* Footer */
.container-footer,
footer.footer,
footer.container-footer {
  color: var(--site-footer-text, #ffffff);
  background: var(--site-footer-bg, var(--site-primary-dark));
  border-top: 4px solid var(--site-accent);
}

.container-footer :is(p, li, h1, h2, h3, h4, h5, h6),
footer.footer :is(p, li, h1, h2, h3, h4, h5, h6),
footer.container-footer :is(p, li, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.container-footer a,
footer.footer a,
footer.container-footer a {
  color: var(--site-footer-link, #ffffff);
  text-decoration-color:
    color-mix(
      in srgb,
      var(--site-footer-link, #ffffff) 45%,
      transparent
    );
}

.container-footer a:hover,
.container-footer a:focus-visible,
footer.footer a:hover,
footer.footer a:focus-visible,
footer.container-footer a:hover,
footer.container-footer a:focus-visible {
  color: var(--site-footer-link-hover, var(--site-accent));
}

.container-footer :is(small, .footer-muted),
footer.footer :is(small, .footer-muted),
footer.container-footer :is(small, .footer-muted) {
  color: var(--site-footer-muted, rgba(255, 255, 255, 0.82));
}

.container-footer hr,
footer.footer hr,
footer.container-footer hr {
  border-color: var(--site-footer-border, rgba(255, 255, 255, 0.18));
}

/* YouTube-Vorschau: zentrale Komponente an Domainfarben anbinden */
.yv2-load-btn,
.yv2-load-btn.btn,
.yv2-load-btn.btn.btn-primary {
  color: #ffffff;
  background: var(--site-video-cta, var(--site-accent));
  border-color: var(--site-video-cta, var(--site-accent));
}

.yv2-load-btn:hover,
.yv2-load-btn:focus-visible,
.yv2-load-btn.btn:hover,
.yv2-load-btn.btn:focus-visible,
.yv2-load-btn.btn.btn-primary:hover,
.yv2-load-btn.btn.btn-primary:focus-visible {
  color: #ffffff;
  background:
    color-mix(
      in srgb,
      var(--site-video-cta, var(--site-accent)) 84%,
      black
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-video-cta, var(--site-accent)) 84%,
      black
    );
}

.yv2-heading .yv2-title-label,
.yv2-title-label {
  color: var(--site-video-accent, var(--site-accent));
}

/* =========================================================
   23. KATEGORIE-BLOG / BEITRAGSVORSCHAUEN
   Gilt nur für die Kategorie-Blogansicht. Die Einzelansicht
   eines Beitrags wird durch diese Regeln nicht verändert.
   Voraussetzung: angepasster Override
   html/com_content/category/blog_item.php
   ========================================================= */

/* Gleichmäßige Abstände zwischen den Beitragsvorschauen. */

.com-content-category-blog .blog-items {
  row-gap: 2rem;
}

.com-content-category-blog .blog-item {
  min-width: 0;
  margin-bottom: 2rem;
  padding: 0;
}

.com-content-category-blog .blog-item:last-child {
  margin-bottom: 0;
}


/* Gesamte Beitragsvorschau als ruhige Karte im neuen Design. */

.com-content-category-blog .site-category-item {
  width: 100%;
  max-width: var(--site-content-width);
  overflow: hidden;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);

  box-shadow: var(--site-shadow-sm);
}


/* Titelbereich oberhalb des Vorschaubildes. Der dünne Akzentstreifen
   übernimmt die Funktion des früheren farbigen Titelbalkens, wirkt
   aber deutlich leichter und passt zum neuen Kartendesign. */

.com-content-category-blog .site-category-item__header {
  position: relative;

  margin: 0;
  padding: 1rem 1.25rem 0.95rem;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 5%, white),
      #fff
    );

  border-top: 4px solid var(--site-accent);
  border-bottom: 1px solid var(--site-border);
}

.com-content-category-blog .site-category-item__header .page-header {
  width: 100%;
  max-width: var(--site-text-width);

  margin: 0 auto;
  padding: 0;

  border: 0;
}

.com-content-category-blog .site-category-item__header :is(h2, .item-title) {
  width: 100%;
  max-width: none;

  margin: 0;

  color: var(--site-primary-dark);

  font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.62rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.com-content-category-blog .site-category-item__header :is(h2, .item-title) a {
  color: var(--site-primary-dark);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.com-content-category-blog .site-category-item__header :is(h2, .item-title) a:hover,
.com-content-category-blog .site-category-item__header :is(h2, .item-title) a:focus-visible {
  color: var(--site-accent);
  text-decoration: underline;
}

.com-content-category-blog .site-category-item__header :is(h2, .item-title) a:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-primary) 20%,
      transparent
    );
  outline-offset: 4px;
  border-radius: 3px;
}


/* Bearbeitungssymbol für angemeldete Redakteure. */

.com-content-category-blog .site-category-item__header:has(.site-category-item__edit) .page-header {
  padding-right: 3.25rem;
}

.com-content-category-blog .site-category-item__edit {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 2;
}

.com-content-category-blog .site-category-item__edit .btn {
  box-shadow: none;
}


/* Vorschaubild: natürliche Bildbreite beibehalten. Kleine Bilder
   werden nicht hochskaliert; große Bilder werden responsiv auf die
   verfügbare Kartenbreite verkleinert. */

.com-content-category-blog .site-category-item__image {
  display: none;

  width: 100%;
  max-width: var(--site-content-width);
}

.com-content-category-blog .site-category-item__image:has(img) {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: 1.1rem;
}

.com-content-category-blog .site-category-item__image .item-image,
.com-content-category-blog .site-category-item__image figure.item-image {
  flex: 0 1 auto;
  float: none !important;

  width: auto;
  max-width: 100%;

  margin: 0 auto;
  overflow: hidden;

  border-radius: var(--site-radius-sm);
  box-shadow: none;
}

.com-content-category-blog .site-category-item__image .item-image img,
.com-content-category-blog .site-category-item__image figure.item-image img {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  margin: 0 auto;
}

/* Eine gegebenenfalls vorhandene Joomla-Bildunterschrift bleibt
   als halbtransparenter Balken über dem unteren Bildrand erhalten. */

.com-content-category-blog .site-category-item__image .item-image figcaption,
.com-content-category-blog .site-category-item__image figure.item-image figcaption {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}


/* Textbereich: dieselbe 680-px-Lesebreite wie in der Einzelansicht. */

.com-content-category-blog .site-category-item__content {
  width: calc(100% - 2rem);
  max-width: var(--site-text-width);

  margin: 0 auto;
  padding: 1.15rem 0 1.35rem;

  color: var(--site-text);
}

.com-content-category-blog .site-category-item__intro {
  width: 100%;
  max-width: none;
}

.com-content-category-blog .site-category-item__intro > :first-child {
  margin-top: 0;
}

.com-content-category-blog .site-category-item__intro > :last-child {
  margin-bottom: 0;
}

.com-content-category-blog .site-category-item__intro p,
.com-content-category-blog .site-category-item__intro li {
  line-height: 1.68;
}

.com-content-category-blog .site-category-item__intro p {
  margin-bottom: 0.9rem;
}

.com-content-category-blog .site-category-item__intro li {
  margin-bottom: 0.3rem;
}

.com-content-category-blog .site-category-item__intro :is(h2, h3, h4, h5, h6) {
  max-width: none;

  color: var(--site-text);
  font-weight: 800;
  line-height: 1.25;
}

.com-content-category-blog .site-category-item__intro h2 {
  margin-top: 1.45rem;
  margin-bottom: 0.65rem;

  font-size: clamp(1.3rem, 1.18rem + 0.5vw, 1.58rem);
  letter-spacing: -0.015em;
}

.com-content-category-blog .site-category-item__intro h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.55rem;

  font-size: clamp(1.12rem, 1.04rem + 0.28vw, 1.3rem);
}


/* Bestehende Drei-Punkte-/Quicklink-Leisten passen sich innerhalb
   einer Vorschau automatisch an die Lesebreite an. */

.com-content-category-blog .site-category-item .site-quicklinks {
  max-width: 100%;
  margin-top: 1.15rem;
  margin-bottom: 0.2rem;
}


/* Weiterlesen-Schaltfläche. */

.com-content-category-blog .site-category-item__readmore {
  margin-top: 1.15rem;
}

.com-content-category-blog .site-category-item__readmore .readmore {
  margin: 0;
}

.com-content-category-blog .site-category-item__readmore :is(.btn, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  min-height: 42px;
  padding: 0.58rem 0.9rem;

  color: var(--site-primary-dark);
  background: #fff;

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);

  box-shadow: none;

  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.com-content-category-blog .site-category-item__readmore :is(.btn, a):hover,
.com-content-category-blog .site-category-item__readmore :is(.btn, a):focus-visible {
  color: #fff;
  background: var(--site-primary);
  border-color: var(--site-primary);
}

.com-content-category-blog .site-category-item__readmore :is(.btn, a):focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-primary) 24%,
      transparent
    );
  outline-offset: 3px;
}


/* Von Content-Plugins erzeugte Ausgaben vor oder nach dem Introtext
   bleiben innerhalb der vorgesehenen Lesebreite. */

.com-content-category-blog .site-category-item__content > :is(
  .icons,
  .content_rating,
  .content_vote,
  .fields-container
) {
  max-width: 100%;
}


/* Mobil: kompaktere Karte, gut lesbarer Titel und große Tap-Fläche. */

@media (max-width: 767.98px) {
  .com-content-category-blog .blog-items {
    row-gap: 1.5rem;
  }

  .com-content-category-blog .blog-item {
    margin-bottom: 1.5rem;
  }

  .com-content-category-blog .site-category-item {
    border-radius: 12px;
  }

  .com-content-category-blog .site-category-item__header {
    padding: 0.82rem 0.9rem 0.8rem;
    border-top-width: 3px;
  }

  .com-content-category-blog .site-category-item__header :is(h2, .item-title) {
    font-size: 1.22rem;
    line-height: 1.28;
  }

  .com-content-category-blog .site-category-item__image:has(img) {
    padding-top: 0.85rem;
  }

  .com-content-category-blog .site-category-item__image .item-image,
  .com-content-category-blog .site-category-item__image figure.item-image {
    border-radius: 8px;
  }

  .com-content-category-blog .site-category-item__content {
    width: calc(100% - 1.5rem);
    padding-top: 0.95rem;
    padding-bottom: 1.1rem;
  }

  .com-content-category-blog .site-category-item__intro h2 {
    font-size: 1.24rem;
  }

  .com-content-category-blog .site-category-item__intro h3 {
    font-size: 1.1rem;
  }

  .com-content-category-blog .site-category-item__readmore :is(.btn, a) {
    width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
}


/* Sehr schmale Displays. */

@media (max-width: 420px) {
  .com-content-category-blog .site-category-item__header {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .com-content-category-blog .site-category-item__content {
    width: calc(100% - 1.25rem);
  }
}


/* Druckansicht ohne dekorative Schatten. */

@media print {
  .com-content-category-blog .site-category-item {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* =========================================================
   SCROLLBOX / OVERFLOW-INHALTE
   PHP-Einbindung: overflow.php
   ========================================================= */

.site-overflow-box {
  box-sizing: border-box;

  width: 100%;
  max-width: var(--site-content-width);
  max-height: var(--site-overflow-height, 300px);

  margin: 1rem 0 1.5rem;
  padding: 1rem 1.15rem;

  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  color: var(--site-text);

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--site-primary) 3%,
        white
      ),
      #ffffff
    );

  border: 1px solid var(--site-border);
  border-left: 4px solid var(--site-primary);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);

  scrollbar-width: thin;
  scrollbar-color:
    color-mix(
      in srgb,
      var(--site-primary) 55%,
      transparent
    )
    transparent;

  -webkit-overflow-scrolling: touch;
}

/* Inhalte dürfen die gesamte Innenbreite nutzen */

.com-content-article .site-overflow-box
:where(p, ul, ol, h2, h3, h4, h5, h6),
.item-page .site-overflow-box
:where(p, ul, ol, h2, h3, h4, h5, h6) {
  max-width: none;
}

.site-overflow-box > :first-child {
  margin-top: 0;
}

.site-overflow-box > :last-child {
  margin-bottom: 0;
}

.site-overflow-box ul,
.site-overflow-box ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

.site-overflow-box li {
  margin-bottom: 0.4rem;
}

.site-overflow-box li:last-child {
  margin-bottom: 0;
}

/* Tastaturfokus */

.site-overflow-box:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-primary) 24%,
      transparent
    );

  outline-offset: 3px;
}

/* Scrollbalken in Chromium, Safari und Edge */

.site-overflow-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.site-overflow-box::-webkit-scrollbar-track {
  background:
    color-mix(
      in srgb,
      var(--site-primary) 5%,
      transparent
    );

  border-radius: 999px;
}

.site-overflow-box::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--site-primary) 48%,
      transparent
    );

  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.site-overflow-box::-webkit-scrollbar-thumb:hover {
  background:
    color-mix(
      in srgb,
      var(--site-primary) 68%,
      transparent
    );

  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Mobil nicht höher als 60 Prozent des sichtbaren Fensters */

@media (max-width: 575.98px) {
  .site-overflow-box {
    max-height:
      min(
        var(--site-overflow-height, 300px),
        60vh
      );

    margin: 0.9rem 0 1.3rem;
    padding: 0.85rem 0.9rem;

    border-left-width: 3px;
    border-radius: 12px;
  }

  .site-overflow-box ul,
  .site-overflow-box ol {
    padding-left: 1.35rem;
  }
}

/* =========================================================
   SUCHFELD / EXTERNE ORTSSUCHE
   PHP-Einbindung: suchfeld.php
   ========================================================= */

.site-search-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.7rem;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.25rem 0 1.8rem;
  padding: 0.75rem;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-primary) 5%,
        white
      ),
      #ffffff 72%
    );

  border: 1px solid var(--site-border);
  border-left: 4px solid var(--site-primary);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.site-search-tool__field {
  position: relative;
  min-width: 0;
}

/* Suchsymbol */

.site-search-tool__field::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 1rem;

  width: 20px;
  height: 20px;

  background: var(--site-primary);

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  transform: translateY(-50%);
  pointer-events: none;
}

.site-search-tool__input {
  box-sizing: border-box;

  width: 100%;
  min-width: 0;
  min-height: 52px;

  margin: 0;
  padding: 0.72rem 1rem 0.72rem 3rem;

  color: var(--site-text);
  background: #ffffff;

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);

  font: inherit;
  font-size: 1rem;
  line-height: 1.35;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.site-search-tool__input::placeholder {
  color: var(--site-muted);
  opacity: 0.88;
}

.site-search-tool__input:hover {
  border-color:
    color-mix(
      in srgb,
      var(--site-primary) 45%,
      transparent
    );
}

.site-search-tool__input:focus {
  background: #ffffff;
  border-color: var(--site-primary);

  outline: none;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--site-primary) 17%,
      transparent
    );
}

.site-search-tool__input[aria-invalid="true"] {
  border-color: var(--site-red);
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--site-red) 16%,
      transparent
    );
}

/* Suchbutton */

.site-search-tool__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 0.72rem 1.35rem;

  color: #ffffff;

  background:
    var(
      --site-search-cta,
      var(--site-accent)
    );

  border: 1px solid
    var(
      --site-search-cta,
      var(--site-accent)
    );

  border-radius: var(--site-radius-sm);

  box-shadow:
    0 5px 14px
    color-mix(
      in srgb,
      var(
        --site-search-cta,
        var(--site-accent)
      ) 22%,
      transparent
    );

  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.site-search-tool__button:hover,
.site-search-tool__button:focus-visible {
  color: #ffffff;

  background:
    color-mix(
      in srgb,
      var(
        --site-search-cta,
        var(--site-accent)
      ) 84%,
      black
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --site-search-cta,
        var(--site-accent)
      ) 84%,
      black
    );

  transform: translateY(-1px);
}

.site-search-tool__button:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(
        --site-search-cta,
        var(--site-accent)
      ) 24%,
      transparent
    );

  outline-offset: 3px;
}

.site-search-tool__button:active {
  transform: translateY(0);
}

/* Mobil */

@media (max-width: 575.98px) {
  .site-search-tool {
    grid-template-columns: 1fr;

    margin: 1rem 0 1.5rem;
    padding: 0.65rem;

    border-left-width: 3px;
    border-radius: 12px;
  }

  .site-search-tool__input,
  .site-search-tool__button {
    min-height: 50px;
  }

  .site-search-tool__button {
    width: 100%;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-search-tool__input,
  .site-search-tool__button {
    transition: none;
  }
}

/* =========================================================
   AMAZON-SUCHBUTTON
   PHP-EinBINDUNG: amazon-angebote.php
   ========================================================= */

.site-amazon-search {
  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.4rem 0 2rem;
}


/* Gesamter Button */

.site-amazon-search__link {
  display: grid;
  grid-template-columns:
    52px
    minmax(0, 1fr)
    32px;

  align-items: center;
  gap: 1rem;

  box-sizing: border-box;

  width: 100%;
  min-height: 82px;
  padding: 0.9rem 1.15rem;

  color: var(--site-amazon-cta-text, #ffffff);

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(
          --site-amazon-cta,
          var(--site-accent)
        ) 92%,
        white
      ),
      var(
        --site-amazon-cta,
        var(--site-accent)
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --site-amazon-cta,
        var(--site-accent)
      ) 84%,
      black
    );

  border-radius: var(--site-radius);

  box-shadow:
    0 8px 22px
    color-mix(
      in srgb,
      var(
        --site-amazon-cta,
        var(--site-accent)
      ) 24%,
      transparent
    );

  text-decoration: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* Bereits besuchter Link bleibt weiß */

.site-amazon-search__link:visited,
.com-content-article .site-amazon-search__link:visited,
.item-page .site-amazon-search__link:visited {
  color: var(--site-amazon-cta-text, #ffffff);
  text-decoration: none;
}


/* Texte und Symbole übernehmen immer die Buttonfarbe */

.site-amazon-search__link
:is(
  .site-amazon-search__kicker,
  .site-amazon-search__title,
  .site-amazon-search__arrow,
  .site-amazon-search__icon
),
.site-amazon-search__link:visited
:is(
  .site-amazon-search__kicker,
  .site-amazon-search__title,
  .site-amazon-search__arrow,
  .site-amazon-search__icon
) {
  color: inherit;
}


/* Hover und Tastaturfokus */

.site-amazon-search__link:hover,
.site-amazon-search__link:focus-visible,
.site-amazon-search__link:visited:hover,
.site-amazon-search__link:visited:focus-visible {
  color: var(--site-amazon-cta-text, #ffffff);

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(
          --site-amazon-cta,
          var(--site-accent)
        ) 82%,
        black
      ),
      color-mix(
        in srgb,
        var(
          --site-amazon-cta,
          var(--site-accent)
        ) 90%,
        black
      )
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --site-amazon-cta,
        var(--site-accent)
      ) 76%,
      black
    );

  box-shadow:
    0 11px 26px
    color-mix(
      in srgb,
      var(
        --site-amazon-cta,
        var(--site-accent)
      ) 30%,
      transparent
    );

  text-decoration: none;
  transform: translateY(-2px);
}

.site-amazon-search__link:focus-visible,
.site-amazon-search__link:visited:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(
        --site-amazon-cta,
        var(--site-accent)
      ) 28%,
      transparent
    );

  outline-offset: 4px;
}

.site-amazon-search__link:active {
  transform: translateY(0);
}


/* Rundes Warenkorb-Symbol */

.site-amazon-search__icon {
  position: relative;

  display: inline-grid;
  place-items: center;

  width: 52px;
  height: 52px;

  color: inherit;
  background: rgba(255, 255, 255, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
}

.site-amazon-search__icon::before {
  content: "";

  width: 27px;
  height: 27px;

  background: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h2l1.4 9.1a2 2 0 0 0 2 1.7h8.8a2 2 0 0 0 1.9-1.4L21 8H7M9 20h.01M18 20h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h2l1.4 9.1a2 2 0 0 0 2 1.7h8.8a2 2 0 0 0 1.9-1.4L21 8H7M9 20h.01M18 20h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* Textbereich */

.site-amazon-search__content {
  display: block;
  min-width: 0;
}


/* Kleine Zeile „Bei Amazon“ */

.site-amazon-search__kicker {
  display: block;

  margin-bottom: 0.18rem;

  color: inherit;
  opacity: 0.86;

  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* Hauptbeschriftung */

.site-amazon-search__title {
  display: block;

  color: inherit;

  font-size:
    clamp(
      1.08rem,
      1.8vw,
      1.35rem
    );

  font-weight: 800;
  line-height: 1.3;

  overflow-wrap: anywhere;
}


/* Pfeil rechts */

.site-amazon-search__arrow {
  justify-self: end;

  color: inherit;

  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;

  transition: transform 0.18s ease;
}

.site-amazon-search__link:hover
.site-amazon-search__arrow,
.site-amazon-search__link:focus-visible
.site-amazon-search__arrow {
  transform: translateX(3px);
}


/* Mobil */

@media (max-width: 575.98px) {
  .site-amazon-search {
    margin: 1.2rem 0 1.7rem;
  }

  .site-amazon-search__link {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      24px;

    gap: 0.75rem;

    min-height: 72px;
    padding: 0.75rem 0.85rem;

    border-radius: 12px;
  }

  .site-amazon-search__icon {
    width: 44px;
    height: 44px;
  }

  .site-amazon-search__icon::before {
    width: 23px;
    height: 23px;
  }

  .site-amazon-search__title {
    font-size: 1rem;
  }

  .site-amazon-search__arrow {
    font-size: 1.55rem;
  }
}


/* Reduzierte Animationen */

@media (prefers-reduced-motion: reduce) {
  .site-amazon-search__link,
  .site-amazon-search__arrow {
    transition: none;
  }
}

/* =========================================================
   AUDIO-PLAYER
   PHP-Einbindung: audioeinbindung.php
   ========================================================= */

.site-audio-player {
  box-sizing: border-box;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.2rem 1.2rem;

  color: var(--site-text);

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-audio-accent, var(--site-primary)) 7%,
        white
      ),
      #ffffff 72%
    );

  border: 1px solid var(--site-border);
  border-left: 4px solid
    var(--site-audio-accent, var(--site-primary));
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.site-audio-player__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;

  margin-bottom: 0.9rem;
}

.site-audio-player__icon {
  position: relative;

  display: inline-grid;
  flex: 0 0 48px;
  place-items: center;

  width: 48px;
  height: 48px;

  color: var(--site-audio-accent, var(--site-primary));

  background:
    color-mix(
      in srgb,
      var(--site-audio-accent, var(--site-primary)) 12%,
      white
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-audio-accent, var(--site-primary)) 24%,
      transparent
    );
  border-radius: 50%;
}

.site-audio-player__icon::before {
  content: "";

  width: 25px;
  height: 25px;

  background: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l10-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='black'/%3E%3Ccircle cx='16' cy='16' r='3' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l10-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='black'/%3E%3Ccircle cx='16' cy='16' r='3' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.site-audio-player__heading {
  min-width: 0;
}

.site-audio-player__kicker {
  display: block;

  margin-bottom: 0.15rem;

  color: var(--site-audio-accent, var(--site-primary));

  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.com-content-article .site-audio-player__title,
.item-page .site-audio-player__title,
.site-audio-player__title {
  max-width: none;

  margin: 0;

  color: var(--site-primary-dark);

  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.3;
}

.site-audio-player__description {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;

  background: rgba(255, 255, 255, 0.72);

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-audio-accent, var(--site-primary)) 14%,
      transparent
    );
  border-radius: var(--site-radius-sm);
}

.com-content-article .site-audio-player__description
:where(p, ul, ol, h2, h3, h4, h5, h6),
.item-page .site-audio-player__description
:where(p, ul, ol, h2, h3, h4, h5, h6) {
  max-width: none;
}

.site-audio-player__description > :first-child {
  margin-top: 0;
}

.site-audio-player__description > :last-child {
  margin-bottom: 0;
}

.site-audio-player__control {
  display: block;

  width: 100%;
  min-height: 54px;

  margin: 0;

  accent-color:
    var(--site-audio-accent, var(--site-primary));

  color-scheme: light;
}

.site-audio-player__control:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-audio-accent, var(--site-primary)) 24%,
      transparent
    );

  outline-offset: 4px;
  border-radius: 999px;
}

@media (max-width: 575.98px) {
  .site-audio-player {
    margin: 1.25rem 0 1.7rem;
    padding: 0.9rem;

    border-left-width: 3px;
    border-radius: 12px;
  }

  .site-audio-player__header {
    gap: 0.7rem;
    margin-bottom: 0.75rem;
  }

  .site-audio-player__icon {
    flex-basis: 42px;

    width: 42px;
    height: 42px;
  }

  .site-audio-player__icon::before {
    width: 22px;
    height: 22px;
  }

  .site-audio-player__title {
    font-size: 1rem;
  }

  .site-audio-player__description {
    padding: 0.7rem 0.75rem;
  }

  .site-audio-player__control {
    min-height: 50px;
  }
}

/* =========================================================
   PRODUKTANGEBOT
   PHP-Einbindung: produktangebot.php
   ========================================================= */

.site-product-offer {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 1.25rem;

  box-sizing: border-box;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 1.5rem 0 2rem;
  padding: 1rem;

  color: var(--site-text);

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--site-product-accent, var(--site-primary)) 5%,
        white
      ),
      #ffffff 72%
    );

  border: 1px solid var(--site-border);
  border-top: 4px solid
    var(--site-product-accent, var(--site-primary));
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

/* Ohne Bildangabe wird kein Bildbereich reserviert. */

.site-product-offer--without-media {
  grid-template-columns: minmax(0, 1fr);
}


/* Bildbereich und fehlendes Produktbild */

.site-product-offer__media {
  position: relative;

  display: grid;
  place-items: center;

  min-width: 0;
  min-height: 190px;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-product-accent, var(--site-primary)) 7%,
        white
      ),
      #ffffff
    );

  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);
}

.site-product-offer__placeholder {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  color:
    color-mix(
      in srgb,
      var(--site-product-accent, var(--site-primary)) 72%,
      white
    );

  background:
    color-mix(
      in srgb,
      var(--site-product-accent, var(--site-primary)) 9%,
      white
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-product-accent, var(--site-primary)) 20%,
      transparent
    );
  border-radius: 50%;
}

.site-product-offer__placeholder::before {
  content: "";

  width: 38px;
  height: 38px;

  background: currentColor;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l1 12H5L6 8Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l1 12H5L6 8Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.site-product-offer__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  padding: 0.6rem;

  background: #ffffff;

  object-fit: contain;
}

.site-product-offer__media.is-placeholder
.site-product-offer__image {
  display: none;
}


/* Inhaltsbereich */

.site-product-offer__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-product-offer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.8rem;

  margin-bottom: 0.55rem;
}

.site-product-offer__provider {
  color: var(--site-product-accent, var(--site-primary));

  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.site-product-offer__ad {
  display: inline-flex;
  align-items: center;

  padding: 0.24rem 0.55rem;

  color: var(--site-muted);
  background: #ffffff;

  border: 1px solid var(--site-border);
  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}


/* Produkttitel */

.com-content-article .site-product-offer__title,
.item-page .site-product-offer__title,
.site-product-offer__title {
  max-width: none;

  margin: 0 0 0.65rem;

  color: var(--site-primary-dark);

  font-size: clamp(1.16rem, 2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.site-product-offer__title a,
.site-product-offer__title a:visited {
  color: inherit;
  text-decoration: none;
}

.site-product-offer__title a:hover,
.site-product-offer__title a:focus-visible {
  color: var(--site-product-cta, var(--site-accent));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* Erläuterung */

.com-content-article .site-product-offer__description,
.item-page .site-product-offer__description,
.site-product-offer__description {
  max-width: none;

  margin: 0 0 1rem;

  color: var(--site-text);

  font-size: 0.98rem;
  line-height: 1.6;
}


/* CTA-Button */

.site-product-offer__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;

  width: fit-content;
  max-width: 100%;

  margin-top: auto;
  padding: 0.7rem 1rem;

  color: var(--site-product-cta-text, #ffffff);

  background:
    var(
      --site-product-cta,
      var(--site-accent)
    );

  border: 1px solid
    var(
      --site-product-cta,
      var(--site-accent)
    );
  border-radius: var(--site-radius-sm);

  box-shadow:
    0 5px 14px
    color-mix(
      in srgb,
      var(--site-product-cta, var(--site-accent)) 22%,
      transparent
    );

  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.3;

  text-decoration: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.site-product-offer__button:visited {
  color: var(--site-product-cta-text, #ffffff);
}

.site-product-offer__button:hover,
.site-product-offer__button:focus-visible,
.site-product-offer__button:visited:hover,
.site-product-offer__button:visited:focus-visible {
  color: var(--site-product-cta-text, #ffffff);

  background:
    color-mix(
      in srgb,
      var(--site-product-cta, var(--site-accent)) 84%,
      black
    );

  border-color:
    color-mix(
      in srgb,
      var(--site-product-cta, var(--site-accent)) 84%,
      black
    );

  text-decoration: none;
  transform: translateY(-1px);
}

.site-product-offer__button:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-product-cta, var(--site-accent)) 24%,
      transparent
    );

  outline-offset: 3px;
}

.site-product-offer__button:active {
  transform: translateY(0);
}

.site-product-offer__arrow {
  flex: 0 0 auto;

  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;

  transition: transform 0.18s ease;
}

.site-product-offer__button:hover
.site-product-offer__arrow,
.site-product-offer__button:focus-visible
.site-product-offer__arrow {
  transform: translateX(3px);
}


/* Mobil */

@media (max-width: 575.98px) {
  .site-product-offer {
    grid-template-columns: 1fr;
    gap: 0.9rem;

    margin: 1.25rem 0 1.7rem;
    padding: 0.85rem;

    border-top-width: 3px;
    border-radius: 12px;
  }

  .site-product-offer__media {
    min-height: 165px;
  }

  .site-product-offer__placeholder {
    width: 68px;
    height: 68px;
  }

  .site-product-offer__placeholder::before {
    width: 34px;
    height: 34px;
  }

  .site-product-offer__title {
    font-size: 1.08rem;
  }

  .site-product-offer__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-product-offer__button,
  .site-product-offer__arrow {
    transition: none;
  }
}

/* =========================================================
   24. ARTIKEL-INCLUDE IN BEITRÄGEN
   Darstellung für /myphpfiles/artikel_include.php.
   Das PHP erzeugt ausschließlich das Markup; alle optischen
   Regeln liegen zentral in der user.css.
   ========================================================= */

.site-article-include {
  width: 100%;
  max-width: var(--site-content-width) !important;
  margin: 1.75rem 0;
}

.site-article-include__items {
  display: grid;
  gap: 2rem;
  width: 100%;
}

/* Normale Artikelvorschau analog zur Kategorieansicht. */

.site-article-include .site-article-card {
  width: 100%;
  max-width: var(--site-content-width) !important;
  margin: 0;
  overflow: hidden;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);

  box-shadow: var(--site-shadow-sm);
}

.site-article-include .site-article-card__header {
  position: relative;
  margin: 0;
  padding: 1rem 1.25rem 0.95rem;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 5%, white),
      #fff
    );

  border-top: 4px solid var(--site-accent);
  border-bottom: 1px solid var(--site-border);
}

.site-article-include .site-article-card__title {
  width: 100%;
  max-width: var(--site-text-width) !important;
  margin: 0 auto;

  color: var(--site-primary-dark);
  font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.62rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.site-article-include .site-article-card__title a {
  color: var(--site-primary-dark);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.site-article-include .site-article-card__title a:hover,
.site-article-include .site-article-card__title a:focus-visible {
  color: var(--site-accent);
  text-decoration: underline;
}

.site-article-include .site-article-card__title a:focus-visible {
  outline:
    3px solid
    color-mix(in srgb, var(--site-primary) 20%, transparent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Bildbreite bleibt natürlich. Kleine Bilder werden nicht hochskaliert. */

.site-article-include .site-article-card__image-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: var(--site-content-width) !important;
  padding-top: 1.1rem;
}

.site-article-include .site-article-card__image-link {
  display: block;
  flex: 0 1 auto;
  width: auto !important;
  max-width: calc(100% - 2rem) !important;
  margin: 0 auto;
  overflow: hidden;

  border-radius: var(--site-radius-sm);
  background: transparent;
  box-shadow: none;
}

.site-article-include .site-article-card__image {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Textbereich mit derselben 680-px-Lesebreite wie die Kategorieansicht. */

.site-article-include .site-article-card__body {
  width: calc(100% - 2rem) !important;
  max-width: var(--site-text-width) !important;
  margin: 0 auto;
  padding: 1.15rem 0 1.35rem;
  color: var(--site-text);
}

.site-article-include .site-article-card__text {
  width: 100%;
  max-width: none !important;
}

.site-article-include .site-article-card__text > :first-child {
  margin-top: 0;
}

.site-article-include .site-article-card__text > :last-child {
  margin-bottom: 0;
}

.site-article-include .site-article-card__text :is(
  p,
  ul,
  ol,
  li,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  max-width: 100% !important;
}

.site-article-include .site-article-card__text p,
.site-article-include .site-article-card__text li {
  line-height: 1.68;
}

.site-article-include .site-article-card__text p {
  margin-bottom: 0.9rem;
}

.site-article-include .site-article-card__text li {
  margin-bottom: 0.3rem;
}

/* Weiterlesen-Schaltfläche analog zur Kategorieansicht. */

.site-article-include .site-article-card__actions {
  max-width: 100% !important;
  margin: 1.15rem 0 0;
}

.site-article-include .site-article-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  min-height: 42px;
  padding: 0.58rem 0.9rem;

  color: var(--site-primary-dark) !important;
  background: #fff;

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);

  box-shadow: none;

  font-weight: 700;
  line-height: 1.3;
  text-decoration: none !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.site-article-include .site-article-card__button::after {
  content: "›";
  font-size: 1.25em;
  line-height: 0.8;
}

.site-article-include .site-article-card__button:hover,
.site-article-include .site-article-card__button:focus-visible {
  color: #fff !important;
  background: var(--site-primary);
  border-color: var(--site-primary);
}

.site-article-include .site-article-card__button:focus-visible {
  outline:
    3px solid
    color-mix(in srgb, var(--site-primary) 24%, transparent);
  outline-offset: 3px;
}

/* Listenansicht. */

.site-article-include .site-article-list {
  width: 100%;
  max-width: var(--site-text-width) !important;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--site-border);
}

.site-article-include .site-article-list li {
  max-width: 100% !important;
  margin: 0;
  border-bottom: 1px solid var(--site-border);
}

.site-article-include .site-article-list a {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.2rem;
  color: var(--site-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.site-article-include .site-article-list a::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--site-accent);
  font-size: 1.35em;
  line-height: 0.85;
}

/* Details-Darstellungen. */

.site-article-include .site-article-details {
  width: 100%;
  max-width: var(--site-content-width) !important;
  overflow: hidden;
  margin: 0;

  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);

  box-shadow: var(--site-shadow-sm);
}

.site-article-include .site-article-details > summary {
  cursor: pointer;
  padding: 1rem 1.25rem 0.95rem;
  color: var(--site-primary-dark);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--site-primary) 5%, white),
      #fff
    );
  border-top: 4px solid var(--site-accent);
  font-weight: 800;
  line-height: 1.3;
}

.site-article-include .site-article-details[open] > summary {
  border-bottom: 1px solid var(--site-border);
}

.site-article-include .site-article-details .site-article-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Zitate und farbiger Trenner zwischen mehreren Zitaten. */

.site-article-include--zitat .site-article-include__items {
  gap: 0;
}

.site-article-include .site-article-include__quote-item {
  width: 100%;
  max-width: var(--site-text-width) !important;
  margin: 0 auto;
}

.site-article-include .site-article-quote {
  max-width: 100% !important;
  margin: 0;
  padding: 1rem 1.1rem;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--site-primary) 6%, white),
      #fff
    );
  border: 1px solid var(--site-border);
  border-left: 5px solid var(--site-accent);
  border-radius: 0 var(--site-radius-sm) var(--site-radius-sm) 0;
}

.site-article-include .site-article-quote p {
  max-width: 100% !important;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.5;
}

.site-article-include .site-article-include__separator {
  width: 100%;
  max-width: var(--site-text-width) !important;
  height: 6px;
  margin: 1.6rem auto;

  background: var(--site-primary);
  border: 0;
  border-radius: 999px;
  opacity: 1;
}

/* Diagnoseausgabe nur bei bewusst aktiviertem Super-User-Debugmodus. */

.site-article-include__debug {
  margin: 0.75rem 0;
  padding: 0.6rem;
  color: #222;
  background: #fff3f3;
  border: 1px dashed #b02a37;
}

.site-article-include__debug pre {
  overflow: auto;
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
}

@media (max-width: 767.98px) {
  .site-article-include {
    margin: 1.35rem 0;
  }

  .site-article-include__items {
    gap: 1.5rem;
  }

  .site-article-include .site-article-card {
    border-radius: 12px;
  }

  .site-article-include .site-article-card__header {
    padding: 0.82rem 0.9rem 0.8rem;
    border-top-width: 3px;
  }

  .site-article-include .site-article-card__title {
    font-size: 1.22rem;
    line-height: 1.28;
  }

  .site-article-include .site-article-card__image-wrap {
    padding-top: 0.85rem;
  }

  .site-article-include .site-article-card__image-link {
    max-width: calc(100% - 1.5rem) !important;
    border-radius: 8px;
  }

  .site-article-include .site-article-card__body {
    width: calc(100% - 1.5rem) !important;
    padding-top: 0.95rem;
    padding-bottom: 1.1rem;
  }

  .site-article-include .site-article-card__button {
    width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .site-article-include--zitat .site-article-include__items {
    gap: 0;
  }
}

@media (max-width: 420px) {
  .site-article-include .site-article-card__header {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .site-article-include .site-article-card__body {
    width: calc(100% - 1.25rem) !important;
  }
}

@media print {
  .site-article-include .site-article-card,
  .site-article-include .site-article-details {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* =========================================================
   25. UMFRAGEN
   PHP-Einbindung: umfrage.php

   Das PHP erzeugt nur noch das Markup. Die Darstellung liegt
   zentral hier; die Initialisierung und Übermittlung folgen
   anschließend zentral in der user.js.
   ========================================================= */

/* Grundkarte */

.umfrage,
.com-content-article .umfrage,
.item-page .umfrage {
  box-sizing: border-box;

  width: 100%;
  max-width: var(--site-content-width);

  margin: 2.1rem 0;
  padding: 1.2rem 1.3rem 1.35rem;

  color: var(--site-text);
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--site-poll-accent, var(--site-primary)) 4%,
        white
      ),
      var(--site-poll-surface, var(--site-soft)) 68%
    );

  border: 1px solid var(--site-border);
  border-left: 4px solid
    var(--site-poll-accent, var(--site-primary));
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-sm);
}

.umfrage,
.umfrage *,
.umfrage *::before,
.umfrage *::after {
  box-sizing: border-box;
}

/* Die Umfrage nutzt innerhalb der 780-px-Karte die volle Breite. */

.com-content-article .umfrage
:where(
  p,
  ul,
  ol,
  h2,
  h3,
  h4,
  h5,
  h6,
  form,
  fieldset,
  table,
  details
),
.item-page .umfrage
:where(
  p,
  ul,
  ol,
  h2,
  h3,
  h4,
  h5,
  h6,
  form,
  fieldset,
  table,
  details
) {
  max-width: none;
}

/* Fragestellung */

.umfrage > .umfrage__question {
  width: 100%;
  max-width: none;
  margin: 0 0 1rem;
}

/* Fallback, falls in der Datenbank keine farbige mitbox-Klasse
   für die Fragestellung hinterlegt ist. */

.umfrage > .umfrage__question:not(
  .mitbox,
  .mitbox_bp,
  .mitbox_bp2,
  .mitbox_bp3,
  .mitbox_bp4
) {
  padding: 0.85rem 1rem;

  color: #fff;
  background: var(--site-poll-accent, var(--site-primary));

  border-radius: var(--site-radius-sm);
  box-shadow:
    0 6px 16px
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 18%,
      transparent
    );

  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.umfrage > .umfrage__description {
  margin: 0 0 1rem;
  color: var(--site-text);
  line-height: 1.62;
}

/* Formularzustände */

.umfrage__form {
  position: relative;
  width: 100%;
  margin: 0;
}

.umfrage__form[aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}

.umfrage__form[hidden],
.umfrage__existing-results[hidden] {
  display: none !important;
}

/* Honeypot: unsichtbar, ohne das Layout zu beeinflussen. Die
   serverseitige Prüfung bleibt unabhängig davon erforderlich. */

.umfrage__honeypot {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  border: 0 !important;
  white-space: nowrap !important;
}

/* Eingabebereiche */

.umfrage__field,
.umfrage__fieldset {
  min-width: 0;
  margin: 1rem 0;
}

.umfrage__fieldset {
  padding: 0;
  border: 0;
}

.umfrage__fieldset legend,
.umfrage__label {
  display: block;
  width: 100%;
  margin: 0 0 0.55rem;

  color: var(--site-primary-dark);

  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.4;
}

.umfrage__textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 150px;
  resize: vertical;

  margin: 0;
  padding: 0.78rem 0.85rem;

  color: var(--site-text);
  background: #fff;

  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-sm);

  font: inherit;
  line-height: 1.55;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.umfrage__textarea:hover {
  border-color:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 48%,
      transparent
    );
}

.umfrage__textarea:focus {
  background: #fff;
  border-color: var(--site-poll-accent, var(--site-primary));
  outline: none;
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 18%,
      transparent
    );
}

.umfrage__textarea:user-invalid {
  border-color: var(--site-poll-error, var(--site-red));
}

/* Radio- und Checkbox-Antworten */

.umfrage__choice {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;

  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0.68rem 0.75rem;

  color: var(--site-text);
  background: rgba(255, 255, 255, 0.82);

  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);

  line-height: 1.48;
  cursor: pointer;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.umfrage__choice:last-child {
  margin-bottom: 0;
}

.umfrage__choice:hover,
.umfrage__choice:focus-within {
  color: var(--site-primary-dark);
  background:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 5%,
      white
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 34%,
      transparent
    );
}

.umfrage__choice:focus-within {
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 16%,
      transparent
    );
}

.umfrage__choice input[type="radio"],
.umfrage__choice input[type="checkbox"] {
  flex: 0 0 auto;

  width: 1.12rem;
  height: 1.12rem;
  margin: 0.18rem 0 0;

  accent-color: var(--site-poll-accent, var(--site-primary));
  cursor: pointer;
}

.umfrage__choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Absenden */

.umfrage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;

  margin-top: 1.15rem;
}

.umfrage__submit,
.umfrage__submit.btn,
.umfrage__submit.btn.btn-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;

  min-width: min(100%, 310px);
  min-height: 52px;
  padding: 0.68rem 1.1rem;

  color: #fff;
  background: var(--site-poll-cta, var(--site-accent));
  border: 1px solid var(--site-poll-cta, var(--site-accent));
  border-radius: var(--site-radius-sm);

  box-shadow:
    0 6px 16px
    color-mix(
      in srgb,
      var(--site-poll-cta, var(--site-accent)) 24%,
      transparent
    );

  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: normal;

  cursor: pointer;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.umfrage__submit:hover,
.umfrage__submit:focus-visible,
.umfrage__submit.btn:hover,
.umfrage__submit.btn:focus-visible,
.umfrage__submit.btn.btn-primary:hover,
.umfrage__submit.btn.btn-primary:focus-visible {
  color: #fff;
  background:
    color-mix(
      in srgb,
      var(--site-poll-cta, var(--site-accent)) 84%,
      black
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-poll-cta, var(--site-accent)) 84%,
      black
    );
  transform: translateY(-1px);
}

.umfrage__submit:focus-visible,
.umfrage__submit.btn:focus-visible,
.umfrage__submit.btn.btn-primary:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-poll-cta, var(--site-accent)) 26%,
      transparent
    );
  outline-offset: 3px;
}

.umfrage__submit:active {
  transform: translateY(0);
}

.umfrage__submit:disabled,
.umfrage__submit.btn:disabled,
.umfrage__submit.btn.btn-primary:disabled {
  color: rgba(255, 255, 255, 0.9);
  background:
    color-mix(
      in srgb,
      var(--site-poll-cta, var(--site-accent)) 58%,
      #a8adb2
    );
  border-color: transparent;
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.umfrage__submit small {
  display: block;
  max-width: none;

  font-size: 0.8em;
  font-weight: 550;
  line-height: 1.25;
}

/* Status und Meldungen */

.umfrage__status {
  margin: 0.72rem 0 0;
  color: var(--site-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.umfrage__status:empty {
  display: none;
}

.umfrage__message:not(:empty),
.umfrage__error,
.umfrage noscript > p {
  width: 100%;
  max-width: none;
  margin: 1rem 0 0;
  padding: 0.78rem 0.9rem;

  color: var(--site-primary-dark);
  background:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 7%,
      white
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 22%,
      transparent
    );
  border-left: 4px solid
    var(--site-poll-accent, var(--site-primary));
  border-radius: var(--site-radius-sm);

  line-height: 1.55;
}

.umfrage__message > :first-child,
.umfrage__success > :first-child,
.umfrage__error > :first-child {
  margin-top: 0;
}

.umfrage__message > :last-child,
.umfrage__success > :last-child,
.umfrage__error > :last-child {
  margin-bottom: 0;
}

.umfrage__success {
  width: 100%;
  max-width: none;
  padding: 0.85rem 0.95rem;

  color:
    color-mix(
      in srgb,
      var(--site-poll-success, var(--site-secondary)) 70%,
      black
    );
  background:
    color-mix(
      in srgb,
      var(--site-poll-success, var(--site-secondary)) 9%,
      white
    );

  border: 1px solid
    color-mix(
      in srgb,
      var(--site-poll-success, var(--site-secondary)) 30%,
      transparent
    );
  border-left: 4px solid
    var(--site-poll-success, var(--site-secondary));
  border-radius: var(--site-radius-sm);
}

.umfrage__error {
  color:
    color-mix(
      in srgb,
      var(--site-poll-error, var(--site-red)) 78%,
      black
    );
  background:
    color-mix(
      in srgb,
      var(--site-poll-error, var(--site-red)) 7%,
      white
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-poll-error, var(--site-red)) 28%,
      transparent
    );
  border-left-color: var(--site-poll-error, var(--site-red));
}

.umfrage noscript > p {
  border-left-color: var(--site-poll-error, var(--site-red));
}

/* Bereits vor der Abstimmung sichtbare Ergebnisse */

.umfrage__existing-results {
  width: 100%;
  max-width: none;
  margin-top: 1rem;
}

/* Ergebnis-Details gezielt von den allgemeinen Artikel-Detailsboxen
   entkoppeln. */

.com-content-article .umfrage__results-details,
.item-page .umfrage__results-details,
.umfrage__results-details {
  width: 100%;
  max-width: none;

  margin: 1rem 0 0;
  padding: 0;
  overflow: hidden;

  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);
  box-shadow: none;
}

.com-content-article .umfrage__results-details > summary,
.item-page .umfrage__results-details > summary,
.umfrage__results-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;

  min-height: 48px;
  margin: 0;
  padding: 0.72rem 0.85rem;

  color: var(--site-primary-dark);
  background:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 4%,
      white
    );

  border: 0;

  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.com-content-article .umfrage__results-details > summary::-webkit-details-marker,
.item-page .umfrage__results-details > summary::-webkit-details-marker,
.umfrage__results-details > summary::-webkit-details-marker {
  display: none;
}

.com-content-article .umfrage__results-details > summary::marker,
.item-page .umfrage__results-details > summary::marker,
.umfrage__results-details > summary::marker {
  content: "";
}

.com-content-article .umfrage__results-details > summary::before,
.item-page .umfrage__results-details > summary::before,
.umfrage__results-details > summary::before {
  content: none;
  display: none;
}

.com-content-article .umfrage__results-details > summary::after,
.item-page .umfrage__results-details > summary::after,
.umfrage__results-details > summary::after {
  content: "+";

  display: inline-grid;
  place-items: center;

  width: 24px;
  height: 24px;

  color: var(--site-poll-accent, var(--site-primary));
  background: #fff;
  border: 2px solid currentColor;
  border-radius: 50%;

  font-size: 1rem;
  font-weight: 800;
  line-height: 1;

  transform: none;
}

.com-content-article .umfrage__results-details > summary:hover,
.com-content-article .umfrage__results-details > summary:focus-visible,
.item-page .umfrage__results-details > summary:hover,
.item-page .umfrage__results-details > summary:focus-visible,
.umfrage__results-details > summary:hover,
.umfrage__results-details > summary:focus-visible {
  color: var(--site-poll-accent, var(--site-primary));
  background:
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 7%,
      white
    );
}

.com-content-article .umfrage__results-details > summary:focus-visible,
.item-page .umfrage__results-details > summary:focus-visible,
.umfrage__results-details > summary:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-poll-accent, var(--site-primary)) 20%,
      transparent
    );
  outline-offset: -3px;
}

.com-content-article .umfrage__results-details[open],
.item-page .umfrage__results-details[open],
.umfrage__results-details[open] {
  padding-bottom: 0;
}

.com-content-article .umfrage__results-details[open] > summary,
.item-page .umfrage__results-details[open] > summary,
.umfrage__results-details[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--site-border);
}

.com-content-article .umfrage__results-details[open] > summary::after,
.item-page .umfrage__results-details[open] > summary::after,
.umfrage__results-details[open] > summary::after {
  content: "−";
  color: #fff;
  background: var(--site-poll-accent, var(--site-primary));
  transform: none;
}

.com-content-article .umfrage__results-details > :not(summary),
.item-page .umfrage__results-details > :not(summary),
.umfrage__results-details > :not(summary) {
  width: auto;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.umfrage__results-content {
  margin: 0;
  padding: 0.85rem;
}

/* Ergebnistabelle von den allgemeinen Artikel-Tabellenregeln lösen. */

.com-content-article .umfrage__results-table,
.item-page .umfrage__results-table,
.umfrage__results-table {
  display: table;
  table-layout: auto;

  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;

  background: transparent;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 0;
  box-shadow: none;

  font-size: 0.92rem;
  line-height: 1.42;
  white-space: normal;
}

.com-content-article .umfrage__results-table th,
.com-content-article .umfrage__results-table td,
.item-page .umfrage__results-table th,
.item-page .umfrage__results-table td,
.umfrage__results-table th,
.umfrage__results-table td {
  padding: 0.5rem 0.35rem;

  color: var(--site-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--site-border);

  vertical-align: top;
}

.com-content-article .umfrage__results-table th,
.item-page .umfrage__results-table th,
.umfrage__results-table th {
  text-align: left;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.com-content-article .umfrage__results-table td,
.item-page .umfrage__results-table td,
.umfrage__results-table td {
  width: 6.5rem;
  text-align: right;
  white-space: nowrap;
}

.umfrage__results-table tr:last-child th,
.umfrage__results-table tr:last-child td {
  border-bottom: 0;
}

/* Freitextantworten */

.umfrage__free-answer,
.umfrage__own-answer {
  margin: 0;
  padding: 0.85rem 0;

  border-bottom: 1px solid var(--site-border);
  overflow-wrap: anywhere;
}

.umfrage__free-answer:first-child,
.umfrage__own-answer:first-child {
  padding-top: 0;
}

.umfrage__free-answer:last-child,
.umfrage__own-answer:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Mobil */

@media (max-width: 575.98px) {
  .umfrage,
  .com-content-article .umfrage,
  .item-page .umfrage {
    margin: 1.6rem 0;
    padding: 0.9rem;

    border-left-width: 3px;
    border-radius: 12px;
  }

  .umfrage > .umfrage__question {
    margin-bottom: 0.85rem;
  }

  .umfrage > .umfrage__question:not(
    .mitbox,
    .mitbox_bp,
    .mitbox_bp2,
    .mitbox_bp3,
    .mitbox_bp4
  ) {
    padding: 0.75rem 0.8rem;
    border-radius: 9px;
    font-size: 1.03rem;
  }

  .umfrage__choice {
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.6rem;

    padding: 0.62rem 0.65rem;

    font-size: 0.95rem;
  }

  .umfrage__textarea {
    min-height: 135px;
    padding: 0.7rem;
  }

  .umfrage__actions {
    display: block;
  }

  .umfrage__submit,
  .umfrage__submit.btn,
  .umfrage__submit.btn.btn-primary {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .umfrage__results-content {
    padding: 0.7rem;
  }

  .com-content-article .umfrage__results-table,
  .item-page .umfrage__results-table,
  .umfrage__results-table {
    display: table;
    font-size: 0.86rem;
  }

  .com-content-article .umfrage__results-table th,
  .com-content-article .umfrage__results-table td,
  .item-page .umfrage__results-table th,
  .item-page .umfrage__results-table td,
  .umfrage__results-table th,
  .umfrage__results-table td {
    padding: 0.45rem 0.25rem;
  }

  .com-content-article .umfrage__results-table td,
  .item-page .umfrage__results-table td,
  .umfrage__results-table td {
    width: 5.5rem;
  }
}

/* Druckansicht */

@media print {
  .umfrage {
    break-inside: avoid;
    background: #fff;
    box-shadow: none;
  }

  .umfrage__submit,
  .umfrage__status,
  .umfrage__honeypot {
    display: none !important;
  }
}

/* =========================================================
   ZENTRALES RECHNERSYSTEM
   ========================================================= */

.site-rechner {
  --rechner-accent: var(--cassiopeia-color-primary, var(--site-primary, #760e0f));
  --rechner-accent-contrast: #fff;
  --rechner-border: color-mix(in srgb, var(--rechner-accent) 20%, #d9dde2);
  --rechner-surface: var(--body-bg, #fff);
  --rechner-surface-soft: color-mix(in srgb, var(--rechner-accent) 5%, #fff);
  --rechner-accent-soft: color-mix(in srgb, var(--rechner-accent) 10%, #fff);
  --rechner-accent-medium: color-mix(in srgb, var(--rechner-accent) 18%, #fff);
  --rechner-text-soft: #5c6470;

  position: relative;
  width: 100%;
  max-width: var(--site-content-width, 780px);
  margin: 2rem auto;
  overflow: hidden;

  color: var(--body-color, #172033);
  background: var(--rechner-surface);
  border: 1px solid var(--rechner-border);
  border-top: 5px solid var(--rechner-accent);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 7%);
}

.site-rechner__header {
  padding: 1.15rem 1.4rem;
  background: linear-gradient(135deg, var(--rechner-accent-medium), var(--rechner-surface-soft));
  border-bottom: 1px solid var(--rechner-border);
}

.site-rechner__title {
  margin: 0;
  color: var(--rechner-accent);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.3;
}

.site-rechner__intro,
.site-rechner__footer-note,
.site-rechner__noscript {
  padding: 1rem 1.4rem;
}

.site-rechner__intro > :last-child,
.site-rechner__footer-note > :last-child,
.site-rechner__noscript:last-child {
  margin-bottom: 0;
}

.site-rechner__form {
  position: relative;
  padding: 0 1.4rem 1.4rem;
}

.site-rechner__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.site-rechner__section-title {
  margin: 1.35rem -1.4rem 0.4rem;
  padding: 0.75rem 1.4rem;
  color: var(--rechner-accent);
  background: var(--rechner-accent-soft);
  border-top: 1px solid var(--rechner-border);
  border-bottom: 1px solid var(--rechner-border);
  border-left: 4px solid var(--rechner-accent);
  font-size: 1.05rem;
}

.site-rechner__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem 8.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rechner-border);
}

.site-rechner__field-info {
  min-width: 0;
}

.site-rechner__label {
  display: block;
  margin: 0;
  font-weight: 750;
}

.site-rechner__required {
  color: var(--rechner-accent);
}

.site-rechner__help {
  margin: 0.25rem 0 0;
  color: var(--rechner-text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.site-rechner__control-wrap {
  min-width: 0;
}

.site-rechner__control {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  color: inherit;
  background: #fff;
  border: 1px solid #aeb5bd;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 4%);
  font: inherit;
}

.site-rechner__control:focus {
  border-color: var(--rechner-accent);
  outline: 3px solid color-mix(in srgb, var(--rechner-accent) 22%, transparent);
  outline-offset: 1px;
}

.site-rechner__control:user-invalid {
  border-color: #b42318;
}

textarea.site-rechner__control {
  min-height: 110px;
  resize: vertical;
}

.site-rechner__unit {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}

.site-rechner__actions {
  margin: 1rem -1.4rem -1.4rem;
  padding: 1.25rem 1.4rem 1.35rem;
  text-align: center;
  background: var(--rechner-accent-soft);
  border-top: 1px solid var(--rechner-border);
}

.site-rechner__button {
  min-width: min(100%, 17rem);
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  color: var(--rechner-accent-contrast);
  background: var(--rechner-accent);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rechner-accent) 28%, transparent);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.site-rechner__button:hover,
.site-rechner__button:focus-visible {
  color: var(--rechner-accent-contrast);
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--rechner-accent) 35%, transparent);
}

.site-rechner__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rechner-accent) 32%, transparent);
  outline-offset: 3px;
}

.site-rechner__button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.site-rechner__required-note,
.site-rechner__status {
  margin: 0.7rem 0 0;
  color: var(--rechner-text-soft);
  font-size: 0.85rem;
}

.site-rechner__status:empty {
  display: none;
}

.site-rechner__result {
  scroll-margin-top: 6rem;
}

.site-rechner--error,
.site-rechner__error {
  padding: 1rem 1.2rem;
  color: #7a271a;
  background: #fef3f2;
  border-color: #b42318;
}

.site-rechner__error ul {
  margin-bottom: 0;
}

.site-rechner-results {
  margin: 0 1.4rem 1.4rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rechner-border, #d9dde2);
  border-radius: 12px;
}

.site-rechner-results__header,
.site-rechner-results__section {
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--rechner-surface-soft, #f5f5f5);
  border-bottom: 1px solid var(--rechner-border, #d9dde2);
}

.site-rechner-results__header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.site-rechner-results__section {
  color: var(--rechner-accent, inherit);
  font-size: 1rem;
}

.site-rechner-results__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e4e7eb;
}

.site-rechner-results__row:last-child {
  border-bottom: 0;
}

.site-rechner-results__row--highlight {
  background: color-mix(in srgb, var(--rechner-accent, #760e0f) 7%, #fff);
}

.site-rechner-results__value {
  text-align: right;
  font-size: 1.08rem;
  font-weight: 750;
  white-space: nowrap;
}

.site-rechner-results__unit {
  margin-left: 0.25rem;
  font-size: 0.88em;
  font-weight: 400;
}

.site-rechner-results__help {
  margin-top: 0.2rem;
  color: var(--rechner-text-soft, #5c6470);
  font-size: 0.86rem;
  font-weight: 400;
}

.site-rechner-results__note,
.site-rechner-results__special,
.site-rechner-results__debug {
  padding: 1rem;
}

.site-rechner-results__note > :last-child,
.site-rechner-results__special > :last-child {
  margin-bottom: 0;
}

.site-rechner-results__special {
  overflow-x: auto;
}

.site-rechner-results__special table {
  width: 100%;
  border-collapse: collapse;
}

.site-rechner-results__special th,
.site-rechner-results__special td {
  padding: 0.55rem 0.65rem;
  vertical-align: top;
  border: 1px solid #d9dde2;
}

.site-rechner-results__special .tabellenueberschrift {
  color: #fff;
  background: var(--rechner-accent, #760e0f);
  font-weight: 750;
}

.site-rechner-results__special .tabellezelle1,
.site-rechner-results__special tr:nth-child(even) {
  background: #f5f5f5;
}

@media (max-width: 620px) {
  .site-rechner {
    border-radius: 12px;
  }

  .site-rechner__header,
  .site-rechner__intro,
  .site-rechner__footer-note,
  .site-rechner__noscript {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .site-rechner__form {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .site-rechner__section-title,
  .site-rechner__actions {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .site-rechner__field {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
  }

  .site-rechner__field-info {
    grid-column: 1 / -1;
  }

  .site-rechner__control-wrap {
    grid-column: 1;
  }

  .site-rechner__unit {
    grid-column: 2;
  }

  .site-rechner-results {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

@media (max-width: 520px) {
  .site-rechner-results__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .site-rechner-results__value {
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-rechner__button {
    transition: none;
  }
}

/* =========================================================
   VG-Wort Zählpixel Anpassungen für Höhe
   ========================================================= */

.com-content-article__body
  > img[src*=".met.vgwort.de/na/"] {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  border: 0 !important;
  clip-path: inset(50%) !important;
}

.com-content-article__body
  > figure.item-image
  + img[src*=".met.vgwort.de/na/"]
  + .article-toc {
  margin-top: 0.65rem;
}

/* =========================================================
   HEADER – SUCHLINK, SYMBOL VOLLSTÄNDIG PER CSS
   ========================================================= */

.site-header-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header-search__link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  padding: 0;

  color: var(--site-primary-dark, var(--site-primary));
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;

  text-decoration: none;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

/* Lupe: Kreis */
.site-header-search__link::before {
  content: "";

  position: absolute;
  top: 11px;
  left: 11px;

  width: 15px;
  height: 15px;

  border: 2px solid currentColor;
  border-radius: 50%;
}

/* Lupe: Griff */
.site-header-search__link::after {
  content: "";

  position: absolute;
  top: 26px;
  left: 26px;

  width: 9px;
  height: 2px;

  background: currentColor;
  border-radius: 999px;

  transform: rotate(45deg);
  transform-origin: left center;
}

.site-header-search__link:hover,
.site-header-search__link:focus-visible {
  color: var(--site-primary-dark, var(--site-primary));
  background:
    color-mix(
      in srgb,
      var(--site-primary) 8%,
      transparent
    );
  border-color:
    color-mix(
      in srgb,
      var(--site-primary) 18%,
      transparent
    );

  text-decoration: none;
}

.site-header-search__link:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--site-primary) 28%,
      transparent
    );
  outline-offset: 2px;
}