/* =========================================================
   convi MEDIA - Single Post
   Datei: single-post.css
   Vollständige Fassung

   Buttons, Eyebrows, mr-container und globale Grundelemente
   kommen weiterhin aus global.css. Die Eyebrow wird hier nicht überschrieben.
========================================================= */

/* =========================================================
   01. Elementor-Resets nur für das Single-Post-Template
========================================================= */

.mr-single-post-hero,
.mr-single-post-hero__inner,
.mr-single-post-image-section,
.mr-single-post-main,
.mr-single-post-layout,
.mr-post-content-wrap,
.mr-post-content,
.mr-author-section,
.mr-author-box,
.mr-related-posts-section,
.mr-single-post-final,
.mr-single-post-final__box {
  min-height: 0 !important;
}

.mr-single-post-hero,
.mr-single-post-image-section,
.mr-single-post-main,
.mr-author-section,
.mr-related-posts-section,
.mr-single-post-final {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mr-single-post-layout,
.mr-post-content-wrap,
.mr-post-sidebar,
.mr-author-box,
.mr-single-post-final__box {
  box-sizing: border-box;
}

/* Verhindert, dass Elementor leere Innencontainer künstlich aufzieht. */
.mr-single-post-hero > .e-con-inner,
.mr-single-post-image-section > .e-con-inner,
.mr-single-post-main > .e-con-inner,
.mr-author-section > .e-con-inner,
.mr-related-posts-section > .e-con-inner,
.mr-single-post-final > .e-con-inner {
  min-height: 0 !important;
}

/* =========================================================
   02. Hero
========================================================= */

.mr-single-post-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(126px, 10vw, 168px);
  padding-bottom: clamp(52px, 5vw, 76px);
  background:
    radial-gradient(circle at 14% 0%, rgba(79,131,255,.22), transparent 36%),
    radial-gradient(circle at 86% 8%, rgba(124,92,255,.18), transparent 34%),
    linear-gradient(180deg, #060914 0%, #0b1020 54%, #070b17 100%);
}

.mr-single-post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  opacity: .32;
}

.mr-single-post-hero .mr-container {
  position: relative;
  z-index: 2;
}

.mr-single-post-hero__inner {
  width: 100%;
  max-width: 1080px;
}

.mr-post-category {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(143,196,255,.22);
  border-radius: 999px;
  background: rgba(143,196,255,.075);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.mr-post-category::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6d5cff;
  box-shadow: 0 0 18px rgba(109,92,255,.65);
}

.mr-post-category a {
  color: inherit !important;
  text-decoration: none !important;
}

.mr-post-title {
  width: 100%;
  max-width: 1080px;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 5.25vw, 45px);
  font-weight: 950;
  line-height: 1.01;
  letter-spacing: -.058em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

.mr-post-title .elementor-heading-title {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  text-wrap: balance;
  transform: none !important;
}

/* Fängt versehentlich absolut positionierte Spans im Titel ab. */
.mr-post-title .elementor-heading-title span {
  position: static !important;
  display: inline !important;
  transform: none !important;
}

.mr-post-excerpt {
  max-width: 820px;
  color: rgba(255,255,255,.70);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 520;
  line-height: 1.7;
}

.mr-post-excerpt p {
  margin: 0 !important;
}



/* =========================================================
   Autoren-, Datums- und Kategoriezeile
========================================================= */

/*
   Diese Klasse gehört auf den gemeinsamen Elementor-Container,
   in dem Autoren-Box und Beitrag-Informationen nebeneinander liegen:

   mr-post-byline
*/

.mr-post-byline {
  display: flex !important;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 50%, rgba(79,131,255,.15), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
  box-shadow:
    0 18px 54px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.mr-post-byline > .e-con-inner {
  display: flex !important;
  width: auto;
  max-width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mr-post-meta {
  width: auto;
  max-width: 100%;
  margin: 0 !important;
}

/* Elementor Beitrag-Informationen: Datum und Kategorie als convi Chips */
.mr-post-meta > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.mr-post-meta .elementor-post-info,
.mr-post-meta .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.mr-post-meta .elementor-icon-list-item,
.mr-post-meta__item {
  display: inline-flex !important;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(143,196,255,.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 50%, rgba(79,131,255,.15), transparent 55%),
    rgba(255,255,255,.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.mr-post-meta .elementor-icon-list-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  margin: 0 !important;
  color: #4f83ff !important;
  font-size: 13px;
}

.mr-post-meta .elementor-icon-list-text,
.mr-post-meta .elementor-post-info__item,
.mr-post-meta .elementor-post-info__item a,
.mr-post-meta time,
.mr-post-meta a {
  color: #f7f9ff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

/* Autor und Kategorien sind in dieser Leiste nicht klickbar. */
.mr-post-byline .mr-post-author-widget a,
.mr-post-byline .mr-post-meta a {
  pointer-events: none;
  cursor: default;
}

.mr-post-meta .elementor-icon-list-item:hover {
  border-color: rgba(143,196,255,.18);
  background:
    radial-gradient(circle at 0% 50%, rgba(79,131,255,.15), transparent 55%),
    rgba(255,255,255,.035);
}

/* Von Elementor erzeugte Trennzeichen ausblenden */
.mr-post-meta .elementor-icon-list-item::after,
.mr-post-meta .elementor-post-info__terms-list-item::after {
  display: none !important;
}

/* Zusammenhängendes Elementor Autoren-Box-Widget */
.mr-post-author-widget {
  width: auto;
  max-width: 100%;
  margin: 0 !important;
}

.mr-post-author-widget > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.mr-post-author-widget .elementor-author-box {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 62px;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 12px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.mr-post-author-widget .elementor-author-box__avatar {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 2px solid rgb(40 105 249 / 62%);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  box-shadow:
    0 0 0 3px rgba(79,131,255,.09),
    0 10px 28px rgba(0,0,0,.24);
}

.mr-post-author-widget .elementor-author-box__avatar img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

.mr-post-author-widget .elementor-author-box__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

.mr-post-author-widget .elementor-author-box__name,
.mr-post-author-widget .elementor-author-box__name a {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
  text-decoration: none !important;
}

.mr-post-author-widget .elementor-author-box__bio,
.mr-post-author-widget .elementor-author-box__button {
  display: none !important;
}


/* =========================================================
   03. Beitragsbild
========================================================= */

.mr-single-post-image-section {
  position: relative;
  overflow: hidden;
  padding-top: 25px;
  padding-bottom: 25px;
  background: #070b17;
}

/* Keine leere Bildsektion ausgeben, wenn der Beitrag kein Beitragsbild hat. */
.mr-single-post-image-section:not(:has(img)) {
  display: none;
}

.mr-post-featured-image {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 34px;
  background: rgba(255,255,255,.035);
  box-shadow:
    0 34px 100px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.mr-post-featured-image .elementor-widget-container {
  overflow: hidden;
  border-radius: inherit;
}

.mr-post-featured-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 620px;
  object-fit: cover !important;
  filter: saturate(1.05) contrast(1.04);
}

/* =========================================================
   04. Hauptbereich und Layout
========================================================= */

.mr-single-post-main {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  padding-top: clamp(50px, 5vw, 76px);
  padding-bottom: clamp(72px, 7vw, 108px);
  background:
    radial-gradient(circle at 10% 10%, rgba(79,131,255,.08), transparent 34%),
    linear-gradient(180deg, #070b17 0%, #0b1020 100%);
}

/*
   Elementor darf den Hauptbereich nicht auf seine Boxed-Breite begrenzen.
   So wird die komplette Kombination aus breitem Artikel und Floating
   Sidebar sauber innerhalb des Viewports zentriert.
*/
.mr-single-post-main > .e-con-inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

.mr-single-post-layout {
  /*
     Gewünschtes Desktop-Verhältnis:
     bisheriger Artikel 1040 px + bisherige Sidebar 320 px + 24 px Abstand
     = neuer maximaler Beitragsinhalt mit 1384 px.

     Die eigentliche Floating Sidebar kommt anschließend zusätzlich rechts dazu.
  */
  --mr-article-max: 1384px;
  --mr-sidebar-width: 320px;
  --mr-sidebar-gap: 24px;
  --mr-layout-max: calc(
    var(--mr-article-max) +
    var(--mr-sidebar-width) +
    var(--mr-sidebar-gap)
  );

  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: start !important;
  width: min(calc(100% - 36px), var(--mr-article-max)) !important;
  max-width: var(--mr-article-max) !important;
  min-height: 0 !important;
  height: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: visible !important;
}

/*
   Elementor kann einen zusätzlichen .e-con-inner-Wrapper ausgeben.
   display: contents entfernt nur dessen Layoutfunktion. Dadurch bleiben
   mr-post-content-wrap und mr-post-sidebar echte Grid-Kinder.
*/
.mr-single-post-layout > .e-con-inner {
  display: contents !important;
}

.mr-post-content-wrap {
  grid-column: 1;
  grid-row: 1;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.mr-post-content {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.026));
  box-shadow:
    0 28px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.76);
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 470;
  line-height: 1.86;
}

.mr-post-content > .elementor-widget-container,
.mr-post-content .elementor-widget-theme-post-content,
.mr-post-content .elementor-widget-theme-post-content > .elementor-widget-container {
  min-height: 0 !important;
  height: auto !important;
}

/* =========================================================
   05. Beitragstypografie und individuelle Inhaltsklassen
========================================================= */

/*
   Elementor-Klassen:
   H2-Widget:        mr-content-h2
   H3-Widget:        mr-content-h3
   Texteditor:       mr-content-text

   Die Regeln greifen zusätzlich automatisch auf Überschriften und
   Texte innerhalb des dynamischen Beitragsinhalts.
*/

.mr-post-content,
.mr-content-text,
.mr-content-text .elementor-widget-container,
.mr-content-text p,
.mr-content-text li,
.mr-content-text strong,
.mr-content-text em {
  color: #f7f9ff !important;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.82;
}

.mr-post-content p,
.mr-content-text p {
  margin: 0 0 1.35em;
}

.mr-post-content p:last-child,
.mr-content-text p:last-child {
  margin-bottom: 0;
}

.mr-post-content h2,
.mr-content-h2,
.mr-content-h2 .elementor-heading-title {
  margin: 1.55em 0 .55em;
  color: #f7f9ff !important;
  font-size: 35px !important;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.mr-post-content h3,
.mr-content-h3,
.mr-content-h3 .elementor-heading-title {
  margin: 1.45em 0 .55em;
  color: #f7f9ff !important;
  font-size: 27px !important;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.mr-post-content h4 {
  margin: 1.3em 0 .5em;
  color: #f7f9ff !important;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.mr-content-h2,
.mr-content-h3 {
  margin-top: 0;
}

.mr-post-content > h2:first-child,
.mr-post-content > h3:first-child,
.mr-post-content .elementor-widget-container > h2:first-child,
.mr-post-content .elementor-widget-container > h3:first-child {
  margin-top: 0;
}

.mr-post-content a,
.mr-content-text a {
  color: #f7f9ff !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(247,249,255,.38);
  transition:
    color .2s ease,
    border-color .2s ease;
}

.mr-post-content a:hover,
.mr-content-text a:hover {
  color: #8fc4ff !important;
  border-color: rgba(143,196,255,.72);
}

.mr-post-content ul,
.mr-post-content ol,
.mr-content-text ul,
.mr-content-text ol {
  margin: 0 0 1.45em;
  padding-left: 1.3em;
}

.mr-post-content li,
.mr-content-text li {
  margin-bottom: .55em;
}

.mr-post-content blockquote {
  margin: 2em 0;
  padding: 24px 26px;
  border-left: 4px solid #4f83ff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.14), transparent 46%),
    rgba(255,255,255,.045);
  color: #f7f9ff;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 750;
  line-height: 1.5;
}

.mr-post-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.mr-post-content figure {
  max-width: 100%;
  margin: 2em 0;
}

.mr-post-content figcaption {
  margin-top: 10px;
  color: #f7f9ff;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  opacity: .62;
}

.mr-post-content table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
}

.mr-post-content th,
.mr-post-content td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #f7f9ff;
  text-align: left;
}

.mr-post-content tr:last-child td {
  border-bottom: 0;
}

.mr-post-content th {
  background: rgba(255,255,255,.055);
  font-weight: 900;
}

.mr-post-content pre,
.mr-post-content code {
  border-radius: 14px;
  background: rgba(0,0,0,.26);
  color: #f7f9ff;
}

.mr-post-content pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
}

.mr-post-content code {
  padding: 2px 6px;
}


/* =========================================================
   Hinweisbox im Beitragsinhalt
========================================================= */

/*
   Klasse auf einen Elementor-Container setzen:
   mr-content-note

   Überschrift- und Textwidgets innerhalb der Box benötigen keine
   zusätzlichen Klassen.
*/

.mr-content-note {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  margin: 30px 0;
  padding: 22px 24px 22px 66px;
  overflow: hidden;
  border: 1px solid rgba(143,196,255,.20);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.18), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(124,92,255,.10), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
  box-shadow:
    0 20px 58px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.mr-content-note::before {
  content: "i";
  position: absolute;
  top: 22px;
  left: 22px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(143,196,255,.28);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(79,131,255,.28), rgba(124,92,255,.24));
  color: #f7f9ff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.mr-content-note > .e-con-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.mr-content-note .elementor-widget {
  margin: 0 !important;
}

.mr-content-note .elementor-heading-title,
.mr-content-note h2,
.mr-content-note h3,
.mr-content-note h4 {
  margin: 0 !important;
  color: #f7f9ff !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
}

.mr-content-note,
.mr-content-note p,
.mr-content-note li,
.mr-content-note .elementor-widget-text-editor,
.mr-content-note .elementor-widget-text-editor p {
  color: #f7f9ff !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.mr-content-note p {
  margin: 0 !important;
}

.mr-content-note ul,
.mr-content-note ol {
  margin: 4px 0 0;
  padding-left: 1.25em;
}

.mr-content-note li {
  margin-bottom: 5px;
}

.mr-content-note a {
  color: #8fc4ff !important;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1px solid rgba(143,196,255,.42);
}

.mr-content-note a:hover {
  color: #f7f9ff !important;
  border-color: rgba(247,249,255,.68);
}

/* =========================================================
   06. Rechte Floating-Sidebar
========================================================= */

/*
   Die Eyebrow wird absichtlich NICHT in dieser Datei gestaltet.
   Sie kommt vollständig aus global.css.
*/

/*
   Sticky funktioniert nur, wenn kein relevanter Elterncontainer
   overflow:hidden/clip oder contain verwendet.
*/
body.single-post .elementor-location-single,
body.single-post .elementor-location-single > .elementor-element,
body.single-post .elementor-location-single .elementor-element:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con-inner:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con:has(.mr-post-sidebar),
body.single-post .elementor-location-single .e-con-inner:has(.mr-post-sidebar),
.mr-single-post-main,
.mr-single-post-main > .e-con-inner,
.mr-single-post-layout,
.mr-post-content-wrap {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  contain: none !important;
  clip-path: none !important;
}

/*
   Transform und Perspective auf Elterncontainern erzeugen einen eigenen
   Bezugskontext und können position: sticky blockieren.
*/
body.single-post .elementor-location-single .elementor-element:has(.mr-single-post-main):not(.mr-post-sidebar),
body.single-post .elementor-location-single .e-con:has(.mr-post-sidebar):not(.mr-post-sidebar),
body.single-post .elementor-location-single .e-con-inner:has(.mr-post-sidebar) {
  transform: none !important;
  perspective: none !important;
}

/*
   Info Floating Sidebar:
   Funktionsweise wie bei cm-legal-toc, ohne dessen Gestaltung:
   - echtes Grid-Kind neben dem langen Beitragsinhalt
   - position: sticky
   - Abstand zum Floating Header
   - maximale Viewport-Höhe
   - eigener Scroll nur, falls die Karten höher als der Viewport sind
*/
.mr-post-sidebar {
  --mr-sidebar-top: calc(var(--mr-header-h, 5rem) + 3.15rem);

  grid-column: 2;
  grid-row: 1;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: var(--mr-sidebar-top) !important;
  z-index: 20;
  display: grid !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: var(--mr-sidebar-width) !important;
  min-width: var(--mr-sidebar-width) !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100svh - var(--mr-sidebar-top) - 1.25rem) !important;
  margin: 0 !important;
  gap: 16px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  transform: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(143,196,255,.28) transparent;
  scroll-behavior: smooth;
}

.mr-post-sidebar::-webkit-scrollbar {
  width: 5px;
}

.mr-post-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.mr-post-sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(143,196,255,.28);
}

/* WordPress-Adminleiste zusätzlich berücksichtigen */
body.admin-bar .mr-post-sidebar {
  --mr-sidebar-top: calc(var(--mr-header-h, 5rem) + 5.15rem);
}

.mr-post-sidebar-card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  width: 100%;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.12), transparent 42%),
    rgba(255,255,255,.040);
  box-shadow:
    0 24px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.mr-sidebar-title {
  margin: 0;
  color: #f7f9ff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mr-sidebar-title .elementor-heading-title {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.mr-sidebar-text {
  margin-top: 12px;
  color: #f7f9ff;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
  opacity: .72;
}

.mr-sidebar-text p {
  margin: 0;
}

.mr-sidebar-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(135deg, rgba(79,131,255,.18), rgba(124,92,255,.14));
}

.mr-sidebar-icon p {
  margin: 0 !important;
  font-size: 28px;
  line-height: 1;
}

.mr-post-sidebar-card .mr-btn-primary,
.mr-post-sidebar-card .mr-btn-secondary,
.mr-post-sidebar-card .elementor-button-wrapper {
  margin-top: 18px;
}

.mr-post-sidebar-card .elementor-button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.mr-sidebar-categories ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.mr-sidebar-categories li a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: #f7f9ff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  opacity: .78;
}

.mr-sidebar-categories li a:hover {
  border-color: rgba(143,196,255,.26);
  background: rgba(143,196,255,.07);
  color: #f7f9ff;
  opacity: 1;
}

/*
   Desktop Floating Layout:
   Der Beitragsinhalt selbst wird exakt mittig im Browserfenster ausgerichtet.
   Die Sidebar zählt NICHT zur Zentrierung und liegt zusätzlich mit 24 px
   Abstand rechts außerhalb des Artikels.

   Dadurch bleibt der Artikel optisch in der Mitte der Website, während
   die Info-Sidebar als echtes Floating-Element daneben sitzt.
*/
@media (min-width: 1400px) {
  .mr-single-post-layout {
    grid-template-columns:
      var(--mr-article-max)
      var(--mr-sidebar-width) !important;
    justify-content: start !important;
    column-gap: var(--mr-sidebar-gap) !important;
    row-gap: 0 !important;
    width: var(--mr-article-max) !important;
    max-width: var(--mr-article-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .mr-post-content-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--mr-article-max) !important;
    max-width: var(--mr-article-max) !important;
  }

  .mr-post-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* =========================================================
   07. Autorenbereich unter dem Beitrag
========================================================= */

.mr-author-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 7vw, 108px);
  padding-bottom: clamp(72px, 7vw, 108px);
  background:
    radial-gradient(circle at 18% 0%, rgba(79,131,255,.12), transparent 38%),
    linear-gradient(180deg, #0b1020 0%, #070b17 100%);
}

.mr-author-box {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  width: 100%;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.026));
  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.mr-author-image {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 30px;
}

.mr-author-image img {
  display: block;
  width: 100% !important;
  aspect-ratio: 1;
  object-fit: cover !important;
}

.mr-author-title {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.mr-author-title .elementor-heading-title {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.mr-author-text {
  max-width: 780px;
  margin-top: 16px;
  color: rgba(255,255,255,.66);
  font-size: 16px;
  font-weight: 520;
  line-height: 1.75;
}

.mr-author-text p {
  margin: 0;
}

/* =========================================================
   08. Weitere Beiträge
========================================================= */

.mr-related-posts-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 7vw, 108px);
  padding-bottom: clamp(72px, 7vw, 108px);
  background: #070b17;
}

.mr-related-posts-section .mr-section-heading {
  display: flex;
  width: 100%;
  max-width: 900px;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 44px;
  text-align: center;
}

/* Nur die Position wird vereinheitlicht. Das Eyebrow-Design bleibt global. */
.mr-related-posts-section .mr-section-heading > * {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mr-related-posts {
  width: 100%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
}

.mr-related-posts .elementor-posts-container,
.mr-related-posts .elementor-grid {
  align-items: stretch;
  justify-content: center;
}

/* Ein einzelner Beitrag steht mittig statt links im leeren Raster. */
.mr-related-posts .elementor-posts-container:has(> .elementor-post:only-child),
.mr-related-posts .elementor-grid:has(> .elementor-post:only-child) {
  grid-template-columns: minmax(0, 420px) !important;
  justify-content: center !important;
}

/* Zwei Beiträge ebenfalls mittig und gleich breit. */
.mr-related-posts .elementor-posts-container:has(> .elementor-post:nth-child(2):last-child),
.mr-related-posts .elementor-grid:has(> .elementor-post:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 420px)) !important;
  justify-content: center !important;
}

.mr-related-posts .elementor-post {
  display: flex;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.10), transparent 42%),
    rgba(255,255,255,.040);
  box-shadow:
    0 24px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Doppelten Rahmen des Elementor-Cards-Skins verhindern */
.mr-related-posts .elementor-post__card {
  height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
}

.mr-related-posts .elementor-post__thumbnail__link {
  display: block;
  width: 100%;
  margin: 0 !important;
}

.mr-related-posts .elementor-post__thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding-bottom: 0 !important;
  background: rgba(255,255,255,.035);
}

.mr-related-posts .elementor-post__thumbnail img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  transition: transform .35s ease;
}

.mr-related-posts .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.035);
}

.mr-related-posts .elementor-post__text {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px !important;
  text-align: left;
}

.mr-related-posts .elementor-post__title {
  width: 100%;
  margin: 0 0 12px !important;
}

.mr-related-posts .elementor-post__title,
.mr-related-posts .elementor-post__title a {
  color: #f7f9ff !important;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.14;
  letter-spacing: -.04em;
  text-decoration: none !important;
}

.mr-related-posts .elementor-post__excerpt {
  width: 100%;
  margin: 0 0 18px !important;
}

.mr-related-posts .elementor-post__excerpt p {
  margin: 0 !important;
  color: #f7f9ff;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.65;
  opacity: .66;
}

.mr-related-posts .elementor-post__read-more {
  display: inline-flex;
  align-items: center;
  margin-top: auto !important;
  color: #8fc4ff !important;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none !important;
}

/* =========================================================
   09. Abschlussbox / Über convi MEDIA
========================================================= */

.mr-single-post-final {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 7vw, 108px);
  padding-bottom: clamp(72px, 7vw, 112px);
  background:
    radial-gradient(circle at 50% 0%, rgba(79,131,255,.14), transparent 42%),
    linear-gradient(180deg, #070b17 0%, #0b1020 100%);
}

.mr-single-post-final__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 74px);
  align-items: center;
  width: 100%;
  max-width: none;
  overflow: hidden;
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 36px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,131,255,.16), transparent 42%),
    radial-gradient(circle at 100% 20%, rgba(124,92,255,.16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.030));
  box-shadow:
    0 34px 100px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09);
  text-align: left;
}

/*
   Empfohlene Klassen:
   Logo-Widget:              mr-single-post-final__media
   rechter Inhaltscontainer: mr-single-post-final__content

   Die globale Eyebrow-Klasse bleibt unverändert.
*/
.mr-single-post-final__content {
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

/* Das Logo darf niemals durch Elementor oder globale Bildregeln beschnitten werden. */
.mr-single-post-final__box .elementor-widget-image,
.mr-single-post-final__box .mr-single-post-final__media {
  width: 100%;
  max-width: 250px;
  justify-self: center;
  overflow: visible !important;
}

.mr-single-post-final__box .elementor-widget-image .elementor-widget-container,
.mr-single-post-final__box .elementor-widget-image a,
.mr-single-post-final__box .mr-single-post-final__media .elementor-widget-container,
.mr-single-post-final__box .mr-single-post-final__media a {
  display: block;
  width: 100%;
  overflow: visible !important;
}

.mr-single-post-final__box .elementor-widget-image img,
.mr-single-post-final__box .mr-single-post-final__media img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 220px !important;
  aspect-ratio: auto !important;
  margin: 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.mr-single-post-final__box .mr-section-title {
  max-width: 900px;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
  text-wrap: balance;
}

.mr-single-post-final__box .mr-section-text {
  max-width: 850px;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.mr-single-post-final__box .elementor-button-wrapper {
  text-align: left;
}

/* =========================================================
   10. Responsive
========================================================= */

@media (max-width: 1240px) {
  .mr-post-sidebar-card {
    padding: 21px;
  }

  .mr-sidebar-title {
    font-size: 20px;
  }

  .mr-single-post-final__box {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 1399px) {
  .mr-single-post-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(calc(100% - 36px), var(--mr-article-max)) !important;
    max-width: var(--mr-article-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .mr-post-content-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mr-post-sidebar,
  body.admin-bar .mr-post-sidebar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 30px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible !important;
  }
}

@media (max-width: 1024px) {
  .mr-single-post-layout > .e-con-inner,
  .mr-single-post-layout:not(:has(> .e-con-inner)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mr-post-sidebar,
  .admin-bar .mr-post-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mr-post-sidebar-cats,
  .mr-sidebar-categories {
    grid-column: 1 / -1;
  }

  .mr-content-h2,
  .mr-content-h2 .elementor-heading-title,
  .mr-post-content h2 {
    font-size: 32px !important;
    line-height: 1.2;
  }

  .mr-content-h3,
  .mr-content-h3 .elementor-heading-title,
  .mr-post-content h3 {
    font-size: 25px !important;
  }

  .mr-post-content,
  .mr-content-text,
  .mr-content-text .elementor-widget-container,
  .mr-content-text p,
  .mr-content-text li,
  .mr-content-text strong,
  .mr-content-text em {
    font-size: 17px;
    line-height: 1.78;
  }

  .mr-single-post-final__box {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 34px;
  }
}

@media (max-width: 767px) {
  .mr-single-post-hero,
  .mr-single-post-image-section,
  .mr-single-post-main,
  .mr-author-section,
  .mr-related-posts-section,
  .mr-single-post-final {
    padding-right: 18px;
    padding-left: 18px;
  }

  /*
     Auf Smartphones kommen die normalen 18 px Außenabstand ausschließlich
     vom Hauptbereich. Der innere Layout-Container erhält keine zweite
     zusätzliche Einrückung.
  */
  .mr-single-post-layout {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mr-post-content-wrap {
    width: 100% !important;
    max-width: none !important;
  }

  .mr-single-post-hero {
    padding-top: 116px;
    padding-bottom: 48px;
  }

  .mr-post-title {
    font-size: clamp(30px, 7.5vw, 30px);
    line-height: 1.02;
    letter-spacing: -.052em;
    text-wrap: pretty;
  }

  .mr-post-excerpt {
    font-size: 16px;
    line-height: 1.65;
  }

  .mr-post-byline {
    width: 100%;
    align-items: flex-start;
    gap: 8px;
    padding: 9px;
    border-radius: 26px;
  }

  .mr-post-byline > .e-con-inner {
    width: 100%;
    align-items: flex-start;
    gap: 8px;
  }

  .mr-post-meta {
    width: 100%;
  }

  .mr-post-meta .elementor-post-info,
  .mr-post-meta .elementor-icon-list-items {
    gap: 7px;
  }

  .mr-post-meta .elementor-icon-list-item,
  .mr-post-meta__item {
    min-height: 33px;
    padding: 0 11px !important;
  }

  .mr-post-meta .elementor-icon-list-text,
  .mr-post-meta .elementor-post-info__item,
  .mr-post-meta .elementor-post-info__item a,
  .mr-post-meta time,
  .mr-post-meta a {
    font-size: 12px !important;
  }

  .mr-post-author-widget .elementor-author-box {
    min-height: 56px;
    gap: 12px;
    padding-right: 10px;
  }

  .mr-post-author-widget .elementor-author-box__avatar {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .mr-post-author-widget .elementor-author-box__name,
  .mr-post-author-widget .elementor-author-box__name a {
    font-size: 16px !important;
  }

  .mr-post-featured-image {
    border-radius: 26px;
  }

  .mr-post-content {
    padding: 25px 20px;
    border-radius: 26px;
  }

  .mr-content-h2,
  .mr-content-h2 .elementor-heading-title,
  .mr-post-content h2 {
    font-size: 29px !important;
    line-height: 1.22;
    letter-spacing: -.028em;
  }

  .mr-content-h3,
  .mr-content-h3 .elementor-heading-title,
  .mr-post-content h3 {
    font-size: 23px !important;
    line-height: 1.28;
    letter-spacing: -.018em;
  }

  .mr-post-content,
  .mr-content-text,
  .mr-content-text .elementor-widget-container,
  .mr-content-text p,
  .mr-content-text li,
  .mr-content-text strong,
  .mr-content-text em {
    font-size: 16px;
    line-height: 1.75;
  }

  .mr-post-content blockquote {
    padding: 20px 18px;
    border-radius: 20px;
  }

  .mr-content-note {
    margin: 24px 0;
    padding: 54px 18px 18px;
    border-radius: 20px;
  }

  .mr-content-note::before {
    top: 16px;
    left: 18px;
    width: 26px;
    height: 26px;
  }

  .mr-content-note .elementor-heading-title,
  .mr-content-note h2,
  .mr-content-note h3,
  .mr-content-note h4 {
    font-size: 18px !important;
  }

  .mr-content-note,
  .mr-content-note p,
  .mr-content-note li,
  .mr-content-note .elementor-widget-text-editor,
  .mr-content-note .elementor-widget-text-editor p {
    font-size: 15px;
    line-height: 1.68;
  }

  .mr-post-content table {
    display: block;
    overflow-x: auto;
  }

  .mr-post-sidebar,
  .admin-bar .mr-post-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .mr-post-sidebar-cats,
  .mr-sidebar-categories {
    grid-column: auto;
  }

  .mr-author-box {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 22px;
    border-radius: 28px;
  }

  .mr-author-image {
    width: 100%;
    max-width: 180px;
  }

  .mr-related-posts .elementor-posts-container:has(> .elementor-post:only-child),
  .mr-related-posts .elementor-grid:has(> .elementor-post:only-child),
  .mr-related-posts .elementor-posts-container:has(> .elementor-post:nth-child(2):last-child),
  .mr-related-posts .elementor-grid:has(> .elementor-post:nth-child(2):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mr-related-posts .elementor-post__text {
    padding: 22px !important;
  }

  .mr-single-post-final__box {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 30px 22px;
    border-radius: 28px;
    text-align: center;
  }

  .mr-single-post-final__content {
    align-items: center;
    text-align: center;
  }

  .mr-single-post-final__box .elementor-widget-image,
  .mr-single-post-final__box .mr-single-post-final__media {
    max-width: 160px;
  }

  .mr-single-post-final__box .elementor-widget-image img,
  .mr-single-post-final__box .mr-single-post-final__media img {
    max-width: 160px !important;
    max-height: 150px !important;
  }

  .mr-single-post-final__box .mr-section-title,
  .mr-single-post-final__box .mr-section-text,
  .mr-single-post-final__box .elementor-button-wrapper {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .mr-post-title {
    font-size: clamp(30px, 7.5vw, 45px);
  }

  .mr-content-h2,
  .mr-content-h2 .elementor-heading-title,
  .mr-post-content h2 {
    font-size: 25px !important;
  }

  .mr-content-h3,
  .mr-content-h3 .elementor-heading-title,
  .mr-post-content h3 {
    font-size: 22px !important;
  }

  .mr-post-sidebar-card {
    padding: 20px;
    border-radius: 24px;
  }

  .mr-sidebar-title {
    font-size: 20px;
  }
}

/* Bewegungen reduzieren, ohne Hover-Design zu zerstören. */
@media (prefers-reduced-motion: reduce) {
  .mr-related-posts .elementor-post__thumbnail img,
  .mr-content-text a,
  .mr-post-content a {
    transition: none;
  }
}

/* =========================================================
   V9 FINAL
   MOBILE-FIRST LAYOUT + SMART FLOATING INFO SIDEBAR

   Ziele:
   - Beitragsbox maximal 1360 px und damit etwas schmaler als der Header
   - Artikel bleibt exakt mittig in der Website
   - Sidebar sitzt zusätzlich 24 px rechts außerhalb des Artikels
   - keine eigene Scrollleiste in der Sidebar
   - smartes Follow-Scroll-Verhalten über single-post-sidebar.js
   - Smartphone: genau 18 px Außenabstand
========================================================= */

/* ---------------------------------------------------------
   Mobile Basis
--------------------------------------------------------- */

.mr-single-post-main {
  width: 100% !important;
  max-width: none !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.mr-single-post-main > .e-con-inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.mr-single-post-layout {
  --mr-article-max: 1280px;
  --mr-sidebar-width: 320px;
  --mr-sidebar-gap: 24px;
  --mr-sidebar-top: 150px;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: var(--mr-article-max) !important;
  min-height: 0 !important;
  height: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.mr-single-post-layout > .e-con-inner {
  display: contents !important;
}

.mr-post-content-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.mr-post-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/*
   Mobile und kleinere Geräte:
   Sidebar steht unter dem Artikel. Keine Sticky-Position und kein
   eigener Scrollbereich.
*/
.mr-post-sidebar,
body.admin-bar .mr-post-sidebar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 24px 0 0 !important;
  gap: 16px !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: auto !important;
  transform: none !important;
  will-change: auto !important;
  box-sizing: border-box !important;
}

.mr-post-sidebar::-webkit-scrollbar {
  display: none !important;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (min-width: 768px) {
  .mr-single-post-main {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .mr-post-sidebar,
  body.admin-bar .mr-post-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 30px !important;
  }

  .mr-post-sidebar-cats,
  .mr-sidebar-categories {
    grid-column: 1 / -1 !important;
  }
}

/* ---------------------------------------------------------
   Desktop Floating Layout
   Erst aktivieren, wenn Artikel + Abstand + Sidebar wirklich passen.
--------------------------------------------------------- */

@media (min-width: 1760px) {
  .mr-single-post-main {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /*
     Der Grid-Container bleibt 1360 px breit und wird mittig ausgerichtet.
     Die zweite Grid-Spalte läuft rechts aus dem Container heraus.
     Dadurch bleibt ausschließlich der Artikel mittig.
  */
  .mr-single-post-layout {
    grid-template-columns:
      var(--mr-article-max)
      var(--mr-sidebar-width) !important;
    column-gap: var(--mr-sidebar-gap) !important;
    row-gap: 0 !important;
    width: var(--mr-article-max) !important;
    max-width: var(--mr-article-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  .mr-post-content-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--mr-article-max) !important;
    max-width: var(--mr-article-max) !important;
  }

  /*
     CSS-Fallback ohne JavaScript:
     Für eine kurze Sidebar funktioniert normales Sticky weiterhin.
  */
  .mr-post-sidebar,
  body.admin-bar .mr-post-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--mr-sidebar-top) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: var(--mr-sidebar-width) !important;
    min-width: var(--mr-sidebar-width) !important;
    height: max-content !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    gap: 16px !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    transform: none !important;
    scrollbar-width: auto !important;
  }

  body.admin-bar .mr-single-post-layout {
    --mr-sidebar-top: 182px;
  }

  /*
     Sobald das JavaScript aktiv ist, übernimmt es das smarte Follow-Scrolling.
     Die Sidebar wird innerhalb der Beitragshöhe per translateY bewegt.
  */
  body.single-post
  .mr-single-post-layout.mr-sidebar-js-active
  .mr-post-sidebar {
    position: relative !important;
    top: auto !important;
    transform: translate3d(
      0,
      var(--mr-sidebar-shift, 0px),
      0
    ) !important;
    transform-origin: top center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
  }
}

/* ---------------------------------------------------------
   Kleine Smartphones
--------------------------------------------------------- */

@media (max-width: 480px) {
  .mr-single-post-main {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .mr-post-content {
    padding-right: 18px !important;
    padding-left: 18px !important;
    border-radius: 24px !important;
  }

  .mr-post-sidebar-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------
   Sticky-Voraussetzungen
--------------------------------------------------------- */

body.single-post .elementor-location-single,
body.single-post .elementor-location-single > .elementor-element,
body.single-post .elementor-location-single .elementor-element:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con-inner:has(.mr-single-post-main),
body.single-post .elementor-location-single .e-con:has(.mr-post-sidebar),
body.single-post .elementor-location-single .e-con-inner:has(.mr-post-sidebar),
.mr-single-post-main,
.mr-single-post-main > .e-con-inner,
.mr-single-post-layout,
.mr-post-content-wrap {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
}

body.single-post
.elementor-location-single
.elementor-element:has(.mr-single-post-main):not(.mr-post-sidebar),
body.single-post
.elementor-location-single
.e-con:has(.mr-post-sidebar):not(.mr-post-sidebar),
body.single-post
.elementor-location-single
.e-con-inner:has(.mr-post-sidebar) {
  transform: none !important;
  perspective: none !important;
}