/**
 * CSS-Variablen
 */
:root {
    /* Farben */
    --msup-color-black: rgb(94, 94, 94);
    --msup-color-gray: rgb(242, 242, 242);
    --msup-color-green: rgb(20, 160, 150);
    --msup-color-white: rgb(255, 255, 255);


    /* Typo */
    --msup-text-size-default: 1rem;
    --msup-text-size-small: 14px;
    --msup-text-size-tiny: 12px;
    --msup-line-height-small: 1.25;


    /* Abstände */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=72&minWidth=320&minRatio=1.333&maxFontSize=120&maxWidth=1280&maxRatio=1.5&steps=xs%2C+s%2C+m%2C+l%2C+xl%2C+xxl&baseStep=m&prefix=ikl-spacing&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=320 */
    /* Entspricht gab max * 5, gap min * 3 */
    --msup-spacing-xs: clamp(2.53rem, 1.33vw + 2.26rem, 3.33rem);
    --msup-spacing-s: clamp(3.38rem, 2.7vw + 2.84rem, 5rem);
    --msup-spacing-m: clamp(4.5rem, 5vw + 3.5rem, 7.5rem);
    --msup-spacing-l: clamp(6rem, 8.75vw + 4.25rem, 11.25rem);
    --msup-spacing-xl: clamp(8rem, 14.8vw + 5.04rem, 16.88rem);
    --msup-spacing-xxl: clamp(10.66rem, 24.42vw + 5.78rem, 25.31rem);

    /* https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=320&minRatio=1.333&maxFontSize=30&maxWidth=1280&maxRatio=1.5&steps=xxs%2C+xs%2C+s%2C+m%2C+l%2C+xl%2C+xxl&baseStep=m&prefix=ikl-gap&useContainerWidth=undefined&includeFallbacks=undefined&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Preview&previewWidth=320 */
    --msup-gap-xxs: clamp(0.63rem, -0.12vw + 0.65rem, 0.56rem);
    --msup-gap-xs: clamp(0.84rem, -0.02vw + 0.84rem, 0.83rem);
    --msup-gap-s: clamp(1.13rem, 0.2vw + 1.09rem, 1.25rem);
    --msup-gap-m: clamp(1.5rem, 0.63vw + 1.37rem, 1.88rem);
    --msup-gap-l: clamp(2rem, 1.35vw + 1.73rem, 2.81rem);
    --msup-gap-xl: clamp(2.67rem, 2.58vw + 2.15rem, 4.22rem);
    --msup-gap-xxl: clamp(3.55rem, 4.63vw + 2.62rem, 6.33rem);


    /* Animationen */
    --msup-transition-duration: 0.4s;
    --msup-transition-easing: ease;


    /* Rahmen */
    --msup-border-color: var(--msup-color-black);
    --msup-border-radius: 0;
    --msup-border-width: 1px;


    /* Links */
    --msup-link-color: inherit;
    --msup-link-color-hover: var(--msup-color-green);


    /* Buttons */
    --msup-button-background-color: var(--msup-color-gray);
    --msup-button-background-color-hover: var(--msup-color-green);
    --msup-button-padding-x: 16px;
    --msup-button-padding-top: 9px;
    --msup-button-padding-bottom: 10px;
    --msup-button-text-color: var(--msup-color-black);
    --msup-button-text-color-hover: var(--msup-color-white);
    --msup-button-text-size: 14px;


    /* Listen */
    --msup-list-style-padding: 20px; /* TODO: Auf Mac prüfen */
    --msup-list-item-gap-y: 10px;


    /* Box mit Hintergrundfarbe */
    --msup-callout-background-color: var(--msup-color-gray);
    --msup-callout-gap-y: var(--msup-gap-m);
    --msup-callout-padding: var(--msup-gap-s);
}


/**
 * Header

   TODO: ID von Blog-Seite anpassen
 */
.single-post #header_socials #behance i,
.page-id-21362 #header_socials #behance i {
    color: var(--msup-color-green);
}



/**
 * Listen
 */
body ul.msup-list-dash,
body ul.msup-list-disc,
body ul.msup-list-checkbox,
body ol.msup-list-alpha,
body ol.msup-list-decimal,
body ol.msup-list-roman {
    list-style: none;
    padding-left: 0;
}

/* TODO: Prüfen, ob vorherige und nachfolgende Regeln bewusst ohne :is umgesetzt wurden */

body ol.msup-list-alpha,
body ol.msup-list-decimal,
body ol.msup-list-roman {
    counter-reset: msup-list-counter;
}

body :is(
  ul.msup-list-dash,
  ul.msup-list-disc,
  ul.msup-list-checkbox,
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li {
    margin-bottom: var(--msup-list-item-gap-y);
    padding-left: var(--msup-list-style-padding); /* TODO: Bei Römisch 8 ist padding-links zu klein */
    position: relative;
}

body :is(
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li {
    counter-increment: msup-list-counter;
}

body :is(
  ul.msup-list-dash,
  ul.msup-list-disc,
  ul.msup-list-checkbox,
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li::before {
    left: 0;
    position: absolute;
    top: 0;
}

body ul.msup-list-dash > li::before {
    content: "–";
    top: -0.05em;
}

body ul.msup-list-disc > li::before {
    content: "•";
}

body ul.msup-list-checkbox > li::before {
    content: "☐";
    top: 0;
}

body ol.msup-list-alpha > li::before {
    content: counter(msup-list-counter, lower-alpha) ".";
}

body ol.msup-list-decimal > li::before {
    content: counter(msup-list-counter, decimal) ".";
}

body ol.msup-list-roman > li::before {
    content: counter(msup-list-counter, upper-roman) ".";
}

body :is(
  ul.msup-list-dash,
  ul.msup-list-disc,
  ul.msup-list-checkbox,
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
):last-child > li:last-child {
    margin-bottom: 0;
}

body :is(
  ul.msup-list-dash,
  ul.msup-list-disc,
  ul.msup-list-checkbox,
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li > :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}

body :is(
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li:has(> h1:first-child)::before {
    line-height: 36px;
}

body :is(
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li:has(> h2:first-child)::before {
    line-height: 28px;
}

body :is(
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li:has(> h3:first-child)::before {
    line-height: 23px;
}

body :is(
  ol.msup-list-alpha,
  ol.msup-list-decimal,
  ol.msup-list-roman
) > li:has(> h4:first-child)::before {
    line-height: 20px;
}


/**
 * Box mit farbigem Hintergrund
 */
.msup-callout,
.elementor-element .msup-callout {
    background-color: var(--msup-callout-background-color);
    gap: 0;
    margin-block-end: var(--msup-blog-post-elementor-widget-gap-y);
    margin-block-start: var(--msup-callout-gap-y);
    padding: var(--msup-callout-padding);
}

.elementor-element .msup-callout > .e-con-inner {
    padding: 0;
}


/**
 * Bild mit Rahmen
 */
img.msup-image-framed,
.elementor-element .msup-image-framed img {
    border: var(--msup-border-width) solid;
}

.elementor-element .msup-image-framed a {
    color: inherit;
    display: block;
}


/**
 * Staff
 */
.msup-staff-blog-posts {
    clear: both;
    min-height: 50px; /* aufgrund von früherem Element */
}

.msup-staff-blog-posts .msup-staff-blog-posts-separator {
    border: none;
    border-top: var(--msup-blog-post-footer-separator-width) solid;
    color: var(--msup-blog-post-footer-separator-color);
    display: block;
    height: 0;
    margin: var(--msup-blog-post-footer-separator-gap-y) 0 calc(var(--msup-blog-post-footer-separator-gap-y));
    width: 100%;
}

.msup-staff-blog-posts .msup-staff-blog-posts-title {
    color: var(--msup-blog-post-h1-color);
    font-weight: var(--msup-blog-post-h1-font-weight);
    line-height: var(--msup-line-height-small);
    margin-top: 0;
    margin-bottom: var(--msup-blog-post-h1-margin-bottom);
}

.msup-staff-blog-posts #msup-blog-grid-container {
    margin-top: 0;
}


/**
 * Elementor

  TODO: ID von Blog-Seite anpassen
 */
.single-post .elementor .elementor-col-100 .elementor-widget-wrap,
.page-id-21362 .elementor .elementor-col-100 .elementor-widget-wrap {
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (min-width: 1034px) and (max-width: 1214px) {

    .single-post .elementor-section.elementor-section-boxed > .elementor-container,
    .page-id-21362 .elementor-section.elementor-section-boxed > .elementor-container {
        width: 960px;
    }

    .single-post .e-con,
    .page-id-21362 .e-con {
        --content-width: 960px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1035px) {

    .single-post .elementor-section.elementor-section-boxed > .elementor-container,
    .page-id-21362 .elementor-section.elementor-section-boxed > .elementor-container {
        width: 708px;
    }

    .single-post .e-con,
    .page-id-21362 .e-con {
        --content-width: 708px;
    }
}

@media only screen and (max-width: 767px) {

    .single-post .elementor-section.elementor-section-boxed > .elementor-container,
    .page-id-21362 .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }
}