:root {
		--body-width:  75%;
		--cont-left:   4.0rem;
		--cont-right:  4.0rem;
		--cont-leftS:  1.0rem;
		--cont-rightS: 3.0rem;
		--align: 	   left;

		--bg-body:  #110000;
		--tx-body:  #ffffff;

		--bg-head:  #750000;
		--tx-head:  #ffffff;

		--bg-navi:  #ca4700;
		--bg-menue: #8a2f00;
		--tx-navi:  #ffffff;

		--bg-drop:  #ca4700;
		--bg-dropHV:#e09600;

		--bg-title: #b40000;
		--tx-title: #ffffff;

		--bg-cont:  #b40000;
		--tx-cont:  #ffffff;

		--tx-link:   #8d96ff;

		--schriftart: "Comic Sans MS", "Montserrat", "Handlee-Regular", Arial, sans-serif;}
	html {
		font-size: 14px;}
	body {
		background: var(--bg-body);
		font-family:var(--schriftart);
		color: var(--tx-body);
		max-width: var(--body-width);
		margin-top: 0rem;
		margin-left: auto;
		margin-right: auto;
		padding: 0rem;}
	* {
		box-sizing: border-box;}

/*//2 ALLGEMEIN */
	a {
		margin: 0px;
		padding: 0px;}
	li {
		list-style: none;}
	ul { 
	padding-left: 10px;}

/*//2 HEADLINE */
	.head-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color:  var(--bg-head);
		padding: 0.5rem;
		width: 100%;
		top: 0;
		z-index: 1000;}
	.head-icon {
		width: 5rem;
		padding: 0.5rem;
		height: auto;}
	.head-icon a img{
		width: 5rem;
		height: 5rem;
		margin-left: 0.0rem;}
	.head-title {
		height: auto;
		width: max-content;
		white-space: nowrap;
		margin: 0.0rem 0.5rem;
		padding: 0.0rem;
		text-align: left;
		font-size: 2.5rem;
		font-weight: bold;
		font-family: var(--schriftart);
		color: var(--tx-head);}

/* NAVIGATION */
	.nav-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color:  var(--bg-menue);
		padding: 0.5rem;
		width: auto;
		top: 0;
		z-index: 1000;
		color:  #222;}
	/* LINK-LISTE */
	.nav-links {
		display: flex;
		margin: 0.5rem;
		list-style: none;
		top:0rem;
		gap: 2.0rem;}
	.nav-links li a,
	.nav-dropbtn {
		color: var(--tx-navi);
		background: transparent;
		border: 0;
		text-decoration: none;
		font-family: var(--schriftart);
		font-size: 1.5rem;
		cursor: pointer;
		transition: color 0.5s;} 
	.nav-links li a:hover,
	.nav-dropbtn:hover {
		color: var(--tx-navi);
		background-color: var(--bg-dropHV);}
	.nav-links li a:focus-visible,
	.nav-dropbtn:focus-visible,
	.nav-hamburger:focus-visible {
		outline: 2px solid #ffffff;
		outline-offset: 2px;}
	/* DROPDOWN-LINKLISTE */
	.nav-dropdown {
		position: relative;}
	.nav-dropdown-content {
		position: absolute;
		display: none;
		background-color: var(--bg-drop);
		min-width: 150px;
		box-shadow: 0 8px 16px rgba(0,0,0,0.3);
		border-radius: 6px;
		top: 100%;
		right: 0;
		text-align: left;  
		margin-top: 0px;}
	.nav-dropdown-content li {
		display: block;}
	.nav-dropdown-content a {
		padding: 0.3rem;
		display: block;
		white-space: nowrap;}
	.nav-dropdown:hover .nav-dropdown-content,
	.nav-dropdown:focus-within .nav-dropdown-content {
		background-color: var(--bg-drop);
		display: block;}

/* CONTENT */
	.content-container {
		width: 100%;
		background-color: var(--bg-cont);}
	.content-title {
		margin-left: var(--cont-left);
		margin-right: var(--cont-right);
		padding: 1.0rem 0.0rem 0.5rem 0.0rem;
		background-color: var(--bg-title);
		line-height: 1.5;
		text-align: var(--align);
		font-family: var(--schriftart);
		font-size: 2.0rem;
		font-weight: bold;
		font-style: normal;
		color: var(--tx-title);}
	.content-subtitle {
		margin-left: var(--cont-left);
		margin-right: var(--cont-right);
		padding: 1.0rem 0.0rem 0.5rem 0.5rem;
		color: var(--tx-title);
		font-family: var(--schriftart);
		font-size: 1.75rem;
		font-weight: normal;
		text-align: var(--align);}
	.chapter-title {
		margin-left: var(--cont-left);
		margin-right: var(--cont-right);
		padding: 1.5rem 0.0rem 0.5rem 1.5rem;
		color: var(--tx-title);
		font-family: var(--schriftart);
		font-size: 1.5rem;
		font-weight: bold;
		text-align: var(--align);}
	.paragraph {
		margin-left: var(--cont-left);
		margin-right: var(--cont-right);
		padding: 0.0rem 0.0rem 1.0rem 2.5rem;
		color: var(--tx-cont);
		font-family: var(--schriftart);
		line-height: 2.0rem;
		font-size: 1.5rem;
		font-weight: normal;
		text-align: var(--align);}
	.paragraph a {
		text-decoration: none;
		color: var(--tx-link);}	
	.bild-container {
		margin: auto;
		Padding: 2.0rem;}
	.bild {
		display: block;
		margin: auto auto;
		width: 8rem;
		height: auto;
		background-color: transparent;}
	.qr-code {
		display: block;	}
	.qr-code img {
		margin-left: var(--cont-left);
		margin-right: var(--cont-right);
		padding: 2.0rem 0.0rem 1.0rem 2.5rem;	
		width: 20rem;
		height: auto;
		background-color: transparent;	}

/* NAVIGATION auf Smartphone */
	@media screen and (max-width: 601px) { 
		.head-title {
			font-size: 2.0rem !important;}
  
	}
	@media screen and (max-width: 1001px) {   
		html {
			font-size: 10px;}
		body {
			max-width: 100%;	
			--body-width: 95%;}
		.head-icon {
			width: 5rem;
			margin-left: 0rem;}
		.head-icon img {
			width: 3rem;
			height: 3rem;
			margin: auto;}
		.head-title {
			font-size: 2.5rem;
			text-align: center;
			white-space: normal;}
		.content-title {
			margin-left: var(--cont-leftS);
			padding:2rem 0rem 0rem 0rem;
			font-size: 2rem;	}
		.content-subtitle {
			margin-left: var(--cont-leftS);
			padding:2rem 0rem 0rem 0rem;		}
		.chapter-title {
			margin-left: var(--cont-leftS);
			margin-right: var(--cont-rightS);
			padding: 1.5rem 0.0rem 0.5rem 1.5rem;		}
		.paragraph {
			margin-left: var(--cont-leftS);
			margin-right: var(--cont-rightS);
			padding: 0.0rem 0.0rem 1.0rem 2.5rem;
			font-size: 1.5rem;		}
		.qr-code img {
			margin-left: var(--cont-leftS) !important;
			margin-right: var(--cont-rightS) !important;	}

		.nav-container {
			margin: 1.5rem;}
		.nav-links {
			position: fixed;
			flex-direction: column;
			align-items:flex-start;
			justify-content:flex-start;
			top: 5rem;
			right: -100%; /* zunächst versteckt */
			height: auto;
			width: 150px;
			background-color: var(--bg-drop);
			opacity: 0.95;
			transition: right 0.4s ease-in-out;
			z-index: 999; 
			gap: 0.3rem; }
		.nav-links li {
			margin: 0.5rem;
			font-size: 1.3rem;  }
		.nav-links.active {
			right: 0rem;  }

		.nav-dropdown-content {
			position: static;
			display: none;   
			background-color: var(--bg-drop);
			width: 100%; }
		.nav-dropdown-content li {
			background-color: var(--bg-drop);}
		.nav-dropdown.active .nav-dropdown-content{
			display: block;  }

		.nav-hamburger {
			display: none;}
		.nav-hamburger span {
			width: 28px;
			height: 3px;
			display: block;
			background-color: white;
			transition: all 0.3s;
			border-radius: 3px;}
		.nav-hamburger {
			display: flex;  
			flex-direction: column;
			gap: 5px;
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;}
		.nav-hamburger.active span:nth-child(1) {
			transform: rotate(45deg) translate(5px, 5px);  }
		.nav-hamburger.active span:nth-child(2) {
			opacity: 0;  }
		.nav-hamburger.active span:nth-child(3) {
			transform: rotate(-45deg) translate(7px, -7px);  } 
	}
/* STICKY */
	@supports (position: sticky) or (position: -webkit-sticky) { /* Sticky Top */
		.sticky-top {
			position: sticky;
			top: 0;
			opacity: 100%;
			transition: 0.5s;
			z-index: 1000;	}}
	@supports (position: sticky) or (position: -webkit-sticky) { /* Sticky Bottom */
		.sticky-bottom {
			position: sticky;
			bottom: 1rem;
			opacity: 80%;
		}}

	/* BUTTON SEITENANFANG */
	.seitenanfang-container {
		display: flex; 
		justify-content: flex-end;}
	.seitenanfang {
		position: sticky; 
		opacity: 0.8;
		bottom: 0px;  }
	.seitenanfang a {
		pointer-events: auto;  
		text-decoration: none;}
	.seitenanfang img {
		width: 3.5rem;
		height: 3.5rem;}

	/* FOOTER */
	.site-footer {
		display: flex;
		justify-content: space-between;
		position: sticky;
		background-color: transparent;
		padding: 0rem;
		margin: 0rem;
		text-align: var(--align);
		font-family: var(--schriftart);
		color: var(--tx-body);
		font-size: 1.0rem;}
	.site-footer p {
		margin: 0rem;}
	.site-footer a {
		color: var(--tx-body);}
	.counter-consent-controls {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
		max-width: 20rem;
		font-size: 0.9rem;}
	.counter-consent-text {
		margin: 0;}
	.counter-consent-button {
		border: 1px solid var(--tx-body);
		background: transparent;
		color: var(--tx-body);
		padding: 0.3rem 0.6rem;
		cursor: pointer;
		font-family: var(--schriftart);}
	.counter-consent-button:hover {
		opacity: 0.85;}
	.counter-noscript-image {
		min-width: 15rem;}