@import "fonts.css";

:root {
    --icon-bars:    url('data:image/svg+xml, <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 17H28M7 10H28M7 24H28" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
    --icon-3dots:   url('data:image/svg+xml, <svg width="114" height="28" viewBox="0 0 114 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="14" fill="%234268F9"/><circle cx="57" cy="14" r="14" fill="%234268F9"/><circle cx="100" cy="14" r="14" fill="%234268F9"/></svg>');
    --icon-3eck-p:  url('data:image/svg+xml, <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 5L-2.01745e-07 10L0 -5.68248e-07L6 5Z" fill="%23B822D6"/></svg>');
    --icon-3eck-b:  url('data:image/svg+xml, <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 5L-2.01745e-07 10L0 -5.68248e-07L6 5Z" fill="%23000"/></svg>');
    --icon-x:       url('data:image/svg+xml, <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 10L25 25M25 10L10 25" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
}

html {
    scroll-behavior: smooth !important;
    font-family: "Noto Sans" !important;
    box-sizing: border-box;
}
body {
    margin: 0;
    ::selection {
        background-color: #D653D3;
        color: #ffffff;
    }
}

main { margin: 6rem auto; width: min(95%, 1260px); flex-grow: 1; }
div  { scroll-margin-top: 80px; }
p    { line-height: 1.5em; margin-top: 0; }

h1 {
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
    font-size: 2.5rem;
    font-weight: bold;
}

.ue, .schluss { text-align: center; margin: 4em 0 2em 0; }
.ue:before { content: var(--icon-3dots); display: block; }


/* LAYOUT */
header, .flex { display: flex; }
.flexcol      { display: flex; flex-direction: column; }

.intro, .outro {
    align-items: center;
    justify-content: space-between;
    h1 { font-size: 2.75rem; }
}
.mediacontainer { width: 50%; }
.media          { border-radius: 0 0 2.5rem 0; width: 100%; }
.text           { width: 40%; }

.grid {
    display: grid;
    .eingabe { height: 100%; }
}

#c5 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: .5rem; }
#c3 {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;

    > * > label { margin-bottom: .1em; }
}
.span { grid-column: span 2; }


/* LINKS */
a { text-decoration: none; transition-duration: .3s; }

.link {
    color:#4268F9;
    cursor: pointer;
    &:hover { color: #3052D5; }
}


/* BUTTONS */
.btn {
    font-family: "Noto Sans";
    text-decoration: none;
    text-align: center;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: bold;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.click {
    color: #ffffff;
    padding: .4rem .8rem;
    border: 2px solid #4268F9;
    background-color: #4268F9;

    &:focus, &:hover {
        border: 2px solid #3052D5;
        background-color: #3052D5;
    }
}

.close {
    cursor: pointer;
    padding: 1em;
    float: right;
}

.scroll {
    color: #4268F9;
    padding: .8rem;
    border: 2px solid #4268F9;
    background-color: #ffffff;

    &:focus, &:hover {
        color: #ffffff;
        border: 2px solid #4268F9;
        background-color: #4268F9;
    }
}

.load {
    color: #fff;
    padding: .4rem .8rem;
    border: 2px solid #26B26C;
    background-color: #26B26C;

    &:focus, &:hover {
        border: 2px solid #1d8852;
        background-color: #1d8852;
    }
}

.sub { width: min(100%, 545px); }


/* HEADER */
header {
    position: sticky;
    top: 0;
    padding: 15px;
    gap: 45px;
    background-color: #fff;
    z-index: 1;

    > * {
        margin: 0;
        padding: 0;
        align-items: center;
    }
}

.ptv-tc { color: #898989; margin-bottom: 0; }
.ptv::after {
    content: "";
    position: relative;
    right: -1rem;
    width: 1px;
    background-color: black;
}

.firma, .menu { gap: 2rem; list-style-type: none; }

.menuItem {
    color: black;
    font-weight: bold;
    font-size: .875rem;
    padding-bottom: 4px;
    transition-duration: .3s;
    border-bottom: 4px solid transparent;

    &:focus, &:hover { border-bottom: 4px solid rgba(214, 83, 211, 0.40); }
}

/* responsive nav */
.sidemenu  { display: none; cursor: pointer; }
.sidenav   { margin-top: 2em; padding: 0 1em; }
#openMenu  { content: var(--icon-bars); }
#closeMenu { content: var(--icon-x); }

#overlayMenu {
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: white;
    z-index: 2;
}
.sidemenuItem {
    color: black;
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 1em;
}


/* FOOTER */
footer {
    padding: 5em 0;
    background-color: #222;
    color: white;
    font-size: .85em;
    gap: 4em;

    a { color: #ffffff; &:hover { color: #3052D5; } }
    p { margin-bottom: 0; }
}

.fcontent {
    width: min(95%, 1260px);
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 0 2em;
}

.kontakt     { column-gap: 4em; margin-top: 1em; }
#mitKontakt  { justify-content: space-between; }
#ohneKontakt { justify-content: flex-end; }
#collapseWA  { visibility: collapse; }