html, body {margin: 0px; padding: 0px; border: 0; height: 100%; }
body {background-color: #58ACFA; height: 100%;}
section {min-height: 100%; padding: 1px; width: 100%; }
a{text-decoration: none;}
li {list-style-type: none;}
p {margin: 10px auto auto 10px;}
h1,h2,h3,h4,h5,h6{
    font-family: 'Original Surfer', cursive;
    margin: 8px auto 20px 8px; font-size: 250%;}
p{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 150%; /*white-space: pre-wrap*/}
li{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 150%;}
/*span {margin: 10px auto auto 10px;}*/
/*ul.a {list-style-type: circle;}*/

nav{padding: 0; margin: 0; border: 0; width: 100%;}
#kontakt {min-height: 50%; /*padding: 1px; */width: 100%;}
header, section, footer {min-width: 100%; max-width: 100%; width: 100%;}
html, body{
    width: 100%;
}

/*header*/
.navbar
{
    padding: 0;
}
.navbar-brand
{
    width: 20%;
    height: 20%;
    margin: 10px 10px 10px 20px;
    float: left;
}

.navbar-brand img{
    max-height: 160%;
    max-width: 160%;
}

.navbar-toggler
{
    margin: 0;
    padding-right: 30px;
    /*float: right !important;*/
    /*text-align: right !important;*/
}

.navbar-toggler .navbar-toggler-icon{
    color: black;
}

.navbar-content
{
    float: right;
    text-align: right;
}
navbar-brand img
{
    margin: 10px auto auto 20px;
}

/*.navbar-expand-lg .navbar-nav {
    padding-right: .5rem;
}*/

header {
    background-color: #58ACFA;
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 1;
}

.css-wolke { 

    display: inline-block;
    width: 160px;
    height: 100px;
    border-radius: 80px / 50px;
    background-color: #f8f9fa;
  
    line-height: 100px;
    text-align: center;
    position: relative;
    padding-left: 10px;
    padding-right: 10pxs;
    font-family: 'Original Surfer', cursive;
}

.css-wolke::before { 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f8f9fa;
  
    line-height: 75px;
    text-align: center;
  
    position: absolute;
    content: "2";
    top: -20px;
    left: 17px;  
    z-index: -10;
}


.css-wolke::after { 
    width: 100px;
    height: 50px;
    border-radius: 50%;
    background-color: #f8f9fa;
  
    line-height: 75px;
    text-align: center;
  
    position: absolute;
    content: "3";
    top: 58px;
    left: 66px; 
    color: #f8f9fa;
    z-index: -10; 
}

/*home*/

/*Die Angebote*/
.dummy-hight-bilder{
    height: 30px;
    width: 10px;
}

/*Das A-Team*/
.p-1-a-team{
    margin-bottom: 10px;
}

.r-teammitglied{
    margin-bottom: 20px;
}

.pic-artur {
    max-height: 40%;
    max-width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.pic-justine{
    max-height: 40%;
    max-width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.pic-andi{
    max-height: 40%;
    max-width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.pic-chapo{
    max-height: 40%;
    max-width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.col-bilder{
    align-content: center;
}
/*.btn-primary,  {
    background-color: #fafafa;
}*/

/*kontakt*/
.oder{margin-bottom: 10px;}
label{font-weight: 400; font-size: 150%;}
input{font-weight: 400; font-size: 150%;}
textarea{font-weight: 400; font-size: 150%;}
button{font-weight: 400; font-size: 150%;}

.error{
    color: red;
}

button{
	padding: 20px;
}

form{
	padding: 20px;
}

/*#termin{
    min-height: 50%;
}*/

#kontakt{
    min-height: 25%;
    max-height: 25%;
}

/*impressum*/
.et{
    padding-left: 10px;
}
/*datenschutz*/
.contentDS
{
    padding-bottom: 10%;
}

.p-ds{font-weight: 200; font-size: 75%}
.p-qds{font-weight: 140; font-size: 100%;}




/*footer*/
footer {
    background-color: #58ACFA;
    width: 100%;
    bottom: 0;
    position: fixed;
    z-index: 1;
}

footer .navbar-fixed-buttom .navbar-collapse .navbar-nav{
    float: right;
    text-align: right;
}

footer .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 2.5rem;
    padding-left: .5rem;
}
 

@media (min-width: 1440px) {
    header, section, footer {
        width: 1440px;
    }
    
    .dummy-hight-bilder {
        height: 110px;
        width: 10px;
    }
}

/*xl 1200px*/
@media (min-width: 1200px) {
    header, section, footer {
        width: 1200px;
    }

    .padding1{
        padding-top: 200px;
        
    }
    .navbar-expand-xl .navbar-content {
        padding-right: 0rem;
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 1.6rem;
        padding-left: 1.5rem;
    }

    .padding{
        padding-top: 185px;   
    }

    .pic-in-ws img{
        max-height: 100%;
        max-width: 100%;
    }

    .dummy-hight{
        height: 10%;
        width: 10px;
    }

    .col-frei{
        max-width: 30%;
    }   

    .dummy-high{
        height: 33%;
        width: 10px;
    }
    
    .dummy-high2{
        height: 25%;
        width: 10px;
    }

    .col-vergroessern-3-4-768{
        max-width: 50%;
    }

    /*begleiter*/
    .pic-robert img{
        max-height: 200%;
        max-width: 200%;
    }

    .col-ueberschrift-begleiter{
        max-width: 44%;
    }

    .col-verkleinern-b{
        max-width: 55%;
    }

    /*.col-16_5{
        max-width: 62%;
        flex: 0 0 62%;
    }*/

    /*geld*/
    .container-kosten{
        padding-top: 10px;
    }

    .pic-kosten img{
        max-height: 200%;
        max-width: 200%;
    }

    /*kalender*/
    .pic-kalender img{
        max-height: 200%;
        max-width: 200%;
    }
}

/*xl*/
@media (max-width: 1024px) {
    header, section, footer {
        width: 1024px;
    }
    
    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.7rem;
        padding-left: 0.3rem;
    }

    .padding1{
        padding-top: 180px;
        
    }

    .padding{
        padding-top: 200px;
    }

    /*home und weitere*/

    .dummy-hight{
        height: 20%;
        width: 10px;
    }

    .ueberschrift-bilder{
        margin-top: 145px;
    }

    .col-frei{
        max-width: 17%;
    }
    
    .col-verkleinern-b{
        max-width: 42%;
    }

    .col-40_5{
        max-width: 40.5%;
    }

    .col-vergroessern-3-4-768{
        max-width: 50%;
    } 

    .col-verkleinern-2-922{
        max-width: 26%;
    }

    .dummy-high{
        height: 33%;
        width: 10px;
    }
    
    .dummy-high2{
        height: 25%;
        width: 10px;
    }

    .pic-in-ws img{
        max-height: 100%;
        max-width: 100%;
    }

    /*begleiter*/
	
    .pic-robert img{
        max-height: 160%;
        max-width: 160%;
    }

    .col-ueberschrift-begleiter{
        max-width: 50%;
    }

    /*kosten*/
    .pic-kosten img{
        max-height: 160%;
        max-width: 160%;
    }

    /*kalender*/
    .pic-kalender img{
        max-height: 160%;
        max-width: 160%;
    }
}

/*large (lg) 992px*/
@media (max-width: 992px) {
    header, section, footer {
        width: 992px;
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 2.3rem;
        padding-left: 1.1rem;
    }

    .padding1{
        padding-top: 50px;
        
    }

    .padding{
        padding-top: 40px;
        /*min-width: 100%;
        width: 100%;*/
    }

    /*home und weitere*/
    .ueberschrift-bilder{
        margin-top: 145px;
    }

    .dummy-hight{
        height: 25%;
        width: 10px;
    }
    
    .col-frei{
        max-width: 23%;
    }
    
    .col-verkleinern-b{
        max-width: 44%;
    }

    .dummy-high{
        height: 33%;
        width: 10px;
    }
    
    .dummy-high2{
        height: 25%;
        width: 10px;
    }

    .col-verkleinern-2-922{
        max-width: 20%;
    }

    .col-vergroessern-3-4-768{
        max-width: 45%;
    }
    /*begleiter*/
    .pic-robert img{
        max-height: 160%;
        max-width: 160%;
    }

    .col-ueberschrift-begleiter{
        max-width: 40%;
    }
}

/*medium (md) 768px*/
/*medium (md) 768px*/
@media (max-width: 768px) {
    header, section, footer {
        width: 768px;
    }
    /*.navbar-toggler {
        padding-right: 2rem;
    }*/
    .navbar-content{
        margin-right: 40px;
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.3rem;
        padding-left: 3.1rem;
    }

    .padding1{
        padding-top: 160px;
    }
    
    .padding{
        padding-top: 190px;
        
    }

    /*home*/
    .ueberschrift{
        margin-top: 10px;
    }

    .ueberschrift-bilder{
        margin-top: 50px;
    }

    .dummy-hight{
        height: 25%;
        width: 10px;
    }


    .dummy-high{
        height: 33%;
        width: 10px;
    }
    
    .dummy-high2{
        height: 25%;
        width: 10px;
    }

    .col-frei{
        max-width: 19%;
    }

    .col-ueberschrift{
        max-width: 27%;
    }

    .col-16_5{
        max-width: 37%;
    }

    .col-vergroessern-3-4-768{
        max-width: 50%;
    }

    .pic-in-ws {
        margin: 10px auto auto 10px;
        max-width: 100%;
    }

    .pic-in-ws img{
        max-height: 110%;
        max-width: 110%;
    }

    /*begegnung*/
    .col-ueberschrift{
        width: 28%;
        max-width: 28%;
    }

    .zwischen{
        margin-top: 20px;
    }

    /*begleiter*/
    .pic-robert img{
        max-height: 100%;
        max-width: 100%;
    }

    .col-verkleinern-b{
        max-width: 47%;
        padding-right: 1px;
        padding-bottom: 20px;
        margin-bottom: 50px;
    }

    .col-ueberschrift-begleiter{
        max-width: 50%;
    }

	.col-padding-bild{
		padding-right: 0px;
		padding-left:20px;
	}

    /*geld*/
    .pic-kosten img{
        max-height: 80%;
        max-width: 80%;
    }

    /*kalender*/
    .pic-kalender img{
        max-height: 100%;
        max-width: 100%;
    }

    /*kontaktform*/
    .kontaktform{
        padding-top: 230px;
    }

    /*footer*/
    footer{
        padding-top: 25px;
    }
}

/*small (sm) 576px*/
@media (max-width: 576px) {    
    header, section, footer {
        width: 576px;
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.3rem;
        padding-left: 1.1rem;
    }

    .navbar-content{
        margin-right: 40px;
    }

    .padding1{
        padding-top: 180px;
        min-width: 100%;
        /*width: 100%;*/
    }
    
    

    .padding{
        padding-top: 190px;
        /*min-width: 100%;*/
        /*width: 100%;*/
    }

    .ueberschrift{
        margin-bottom: 30px;
    }

    /*begleiter*/
    .m-b-10{
        margin-bottom: 10px;
    }

    .col-padding {
        padding-left: 0px;
        padding-right: 0px;
    }

    .dummy-high {
        height: 0%;
        width: 0px;
    }

    .dummy-high2 {
        height: 0%;
        width: 0px;
    }

    .col-ueberschrift{
        position: relative;
        width: 100%;
        min-width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
	
	h1{
        margin-bottom: 10px;
    }

	.col-verkleinern-b {
		max-width: 100%;
		padding-right: 1px;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}

    .col-frei{
        position: relative;
        width: 0%;
        min-width: 0%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-bilder{
        position: relative;
        width: 100%;
        min-width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .dhb{
        height: 10%;
        width: 10%;
    }

    .pic-robert img{
        max-height: 80%;
        max-width: 80%;
    }

    /*geld*/
    .pic-kosten img{
        max-height: 80%;
        max-width: 80%;
    }

    /*kalender*/
    .pic-kalender img{
        max-height: 80%;
        max-width: 80%;
    }

    /*kontaktform*/
    .kontaktform{
        padding-top: 290px;
    }
}

@media (max-width: 425px) {
    
}


/*small*/
@media(max-width: 375px){
    header, section, footer {
        width: 375px;
    }
    /*kontaktform*/
    .kontaktform{
        margin-top: 140px;
        padding-top: 320px;
    }
}

/*extra small xs*/
@media(max-width: 320px){
    header, section, footer {
        width: 320px;
    }

    .col-padding {
        padding-left: 0px;
        padding-right: 0px;
    }

    .col-ueberschrift{
        position: relative;
        width: 100%;
        min-width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
	
	h1{
        margin-bottom: 10px;
    }
	
    .dummy-high {
        height: 0%;
        width: 0px;
    }

    .dummy-high2 {
        height: 0%;
        width: 0px;
    }

    .ueberschrift{
        margin-bottom: 30px;
    }
	
	.col-verkleinern-b {
		max-width: 100%;
		padding-right: 1px;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}

    .col-frei{
        position: relative;
        width: 0%;
        min-width: 0%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-bilder{
        position: relative;
        width: 100%;
        min-width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    /*robert*/
    .pic-robert img{
        max-height: 80%;
        max-width: 80%;
    }

    /*geld*/
    .pic-kosten img{
        max-height: 80%;
        max-width: 80%;
    }

    /*kalender*/
    .pic-kalender img{
        max-height: 80%;
        max-width: 80%;
    }

    #kontakt{
        max-height: 30%;
        min-height: 30%;
    }
    /*kontaktform*/
    .kontaktform{
        padding-top: 350px;
        margin-top: 140px;
    }
}

/*xxxs*/
@media(max-width: 300px){
    header, section, footer {
        width: 300px;
    }
    /*kontaktform*/
    /*.kontaktform{
        padding-top: 190px;
        margin-top: 240px;
        min-height: 40%;
        max-height: 40%;
    }*/
}

/*xxxxs*/
@media(max-width: 280px){
    header, section, footer {
        width: 280px;
    }
    /*kontaktform*/
    /*.kontaktform{
        padding-top: 230px;
        margin-top: 310px;
        min-height: 40%;
        max-height: 40%;
    }*/
}

/*xxxxxs*/
@media(max-width: 260px){
    header, section, footer {
        width: 260px;
    }
    
    /*kontaktform*/
    /*.kontaktform{
        padding-top: 270px;
        margin-top: 380px;
        min-height: 40%;
        max-height: 40%;
    }*/
}
/*

Extra extra extra extra extra small (xxxxxs) devices (portrait phones, less than 260px)
No media query since this is the default in Bootstrap

Extra extra extra extra small (xxxxs) devices (portrait phones, less than 280px)
@media (min-width: 280px) { ... }

Extra extra extra small (xxxs) devices (portrait phones, less than 300px)
@media (min-width: 300px) { ... }

Extra extra small (xxs) devices (portrait phones, less than 320px)
@media (min-width: 320px) { ... }

Extra small (xs) devices (portrait phones, less than 375px)
@media (min-width: 375px) { ... }

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/