/* 100,300,400(regular),700,900 */
html {
  scroll-behavior: smooth;
}
section,
article {
    scroll-margin-top: -1px;
}
body {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 400;
    font-size: 1.2rem;
    line-height: 2rem;
	letter-spacing: 0;
    word-break: break-word;
	color: rgba(var(--c-grau-rgb), 1);
	background-color: rgba(255,255,255,1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%; 
	height:100%;
	position: relative;
}
.fragment {
    font-family: 'Fira Mono' !important;
}
p {
    margin: 0 0 20px 0;
    padding: 0;
}
a {
    color: rgba(var(--c-grau-rgb), 1);
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.5s ease-in-out;
}
a:hover {
    color: rgba(var(--c-grau-rgb), 1);
}
h1, h2, h3, h4, h5 {
    padding: 0 !important;
    margin: 0 !important;
}
h1 p, h2 p, h3 p, h4 p, h5 p {
    padding: 0;
    margin: 0;
}
.opener h1 {
    font-weight: 400;
    font-size: 3rem;
    line-height: 3.5rem;
    text-transform: none;
}
h2 {
    font-weight: 400;
    font-size: 4rem;
    line-height: 4.5rem;
}
h3 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    font-weight: 600 !important;
}
h4 {
    font-size: 1.3rem;
    line-height: 1.8rem;
}
h5 {
    font-size: 1rem;
    line-height: 1.5rem;
}
@media (max-width: 991px) {
    h1 {
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }
    .opener h1 {
        font-size: 2rem !important;
        line-height: 2.5rem !important;
    }
    h2 {
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }
    h2.underline {
        margin-bottom: 5rem !important;
    }
    h2.underline:after {
        width: 100%;
        left: 0%;
        bottom: -2rem;
    }
    h3 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    h4 {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }
    h5 {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,1);
    background-color: rgba(255,255,255,0);
    color: rgba(255,255,255,1) !important;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}
.btn:hover {
    border: 1px solid rgba(255,255,255,1);
    background-color: rgba(255,255,255,0.25);
}
@media (max-width: 991px) {
    .btn {
        display: block;
    }
}

.none * {
    margin: 0;
    padding: 0;
}
.transition-ease {
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.cursor-pointer {
    cursor: pointer;
}
.bg-nr {
    background-repeat: no-repeat;
}
.bg-cover {
    background-size: cover;
}
.bg-center {
    background-position: center center;
}
.op-center {
    object-position: right bottom;
}

.radial-bg::after {
    content: '';
    z-index: -1;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    height: 400px;
}
.radial-bg.radial-top::after {
    top: -300px !important;
    left: calc(50% - 200px);
    width: 400px;
    height: 400px;
}
.radial-bg.radial-lila::after {
    background: radial-gradient(
        circle at center,
        rgba(var(--c-lila-rgb), 0.6) 0%,     /* Zentrum */
        rgba(var(--c-lila-rgb), 0.4) 40%,   /* Mitte */
        rgba(var(--c-lila-rgb), 0.0) 70%    /* Rand */
    );
}
.radial-bg.radial-orange::after {
    background: radial-gradient(
        circle at center,
        rgba(var(--c-orange-rgb), 0.6) 0%,     /* Zentrum */
        rgba(var(--c-orange-rgb), 0.4) 40%,   /* Mitte */
        rgba(var(--c-orange-rgb), 0.0) 70%    /* Rand */
    );
}
.radial-bg.radial-800::after {
    top: calc(50% - 400px);
    left: calc(50% - 400px);
    width: 800px;
    height: 800px;
}

.statement {
    font-size: 3rem;
    line-height: 3.5rem;
    font-style: italic;
    font-weight: 400;
}

/* HEADER */

#nav a {
    color: rgba(255,255,255,1);
    font-size: 1.5rem;
}
#nav a:hover {
    color: rgba(var(--c-grau-rgb),1);
}
#nav.scroll a {
    color: rgba(var(--c-grau-rgb),1);
}
#nav .nav-link.active {
    color: rgba(var(--c-grau-rgb),1);
    text-decoration: underline;
}

/*
header img#logo {
    height: auto;
    width: 100%;
}
header img#logo.scroll {
    height: 25px;
    width: auto;
}
*/
@media (max-width: 991px) {
#nav a {;
    font-size: 1rem;
}
}

/*
#navScroll {
    display: none;
}
#navScroll a.active {
    color: rgba(248,72,94,1) !important;
}
@media (max-width: 991px) {
    #navScroll {
        display: block;
    }
}
*/

.opener {
    
}
.opener::before {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--c-lila-rgb), 1) 0%, rgba(var(--c-lila-rgb), 1) 15%, rgba(var(--c-lila-rgb), 0.25) 100%);
}
.opener.home {
    min-height: 100vh;
}
.opener.home::before {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--c-lila-rgb), 0.75) 0%, rgba(var(--c-lila-rgb), 0) 80%);
}
.opener.home::after {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--c-grau-rgb), 0) 40%, rgba(var(--c-grau-rgb), 1) 100%);
}
@media (max-width: 991px) {
    .opener {
        
    }
}

.ueberX {
    background: linear-gradient(to bottom, rgba(var(--c-lila-rgb), 0) 0%, rgba(var(--c-lila-rgb), 0.5) 100%);
}
.ueber .bild::before {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--c-lila-rgb), 0) 0%, rgba(var(--c-lila-rgb), 0.8) 100%);
}


.referenzen .eintrag {

}
.referenzen .bild {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.referenzen .details {
    font-size: 0.8rem !important;
    line-height: 1rem;
}


.leistungen .eintrag {

}
.leistungen .bild {
    width: 100%;
    max-height: 200px;
    min-height: 100px;
    object-fit: cover;
}
@media (max-width: 991px) {
}

footer .logo {
    height: 50px !important;
    width: auto;
}
@media (max-width: 991px) {
}

/** COLORS **/
/* ---------- SASS ---------- */
/* ---------- ROOT ---------- */
:root {
    --c-lila: #c7b4d9;
    --c-lila-rgb: 199,180,217;

    --c-orange: #FFAFAB;
    --c-orange-rgb: 255,170,187;

    --c-grau: #42454a;
    --c-grau-rgb: 66,69,74;
}

/* ---------- LILA ---------- */
.text-c-lila,
.text-h-c-lila :is(h1, h2, h3, h4, h5, h6) {
    color: rgba(var(--c-lila-rgb), 1) !important;
}
.bg-c-lila {
    background-color: rgba(var(--c-lila-rgb), 1) !important;
}
.border-c-lila {
    border-color: rgba(var(--c-lila-rgb), 1) !important;
}
.verlauf-c-lila {
    background: linear-gradient(to right, rgba(var(--c-lila-rgb), 1) 0%, rgba(var(--c-lila-rgb), 0.75) 100%);
}
.btn-c-lila {
    background-color: rgba(var(--c-lila-rgb), 1) !important;
    color: #fff !important;
    border: none;
}
.btn-c-lila:hover {
    background-color: rgba(var(--c-lila-rgb), 0.8) !important;
    border: none;
}
.btn-c-lila:focus,
.btn-c-lila:active {
    background-color: rgba(var(--c-lila-rgb), 0.9) !important;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--c-lila-rgb), 0.4);
}
.btn-c-lila:disabled {
    background-color: rgba(var(--c-lila-rgb), 0.5) !important;
    opacity: 0.65;
    cursor: not-allowed;
}
/* ---------- GRAU ---------- */
.text-c-grau,
.text-h-c-grau :is(h1, h2, h3, h4, h5, h6) {
    color: rgba(var(--c-grau-rgb), 1) !important;
}
.bg-c-grau {
    background-color: rgba(var(--c-grau-rgb), 1) !important;
}
.border-c-grau {
    border-color: rgba(var(--c-grau-rgb), 1) !important;
}
.verlauf-c-grau {
    background: linear-gradient(to right, rgba(var(--c-grau-rgb), 1) 0%, rgba(var(--c-grau-rgb), 0.75) 100%);
}
.btn-c-grau {
    background-color: rgba(var(--c-grau-rgb), 1) !important;
    color: #fff !important;
    border: none;
}
.btn-c-grau:hover {
    background-color: rgba(var(--c-grau-rgb), 0.8) !important;
    border: none;
}
.btn-c-grau:focus,
.btn-c-grau:active {
    background-color: rgba(var(--c-grau-rgb), 0.9) !important;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--c-grau-rgb), 0.4);
}
.btn-c-grau:disabled {
    background-color: rgba(var(--c-grau-rgb), 0.5) !important;
    opacity: 0.65;
    cursor: not-allowed;
}