:root {
    --font-color-1: rgb(152, 33, 102);
    --background-color-1: rgb(255, 243, 243);
    --border-color-1: rgb(77, 131, 83);

    --font-color-2: rgb(124, 30, 66);
    --background-color-2: rgb(221, 173, 173);
    --border-color-2: rgb(227, 255, 230);

    --font-color-button: rgb(255, 237, 237);
    --background-color-button: rgb(194, 25, 129);
    --background-color-calendly: rgb(52, 136, 57);

    --link-color: rgb(211, 46, 145);
    --csb-font-color: rgb(194, 25, 129);

    /* --link-box-color: rgb(210, 164, 164); */
    --link-box-hover-color: rgb(249, 206, 206);
}

@font-face {
    font-family: 'Dancing Script';
    font-weight: bold;
    src: url(fonts/DancingScript-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Dancing Script';
    font-weight: normal;
    src: url(fonts/DancingScript-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-weight: bold;
    src: url(fonts/Lora-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-weight: normal;
    src: url(fonts/Lora-Regular.woff2) format('woff2');
}

body {
    font-family: Lora;
    margin: 0;
    padding: 0;
}

a,
a:visited {
    color: var(--link-color);
    font-weight: bold;
    /* text-decoration: none; */
}

a.nodeco {
    text-decoration: none;
}

#caro_photo,
.midimg {
    position: relative;
    width: 100%;
    height: 640px;
}

.photobg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}

#caro_photo_stack,
#caro_photo_stack_small {
    background-image: url('img/header.webp');
    background-size: cover;
    background-position-x: 80%;
    color: var(--csb-font-color);
    font-family: "Dancing Script";
    font-size: 2em;
    font-weight: bold;
}

#caro_photo_stack_small>div {
    color: var(--font-color-button);
    position: absolute;
    bottom: 3rem;
    text-align: center;
    width: 100%;
}

#caro_photo_stack>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 19em;
    height: 100%;
    background: linear-gradient(70deg,
            rgba(255, 255, 255, 0.7) 62.9%,
            rgba(255, 255, 255, 0.5) 63.1% 66.9%,
            rgba(255, 255, 255, 0.3) 67.1% 70.9%,
            rgba(255, 255, 255, 0.1) 71.1% 74.9%,
            rgba(255, 255, 255, 0) 75.1%);
}

.photo-skew-top,
.photo-skew-bottom,
.photo-skew-top-r,
.photo-skew-bottom-r,
.photo-skew-top-2,
.photo-skew-bottom-2,
.photo-skew-top-2-r,
.photo-skew-bottom-2-r {
    position: absolute;
    left: 0;
    width: 100%;
    height: 10vw;
}

.photo-skew-top {
    top: 0px;
    background-image: linear-gradient(178deg,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-top-r {
    top: 0px;
    background-image: linear-gradient(182deg,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-bottom {
    bottom: 0px;
    background-image: linear-gradient(2deg,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-bottom-r {
    bottom: 0px;
    background-image: linear-gradient(-2deg,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}


.photo-skew-top-2 {
    top: 0px;
    background-image: linear-gradient(178deg,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-top-2-r {
    top: 0px;
    background-image: linear-gradient(182deg,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-bottom-2 {
    bottom: 0px;
    background-image: linear-gradient(2deg,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

.photo-skew-bottom-2-r {
    bottom: 0px;
    background-image: linear-gradient(-2deg,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 0%) 34.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 20%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 40%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 60%) 55.1% 64.9%,
            rgba(255, 255, 255, 0) 65.1%);
}

#caro_photo h1 {
    font-size: 2.3em;
    font-weight: bold;
}

#footer>div {
    padding-top: 5rem;
}

ul.hbal {
    padding-left: 0;
}

ul.hbal>li {
    padding-left: 1rem;
    padding-right: 1rem;
    float: left;
    list-style-type: none;
}

ul.hbar>li {
    padding-left: 1rem;
    padding-right: 1rem;
    float: right;
    list-style-type: none;
}

.bg1 ul.hbar>li,
.bg1 ul.hbal>li {
    border-right: 1px solid var(--border-color-1);
}

.bg2 ul.hbar>li,
.bg2 ul.hbal>li {
    border-right: 1px solid var(--border-color-2);
}

ul.hbar>li:first-child,
ul.hbal>li:last-child {
    border-right: none;
}

.font-small {
    font-size: small;
}

.divlink {
    cursor: pointer;
    transition: 0.3s;
}

.divlink:hover {
    background-color: var(--link-box-hover-color) !important;
}

.divider {
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    width: 6rem;
    height: 1px;
}

.bg1 .divider {
    background-color: var(--border-color-1);
}

.bg2 .divider {
    background-color: var(--border-color-2);
}

.maxw40 {
    max-width: 40em;
}

.bg1 {
    color: var(--font-color-1);
    background-color: var(--background-color-1);
}

.bg2 {
    color: var(--font-color-2);
    background-color: var(--background-color-2);
}

.skew1,
.skew2,
.skew1-r,
.skew2-r {
    width: 100%;
    height: 10vw;
}

.skew1 {
    background-image: linear-gradient(-2deg,
            var(--background-color-2) 34.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 75%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 50%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 25%) 55.1% 64.9%,
            var(--background-color-1) 65.1%);
}

.skew2 {
    background-image: linear-gradient(182deg,
            var(--background-color-2) 34.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 75%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 50%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 25%) 55.1% 64.9%,
            var(--background-color-1) 65.1%);
}


.skew1-r {
    background-image: linear-gradient(2deg,
            var(--background-color-2) 34.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 75%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 50%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 25%) 55.1% 64.9%,
            var(--background-color-1) 65.1%);
}

.skew2-r {
    background-image: linear-gradient(178deg,
            var(--background-color-2) 34.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 75%) 35.1% 44.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 50%) 45.1% 54.9%,
            color-mix(in hsl, var(--background-color-1), var(--background-color-2) 25%) 55.1% 64.9%,
            var(--background-color-1) 65.1%);
}

.bg1 .vdiv>div {
    border-right: solid 1px var(--bs-border-color);
}

.bg2 .vdiv>div {
    border-right: solid 1px var(--border-color-2);
}

.imgbubble,
.imgbubble-r {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.imgbubble-r {
    justify-content: right;
}

.imgbubble>div,
.imgbubble-r>div {
    max-width: 30em;
    right: 3rem;
    margin-left: 3rem;
    margin-right: 3rem;
    padding: 2rem 5rem;
    /* background-color: rgba(255, 255, 255, 0.7); */
    transform: skew(-2deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.3) 4.9%,
            rgba(255, 255, 255, 0.5) 5.1% 9.9%,
            rgba(255, 255, 255, 0.7) 10.1% 89.9%,
            rgba(255, 255, 255, 0.5) 90.1% 94.9%,
            rgba(255, 255, 255, 0.3) 95.1%);
}

.hkasten {
    text-align: center;
    transform: skew(-2deg);
    padding: 1em 2em;
    margin-bottom: 1em;
    background: linear-gradient(90deg,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 70%) 4.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 50%) 5.1% 9.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 30%) 10.1% 89.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 50%) 90.1% 94.9%,
            color-mix(in hsl, var(--background-color-2), rgba(255, 255, 255, 0) 70%) 95.1%);
}

button {
    background: linear-gradient(90deg,
            color-mix(in hsl, rgba(255, 255, 255, 0), var(--background-color-button) 50%) 4.9%,
            var(--background-color-button) 5.1% 94.9%,
            color-mix(in hsl, rgba(255, 255, 255, 0), var(--background-color-button) 50%) 95.1%);

    /* background-color: var(--background-color-button); */
    color: var(--font-color-button);
    padding: 1rem 3rem;
    border: none;
    text-align: center;
    cursor: pointer;
    transform: skew(-2deg);
    margin-left: 2em;
    margin-right: 2em;
    display: block;
}

button.calendly {
    background: linear-gradient(90deg,
            color-mix(in hsl, rgba(255, 255, 255, 0), var(--background-color-calendly) 50%) 4.9%,
            var(--background-color-calendly) 5.1% 94.9%,
            color-mix(in hsl, rgba(255, 255, 255, 0), var(--background-color-calendly) 50%) 95.1%);
} 

.vmid {
    position: relative;
    display: flex;
    align-items: center;
}

.subparagraph {
    display: none;
}

img#diamond {
    height: 8em;
}

.pink {
    color: var(--csb-font-color);
    font-family: "Dancing Script";
    font-weight: bold;
}

/* ----------------- privat ----------------- */

#caro_photo_privat {
    background-image: url('img/privat.webp');
    background-size: cover;
    background-position-x: 92%;
}

#bereit li {
    list-style-type: '🩷';
}

#wielange li {
    list-style-type: '☀️';
}

#wie li {
    list-style-type: '🌺';
}

#wo li {
    list-style-type: '🌸 ';
}

#schlecht li {
    list-style-type: '☀️ ';
}

#gut li {
    list-style-type: '☘️ ';
}

#tisch1 {
    background-image: url('img/tisch1.webp');
    background-size: cover;
    background-position-x: 70%;
}


/* ----------------- kostenlos ----------------- */

#caro_photo_kostenlos {
    background-image: url('img/kostenlos.webp');
    background-size: cover;
    background-position-x: 20%;
}

#kostenlosmeh li {
    list-style-type: '😕 ';
}

#kostenlosyay li {
    list-style-type: '☺️ ';
}

#lila {
    background-image: url('img/lila.webp');
    background-size: cover;
    background-position: left;
}

/* ----------------- unternehmen ----------------- */

#photo_unternehmen {
    background-image: url('img/unternehmen.webp');
    background-size: cover;
    background-position-x: 20%;
}

#tisch2 {
    background-image: url('img/tisch2.webp');
    background-size: cover;
    background-position-x: 20%;
}

#faq li {
    list-style-type: '🌟';
}

/* ----------------- kontakt ----------------- */

#photo_kontakt {
    background-image: url('img/kontakt.webp');
    background-size: cover;
    background-position-x: 80%;
}

/* ----------------- impressum ----------------- */

#photo_impressum {
    background-image: url('img/impressum.webp');
    background-size: cover;
    background-position-x: 70%;
}

/* ----------------- datenschutz ----------------- */

#photo_datenschutz {
    background-image: url('img/datenschutz.webp');
    background-size: cover;
    background-position-x: 20%;
}