@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root{
    --pp-color-lila:#AE60BA;    /* für akzentuierungen im text*/
    --pp-bg-blau:#E4ECEF;       /* Background blau nach break */
    --pp-col-1:#C6719C;         /* sym oder button, von links nach rechts dunkler*/
    --pp-col-2:#AC62B7;
    --pp-col-3:#4F458F;
    --pp-col-9: #77ACB2;
}

body { margin: 0; background-color: white; min-height: 100vh; --bs-body-font-family: 'Lato', sans-serif; }
html { position: relative; min-height: 100vh; }

@media (min-width: 768px) {
  html { font-size: 16px; }
}

/* **************************************  Basislayout 
    pp-page-drei                        oben dreiecke, unten weiss
    pp-page-drei pp-pagebreak-start     oben drei ... break start ... footer Start
    pp-page-weiss                       weiss, ohne dreiecke, unten weiss
    pp-page-weiss pp-pagebreak-start    weiss ... break start ... footer start

    pp-pagebreak-start      dee4f2
    pp-pagebreak-projekt    e4ecef
    pp-pagebreak-knowhow    e6deea
*/
.pp-background { background: #fff; }
.pp-page-drei .pp-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /*100vw;*/
    height: 120vh;
    background: url('../img/background-drei.jpg') no-repeat top left;
    background-size: contain;
    z-index: -1;
}
.pp-background-2-break { width: 100%; height: 10vw; max-height:100px; }
@media (max-width: 450px) { .pp-background-2-break {  xxheight:50px; } }


.pp-background-2 { }
.pp-pagebreak-start .pp-background-2-break { background: url('../img/content_color_header_startseite_dee4f2.png') no-repeat; background-size: cover;}
.pp-pagebreak-start .pp-background-2 { background-color: #dee4f2; }
.pp-pagebreak-projekt .pp-background-2-break { background: url('../img/content_color_header_projektraum_e4ecef.png') no-repeat; background-size: cover;}
.pp-pagebreak-projekt .pp-background-2 { background-color: #e4ecef; }
.pp-pagebreak-knowhow .pp-background-2-break { background: url('../img/content_color_header_knowhow_e6deea.png') no-repeat; background-size: cover;}
.pp-pagebreak-knowhow .pp-background-2 { background-color: #e6deea; }

/* **************************************  NAV */
/* Logo */
.navbar-brand > img {  width:180px; height:auto; }  /*width:234px; */
@media (max-width: 450px) { .navbar-brand > img {  width:160px;  } }
@media (max-width: 400px) { .navbar-brand > img {  width:140px;  } }

/* tel + */
.pp-nav1 { flex-grow: 2; text-align:right; white-space: nowrap; margin-right:5px;}
.pp-nav1 img.icon { height:20px; width:auto; }
.pp-nav1 a { text-decoration:none;}
@media (min-width:450px) {
    .pp-nav1 { margin-right:15px; }
}

.nav-link {white-space:nowrap;}


/* *** Aktiver Menüpunkt */
.pp-nav-selected > a { color:#482B77;} /*var(--pp-col-3); }*/

/* *** Das hier um tel nach rechts zu rücken */
@media (min-width:768px) { .navbar-collapse { margin-left:10px; flex-basis:auto; flex-grow:unset;}}
/* *** collapsed -> Menü rechtsbündig */
@media (max-width:768px) { nav .nav-link {text-align:right; font-size:1.2em;}}

@media (min-width:1200px) {
    .navbar-nav { column-gap:20px;}
}

nav .nav-link { font-weight:bold;}
nav .nav-link:hover { text-decoration:underline; color:#000; }
nav .dropdown-menu { border-radius: 0; }

@media screen and (min-width: 768px) {
	nav div.dropdown-menu>p {
		width: 500px;
	}
}

/* **************************************  Footer*/
.pp-footer { margin-top: -25px; }

footer { width:100%; display:flex; flex-direction:row; row-gap:20px; padding: 30px 30px;}
footer > div:nth-child(1) { flex-grow:1; }
footer a { font-weight: bold; text-decoration:none; color:#333;}
footer a:hover { text-decoration:underline; color:#111;}
@media screen and (max-width: 768px) {
	footer { flex-direction:column-reverse; align-items:center; }
}

/* **************************************  Content*/

h1 {font-weight:900;font-size:2em;line-height:1.2;}
@media (min-width: 368px) { h1 { font-size: 2.5rem; } }
@media (min-width: 768px) { h1 { font-size: 3rem; } }

h1.pp-pri { text-transform:uppercase; font-size:3rem; }
@media (min-width: 768px) { h1.pp-pri { font-size: 3.5rem; } }
@media (min-width: 1200px) { h1.pp-pri { font-size: 4rem; } }

h2 { font-weight: 300; font-style: normal; }

h4 {font-weight:bold;font-size:1.0rem;}
@media (min-width: 768px) { h4 { font-size: 1.2rem; } }

.pp-lila { color: var(--pp-color-lila); }
.pp-box-rounded-lb {border-radius: 0 0 0 30px;padding:30px; overflow:hidden;}

ul.pp-cupe { margin-top:20px; list-style:none; padding-left:40px; }
ul.pp-cupe > li { margin-bottom:5px;} 
ul.pp-cupe > li::before {
    position:absolute;
    margin-left:-40px;
    margin-top:4px;
    content:'';
    display:inline-block;
    width:20px;height:19px;
    background-image:url('../img/bullet_cupe_1_20px.png');
    /*/background-size:contain;*/
}
ul.pp-cupe-2 > li::before {
    background-image:url('../img/bullet_cupe_2_20px.png');
}
ul.pp-cupe-3 > li::before {
    background-image:url('../img/bullet_cupe_3_20px.png');
}
ul.pp-cupe > li > a { color: var(--pp-col-1); } 
ul.pp-cupe-2 > li > a { color: var(--pp-col-2); } 
ul.pp-cupe-3 > li > a { color: var(--pp-col-3); } 

.pp-btn-cupe { background-color:var(--pp-col-1); color: #fff; }
.pp-btn-cupe:hover { border-color:var(--pp-col-1); }
.pp-btn-cupe-2 { background-color:var(--pp-col-2); color: #fff;}
.pp-btn-cupe-2:hover { border-color:var(--pp-col-2); }
.pp-btn-cupe-3 { background-color:var(--pp-col-3); color: #fff;}
.pp-btn-cupe-3:hover { border-color:var(--pp-col-3); }

.pp-btn-outline-3 {
    border-width:1px; font-weight:600;
    --bs-btn-color: var(--pp-col-3);
    --bs-btn-border-color: var(--pp-col-3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pp-col-3);
    --bs-btn-hover-border-color: var(--pp-col-3);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pp-col-3);
    --bs-btn-active-border-color: var(--pp-col-3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pp-col-3);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--pp-col-3);
    --bs-gradient: none;
}
.pp-btn-3 {
    border-width:1px; font-weight:600;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--pp-col-3);
    --bs-btn-border-color: var(--pp-col-3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a336c;
    --bs-btn-hover-border-color: #3a336c;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--pp-col-3);
    --bs-btn-disabled-border-color: var(--pp-col-3);
}

.pp-btn-outline-9 {
    border-width:1px; font-weight:600;
    --bs-btn-color: var(--pp-col-9);
    --bs-btn-border-color: var(--pp-col-9);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pp-col-9);
    --bs-btn-hover-border-color: var(--pp-col-9);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pp-col-9);
    --bs-btn-active-border-color: var(--pp-col-9);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pp-col-9);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--pp-col-9);
    --bs-gradient: none;
}
.pp-btn-9 {
     border-width:1px; font-weight:600;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--pp-col-9);
    --bs-btn-border-color: var(--pp-col-9);
    --bs-btn-hover-color: var(--pp-col-9);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--pp-col-9);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pp-col-9);
    --bs-btn-active-border-color: var(--pp-col-9);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--pp-col-9);
    --bs-btn-disabled-border-color: var(--pp-col-9);
}

.pp-btn-list > a {
    margin-bottom:10px;
    margin-right:10px;
}


/* **************************************  Tools */
a.toollink { 
	color:#052c65;
}

/* **************************************  PROJEKTRAUM */
div.container.project {
    border-radius: 60px 0 0 0;
    padding-bottom:0px !important;
    margin-bottom:30px;
}
div.container.project ul > li {
    font-weight:600;
}

.projectList p.card-text  {
    min-height:115px;
    max-height:135px;
    overflow-y:hidden
}

div.container.projectInterest {
    background: url('/img/call_2_action_banner.jpg') no-repeat; background-size:cover; 
    border-radius: 0 0 60px 0; margin-bottom:30px;
    display:flex; justify-content:center; align-items:center; column-gap:20px;
    color: #fff; font-weight:600 !important;
}
div.container.projectInterest img { width:30px;}
div.container.projectInterest a { color:#fff;white-space: nowrap;}
@media (max-width: 520px) { 
    div.container.projectInterest{
        flex-direction:column;
    }
    

}

/* **************************************  ....*/
.pp-prevnext{ width:100%; height:0px; }
.pp-prevnext > div { display:inline-block; margin-top:160px;}
.pp-prevnext > div:nth-child(1) {  margin-left:-40px; float:left;   }
.pp-prevnext > div:nth-child(2) { float:right; }
.pp-prevnext > div a { z-index:5; position:absolute; opacity:0.1; transition: opacity 400ms; }
.pp-prevnext > div a:hover { opacity:0.6;}

/* **************************************  ....*/
a.fastviewer {
    display:inline-block;
    border: 1px solid #ccc;
    border-radius:5px;
    padding:4px 20px;
    background-color:#fff;
}
a.fastviewer:hover {
    border: 1px solid #111;
}
/* **************************************  Popup */
div.popupMail { z-index: 18001; display: inline-block;  position: fixed;top: 0; bottom: 0; left: 0; right: 0; 
    width: 500px; max-width:95%; height: 300px;  margin: auto;
    background:#777;
    padding:10px;border-radius:10px;
    color:#fff;
}
div.popupMail > div {
    width:100%; height:100%;
    text-align:center; 
    overflow-y: auto;
}
div.popupMail a {color:#fff; padding: 4px 10px; border-radius:4px; font-weight:bold;}
div.popupMail a:hover {background-color:#444;  }
div.popupMail h6 { text-transform:uppercase; margin-top:6px; margin-bottom:1px;}

/* **************************************  Impressum - Cards */
.maxHeightScroll {
    height:400px;
    max-height:400px;
    overflow-y:auto;
} 
.fw-900 { font-weight:900;}