@font-face {
		  font-family: 'FontAwesomeS';
		  src: url('fa/webfonts/fa-solid-900.ttf') format('truetype');
		}
		@font-face {
		  font-family: 'FontAwesomeR';
		  src: url('fa/webfonts/fa-regular-400.ttf') format('truetype');
		}
		
		body {
		  padding-top: 180px;
		  padding-bottom: 100px;
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -100px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -100px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		.header_transparent {
		  background-color: rgba(255, 255, 255, 0.9);
		  width: 100%;
		  padding-top: 20px; 
		  padding-bottom: 25px; 
		  margin-top: 20px;
		  margin-bottom: 0px;
		  text-align: center;
		}
	
        .header-container {
            background-color: #f8f9fa; /* Optional: Hintergrundfarbe für den Header */
            padding: 20px 0;
        }

        .image-container {
            display: inline-block;
        }

        .image-container img {
            display: block;
            max-width: 100%;
            height: 45px;
        }
		
		.goldendate {
			display: inline-block;
			padding: 6px 35px 4px 35px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 0px;
			font-family: sans-serif;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			z-index: 10;
			margin-top: -15px;
			overflow: hidden;
			cursor: pointer;
		}

		.goldendate::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(45deg);
			animation: shine 6s infinite linear;
		}

		@keyframes shine {
			0% {
				left: -100%;
			}
			50% {
				left: 150%;
			}
			100% {
				left: -100%;
			}
		}

		.golden-submit {
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			margin-bottom: 10px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-submit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-submit:hover::before {
			left: 150%;
		}


		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-submit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-edit {
			display: inline-flex;
			justify-content: space-between;
			width: 100%;
			padding: 10px 20px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-edit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-edit:hover::before {
			left: 150%;
		}

		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.herz {
			  width: 200px; /* Beispielgröße */
			  height: 168px; /* Beispielgröße */
			  margin-left: auto; margin-right: auto;
			  margin-bottom: 150px;
			  background-image: url('../pix/herz.png'); /* Pfad zu deinem Herzbild */
			  background-size: cover;
			  animation: pulsieren 3.5s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			}

			@keyframes pulsieren {
			  0% {
				transform: scale(1); /* Startgröße */
			  }
			  50% {
				transform: scale(1.2); /* Größere Größe beim "Schlag" */
			  }
			  100% {
				transform: scale(1); /* Zurück zur Startgröße */
			  }
			}
			
		input[type=radio].with-font, input[type=checkbox].with-font { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		input[type=radio].with-font ~ label:before, input[type=checkbox].with-font ~ label:before { font-family: FontAwesomeR; display: inline-block; content: "\f111"; letter-spacing: 10px; font-size: 1.2em; color: #0078b3; width: 1.4em; }
		input[type=radio].with-font:checked ~ label:before, input[type=checkbox].with-font:checked ~ label:before  { font-family: FontAwesomeS; content: "\f00c"; font-size: 1.2em; color: #f2bb00; letter-spacing: 5px; }
		input[type=checkbox].with-font ~ label:before { content: "\f0c8"; }
		input[type=checkbox].with-font:checked ~ label:before { content: "\f00c"; color: #f2bb00; }
		input[type=radio].with-font:focus ~ label:before, input[type=checkbox].with-font:focus ~ label:before, input[type=radio].with-font:focus ~ label, input[type=checkbox].with-font:focus ~ label { color: #f2bb00; }
		.radiobuttons { float:left; margin-right: 50px; margin-bottom: 15px; font-size: 24px; }
		
		.form-control, .form-select {
			font-size: 1.4rem;
			border: 1px solid #f2bb00;
		}
		
		label {
			font-size: 1.3rem;
			font-weight: bold;
			color: #0078b3;
		}
		
		.blau { color: #0078b3; }
		.schwarz { color: #000; }
		.gold { color: #f2bb00; }
		.grau { color: #aaa; }
		
		h1 {
			font-size: 2.0rem;
		}
		h2 {
			font-size: 1.6rem;
		}
		p {
			font-size: 1.1rem;
		}
		a {
			color: #0078b3;
			text-decoration: none;
		}
		
		#h50 { width: 100%; margin-top: 20%; text-align: center; }
		#h100 { width: 100%; margin-top: 30%; text-align: center; }
	
	
	@media (min-width: 576px) {
	
		body {
		  padding-top: 220px;
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -220px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -220px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		.header_transparent {
		  background-color: rgba(255, 255, 255, 0.9);
		  width: 100%;
		  padding-top: 20px; 
		  padding-bottom: 25px; 
		  margin-top: 30px;
		  margin-bottom: 0px;
		  text-align: center;
		}
	
        .header-container {
            background-color: #f8f9fa; /* Optional: Hintergrundfarbe für den Header */
            padding: 20px 0;
        }

        .image-container {
            display: inline-block;
        }

        .image-container img {
            display: block;
            max-width: 100%;
            height: 60px;
        }
		
		.goldendate {
			display: inline-block;
			padding: 8px 40px 6px 40px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 0px;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			z-index: 10;
			margin-top: -15px;
			overflow: hidden;
		}

		.goldendate::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(45deg);
			animation: shine 6s infinite linear;
		}

		@keyframes shine {
			0% {
				left: -100%;
			}
			50% {
				left: 150%;
			}
			100% {
				left: -100%;
			}
		}

		.golden-submit {
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			margin-bottom: 10px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-submit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-submit:hover::before {
			left: 150%;
		}


		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-submit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-edit {
			display: inline-flex;
			justify-content: space-between;
			width: 100%;
			padding: 10px 20px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-edit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-edit:hover::before {
			left: 150%;
		}

		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.fn-gold
		
		.herz {
			  width: 200px; /* Beispielgröße */
			  height: 168px; /* Beispielgröße */
			  background-image: url('../pix/herz.png'); /* Pfad zu deinem Herzbild */
			  background-size: cover;
			  animation: pulsieren 3.5s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			}

			@keyframes pulsieren {
			  0% {
				transform: scale(1); /* Startgröße */
			  }
			  50% {
				transform: scale(1.1); /* Größere Größe beim "Schlag" */
			  }
			  100% {
				transform: scale(1); /* Zurück zur Startgröße */
			  }
			}
		
		input[type=radio].with-font, input[type=checkbox].with-font { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		input[type=radio].with-font ~ label:before, input[type=checkbox].with-font ~ label:before { font-family: FontAwesomeR; display: inline-block; content: "\f111"; letter-spacing: 10px; font-size: 1.2em; color: #0078b3; width: 1.4em; }
		input[type=radio].with-font:checked ~ label:before, input[type=checkbox].with-font:checked ~ label:before  { font-family: FontAwesomeS; content: "\f00c"; font-size: 1.2em; color: #f2bb00; letter-spacing: 5px; }
		input[type=checkbox].with-font ~ label:before { content: "\f0c8"; }
		input[type=checkbox].with-font:checked ~ label:before { content: "\f00c"; color: #f2bb00; }
		input[type=radio].with-font:focus ~ label:before, input[type=checkbox].with-font:focus ~ label:before, input[type=radio].with-font:focus ~ label, input[type=checkbox].with-font:focus ~ label { color: #f2bb00; }
		.radiobuttons { float:left; margin-right: 50px; margin-bottom: 15px; font-size: 24px; }
		
		.form-control, .form-select {
			font-size: 1.4rem;
			border: 1px solid #f2bb00;
		}
		
		label {
			font-size: 1.6rem;
			font-weight: bold;
			color: #0078b3;
		}
		
		h1 {
			font-size: 2.4rem;
		}
		h2 {
			font-size: 2.0rem;
		}
		p {
			font-size: 1.3rem;
		}
		a {
			color: #0078b3;
			text-decoration: none;
		}
		
		#h50 { width: 100%; margin-top: 8%; text-align: center; }
		#h100 { width: 100%; margin-top: 15%; text-align: center; }
		
	}
	
	
	@media (min-width: 768px) {
		
		body {
		  padding-top: 180px;
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -300px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_M.png');
		  background-repeat: no-repeat;
		  background-position: 0px -300px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		.header_transparent {
		  background-color: rgba(255, 255, 255, 0.9);
		  width: 100%;
		  padding-top: 20px; 
		  padding-bottom: 25px; 
		  margin-top: 30px;
		  margin-bottom: 0px;
		  text-align: center;
		}
	
        .header-container {
            background-color: #f8f9fa; /* Optional: Hintergrundfarbe für den Header */
            padding: 20px 0;
        }

        .image-container {
            display: inline-block;
        }

        .image-container img {
            display: block;
            max-width: 100%;
            height: 60px;
        }
		
		.goldendate {
			display: inline-block;
			padding: 8px 40px 6px 40px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 0px;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			z-index: 10;
			margin-top: -15px;
			overflow: hidden;
		}

		.goldendate::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(45deg);
			animation: shine 6s infinite linear;
		}

		@keyframes shine {
			0% {
				left: -100%;
			}
			50% {
				left: 150%;
			}
			100% {
				left: -100%;
			}
		}

		.golden-submit {
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			margin-bottom: 10px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-submit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-submit:hover::before {
			left: 150%;
		}


		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.gold {
			font-color: #f2bb00;
		}
		
		.golden-submit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-edit {
			display: inline-flex;
			justify-content: space-between;
			width: 100%;
			padding: 10px 20px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-edit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-edit:hover::before {
			left: 150%;
		}

		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.herz {
			  width: 200px; /* Beispielgröße */
			  height: 168px; /* Beispielgröße */
			  background-image: url('../pix/herz.png'); /* Pfad zu deinem Herzbild */
			  background-size: cover;
			  animation: pulsieren 3.5s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			}

			@keyframes pulsieren {
			  0% {
				transform: scale(1); /* Startgröße */
			  }
			  50% {
				transform: scale(1.1); /* Größere Größe beim "Schlag" */
			  }
			  100% {
				transform: scale(1); /* Zurück zur Startgröße */
			  }
			}
		
		input[type=radio].with-font, input[type=checkbox].with-font { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		input[type=radio].with-font ~ label:before, input[type=checkbox].with-font ~ label:before { font-family: FontAwesomeR; display: inline-block; content: "\f111"; letter-spacing: 10px; font-size: 1.2em; color: #0078b3; width: 1.4em; }
		input[type=radio].with-font:checked ~ label:before, input[type=checkbox].with-font:checked ~ label:before  { font-family: FontAwesomeS; content: "\f00c"; font-size: 1.2em; color: #f2bb00; letter-spacing: 5px; }
		input[type=checkbox].with-font ~ label:before { content: "\f0c8"; }
		input[type=checkbox].with-font:checked ~ label:before { content: "\f00c"; color: #f2bb00; }
		input[type=radio].with-font:focus ~ label:before, input[type=checkbox].with-font:focus ~ label:before, input[type=radio].with-font:focus ~ label, input[type=checkbox].with-font:focus ~ label { color: #f2bb00; }
		.radiobuttons { float:left; margin-right: 50px; margin-bottom: 15px; font-size: 24px; }
		
		.form-control, .form-select {
			font-size: 1.4rem;
			border: 1px solid #f2bb00;
		}
		
		label {
			font-size: 1.0rem;
			font-weight: bold;
			color: #0078b3;
		}
		
		h1 {
			font-size: 2.6rem;
		}
		h2 {
			font-size: 2.1rem;
		}
		p {
			font-size: 1.3rem;
		}
		a {
			color: #0078b3;
			text-decoration: none;
		}
		
		#h50 { width: 100%; margin-top: 10%; text-align: center; }
		#h100 { width: 100%; margin-top: 20%; text-align: center; }
	
	}
	
	
	@media (min-width: 992px) {
	
		body {
		  padding-top: 230px;
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px -25px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px -25px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		.header_transparent {
		  background-color: rgba(255, 255, 255, 0.9);
		  width: 100%;
		  padding-top: 20px; 
		  padding-bottom: 25px; 
		  margin-top: 30px;
		  margin-bottom: 0px;
		  text-align: center;
		}
	
        .header-container {
            background-color: #f8f9fa; /* Optional: Hintergrundfarbe für den Header */
            padding: 20px 0;
        }

        .image-container {
            display: inline-block;
        }

        .image-container img {
            display: block;
            max-width: 100%;
            height: 60px;
        }
		
		.goldendate {
			display: inline-block;
			padding: 8px 40px 6px 40px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 0px;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			z-index: 10;
			margin-top: -15px;
			overflow: hidden;
		}

		.goldendate::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(45deg);
			animation: shine 6s infinite linear;
		}

		@keyframes shine {
			0% {
				left: -100%;
			}
			50% {
				left: 150%;
			}
			100% {
				left: -100%;
			}
		}

		.golden-submit {
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			margin-bottom: 10px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-submit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-submit:hover::before {
			left: 150%;
		}


		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-submit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-edit {
			display: inline-flex;
			justify-content: space-between;
			width: 100%;
			padding: 10px 20px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-edit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-edit:hover::before {
			left: 150%;
		}

		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.herz {
			  width: 200px; /* Beispielgröße */
			  height: 168px; /* Beispielgröße */
			  background-image: url('../pix/herz.png'); /* Pfad zu deinem Herzbild */
			  background-size: cover;
			  animation: pulsieren 3.5s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			}

			@keyframes pulsieren {
			  0% {
				transform: scale(1); /* Startgröße */
			  }
			  50% {
				transform: scale(1.1); /* Größere Größe beim "Schlag" */
			  }
			  100% {
				transform: scale(1); /* Zurück zur Startgröße */
			  }
			}
		
		input[type=radio].with-font, input[type=checkbox].with-font { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		input[type=radio].with-font ~ label:before, input[type=checkbox].with-font ~ label:before { font-family: FontAwesomeR; display: inline-block; content: "\f111"; letter-spacing: 10px; font-size: 1.2em; color: #0078b3; width: 1.4em; }
		input[type=radio].with-font:checked ~ label:before, input[type=checkbox].with-font:checked ~ label:before  { font-family: FontAwesomeS; content: "\f00c"; font-size: 1.2em; color: #f2bb00; letter-spacing: 5px; }
		input[type=checkbox].with-font ~ label:before { content: "\f0c8"; }
		input[type=checkbox].with-font:checked ~ label:before { content: "\f00c"; color: #f2bb00; }
		input[type=radio].with-font:focus ~ label:before, input[type=checkbox].with-font:focus ~ label:before, input[type=radio].with-font:focus ~ label, input[type=checkbox].with-font:focus ~ label { color: #f2bb00; }
		.radiobuttons { float:left; margin-right: 50px; margin-bottom: 15px; font-size: 24px; }
		
		.form-control, .form-select {
			font-size: 1.4rem;
			border: 1px solid #f2bb00;
		}
		
		label {
			font-size: 1.4rem;
			font-weight: bold;
			color: #0078b3;
		}
		
		h1 {
			font-size: 3.5rem;
		}
		h2 {
			font-size: 2.5rem;
		}
		p {
			font-size: 1.4rem;
		}
		a {
			color: #0078b3;
			text-decoration: none;
		}
		
		#h50 { width: 100%; margin-top: 8%; text-align: center; }
		#h100 { width: 100%; margin-top: 15%; text-align: center; }
		
	}
	
	
	@media (min-width: 1200px) {
	
		body {
		  padding-top: 230px;
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px 0px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px 0px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		.header_transparent {
		  background-color: rgba(255, 255, 255, 0.9);
		  width: 100%;
		  padding-top: 20px; 
		  padding-bottom: 25px; 
		  margin-top: 30px;
		  margin-bottom: 0px;
		  text-align: center;
		}
	
        .header-container {
            background-color: #f8f9fa; /* Optional: Hintergrundfarbe für den Header */
            padding: 20px 0;
        }

        .image-container {
            display: inline-block;
        }

        .image-container img {
            display: block;
            max-width: 100%;
            height: 70px;
        }
		
		.goldendate {
			display: inline-block;
			padding: 8px 40px 6px 40px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 0px;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			z-index: 10;
			margin-top: -15px;
			overflow: hidden;
		}

		.goldendate::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(45deg);
			animation: shine 6s infinite linear;
		}

		@keyframes shine {
			0% {
				left: -100%;
			}
			50% {
				left: 150%;
			}
			100% {
				left: -100%;
			}
		}

		.golden-submit {
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			margin-bottom: 10px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-submit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-submit:hover::before {
			left: 150%;
		}


		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-submit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.golden-edit {
			display: inline-flex;
			justify-content: space-between;
			width: 100%;
			padding: 10px 20px;
			margin-top: -5px;
			margin-bottom: 15px;
			background: linear-gradient(to bottom, #FFD700, #B8860B);
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-family: sans-serif;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			transition: background-color 0.5s ease; /* Optionale sanfte Hintergrundänderung */
		}

		.golden-edit::before {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 50%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
			transform: skewX(-25deg); /* Optional für einen diagonalen Effekt */
			transition: left 0.5s ease-in-out;
		}

		.golden-edit:hover::before {
			left: 150%;
		}

		.golden-edit:hover {
			/* Optionale Änderungen beim Hover, z.B. dunklerer Hintergrund */
			background-color: #DAA520;
		}
		
		.herz {
			  width: 200px;
			  height: 168px;
			  margin-left: auto; margin-right: auto;
			  margin-bottom: 150px;
			  background-image: url('../pix/herz.png'); /* Pfad zu deinem Herzbild */
			  background-size: cover;
			  animation: pulsieren 4.0s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			}

			@keyframes pulsieren {
			  0% {
				transform: scale(1);
			  }
			  50% {
				transform: scale(1.25);
			  }
			  100% {
				transform: scale(1);
			  }
			}
		
		input[type=radio].with-font, input[type=checkbox].with-font { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		input[type=radio].with-font ~ label:before, input[type=checkbox].with-font ~ label:before { font-family: FontAwesomeR; display: inline-block; content: "\f111"; letter-spacing: 10px; font-size: 1.2em; color: #0078b3; width: 1.4em; }
		input[type=radio].with-font:checked ~ label:before, input[type=checkbox].with-font:checked ~ label:before  { font-family: FontAwesomeS; content: "\f00c"; font-size: 1.2em; color: #f2bb00; letter-spacing: 5px; }
		input[type=checkbox].with-font ~ label:before { content: "\f0c8"; }
		input[type=checkbox].with-font:checked ~ label:before { content: "\f00c"; color: #f2bb00; }
		input[type=radio].with-font:focus ~ label:before, input[type=checkbox].with-font:focus ~ label:before, input[type=radio].with-font:focus ~ label, input[type=checkbox].with-font:focus ~ label { color: #f2bb00; }
		.radiobuttons { float:left; margin-right: 50px; margin-bottom: 15px; font-size: 24px; }
		
		.form-control, .form-select {
			font-size: 1.4rem;
			border: 1px solid #f2bb00;
		}
		
		label {
			font-size: 1.6rem;
			font-weight: bold;
			color: #0078b3;
		}
		
		h1 {
			font-size: 3.5rem;
		}
		h2 {
			font-size: 2.5rem;
		}
		p {
			font-size: 1.4rem;
		}
		a {
			color: #0078b3;
			text-decoration: none;
		}
		
		#h50 { width: 100%; margin-top: 6%; text-align: center; }
		#h100 { width: 100%; margin-top: 12%; text-align: center; }
		
	}
	
	
	@media (min-width: 1400px) {
		
		body {
		  padding-top: 230px;
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px -170px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
		header {
		  background-image: url('../pix/header_aquarell_XL.png');
		  background-repeat: no-repeat;
		  background-position: 0px -170px;
		  background-attachment: fixed;
		  background-size: 100% auto;
		}
		
	}