body {
    background-image: url('bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    padding: 0 0 0 1vw; /*trbl*/
    margin: 0 0;
    color: #666666;
    height: 100vh; /* Stellt sicher, dass das Body-Element die volle Höhe des Viewports einnimmt */
    width: 100vw; /* Stellt sicher, dass das Body-Element die volle Breite des Viewports einnimmt */
    overflow: visible; /* Verhindert das Scrollen */
	 font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.flex-item-left {
    flex: 1;
}

.flex-item-right {
    flex: 1;
}

.confirmation {
    display: none; /* Versteckt das div standardmäßig */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    flex-direction: column;
	 z-index: 5;
}

.confirmation p {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2em;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2em;
    color: white;
    cursor: pointer;
}

h1 {
	width: 100%;
	font-size: 15vw;
	padding: 0 0 0 1vw;
	/*
	padding-left: 5vw;
	padding-bottom: 0;
	padding-top: 0;
	*/
	margin-bottom: 5vh;;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-weight: bolder;
	text-align: left;
}
p {
	width: 100%;
	font-size: 2em;
	font-weight: none;
	display: flex;
	align-items: flex-start;
	text-align: left;
	padding: 0 1vw 0 2vw;
	margin: 1em;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;*/
}

p.agb {
	font-size: 3vw;
	color: grey;
}
div.but {
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
p1 {
	width: 20%;
	border: red 1 px solid;
	font-size: 1em;
	font-weight: none;
	display: flex;
	align-items: flex-start;
	text-align: right;
	padding-left: 11vw;
	margin:0 1em 1em 1em;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;*/
}
button {
	border: #E6E600 1px solid;
	height: 5vw;
	border-radius: 0;
	background-color: #E6E600;
	color: Black;
	font-size: auto;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-weight: bolder;
}
button.butfix {
	border: 0px solid #999;
	position: fixed;
	height: 20px;
	top: 0;
	right: 0;
	background-color: transparent;
	color: transparent;
	font-size: 2em;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-weight: bolder;
}

div.img {
	position: relative;
	left: 0;
	right: 0;
	margin: auto 0;
	bottom: 0;
	width: 100%;
	align-items: center;
	text-align: center;
	z-index: 1;
}
img {
	width: 25%;
	align-items: center;
}
p.screen {
	font-size: 10px;
	opacity: 40%;
}
/* Formular */
form {
    width: 100%;
	 margin: 0;
	 padding: 0;
    display: flex;
    flex-wrap: wrap;
	 text-align: left;
}

.form-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
	 z-index: 2;
}

.form-row {
    display: flex;
    flex-basis: 75%;
    margin-bottom: 10px;
}

.form-row label {
    flex: 1 1 30%; /* Etwa 1/3 der 75% */
    text-align: left;
    margin-right: 20px;
	 padding-left: 5vw;
}

.form-row input,
.form-row select {
    flex: 1 1 45%; /* Etwa 2/3 der 75% */
	align-items: left;
}

.form-row-button {
    flex-basis: 25%;
    display: flex;
    align-items: right;
    justify-content: center;
    text-align: center;
}

/*input,
select {
	width: 100%;
	font-size: 5vh;
	color: black;
}*/

label of {
	  font-size: 5vw;
	  border: 1px solid #999;
}

input,
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 0;
  background-color: #f1f1f1;
}
select[type=text]:focus {
  background-color: whitesmoke;
}
input[type=text]:focus {
  background-color: whitesmoke;
}
/*form p {
	background-color: grey;
	 width: 100%;
    margin: 0;
}
*/
.confirmation {
    display: none; /* Versteckt das div standardmäßig */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.confirmation p {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2em;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2em;
    color: white;
    cursor: pointer;
}