/* optional hintergrund von seiten */
.content-blur {
    backdrop-filter: blur(30px);
}

.hide-it {
    display: none;
}

/* Seiten Header Bilder werden fixiert für das scrollen */

div.hero-section>figure>div.ct-media-container img,
div.hero-section>figure>div.ct-media-container picture {
    position: fixed;
}

div.ct-media-container {
    clip-path: inset(0);
}


/* blog comments closed */
.no-comments {
    background-color: var(--theme-palette-color-7);
}




/* *** dark mode *** */
/* change palatte colors */

body.is-dark {

    --theme-palette-color-1: #008AAB;
    --theme-palette-color-2: #75C6C4;
    --theme-palette-color-3: hsl(from #4f4f4f h s calc(l + 50));
    --theme-palette-color-4: hsl(from #0a0500 h s calc(l - 80));
    --theme-palette-color-5: hsl(from #d5d5d5 h s calc(l + 80));
    --theme-palette-color-6: hsl(from #eeeeee h s calc(l - 80));
    --theme-palette-color-7: hsl(from #F5F5F5 h s calc(l - 80));
    --theme-palette-color-8: hsl(from #FFFFFF h s calc(l - 80));

    /* überschriften*/
    --theme-heading-color: hsl(from rgb(10 10 10) h s calc(l + 90));
    /* allgemeiner text */
    --theme-text-color: hsl(from #4f4f4f h s calc(l + 50));
}




/* ***** footer ***** */
/* background*/
body.is-dark .ct-footer {
    background-color: var(--theme-palette-color-6);
}

/* menu text */
body.is-dark .ct-footer [data-id=\"menu\"]>ul>li>a {
    --theme-link-initial-color: var(--theme-palette-color-3);
}

/* text */
body.is-dark footer span,
body.is-dark footer p {
    color: var(--theme-palette-color-3);
}






/* *** page elements *** */
/* stk icons auf über mich seite */
body.is-dark .icon-shape .stk--svg-wrapper .stk--inner-svg {
    background-color: var(--theme-palette-color-3) !important;
}

/*hero dunkler*/
body.is-dark .hero-section[data-type=\"type-2\"]>figure .ct-media-container:after {

    background-color: rgba(20, 20, 20, 0.28);

}

/* page hero text */
body.is-dark .entry-header .page-title {
    --theme-heading-color: inherit;
}

/* kontaktformular hintergrund */
body.is-dark .contact-form {
    background-color: var(--theme-palette-color-8);
}










/* *** DARK MODE TOGGLE CSS *** */
/* Dark Mode Toggle START */
.dark-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-toggle span {
    float: left;
    text-transform: var(--theme-text-transform);
    font-size: var(--theme-font-size);
    font-family: var(--theme-font-family);
    font-weight: var(--theme-font-weight);
    padding-left: 10px;
    --theme-font-weight: 700;
    --theme-text-transform: uppercase;
    --theme-font-size: 12px;
    margin-top: -5px;
    --theme-text-color: var(--theme-palette-color-3);
}

.dark-toggle__switch {
    float: left;
    margin-top: -5px
}

.dark-toggle input {
    display: none;
}

.dark-toggle__switch {
    --width: 44px;
    --height: 24px;
    --padding: 4px;
    display: block;
    overflow: hidden;
    position: relative;
    background-color: var(--theme-palette-color-7);
    width: var(--width);
    height: var(--height);
    border: 1px solid var(--theme-palette-color-3);
    border-radius: 1rem;
}

.dark-toggle__switch:focus {
    box-shadow: 0 0 0 2px var(--theme-palette-color-1);
}

.dark-toggle__switch::before {
    content: \"\";
    position: absolute;
    z-index: 3;
    display: inline-block;
    background-color: color-mix(in srgb, var(--theme-palette-color-3) 100%, white);
    width: calc(var(--height) - var(--padding) - var(--padding));
    height: calc(var(--height) - var(--padding) - var(--padding));
    top: 50%;
    left: var(--padding);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all 0.25s ease-in-out;
}

input:checked+.dark-toggle__switch::before {
    transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2));
}

.dark-toggle__switch::after {
    content: \"\";
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: inline-block;
    background-color: var(--theme-palette-color-6);
    transition: all 0.25s ease-in-out;
    transform: translateY(-50%);
    width: 1px;
    height: 1px;
    border-radius: 50%;
}

body.is-dark .dark-toggle__switch::after {
    z-index: 4;
    width: calc(var(--width) * 0.7);
    height: calc(var(--width) * 0.7);
}

/* Dark Mode Toggle END*/