/* ==========================
   Grundeinstellungen
========================== */
@font-face {
    font-family: "Great Vibes";
    src: url("../fonts/GreatVibes-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family: "Calibri", Arial, sans-serif;
    color:#333;
    background:#ffffff;
    line-height:1.6;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

main{
    width:100%;
}

/* Farben */

:root{

    --rosa:#F27FA6;
    --rosa-hell:#F27FA6;

    --weinrot:#F27FA6;

    --grau:#666666;
    --hellgrau:#F8F8F8;

    --weiß:#ffffff;

    --schatten:0 12px 35px rgba(0,0,0,.10);

    --radius:18px;

}
/* Hinweis zu */.klient-hinweis {
    position: relative;
    display: inline;
    cursor: help;
}
.hinweis-symbol {
    display: inline-block;
    margin-left: 4px;

    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
}

.hinweis-tooltip {
    position: absolute;
    z-index: 9999;

    width: 360px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;

    padding: 14px 18px;

    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);

    background: #fff4b8;
    color: #333;

    border: 1px solid #e4d16a;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;

    box-shadow: 0 5px 18px rgba(0,0,0,0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.2s ease;
}

.klient-hinweis:hover .hinweis-tooltip,
.klient-hinweis:focus .hinweis-tooltip {
    opacity: 1;
    visibility: visible;
}