/*
Theme Name: Mediclowns 2024-Child-Theme
Description: Mediclowns Child-Theme for Twenty Twenty-Four
Author: Matthias Kette
Author URI: https://portfolio.make-arts.de
Template: twentytwentyfour
Version: 1.0
Text Domain: twentytwentyfour-child
*/

:root {
    --color-medi-blau: hsl(207, 78%, 22%);
    --color-medi-blau-50transparent: hsla(207, 79%, 22%, 0.5);
    --color-medi-rot: hsl(0, 56%, 51%);
    --color-blau-hover: hsl(207, 80%, 40%);
    --color-warm-1: hsl(40, 95%, 92%);
    --color-warm-1-transparant: hsla(40, 95%, 92%, 0.8);
    --color-warm-2: hsl(40, 100%, 98%);
    --color-warm-2-transparant: hsl(40, 100%, 98%, 0.8);
    --color-achtung: hsl(287, 93%, 71%);

    --font-size-h1: clamp(40px, calc( ((80 - 40) / (1100 - 600)) * (100vw - 600px) + 40px ), 80px);
    --font-size-h2: clamp(36px, calc( ((60 - 36) / (1100 - 600)) * (100vw - 600px) + 36px ), 60px);
    --font-size-h3: clamp(30px, calc( ((40 - 30) / (1100 - 600)) * (100vw - 600px) + 30px ), 40px);
    --font-size-h4: clamp(24px, calc( ((32 - 24) / (1100 - 600)) * (100vw - 600px) + 24px ), 32px);
    --font-size-text: clamp(18px, calc( ((26 - 18) / (1100 - 600)) * (100vw - 600px) + 18px ), 26px);
    --font-size-quote: clamp(30px, calc( ((40 - 30) / (1100 - 600)) * (100vw - 600px) + 30px ), 40px);
    --font-size-header-nav-1: clamp(18px, calc( ((24 - 18) / (1100 - 600)) * (100vw - 600px) + 18px ), 24px);
    /* --font-size-header-nav-2: clamp(16px, calc( ((18 - 16) / (1100 - 600)) * (100vw - 600px) + 16px ), 18px); */
    --font-size-header-nav-2: clamp(17px, calc( ((20 - 17) / (1100 - 600)) * (100vw - 600px) + 18px ), 20px);
    --font-size-clown-cards: clamp(17px, calc( ((20 - 17) / (1100 - 600)) * (100vw - 600px) + 18px ), 20px);

    --line-hight-quote: clamp(50px, calc( ((70 - 50) / (1100 - 600)) * (100vw - 600px) + 50px ), 70px);

    --transition-timing: 0.2s ease-in-out;

    --text-shadow-white: 
        0px 0px 20px white, 0px 0px 20px white,
        0px 0px 20px white, 0px 0px 20px white,
        0px 0px 20px white, 0px 0px 20px white,
        0px 0px 20px white, 0px 0px 20px white;
    --text-shadow-warm-1: 
        0px 0px 20px var(--color-warm-1), 0px 0px 20px var(--color-warm-1),
        0px 0px 20px var(--color-warm-1), 0px 0px 20px var(--color-warm-1),
        0px 0px 20px var(--color-warm-1), 0px 0px 20px var(--color-warm-1),
        0px 0px 20px var(--color-warm-1), 0px 0px 20px var(--color-warm-1);
    --text-shadow-warm-2: 
        0px 0px 20px var(--color-warm-2), 0px 0px 20px var(--color-warm-2),
        0px 0px 20px var(--color-warm-2), 0px 0px 20px var(--color-warm-2),
        0px 0px 20px var(--color-warm-2), 0px 0px 20px var(--color-warm-2),
        0px 0px 20px var(--color-warm-2), 0px 0px 20px var(--color-warm-2);

    --left-right-distance: clamp(20px, calc(20px + (80 - 20) * ((100vw - 450px) / (1200 - 450))), 80px);

    --btn-size-donation: clamp(120px, 20vw, 180px);
}

@font-face {
    font-family: 'made_dillon';
    src: url(fonts/made-dillan.woff2) format('woff2'),
        url(fonts/made-dillan.woff) format('woff'),
        url(fonts/made-dillan.ttf) format('truetype');
    /* font-weight: normal; */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson_Hyperlegible';
    src: url(fonts/AtkinsonHyperlegible-Regular.woff2) format('woff2'),
        url(fonts/AtkinsonHyperlegible-Regular.woff) format('woff'),
        url(fonts/AtkinsonHyperlegible-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Bold';
    src: url(fonts/AtkinsonHyperlegible-Bold.woff2) format('woff2'),
        url(fonts/AtkinsonHyperlegible-Bold.woff) format('woff'),
        url(fonts/AtkinsonHyperlegible-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-medi-blau) !important;
    font-family: 'made_dillon', serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}
h1 {
    font-size: var(--font-size-h1) !important;
}
h2 {
    font-size: var(--font-size-h2) !important;
}
h3 {
    font-size: var(--font-size-h3) !important;
}
h4 {
    font-size: var(--font-size-h4) !important;
}

a {
    text-decoration: none !important;
    transition: color var(--transition-timing);
}
a span {
    transition: color var(--transition-timing);
}
a:hover, a:hover span {
    color: var(--color-blau-hover);
}

p, ul.wp-block-list > li {
    color: var(--color-medi-blau) !important;
    font-family: 'Atkinson_Hyperlegible', sans-serif;
    font-style: normal;
    font-size: var(--font-size-text);
    font-weight: 400;
    line-height: 1.5;
}

*:not(.is-vertical, .is-layout-flex, .clown-card, a) > *:is(h1, h2, h3, h4, h5, h6, p) {
    margin-bottom: 20px !important;
}

section {
    margin-bottom: 60px !important;
}

.wp-block-buttons a, form input[type="submit"] {
    font-family: 'Atkinson Hyperlegible Bold', sans-serif;
    font-size: var(--font-size-text);
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: center;
    padding: 16px 28px;
    background-color: var(--color-medi-blau) !important;
    border: none;
    transition: background-color var(--transition-timing);
}
.wp-block-buttons a:hover, form input[type="submit"]:hover {
    background-color: var(--color-blau-hover) !important
}

blockquote {
    background-color: transparent !important;
}
blockquote p {
    color: var(--color-medi-rot) !important;
    font-family: 'made_dillon', serif;
    font-style: normal;
    font-size: var(--font-size-quote);
    font-weight: 400;
    line-height: var(--line-hight-quote);
    letter-spacing: 1%;
    text-align: center;
}

body {
    color: var(--color-medi-blau) !important;
}

header {
    position: relative;
    z-index: 900;
    white-space: nowrap;
    background-color: white;
    display: flex;
    align-items: center;
}
header > div {
    flex-grow: 1;
    padding: 23px clamp(32px, 5vw, 70px) !important;
}
header .wp-block-navigation__container {
    gap: 3vw;
}

.header-logo {
    width: clamp(170px, 22vw, 274px);
    padding: 0 !important;
    margin: 0 30px !important;
    margin-left: clamp(0px, calc(30 * ((100vw - 980px) / (1200 - 980))), 30px) !important;
    max-height: 88px;
}

header :is(a, span) {
    font-family: 'Atkinson_Hyperlegible Bold', sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--font-size-header-nav-1);
}
header li > *:is(a, span),
header li path,
header svg path {
    transition: color var(--transition-timing);
    transition: stroke var(--transition-timing);
}
header li:hover > *:is(a, span),
header li:hover path,
header button:hover svg path {
    color: var(--color-blau-hover) !important;
    stroke: var(--color-blau-hover) !important;
}

header .wp-block-navigation__container > li {
    position: relative;
    flex-direction: row-reverse;
    gap: 10px;
    cursor: default;
}
header .wp-block-navigation__container > li > button {
    margin: 0 !important;
    width: 18px !important;
}

header .wp-block-navigation__submenu-container {
    position: absolute;
    top: calc(100%);
    left: -20px !important;
    min-width: 320px !important;
    padding: 20px 20px 12px 44px;
    border: none !important;
}
header .wp-block-navigation__submenu-container :is(a, span) {
    font-family: 'Atkinson_Hyperlegible', sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--font-size-header-nav-2);
    white-space: normal;
    /* line-height: 48px; */
    padding: 5px 0px 5px 3px !important;

}

/* ----- Burgermenu -----*/
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    width: 40px;
    height: 40px;
}
.wp-block-navigation__responsive-container-open path,
.wp-block-navigation__responsive-container-close path {
    stroke: var(--color-medi-blau);
    stroke-width: 0.5px;
}
.wp-block-navigation__responsive-container-open:hover path {
    stroke: var(--color-blau-hover);
}
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    max-width: 100vw;
}

/* ----- Burgermenu -----*/

main {
    padding: 0 !important;
    min-height: calc(100vh - 284px);
    display: flex;
    flex-direction: column;
}
main .entry-content {
    width: 100%;
    padding-bottom: 160px;
    flex-grow: 1;
}
main .entry-content > :first-child:not(.full-width) {
    padding-top: 20px;
}
main .entry-content > *:not(.full-width) {
    padding-left: var(--left-right-distance) !important;
    padding-right: var(--left-right-distance) !important;
}

main :is(h1, h2, h3, h4, h5, h6, p, section) {
    position: relative;
    z-index: 500;
}

footer {
    margin: 0;
    position: relative;
    height: 150px;
    z-index: 900;
    background-color: white;
}
footer > div {
    height: 100%;
    align-content: center;
}
footer nav > ul {
    gap: 40px;
}
footer .wp-block-social-link-anchor svg {
    fill: var(--color-medi-blau) !important;
}
footer p.copyright {
    font-weight: bold;
    cursor: default;
}
footer figure.logo {
    display: flex;
    align-items: center;
}

form p {
    margin: 30px 0;
}
form :is(input, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    font-family: 'Atkinson_Hyperlegible', sans-serif;
    font-size: var(--font-size-text) !important;
    color: var(--color-medi-blau-50transparent);
    border: 1px solid var(--color-medi-blau-50transparent);
    border-radius: 6px;
    margin: 8px 0;
}
form :is(span),
form div.wpcf7-response-output {
    font-family: 'Atkinson_Hyperlegible', sans-serif;
    font-size: var(--font-size-text) !important;
}
form input[type="submit"] {
    color: white !important;
    width: 240px;
    margin: 0;
}
form div.wpcf7-response-output {
    border-radius: 6px;
    padding: 0.5em 1em !important;
    margin: 2em 3em !important;
}

@media (max-width: 980px) {
    /* ----- Burgermenu -----*/
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .header-nav > div {
        background-color: var(--color-warm-1-transparant) !important;
        backdrop-filter: blur(10px);
        left: unset;
        padding: clamp(32px, 5vw, 70px) !important;
        border-left: 1px solid var(--color-medi-blau-50transparent);
    }
    .wp-block-navigation__responsive-container-close {
        top: clamp(-11px, calc(-11px + (-11 - 2) * ((100vw - 770px) / (980 - 770))), -2px);
    }
    .wp-block-navigation__responsive-container-content > ul {
        margin-top: 10px;
        gap: 30px !important;
    }
    .wp-block-navigation__responsive-container-content > ul > li > ul {
        padding: 0px 0px 0px 18px !important;
        min-width: unset !important;
    }
    header .wp-block-navigation__submenu-container :is(a) {
        padding: 0 !important;
    }
    .wp-block-navigation__responsive-container-content .nav-link-icon {
        flex-direction: row-reverse !important;
        align-items: center !important;
    }

    .home header .wp-block-navigation__submenu-container::before {
        content: none !important;
    }
    /* ----- Burgermenu -----*/
}
@media (max-width: 350px) {
    .header-logo {
        width: auto;
        max-width: clamp(170px, 22vw, 274px);
        margin-right: 20px !important;
    }
}

/* ////////////////////   Gallery   //////////////////// */

.gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.gallery-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.gallery-btn svg {
    width: clamp(35px, calc(35px + (50 - 35) * ((100vw - 350px) / (900 - 350))), 50px);
    height: clamp(35px, calc(35px + (50 - 35) * ((100vw - 350px) / (900 - 350))), 50px);
    cursor: pointer;
}

/* ////////////////////   Spenden Button --- Vorlage   //////////////////// */
.donation-button {
    position: relative;
    height: var(--btn-size-donation);
    width: var(--btn-size-donation);
}
.donation-button svg {
    height: 100% !important; 
}
.donation-button svg :is(circle.color, g.color path) {
    transition: fill var(--transition-timing);
}
.donation-button:hover svg :is(circle.color, g.color path) {
    fill: var(--color-medi-rot);
}

/* //////////   Spenden Button (Home)   ////////// */
.home .donation-button {
    right: calc(120px - 12vw);
    margin-top: 20px !important;
    margin-bottom: clamp(20px, 3vw, 30px) !important;
}
@media (max-width: 980px) {
    .home .donation-button {
        right: calc(50px - 5vw);
    }
}

/* //////////   Spenden Button (unten rechts) --- Vorlage   ////////// */
.donation-button-bottom-right {
    position: relative;
    z-index: 500;
    height: 0;
    /* margin-top: 120px !important; */
    margin-bottom: 150px !important;
}
.donation-button-bottom-right > div {
    right: calc(220px - 12vw);
}
@media (max-width: 980px) {
    .donation-button-bottom-right > div {
        right: 10vw;
    }
}


/* ////////////////////   Home   //////////////////// */

.home main {
    padding-top: 0;
}
.home {
    background-color: white;
}
.home header, .home header > div {
    background-color: unset !important;
}
.home header .wp-block-navigation__submenu-container {
    background-color: unset !important;
}
.home header .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    background-color: var(--color-warm-1-transparant);
    filter: blur(3px);
    backdrop-filter: blur(2px);
}
.home header .wp-block-navigation-item {
    background-color: unset !important;
    cursor: pointer;
}

.home-template-content {
    margin-top: -150px !important;
}

.home-title {
    margin-bottom: 40px !important;
}
.home-title-banner {
    position: relative;
    top: 85px;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
    gap: 30px;
    padding-top: clamp(60px, calc(60px + 0.06364 * (100vw - 350px)), 95px) !important;
    padding-left: clamp(15px, 6vw, 75px) !important;
    padding-right: clamp(15px, 6vw, 75px) !important;
    padding-bottom: 0 !important;
    z-index: 500;
}
.home-title-img {
    height: clamp(350px, 70vw, 650px);
    margin: 0 !important;
    position: relative;
    z-index: 510;
}
.home-title-img img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
}
.home-title-text-wrapper {
    gap: 0 !important;
    margin-bottom: 100px !important;
}

.home-title-wave svg {
    position: relative;
    top: -1px;
    left: -5%;
    height: 135px;
    width: 110%;
}

@media (max-width: 1430px) {
    .home-title-wave svg {
        height: unset;
    }
}
@media (max-width: 1370px) {
    .title-img-right {
        display: none;
    }
}
@media (max-width: 980px) {
    .home-title-banner {
        flex-direction: row-reverse;
        gap: 5px;
    }
    .title-img-left {
        display: none;
    }
    .title-img-right {
        display: block;
    }
}

/* ////////////////////   Clowns Overview   //////////////////// */

.clown-list ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px 38px;
}
.clown-list li {
    flex-grow: 1;
    flex-basis: 30%;
    flex: 0 1 30%;
    max-width: 350px;
    min-width: 140px;
    aspect-ratio: 7 / 9;
    overflow: hidden;
    box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.08);
}
.clown-card {
    display: block;
    background-color: white;
    padding: 24px 20px 20px 20px;
    width: 100%;
    aspect-ratio: 7 / 9;
}
.clowns-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.clown-card figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
}
.clown-card figure img {
    border-radius: 0;
    width: 100% !important;
    aspect-ratio: 1 / 1;
}
.clown-card .primary-post-image {
    transform: scale(0.998);
}
.clown-card .secondary-post-image {
    transform: scale(1.001);
}
.clown-card:hover .primary-post-image {
    transform: scale(1.001);
}
.clown-card:hover .secondary-post-image {
    display: none;
}
.clown-card:hover a {
    color: var(--color-blau-hover);
}

@media (max-width: 1400px) {
    .clown-list ul {
        column-gap: clamp(12px, calc(12px + (38 - 12) * ((100vw - 350px) / (1400 - 350))), 38px);
        row-gap: clamp(20px, calc(20px + (50 - 20) * ((100vw - 350px) / (1400 - 350))), 50px);
    }
    .clown-card {
        padding: clamp(12px, calc(12px + (20 - 12) * ((100vw - 350px) / (1400 - 350))), 20px);
    }
    .clown-card h4 {
        font-size: clamp(18px, calc(18px + (32 - 18) * ((100vw - 350px) / (1400 - 350))), 32px) !important;
        line-height: clamp(28px, 3.077vw + 0.026vw, 45px);
        top: calc( clamp(0px, 0.0154 * (100vw - 750px), 10px ) - 10px );
    }
}
@media (max-width: 750px) {
    .clown-list li {
        flex: 0 1 40%;
    }
    .clown-card h4 {
        line-height: clamp(20px, 5vw + 0.0375vw, 35px);
        top: calc( clamp(0px, 0.0375 * (100vw - 350px), 10px ) - 10px );
    }
}
@media (max-width: 350px) {
    .clown-list li {
        flex: 0 1 100%;
    }
}

/* ////////////////////   Clowns Portrait   //////////////////// */

.portrait-template-container .entry-content {
    max-width: 1300px !important;
}

.link-all-clowns {
    width: 100%;
    position: relative;
    top: 1.2rem;
    margin-left: var(--left-right-distance) !important;
    margin-right: var(--left-right-distance) !important;
}
.link-all-clowns a {
    text-decoration: none;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}
.link-all-clowns a:hover :is(p, path) {
    color: var(--color-blau-hover) !important;
    stroke: var(--color-blau-hover) !important;
}
.link-all-clowns * {
    margin: 0;
}
.link-all-clowns:last-of-type {
    margin-bottom: 68px;
}

@media (min-width: 1350px) {
    .portrait-container {
        margin-top: -70px !important;
    }
}

.portrait-container section:first-of-type {
    margin-top: clamp(40px, calc(40px + (80 - 40) * ((100vw - 350px) / (900 - 350))), 80px) !important;
    margin-bottom: clamp(40px, calc(40px + (80 - 40) * ((100vw - 350px) / (900 - 350))), 80px) !important;
}

.portrait-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "gallery table"
    "gallery text";
    gap: clamp(30px, calc(30px + (80 - 30) * ((100vw - 800px) / (1300 - 800))), 80px);
    margin: 0 !important;
    margin-top: clamp(30px, calc(30px + (60 - 30) * ((100vw - 350px) / (1200 - 350))), 60px) !important;
}
.portrait-gallery {
    grid-area: gallery;
    width: 100%;
}
.portrait-gallery .gallery, .portrait-gallery .gallery :is(figure, img) {
    max-height: clamp(450px, calc(450px + (1000 - 450) * ((100vw - 600px) / (1100 - 600))), 1000px);
}
.portrait-table {
    grid-area: table;
}
.portrait-text {
    grid-area: text;
}

.portrait-table {
    font-size: var(--font-size-text);
    width: 100% !important;
}
.portrait-table table {
    border-collapse: collapse;
}
.portrait-table tr {
    vertical-align: top;
}
.portrait-table tr:not(:last-child) {
    border-bottom: 1px solid hsla(207, 78%, 22%, 0.5);
}
.portrait-table td {
    border: none;
    padding-top: 18px;
    padding-bottom: 18px;
}
.portrait-table td:first-child {
    font-weight: 700;
    min-width: clamp(160px, calc(160px + (220 - 160) * ((100vw - 600px) / (1100 - 600))), 220px);
    max-width: 260px;
    padding-left: 0;
}
.portrait-table td:last-child {
    padding-right: 0;
}

@media (max-width: 1270px) {
    .portrait-grid {
        grid-template-columns: 0.85fr 1.15fr;
    }
}
@media (max-width: 1000px) {
    .portrait-grid {
        grid-template-areas: 
        "gallery table"
        "text text";
        align-items: center;
    }
}
@media (max-width: 800px) {
    .portrait-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "gallery"
        "table"
        "text";
    }
}

/* ////////////////////   Förderer und Spender   //////////////////// */

.logo-gallery {
    margin: 60px auto !important;
}
.logo-gallery > figure {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center;
    gap: clamp(30px, calc(30px + (50 - 30) * ((100vw - 350px) / (900 - 350))), 50px) !important;
}
.logo-gallery > figure > figure {
    margin: 0 !important;
    width: unset !important;
    max-width: clamp(120px, calc(120px + (200 - 120) * ((100vw - 350px) / (900 - 350))), 200px) !important;
    max-height: clamp(60px, calc(60px + (100 - 60) * ((100vw - 350px) / (900 - 350))), 100px) !important;
    flex-grow: 0 !important;
    background-color: var(--color-warm-2);
}
.logo-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    max-width: inherit !important;
    max-height: inherit !important;
    mix-blend-mode: darken;
}



/* ////////////////////   Hintergrund (Konfetti + Clownin Blümi)   //////////////////// */

/* body:not(.home) .entry-content section:first-of-type :is(h1, h2, p, li, td, tr),
body:not(.home) .entry-content section:last-of-type :is(h1, h2, p, li, td, tr) {
    text-shadow: var(--text-shadow-warm-2)
} */

/* body:not(.home) .entry-content section:first-of-type,
body:not(.home) .entry-content section:last-of-type {
    display: flex;
    flex-direction: column;
} */
/* body:not(.home) .entry-content section:first-of-type :is(h1, h2, h3, p, li, td, tr),
body:not(.home) .entry-content section:last-of-type :is(h1, h2, p, li, td, tr) {
    display: inline-block;
} */
body.home .entry-content .home-title h1,
body:not(.home) .entry-content section:first-of-type :is(h1, h2, h3, p, ul, table),
body:not(.home) .entry-content section:last-of-type :is(h1, h2, h3, p, ul, table) {
    position: relative;
}
body.home .entry-content .home-title h1::before,
body:not(.home) .entry-content section:first-of-type :is(h1, h2, h3, p, ul, table)::before,
body:not(.home) .entry-content section:last-of-type :is(h1, h2, h3, p, ul, table)::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    filter: blur(6px);
    z-index: -1;
}
body:not(.home) .entry-content section.clown-list :is(li)::before {
    content: none;
}
body.home .entry-content .home-title h1::before {
    background-color: var(--color-warm-1-transparant);
}
body:not(.home) .entry-content section:first-of-type :is(h1, h2, p, li, table)::before,
body:not(.home) .entry-content section:last-of-type :is(h1, h2, p, li, table)::before {
    background-color: var(--color-warm-2-transparant);
}

/* .text-shadow-white {
    text-shadow: var(--text-shadow-white);
}
.text-shadow-warm-1 {
    text-shadow: var(--text-shadow-warm-1);
}
.text-shadow-warm-2 {
    text-shadow: var(--text-shadow-warm-2);
} */

.no-top-margin, .no-top-margin * {
    margin-top: 0;
}

.konfetti-wrapper {
    position: relative;
    width: 100vw;
    overflow: hidden;
    margin-top: 0;
}

.konfetti::before {
    content: "";
    position: absolute;
    z-index: 20;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1 / 1;
}

/* //////////   Home   ////////// */

.konfetti.home-rot::before {
    top: 255px;
    right: 88.3vw;
    transform: scale(1.9);
    width: 	clamp(420px, 60vw, 506px);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_rot.webp);
    background-image: url(img/Konfetti_rot.webp);
}
@media (max-width: 980px) {
    .konfetti.home-rot::before {
        top: clamp(30px, calc(30px + 0.25 * (100vw - 350px)), 200px);
        left: -250px;
        transform: scale(1.9) rotate(20deg);
    }
}
.konfetti.home-tuerkis::before {
    top: -478px;
    left: 50%;
    transform: translate(calc(-50% - 10vw), 0%);
    width: 	619px;
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_tuerkis.webp);
    background-image: url(img/Konfetti_tuerkis.webp);
}
.konfetti.home-blau::before {
    top: 640px;
    left: 50%;
    transform: translate(calc(-50% - 14.5vw), 0%);
    width: clamp(180px, 25vw, 293px);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_blau.webp);
    background-image: url(img/Konfetti_blau.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media (max-width: 900px) {
    .konfetti.home-blau::before {
        top: calc(180px + 50vw);
        left: calc(-150px + 40vw);
        transform: unset;
    }
}
@media (max-width: 780px) {
    .konfetti.home-blau::before {
        top: clamp(375px, calc(50px + 65vw), 560px);
    }
}
.konfetti.home-gruen::before {
    top: 400px;
    left: 70.2vw;
    transform: scale(1.35);
    width: clamp(480px, 60vw, 597px);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_gruen.webp);
    background-image: url(img/Konfetti_gruen.webp);
}
@media (max-width: 1370px) {
    .konfetti.home-gruen::before {
        top: clamp(200px, calc(200px + 0.27 * (100vw - 350px)), 435px);
        left: unset;
        right: -210px;
        transform: scale(1.35) rotate(-50deg);
    }
}
.konfetti.home-gelb::before {
    bottom: -130px;
    left: 54.5vw;
    width: clamp(800px, 90vw, 1115px);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_gelb.webp);
    background-image: url(img/Konfetti_gelb.webp);
}
@media (max-width: 950px) {
    .konfetti.home-gelb::before {
        left: unset;
        right: clamp(-450px, calc(-450px + 0.10909 * (100vw - 350px)), -390px);
    }
}




/* //////////   Clowns Overview   ////////// */

.konfetti.clowns-rot::before {
    top: -50px;
    left: 65.2vw;
    transform: scale(1.1);
    width: 1206px;
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_rot.webp);
    background-image: url(img/Konfetti_rot.webp);
}
@media (max-width: 800px) {
    .konfetti.clowns-rot::before {
        left: unset;
        width: 800px;
        top: calc(-390px + 5vw);
        right: calc(-700px + 25vw);
        transform: rotate(-65deg);
    }
    .konfetti.clowns-rot::after {
        content: "";
        position: absolute;
        z-index: 20;
        background-size: cover;
        background-position: center;
        pointer-events: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 1 / 1;

        background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_rot.webp);
        background-image: url(img/Konfetti_rot.webp);

        left: unset;
        right: clamp(-450px, calc(-450px + 0.10909 * (100vw - 350px)), -390px);
        width: 800px;
        top: calc(5px + 5vw);
        right: calc(-710px + 25vw);
        transform: rotate(143deg);
    }
}
.konfetti.clowns-tuerkis::before {
    bottom: -15px;
    right: calc(80vw - 550px); 
    width: 	997px;
    transform: rotate(180deg);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_tuerkis.webp);
    background-image: url(img/Konfetti_tuerkis.webp);
}
@media (max-width: 1200px) {
    .konfetti.clowns-tuerkis::before {
        bottom: calc(-975px + 80vw);
    }
}

/* //////////   Clowns Portrait   ////////// */

.konfetti.portrait-gelb::before {
    left: calc(80vw - 145px);
    top: calc(10vw - 380px);
    width: 	605px;
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_gelb.webp);
    background-image: url(img/Konfetti_gelb.webp);
}

/* //////////   Normale Seite   ////////// */

.konfetti.site-tuerkis-top::before {
    top: -45px;
    left: calc(77vw + 110px); 
    width: 	997px;
    transform: rotate(180deg);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_tuerkis.webp);
    background-image: url(img/Konfetti_tuerkis.webp);
}
@media (max-width: 800px) {
    .konfetti.site-tuerkis-top::before {
        top: calc(10vw - 625px);
        left: calc(80vw - 110px);
        transform: rotate(155deg);
    }
}
.konfetti.site-tuerkis-bottom::before {
    bottom: -270px;
    right: calc(80vw - 180px); 
    width: 	997px;
    height: 785px;
    transform: rotate(180deg);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/08/Konfetti_tuerkis.webp);
    background-image: url(img/Konfetti_tuerkis.webp);
}
@media (max-width: 1000px) {
    .konfetti.site-tuerkis-bottom::before {
        bottom: calc(5vw - 550px);
        right: calc(80vw - 339px);
        transform: rotate(210deg);
    }
}

/* /////   Kontakt Seite   ///// */

.konfetti.contact-kiss::before {
    bottom: clamp(-218px, calc((-81 / (1400 - 450)) * (100vw - 450px) - 137px), -137px);
    right: calc(75vw - 240px);
    width: clamp(400px, calc(400px + (634 - 400) * ((100vw - 450px) / (1400 - 450))), 634px);
    transform: scale(0.9);
    background-image: url(https://mediclowns.make-arts.de/wp-content/uploads/2025/10/Bluemi_cutout_100.webp);
    background-image: url(img/Blümi_cutout_100.webp);
}