/*
 * Kleine Anpassung April 2025:
 * - Auf Mobile den Hamburger nach oben nehmen
 * - Navigation fixed über den Inhalt legen
 */
:root {
	--dark-blue: #262659;
	--primary: #f55656;
	--body: #539dce;
	--border-radius: 0.4rem;
}

body,
div.ccm-page header,
div.ccm-page main,
footer#footer-theme section:last-child {
	background-color: var(--body);
}

div.ccm-page h1 {
	line-height: 1.1;
}

.header-row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	gap: 1rem;
	margin: 0 0 3rem;
}
@keyframes speeding {
	0% {
		transform: translate(1px, 0);
	}
	5% {
		transform: translate(2px, -2px);
	}
	10% {
		transform: translate(4px, 0);
	}
	15% {
		transform: translate(6px, -2px);
	}
	20% {
		transform: translate(8px, 0);
	}
	25% {
		transform: translate(10px, -2px);
	}
	30% {
		transform: translate(12px, 0);
	}
	35% {
		transform: translate(14px, -2px);
	}
	40% {
		transform: translate(16px, 0 );
	}
	45% {
		transform: translate(18px, -2px);
	}
	50% {
		transform: translate(20px, 0);
	}
	55% {
		transform: translate(22px, -2px);
	}
	60% {
		transform: translate(24px, 0);
	}
	65% {
		transform: translate(26px, -2px);
	}
	70% {
		transform: translate(28px, 0);
	}
	75% {
		transform: translate(30px, -2px);
	}
	80% {
		transform: translate(32px, 0);
	}
	85% {
		transform: translate(34px, -2px);
	}
	90% {
		transform: translate(36px, 0);
	}
	95% {
		transform: translate(37px, -2px);
	}
	100% {
		transform: translate(38px, 0);
	}
}
.header-banner {
	max-width: 35rem;
	margin: 0 auto;
	order: 2;
	animation: speeding 1.5s infinite alternate linear;
}
.header-title {
	text-align: center;
	flex-basis: 75%;
	flex-grow: 1;
	order: 1;
	transform: rotate( -9deg );
	text-shadow: -2px -2px 0 rgba( 255, 255, 255, 0.75 )
}
.ccm-page .header-title h1,
.ccm-page .header-title p {
	font-family: "Bangers", sans-serif;
	font-size: clamp( 120%, 12.5vw, 8rem );
	color: var( --dark-blue );
	font-weight: normal;
	line-height: 1;
	text-wrap: balance;
}
.ccm-page .header-title p {
	font-size: clamp( 100%, 10vw, 5rem );
}

ul#main-menu,
ul#main-menu li,
ul#main-menu li a {
	border-radius: var( --border-radius );
}

ul#main-menu li ul {
	border: none;
}

ul#main-menu a.nav-path-selected {
	color: var( --primary );
}

div.ccm-page div.normaler-textblock {
	border: none;
	border-radius: var( --border-radius );
}

@media screen and ( min-width: 768px ) {
	.main-menu-btn {
		position: fixed;
	}
}



@media screen and ( max-width: 767px ) {
	div.ccm-page header {
		padding-top: 5rem;
	}

	main a {
		hyphens: auto;
		word-wrap: break-word;
	}

	.header-row {
		flex-flow: column;
		justify-content: center;
		margin-bottom: 1rem;
	}
	.header-banner {
		max-width: 25rem;
		order: 0;
		/*margin: 0 auto;*/
	}
	.header-title {
		margin: 2rem 0;
	}



	label.main-menu-btn[for="main-menu-state"] {
		position: absolute;
		top: 1.5rem;
		right: 2rem;
		margin: 0;
		z-index: 20;
	}

	#main-menu-state:checked ~ .main-menu-btn {
		position: fixed;
		top: 1.5rem;
		right: 2rem;
	}

	.main-menu-btn .main-menu-btn-icon,
	.main-menu-btn .main-menu-btn-icon:before,
	.main-menu-btn .main-menu-btn-icon:after {
		background-color: white;
	}

	.main-menu-btn {
		width: 3rem;
		height: 3rem;
	}
	.main-menu-btn-icon:before {
		top: -8px;
	}
	.main-menu-btn-icon:after {
		top: 8px;
	}
	
	#main-menu-state:checked ~ #main-menu {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100dvh;
		overflow: auto;
		z-index: 10;
		padding-top: 6rem;
		padding-bottom: 3rem;
		background-color: var( --dark-blue );
		border-radius: 0;

	}

	#main-menu-state:checked ~ #main-menu > li {
		border-bottom: 1px solid color-mix( in srgb, white 10%, transparent );
	}
	
	#main-menu .sub-arrow {
		background-color: transparent;
	}
	

}