html {
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
		font-family: Arial, sans-serif;
		color: #04028c;
	}

	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	header {
		position: sticky;
		top:0;
		left:0;
		right:0;
		position: absolute;
		z-index: 1000;
		background: #0057a0;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		flex-wrap: wrap;
	}

	.branding {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.branding img {
		height: 60px;
	}

	.branding-text {
		display: flex;
		flex-direction: column;
	}

	.branding-text h1 {
		font-size: 1.5em;
		margin: 0;
	}

	.branding-text h3 {
		font-size: 1em;
		margin: 0;
		font-weight: normal;
	}

	.menu-toggle {
		display: none;
		font-size: 1.8em;
		background: none;
		border: none;
		color: white;
		cursor: pointer;
	}

	nav {
		background: #0057a0;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 0.5em;
	}

	nav li {
		position: relative;
	}

	nav a {
		color: white;
		text-decoration: none;
		padding: 0.7em 1em;
		display: block;
		transition: background 0.3s;
	}

	nav a:hover {
		background: #0074d9;
	}

	nav ul ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: #0057a0;
		flex-direction: column;
		min-width: 200px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}

	nav ul li:hover > ul {
		display: flex;
	}

	.spacer {
		height: 80px;
	}

	section {
/*		min-height: 100vh;   /* mindestens volle Höhe des Fensters */
		padding: 20px;
		max-width: 900px;
		margin: auto;
		scroll-margin-top: 30px;
		opacity: 0;
/*		transform: translateY(20px);*/
		transition: all 0.6s ease-out;
/*		padding: 60px;*/
		padding: 25px;
	}
	
	

	section.title {
/*		min-height: 100vh;   /* mindestens volle Höhe des Fensters */
/*
		padding: 20px;
*/
		max-width: 900px;
		margin: auto;
		scroll-margin-top: 30px;
		opacity: 0;
		transition: all 0.6s ease-out;
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 90px;
		padding-bottom: 170px;
}

	section.show {
		opacity: 1;
/*		transform: translateY(0);*/
	}

	article {
		scroll-margin-top: 130px;
		margin-bottom: 40px;
	}

	section h1.title {
		color: #0057a0;
	}

	section h2.title {
		scroll-margin-top: 80px; /* Höhe deines fixen Headers */
		border-bottom: 2px solid #0074d9;
		padding-bottom: 10px;
		color: #0057a0;

		font-family: "trasandina", Sans-serif;
		/*font-size: 3.5rem;*/
		font-size: 56px;
		font-weight: 800;
		text-transform: uppercase;

	}

	section h2.title a {
		text-decoration: none;
		color: inherit;
	}
		
	section h3 {
		scroll-margin-top: 80px; /* Höhe deines fixen Headers */
		/*
		border-bottom: 2px solid #0074d9;
		padding-bottom: 10px;
		color: #0057a0;
		*/
	}

	section a.childtitle {
		text-decoration: none;
		color: inherit;
	}

	section h2.childtitle {
		padding-top: 10px;
	}

	form input, form select, form textarea {
		width: 100%;
		max-width: 400px;
		margin: 5px 0 15px;
		padding: 8px;
	}

	button {
		background: #0057a0;
		color: white;
		border: none;
		padding: 10px 15px;
		cursor: pointer;
	}

	button:hover {
		background: #003f73;
	}

	footer {
		background: #f2f2f2;
		text-align: center;
		padding: 20px;
		font-size: 0.9em;
	}
	
	.map-container {

  position: relative;
  z-index: 1; /* tief halten */
		scroll-margin-top: 150px; /* Höhe deines fixen Headers */
		margin-bottom: 30px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}
	
	.map {
		height: 400px;
		width: 100%;
		margin-bottom: 10px;
	}
	
	.map-address {
		font-size: 0.9em;
		color: #333;
	}
	
	div.sportangebot {
		display: flex;
		justify-content: center;  /* Horizontal zentrieren */
		align-items: center;      /* Vertikal zentrieren */
/*		height: 100vh;            /* Volle Höhe des Viewports */
	}

	img.sportangebot {
		max-width: 700px;	/* Maximal 100% der Containerbreite */
		max-height: 700px;	/* Maximal 500px in der Höhe */
		width: auto;		/* Die Breite wird automatisch angepasst */
		height: auto;		/* Die Höhe wird automatisch angepasst */
	}
	
	div.startpagelogo {
		display: flex;
		flex-direction: column;
		justify-content: center;  /* Horizontal zentrieren */
		align-items: center;      /* Vertikal zentrieren */
	}

	img.startpagelogo {
		max-width: 500px;	/* Maximal 100% der Containerbreite */
/*		max-height: 200px;	/* Maximal 500px in der Höhe */
/*		width: auto;		/* Die Breite wird automatisch angepasst */
		height: auto;		/* Die Höhe wird automatisch angepasst */
	}
/*
	@media screen and (max-width: 400px) {
		.fixed-header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			height: 72px;
		}
    }
*/
	/* Responsive Navigation */
	@media (max-width: 1200px) {
		.menu-toggle {
			display: block;
		}
		
		.spacer {
			height: 30px;
		}
		
		section {
			scroll-margin-top: 80px;
			padding: 60px;
		}
		
		nav {
			width: 100%;
		}

		nav ul {
			flex-direction: column;
			width: 100%;
			display: none;
			background-color: #0057a0;
		}

		nav ul.show {
			display: flex;
		}

		nav ul li {
			width: 100%;
		}

		nav a {
			padding: 1em;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		nav ul ul {
			position: static;
			box-shadow: none;
		}

		nav ul li:hover > ul {
			display: none;
		}

		nav ul li.open > ul {
			display: flex;
		}
	}
	
	@media (max-width: 400px) {
		body {
		}

		section {
			padding: 5px;
		}
		

		section h1.title {
			color: #0057a0;
		}

		section h2.title {
			scroll-margin-top: 80px; /* Höhe deines fixen Headers */
			border-bottom: 2px solid #0074d9;
			padding-bottom: 10px;
			color: #0057a0;

			font-family: "trasandina", Sans-serif;
			font-size: 24px;
			font-weight: 800;
			text-transform: uppercase;
		}

		section h3 {
			/*scroll-margin-top: 80px; /* Höhe deines fixen Headers */
		}
		
		.fixed-header {
			/*
			-webkit-box-shadow: 0px 8px 24px 0px rgba(50, 60, 89, 0.15);
			-moz-box-shadow: 0px 8px 24px 0px rgba(50,60,89,0.15);
			box-shadow: 0px 8px 24px 0px rgba(50, 60, 89, 0.15);
			height: unset;
			max-height: unset;
			background-color: #ffffff;
			left: 0px;
			right: 0px;
			width: 100%;
			max-width: 1440px;
			margin: 0 auto;
			height: 72px;
			*/
		}
	
		img.sportangebot {
			max-width: 300px;	/* Maximal 100% der Containerbreite */
			height: auto;		/* Die Höhe wird automatisch angepasst */
		}

		img.startpagelogo {
			max-width: 300px;	/* Maximal 100% der Containerbreite */
			height: auto;		/* Die Höhe wird automatisch angepasst */
		}

	}