:root {
	--accessibility: #03122d;
	--orange: #EC6501;
	--gray: #494948;
	--light-gray: #ececed;
}

html {
	 scroll-behavior: smooth;
}
body {
	color: var(--gray);
	font-size: 16px;
	font-family: 'ingra', Arial;
	line-height: 1.80857;
	font-weight: normal;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: var(--font-size);
	transition: all 0.3s ease;
}
body.high-contrast {
	--orange: #ac520a; /* z.B. stärkerer Kontrast, Gold-Gelb */
	--gray: #222;
	--light-gray: #ffffff;
}

body {
}

body.large-font {
	--font-size: 1.25rem;
}

body.xlarge-font {
	--font-size: 1.5rem;
}

body.high-contrast {
	--background-color: #fff;
	--text-color: #000;
}

body.high-contrast .dropdown-menu,
body.high-contrast .head_top .header
	{ background: #fff; }
body.high-contrast .bg-orange {
	background: var(--orange) !important;
}
body.high-contrast .bg-gray {
	background: var(--gray) !important;
}
body.high-contrast .bg-lightgray {
	background: #fff !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
/* body.high-contrast h6, */
body.high-contrast p,
body.high-contrast span,
body.high-contrast li,
body.high-contrast a {
	color: #000 !important;
}


body.high-contrast .bg-gray h1,
body.high-contrast .bg-gray h2,
body.high-contrast .bg-gray h3,
body.high-contrast .bg-gray h4,
body.high-contrast .bg-gray h5,
body.high-contrast .bg-gray h6,
body.high-contrast .bg-gray p,
body.high-contrast .bg-gray span,
body.high-contrast .bg-gray li,
body.high-contrast .bg-gray a, 
body.high-contrast .bg-orange h1,
body.high-contrast .bg-orange h2,
body.high-contrast .bg-orange h3,
body.high-contrast .bg-orange h4,
body.high-contrast .bg-orange h5,
body.high-contrast .bg-orange h6,
body.high-contrast .bg-orange p,
body.high-contrast .bg-orange span,
body.high-contrast .bg-orange li,
body.high-contrast .bg-orange a,
body.high-contrast .text-bg p,
body.high-contrast .text-bg a.bg_1,
body.high-contrast footer p,
body.high-contrast footer a,
body.high-contrast .skip-link,
body.high-contrast .card1 .body p,
body.high-contrast .card-header .btn,
body.high-contrast .text-bg h1,
body.high-contrast .text-bg h2.lead 
{
	color: #fff !important;
}

body.high-contrast img.icon {
  filter: brightness(0) saturate(100%);
}
body.high-contrast .header-1 img.icon,
body.high-contrast .bg-orange img.icon,
body.high-contrast .bg-color img.icon {
  filter: brightness(0) invert(1);
}

body.high-contrast .navigation.navbar-dark .navbar-nav .nav-link {
	border: solid 2px #fff !important;
	padding: 10px 20px 6px; margin-right: .5em;
}
body.high-contrast .navigation.navbar-dark .navbar-nav .nav-link:focus {
	border: solid 2px #000 !important;
}


body.high-contrast .svg-inline path .st0,
body.high-contrast .svg-inline path {
	/* fill: var(--orange); */
}


body.high-contrast .card-header:hover { background: var(--gray); transition: 1s; }

body.high-contrast .nav-item.active { border-bottom: solid 2px #666; }
body.high-contrast .nav-item .nav-item.active { padding-left: 2rem; border-left: solid 6px #666; border-bottom: none; }
body.high-contrast .nav-item .nav-item.active a { color: #666 !important; }

body.high-contrast .navbar {
	background: #fff;
}
body.high-contrast .nav_bg .navbar {
	border-bottom: solid 2px #000;
}
body.high-contrast .nav_bg .navigation.navbar-dark .navbar-nav .nav-link {
	color: #000;
}
body.high-contrast .nav_bg .navigation.navbar-dark .navbar-nav .nav-link {
	color: #000 !important;
}


body.high-contrast .text-bg h1,
body.high-contrast .text-bg h2.lead {
	text-shadow: 5px 5px 0px rgba(0, 0, 0, 1); 
	/* font-family: Arial */
}



@media (max-width: 768px) {
	body.high-contrast .navigation.navbar-dark .navbar-nav .nav-link {
		border: none !important; 
		border-bottom: solid 2px #fff !important; 
		padding: 10px 20px 6px;
		margin-right: .5em;
	}
	body.high-contrast .navbar-collapse { background: #fff; }
}




/* * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * */
/*  TOOL CONTAINER for barriere switch */
.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100;
	letter-spacing: .05em;
	z-index: 99999;
}

.skip-link:focus {
	position: absolute;
	left: 10px;
	top: 10px;
	width: auto;
	height: auto;
	background: var(--accessibility);
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	/* font-weight: bold; */
}

.accessibility-panel .HL {
	background: var(--accessibility);
	color: #fff !important;
	font-size: 1rem;
	width: 100%;
	padding: 12px 16px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	margin-bottom: 1em;
}

.accessibility-panel {
	position: fixed;
	top: 190px;
	right: 10px;
	z-index: 9999;
	background: #fff;
	border: none;
	color: #000;
	border-radius: 12px;
	box-shadow: 0 8px 12px rgba(0,0,0,0.5);
	width: 260px;
	display: none;
	background: #ddd;
	padding-bottom: 1rem;
}

.settings-button {
	position: fixed;
	top: 120px;
	right: 10px;
	z-index: 10000;
	/* font-size: 1.8rem; */
	background: var(--accessibility);
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: background 0.2s, box-shadow 0.2s;
	outline: none;
}

.settings-button img {
	width: 90%;
	/* height: 2em; */
	object-fit: contain;
	margin: auto;
	display: block;
}
.setting-item {
	margin: 3px 12px;
	background: #fff;
	border-radius: 8px;
}
.setting-item-inner {
	padding: 8px 12px 2px;	
}
.setting-item label {
	display: inline-block;
	width: 50%;
}
.setting-item label.breit {
	width: 75%;
}
.setting-item select {
	border: none;
}
.setting-item select:focus-visible,
.setting-item input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accessibility);
	outline-offset: 3px;
	border-radius: 4px;
	background: #eef5fa;
}

.setting-item a {
	padding: 8px 12px 2px;	
	display: block;
	border-radius: 8px;
}
.setting-item a:focus,
.setting-item a:focus-visible {
	background-color: var(--accessibility);
	color: #fff !important;
}

.large-font .accessibility-panel { width: 300px; max-width: 100% }
.xlarge-font .accessibility-panel { width: 360px; }


