/* accessible Navigation for screen reader and keyboard user*/
.AccessNav-item:focus { background: var(--focus); color: var(--bg); position: absolute; top: 20em; left: 0; font-weight: 500; text-align: center; padding: calc(-0.5em + 30px) 0; width: 100%; z-index: 10000 !important}

/* hamburger navigation for mobile phones and tablets - temporary hidden */
.hamburger-container { width: max-content; position: absolute; top: 5px; left: 5px; color: var(--bg); transition: transform 0.5s ease }

.hamburger-container .checkbox { opacity: 0; position: absolute }
.hamburger-container .checkbox:focus ~ .hamburger { outline: 2px solid white; outline: auto; outline-offset: 4px }

@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger { outline: none }
}

.hamburger-container .drawer a { visibility: hidden; transition: visibility 0.5s linear; color: var(--bg) }
.hamburger-container .checkbox:checked ~ .drawer a { visibility: visible }
.hamburger-container .checkbox:checked ~ .drawer { transform: translateX(0%) }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) { transform: translateY(12px) rotate(45deg) }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) { opacity: 0 }
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) { transform: translateY(-12px) rotate(-45deg) }

.hamburger { width: 30px; height: 30px; position: relative; display: block; transition: transform 0.5s ease; z-index: 1; cursor: pointer; padding-top: 5px }

.checkbox ~ .hamburger .slice { display: block; width: 100%; height: 2px; background-color: var(--primary); transition: all 0.5s ease }
.checkbox:checked ~ .hamburger .slice { background-color: var(--bg) }
.hamburger .slice:not(:first-child) { margin-top: 10px }

.drawer { position: fixed; left: 0; top: 0; height: 100%; width: max-content; max-width: 100%; padding: 22px; background: var(--primary); transform: translateX(-100%); transition: transform 0.5s ease }
.drawer .level_1 { padding: 0; list-style: none; margin-top: 3px; margin-left: 20px }
.drawer .level_1 .nav-list-item { padding-bottom: 10px }
/* temporary hidden */
.hamburger-container .hamburger, .hamburger-container .checkbox { display: none }
.drawer .level_1 li.active { display: none }

@media screen and (max-width: 480px) {
  .drawer { width: 100% }
}

@media (min-width: 768px) {
	/* navigation for desktop user */
	.hamburger-container { position: static; transition: none; margin: 0 auto; width: 100% }
	.hamburger-container .hamburger, .hamburger-container .checkbox { display: none }
	.drawer { position: static; transition: none; transform: none; background: none; width: auto; height: auto }
	.dropdown_title { background-color: transparent; border: none; font-family: inherit }
	.mod_navigation { background-color: var(--primary) }
	.drawer { display: grid; place-items: center; padding: 0 1rem }
	.drawer > ul { grid-auto-flow: column; margin: 0; padding: 0; display: grid }
	.drawer > ul > li { margin: 0 0.5rem; padding: 0 } /* margin problem for mobile?*/
	.hamburger-container .drawer > ul > li a { transition: none; visibility: visible; text-decoration: none; text-align: center; display: inline-block; color: var(--bg); font-size: 1.125rem; padding: 1rem 0.5rem; border-top: 3px solid var(--primary ) }
	.drawer > ul > li a:hover { border-top: 3px solid var(--bg); transition: var(--navTransition) }
	.drawer > ul > li a:focus { border-top: 3px solid var(--bg); transition: var(--navTransition) }
	.drawer > ul > li a:focus > a:hover,
	.drawer > ul > li a:focus > a:focus { border-top-color: var(--typo); color: var(--primary) }

	.drawer ul { list-style-type: none }

	.submenu { position: relative }
	.submenu .dropdown_title { display: inline-flex; align-items: center; visibility: hidden }
	.submenu .dropdown_title:after { content: ""; border: 0.35rem solid transparent; border-top-color: var(--bg); margin-left: 0.25em; transform: translateY(0.15em); visibility: visible }

	.submenu .level_2 { position: absolute; min-width: 15ch; left: 50%; top: calc(100% - 0.25rem); transition: var(--navTransition); transform: rotateX(-90deg) translateX(-50%); transform-origin: top center; opacity: 0.3; padding: 0.5em 0; background-color: var(--bg); border-radius: 4px; box-shadow: 0 0.15em 0.25em rgba(0,0,0, 0.25) }
	.submenu .level_2 a { width: 100%; color: var(--primary) !important; display: block; padding: 0.5em; opacity: 0; border-top: 3px solid var(--bg); transition: var(--navTransition) }
	.submenu .level_2 a:hover { background-color: rgba(var(--primary-rgb), 0.10) }
	.submenu .level_2 a:focus { background-color: rgba(var(--primary-rgb), 0.10) }
	.submenu:after { content: ""; border: 0.5rem solid transparent; border-bottom-color: var(--bg); position: absolute; top: calc(100% - 1.25rem); left: 50%; transform: translateX(-50%); transition: var(--navTransition); opacity: 0; will-change: opacity }

	.submenu:hover .dropdown_title,
	.submenu:focus-within .dropdown_title { border-top-color: var(--bg) }

	.submenu:hover .level_2,
	.submenu:focus-within .level_2 { opacity: 1; transform: rotateX(0) translateX(-50%); visibility: visible }

	.submenu:hover .level_2 a,
	.submenu:focus-within .level_2 a { opacity: 1 }

	.submenu:hover,
	.submenu:focus-within:after { opacity: 1 }
}

/*@font-face {
  font-family: BarBold;
  src: url('../../files/themes/dnw-2025/src/.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: fallback
}*/

/* color definition */
/* For level AA compliance, your text should have a contrast ratio of 4.5:1. For level AAA compliance your text should have a contrast ration of 7:1—however, if your text is large (18+ point or 14 point if the text is bold), then your ratio can be 3:1 for AA compliance and 4.5:1 for AAA. */
:root {
	--bg: #fff /* ratio 11.78:1 */;
	--typo: #005c70;
	--primary: #00386c;
	--primary-rgb: 0,56,108;
	--green: #00816C;
	--warning: ;
	--danger: red ;
	--focus: #005C70;
	--navTransition: 280ms all 120ms ease-out;
 }


*:focus { outline: 0 }
html { box-sizing: border-box }
*, *:before, *:after { margin: 0; padding: 0; box-sizing: inherit }

body { font-size: 1em; background: var(--primary); color: var(--primary); font-family: verdana, sans-serif; line-height: 1.5em; letter-spacing: 0.12em; word-spacing: 0.16em }
h1 { font-size: 200%; line-height: 2em; letter-spacing: 0.12em }
h2 { font-size: 175%; line-height: 1.5em; letter-spacing: 0.12em }
h3 { font-size: 150%; line-height: 1.5em; letter-spacing: 0.12em }
h4 { font-size: 125% }
h5 { font-size: 100% }
h6 { font-size: 100% }
p { font-size: 95%; hyphens: auto }
.mod_article p { margin: 0 0 2.75rem 0 }
a { color: var(--primary); align-items: center }
a:not([class]) { display: inline-flex; text-underline-offset: 0.2em }
a:hover { text-decoration: none }
a:focus { outline: 0; color: var(--bg); background: var(--focus); padding: 2px }

/* list */
ol {}
#main ul { margin: 0 0 2.75rem 1rem }
#main li { margin: 0 0 2rem 0 }
/*li::marker {}*/

/* table */
table {}
thead {}
th {}
tbody {}
tr {}
td {}

/* accordion */
details { margin: 1.5rem 0 }
summary { border-top: 1px solid var(--primary); padding: 2rem 0 0.5rem 0; cursor: pointer }
/*summary::marker {  }*/
summary:focus { outline: 0; background: var(--focus); color: var(--bg) }

pre {}
code {}

nav {}
header {}
main {}
footer {}

.noscript div { background: var(--danger); color: var(--bg); padding: 1rem 2rem; text-align: center }

.visually-hidden { position: absolute; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;	margin: -1px !important; overflow: hidden !important; clip-path: inset(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important }

#accessNav { position: absolute; top: -20em; z-index: 10; width: 100% }
#wrapper { position: relative; background:var(--bg); display: grid; gap: 0 20px; width: 100%; grid-template-columns: repeat(12, 1fr); grid-template-areas: 'header' 'container' 'newslist' 'footer'; z-index: 1 }
#header { grid-column: 1/13; background: var(--bg); margin-bottom: 2rem; position: sticky; top: 0; z-index: 1000 }
#container { grid-column: 2/12 }
#main { /*display: grid; gap: 20px; */width: 100%; grid-template-columns: repeat(12, 1fr) }
#footer { grid-column: 1/13; margin-top: 20px }

.logoPosition { text-align: right; padding: 0.5rem 2rem 0.5rem 0 }
.logoPosition img { height: 100px }

/* breadcrumb */
.mod_breadcrumb { grid-column: 1/13; display: flex }
.mod_breadcrumb p { font-size: 1em; margin: 0 0.5em 0 0; line-height: 1.5em }
.mod_breadcrumb li + li::before { display: inline-block; margin: 0 0.75em 0 0.25em; transform: rotate(15deg); border-right: 0.1em solid currentcolor; height: 0.8em; content: "" }
.mod_breadcrumb li { display: inline; list-style-type: none }

/* content */
.mod_article { grid-column: 1/13 }
.grid_full { grid-column: 1/13 }
.grid_half { grid-column: 1/13 }
.grid_oneSixth { grid-column: 1/13 }
.grid_oneThird { grid-column: 1/13 }
.grid_oneFourth { grid-column: 1/13 }
.grid_twelfth { grid-column: 1/13 }
.content-headline {}
.content-text {}
.content-download {}
.content-image img, .images-content { max-width: 100%; height: auto }
.download-element { list-style-type: none }
.download-element a:not([class]) { display: inline-flex; text-underline-offset: 0.4em }
.download-element a::before { margin-right: 0.5rem; width: 1.5rem; height: 1.5rem; background: transparent url("../../files/themes/dnw-2025/src/download-01.svg") center center no-repeat; content: "" }
.download-element span { display: inline-flex; font-size: 75%; align-items: center }
.content-table {}
.content-accordion {}
.content-gallery ul { list-style-type: none }

/* news */
#newslist { grid-column: 2/12 }
.mod_newslist { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px }
.mod_newslist div {  }
.mod_newslist p.info, #main .mod_newslist p.info { margin-bottom: 0.5rem }
.image_container { width: 100%; height: auto }
.image_container img { max-width: 100%; height: auto }
.news_latest a, .news_short a { text-decoration: none; text-underline-offset: 0.2em }
.news_latest a:focus, .news_short a:focus { outline: 0; color: var(--primary); background: none; padding: 0 }
.news_latest h2, .news_short h2 { text-decoration: none; text-underline-offset: 0.2em }
.news_latest:hover h2, .news_short:hover h2 { text-decoration: underline; text-underline-offset: 0.2em }
.news_latest a:focus h2, .news_short a:focus h2 { background: var(--focus); color: var(--bg) }
.newsList { grid-template-areas: 'firstNews' 'news_short'; grid-template-columns: 100% }
.newsList picture .images-content { max-width: 100% }
.news_short h2 { font-size: 100% }
.news_short.firstOne { grid-area: firstNews }
.news_short.firstOne h2 { font-size: 175% }
.newsList .fullWidth { border-top: 1px solid var(--primary) }
.newsList .fullWidth a { display: grid; grid-template-columns: 70% 30%; padding-top: 20px }

#footer .nav { background: var(--primary) }
#footer ul { grid-auto-flow: column; margin: 0 auto; padding: 1.5rem 0; display: grid; width: max-content }
#footer ul > li { margin: 0 0.5rem; padding: 0; list-style-type: none }
#footer a, #footer li.active { color: var(--bg) }

/* carousel start */
.carousel { margin: 0 auto; padding: 0 2rem; position: relative }

.carousel_controls { display: none; align-items: center; justify-content: space-between; position: absolute; top: 0; right: 0; left: 0; bottom: 0 }
.carousel_controls:first-of-type { justify-content: flex-end }
.carousel_controls:last-of-type { justify-content: flex-start }

.carousel_track { margin: 0; padding: 0 }

.carousel-content { border: 1px solid #000; border-radius: 3px; box-shadow: 5px 5px 10px; width: 100%; margin: 2rem 0; padding: 1rem }
.carousel-content figure { text-align: center }
.carousel-content figure img { clip-path: ellipse(30% 40% at 50% 50%); width: 90% }
.carousel-content figure figcaption { font-size: 0.9rem }

@media screen and (min-width: 800px) {
	.carousel_activator { display: inline }

	.carousel_screen { overflow: hidden; margin-left: -16px; margin-right: -16px }
	.carousel_track { transition: all 0.3s ease 0s; white-space: nowrap; -webkit-overflow-scrolling: touch }
	.carousel_item { display: inline-flex; padding-left: 16px; padding-right: 16px; vertical-align: top; white-space: normal }
	.carousel_item { width: 49.25% }

	.carousel_control { z-index: 1; cursor: pointer; display: flex; align-items: center; background-color: var(--bg); color: var(--primary); border-radius: 100%; box-shadow: 0 2px 10px 0 rgba(33, 34, 36, 0.3); font-size: 24px; height: 48px; justify-content: center; transition: 0.3s all; width: 48px }
	.carousel_activator:nth-of-type(1):checked ~ .carousel_controls:nth-of-type(1) { display: flex }
	.carousel_activator:nth-of-type(1):focus ~ .carousel_controls:nth-of-type(1) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(1):checked ~ .carousel_screen .carousel_track { transform: translateX(0%) }
	.carousel_activator:nth-of-type(2):checked ~ .carousel_controls:nth-of-type(2) { display: flex }
	.carousel_activator:nth-of-type(2):focus ~ .carousel_controls:nth-of-type(2) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(2):checked ~ .carousel_screen .carousel_track { transform: translateX(-100%) }
	.carousel_activator:nth-of-type(3):checked ~ .carousel_controls:nth-of-type(3) { display: flex }
	.carousel_activator:nth-of-type(3):focus ~ .carousel_controls:nth-of-type(3) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(3):checked ~ .carousel_screen .carousel_track { transform: translateX(-200%) }
	.carousel_activator:nth-of-type(4):checked ~ .carousel_controls:nth-of-type(4) { display: flex }
	.carousel_activator:nth-of-type(4):focus ~ .carousel_controls:nth-of-type(4) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(4):checked ~ .carousel_screen .carousel_track { transform: translateX(-300%) }
	.carousel_activator:nth-of-type(5):checked ~ .carousel_controls:nth-of-type(5) { display: flex }
	.carousel_activator:nth-of-type(5):focus ~ .carousel_controls:nth-of-type(5) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(5):checked ~ .carousel_screen .carousel_track { transform: translateX(-400%) }
	.carousel_activator:nth-of-type(6):checked ~ .carousel_controls:nth-of-type(6) { display: flex }
	.carousel_activator:nth-of-type(6):focus ~ .carousel_controls:nth-of-type(6) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(6):checked ~ .carousel_screen .carousel_track { transform: translateX(-500%) }
	.carousel_activator:nth-of-type(7):checked ~ .carousel_controls:nth-of-type(7) { display: flex }
	.carousel_activator:nth-of-type(7):focus ~ .carousel_controls:nth-of-type(7) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(7):checked ~ .carousel_screen .carousel_track { transform: translateX(-600%) }
	.carousel_activator:nth-of-type(8):checked ~ .carousel_controls:nth-of-type(8) { display: flex }
	.carousel_activator:nth-of-type(7):focus ~ .carousel_controls:nth-of-type(8) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(8):checked ~ .carousel_screen .carousel_track { transform: translateX(-700%) }
	.carousel_activator:nth-of-type(9):checked ~ .carousel_controls:nth-of-type(9) { display: flex }
	.carousel_activator:nth-of-type(9):focus ~ .carousel_controls:nth-of-type(9) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(9):checked ~ .carousel_screen .carousel_track { transform: translateX(-800%) }
	.carousel_activator:nth-of-type(10):checked ~ .carousel_controls:nth-of-type(10) { display: flex }
	.carousel_activator:nth-of-type(10):focus ~ .carousel_controls:nth-of-type(10) .carousel_control { background-color: var(--focus); color: var(--bg) }
	.carousel_activator:nth-of-type(10):checked ~ .carousel_screen .carousel_track { transform: translateX(-900%) }
	.carousel_control:focus { background-color: var(--focus); color: var(--bg) }
	.carousel_control:hover { background-color: var(--primary) !important; color: var(--bg) }
}

@media screen and (min-width: 960px) {
	.carousel { min-width: 900px; max-width: 1236px }
	#carousel-slide-activator-3, .carousel_control--forward[for="carousel-slide-activator-3"] { display: none }
	.carousel_item { width: 32.5% }
}
/* carousel end */

@media (min-width: 480px) {
}

@media (min-width: 600px) {
	.newsList { grid-template-areas: 'firstNews firstNews' 'news_short news_short'; grid-template-columns: 50% }
	.newsList .fullWidth { grid-column: 1/span 2 }
}

@media (min-width: 768px) {
	.noscript div p { width: 60%; margin: 0 auto }
	.images-content { max-width: 50% }
	#newslist .mod_newslist { grid-template-columns: repeat(2, 1fr) }

}

@media (min-width: 960px) {
	#header { grid-column: 1 / 13 }
	#container { grid-column: 2 / 12 }
	#main { /*display: grid; gap: 20px; */width: 100%; grid-template-columns: repeat(12, 1fr) }
	.grid_full { grid-column: span 12 }
	.grid_half { grid-column: span 6 }
	.grid_oneThird { grid-column: span 4 }
	.grid_oneFourth { grid-column: span 3 }
	.grid_oneSixth { grid-column: span 2 }
	.grid_twelfth { grid-column: span 1 }
	.images-content { max-width: 400px }
	#newslist .mod_newslist { grid-template-columns: repeat(3, 1fr) }
	.news_latest .images-content { max-width: 100% }
	.newsList { grid-template-areas: 'firstNews firstNews firstNews news_short' 'firstNews firstNews firstNews news_short' }
	.newsList .fullWidth { grid-column: 1/ span 4 }
 	#footer { grid-column: 1 / 13 }
}

@media (min-width: 1200px) {
	#container, #newslist { width: 1000px; margin: 0 auto }
	.newsList { grid-template-areas: 'firstNews firstNews firstNews firstNews news_short' 'firstNews firstNews firstNews firstNews news_short' 'firstNews firstNews firstNews firstNews news_short' }
	.newsList .fullWidth { grid-column: 1/span 5 }
}

/* all animations */
@media (prefers-reduced-motion: no-preference) {
}