/****************************************************************************************************/
/*  D O C S E T T I N G S  */
/****************************************************************************************************/

@charset "UTF-8";

/* resetting box sizing to border box*/
/* padding and bordersize do not have to be withdrawn */

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	border-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

*:focus {
    outline: none;
}


b, strong {
	font-family: 'Poppins-Regular',sans-serif; !important;
    font-weight: 400;
}
a, a:hover, a:focus, a:visited, a:checked {
	text-decoration: none;
    color: #222222;

}



/* 
FONTS POPPINS (SELFHOSTED)
Fontseinbung über seperates css (font-styles.css)
Geladen: Light 300
*/

/*  https://clamp.font-size.app/  */
/*  Min view = 300, Max view = 1600  */

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*  colorsettings */

:root {
    --gruen: #a7c7bb;
    --apricot: #f9c5b5;
    --dunkelgruen: #565f5c;
    --dunkelgrau: #777777;
}

.gruen { 
    background: var(--gruen);
    color: #222222;
}

.apricot { 
    background: var(--apricot);
    color: #222222;
}

.dunkelgruen { 
    background: var(--dunkelgruen);
    color: white;
}

.weiss {
    background: white;
    color: #222222;
}

.dunkelgrau {
    background: var(--dunkelgrau);
    color: white;
}

::-moz-selection { background: var(--gruen); color: black; }
::selection { background: var(--gruen); color: black; }

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins-Light',sans-serif;
    font-style: normal;
    font-weight: 300;
}

.LogoBistum {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 100px;
    height: auto;
}
.Logobox {
    padding-bottom: 5vh;
}

.Biglogo {
    width: 55%;
    max-width: 2000px;
	transition: 0.5s;
}

.startpfeil {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;
    margin-top: 20vh;
    margin-bottom: 0vh;
    margin-right: auto;
    margin-left: auto;
    border-radius: 50%;
    cursor: pointer !important;
    z-index: 100;
}

.Introbox {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    bottom: 15vh;
}

h1 {
    width: 86vw;
    max-width: 900px;
    margin: auto;
    font-family: 'Poppins-Light',sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(1rem, 0.8154rem + 0.9846vw, 1.8rem);
    line-height: 1.4em;
    text-align: center;
    color: white;
}

@media only screen and (max-width: 639px) {
    .Biglogo { width: 60%; margin-bottom: 4vh; }
    .Introbox { bottom: 25vh; }
    .Logobox { padding-bottom: 10vh; }
    .startpfeil { width: 35px; height: 35px; margin-bottom: 7vh; background-size: 25px; margin-top: 15vh; }
    h1 { width: 90vw; }
}

.Textbox {
    width: 86vw;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 0;
    font-size: clamp(1rem, 0.9538rem + 0.2462vw, 1.2rem);
    line-height: 1.5em;
    text-align: center;
}

.Textbox a {
    color: #222222;
    padding: 3px 0px 3px 30px;
    display: inline-block;
    border-radius: 10px;
    transition: 0.2s;
    background-image: url(../_images_all/Linkicon.svg);
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: 0 center;
}

.Textbox a:hover {
    padding: 3px 20px 3px 40px;
    background-color: rgba(0,0,0,.1);
    background-position: 10px center;
}

.slim {
    width: 50vw;
    max-width: 600px;
    min-width: 300px;
}

.padding-s-tb {
    padding: 30px 0;
}

.padding-l-t {
    padding-top: 100px;
}

.Papierbolle {
    width: 40vw;
    min-width: 320px;
    max-width: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -30px;
}

.responseicon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    margin-top: 30px;
}

.plus {
    cursor: pointer;
}


.footer {
    font-size: 0.8em;
    line-height: 2.0em;
}

.footer a {
    padding: 0;
    background: none;
}
.footer a:hover {
    padding: 0 10px;
    border-radius: 10px;
}

.infobox {
    width: 90%;
    max-width: 600px;
    padding: 10%;
    background: #222222;
    color: white;
    z-index: 100;
    top: 45% !important;
    left: 5% !important;
    font-size: clamp(0.85rem, 0.8154rem + 0.1846vw, 1rem);
    border-radius: 5px;
    cursor: pointer;
}

.infobox a {
    display: inline-block;
    width: 100%;
    margin-left: 0%;
    text-align: center;
    color: white;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 10px;
    padding: 3px 10px;
    margin-top: 20px;
    transition: 0.2s;
}
.infobox a:hover {
    width: 92%;
    margin-left: 4%;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,.0);
    border-radius: 10px;
    background: rgba(255,255,255,.15);
}

.Licence { /*Fotonachweise*/
    position: absolute;
    bottom: 0px;
    right: 30px;
    font-size: 0.75rem;
    color: #666666;
}


@media only screen and (max-width: 639px) {
    .footer { font-size: 0.7em; }
    .infobox { width: 90%; padding: 7.5%; }
}