:root {
--bg: #005624;
--brand: #009440;
--gelb: #FFEB00;
--text: #005624;
--pink: #FF3A9D;
--pink2: #940056;
--akzent: #FFEB00;
--bg1: #F2F2F2;
--bg2: #F8F8F8;
--bg3: #E6E6E6;
--bg4: #B9B9B9;
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/source-sans-3-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/source-sans-3-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	box-sizing: border-box;
	font-family: "Source Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    color: var(--text);
    scroll-behavior: smooth;
    word-wrap: break-word;
    hyphens: auto;

}
html,
body {
	height: 100%; 
	margin: 0;
	color: var(--text);
	background-color: var(--bg);
}
body {
	background: url(bilder/map4.svg) top center / 100vh no-repeat fixed padding-box var(--bg);
}
@media (min-width: 35em) {
body {
	background: url(bilder/map4.svg) top right / 100vw no-repeat fixed padding-box var(--bg);
}}

*, *:before, *:after {box-sizing: border-box;}
ul {margin: 0; padding: 0;list-style: none;}
ul {margin: 0 0 20px 0;}
article ul {list-style: inside '✓'; font-size: 1.2rem;}
article ul li::marker  {
	color: var(--pink2);
}
.impressum ul {list-style:none;}
.impressum ul ul {list-style:'-'; padding:0 1.2rem;}
.impressum ul li {color: var(--text);}

/**fonts**/
p {font-size: 1.2rem; color: #555; margin: 0.2rem 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat';margin: 0;}
h2 {font-weight: 500; font-size: 2rem;color: var(--akzent);}
h3 {font-weight: 800;font-size: 1.5rem;}
h4 {font-size: 1rem;}
h2#leistungen, h2#ablauf, h2#uns {
	text-align:center;
	margin: 3rem;
}
.voll h2 {color: var(--gelb);hyphens: initial;}
a:link {
  color: var(--akzent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease-out 0s;
}
a:link {color: var(--pink2);}
a:visited {color: var(--pink2);}
a:hover {color: var(--pink);}
a:active {color: var(--pink);}
a[href^="mailto:"] {word-break: break-all;}
img {max-width: 100%; width: 100%;}
.buttons {font-size: 1.1rem;color: var(--akzent);}
ul.buttons {
	max-width: 100%;
	gap: 1rem;
	flex-wrap: wrap;
	min-width: fit-content;
}
@media (min-width: 35em) {
   ul.buttons { flex-wrap:nowrap;}}
ul.buttons li {
	display: grid;
	grid-template-columns: max-content 1fr;
	padding: 1rem;
	flex-grow: 1;
	gap: 0.4rem;
	align-items: center;
	background: var(--brand);
	font-weight: 900;
  text-transform: uppercase;
}
.buttons svg {
    fill: var(--akzent);
    height: 2rem;
    padding-right: 1rem;
}
.buttons a:link {color: var(--akzent);}
.buttons a:visited {color: var(--akzent);}
.buttons a:hover {color: var(--bg2);}
main {padding-top: 7rem;}

.display {
	height: 90vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.centerblock {
	display: flex;
	margin: 0 auto 2rem auto;
}

@media (min-width: 35em) {
	.centerblock {width: 60%;}}

.voll {
		margin: 0 1rem 4rem 1rem;
}
.display .voll h2{
	font-size: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}
.fixed {position: fixed;}
footer {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1.2rem 2rem;
	margin-top: 3rem;
	color: var(--pink2);
	background-color: var(--bg3);
	font-family: 'Montserrat';
	font-weight: 500;
}
footer div:nth-child(1) {color: var(--brand);}
footer a {color: var(--pink2);}
/*.map {
		width: 100vw;
		height: 100%;
		position: fixed;

}*/
#alles {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	width: 100%;
	max-width: 66rem;
	margin: 0 auto;
}
.grid {
	display: flex;
	flex-wrap: wrap;
}
article {
	gap: 1rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-basis: 10rem;
	min-width: 18rem;
	padding: 2rem;
}
article:nth-child(4n+1) {
	background-color:#fff; 
}
article:nth-child(4n+2) {
	background-color:var(--bg1); 
}
article:nth-child(4n+3) {
	background-color:var(--bg2);  
}
article:nth-child(4n+4) {
	background-color:var(--bg3); 
}
.grid h2 {width: 100%}

.dreier article section {
	display: grid;
	grid-template-rows: 0.3fr 1fr 1fr;
}
.dreier img {max-height: 250px;}
/** nav **/
nav {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;

}

@media (min-width: 35em) {
   nav { flex-wrap:nowrap;}}

nav div {
	max-width: 100%;
	display: inline-flex;
	margin: 0;
	background: var(--bg3);
}

nav a:link {
	font-weight: 900;
  text-transform: uppercase;
  background: var(--bg3);
	height: 5vh;
	padding: 0.6rem;
	display: flex;
	justify-content: center;
	width: 9rem;
	align-items: center;
}

.akzent {
	background: var(--pink2);
	color: #fff;
}

.logo {
	/*width: 60vw;*/
	margin: 0 auto;
}
@media (min-width: 35em) {
	.logo {width: 33rem;}}


/** details **/
details { 
/*	border-top:solid 2px;
	width: 30vw;*/
}

.center {
	display: flex;
  justify-content: center;
  padding: 2rem 0;
  aspect-ratio: 1/1;
}
summary {
	list-style: none;
	display: flex;
  gap: 1rem;
}

summary::before {
	content: "+ ";
	font-size: 1.2em;
	transition: transform 0.2s;
}

details[open] summary::before {
	content: "- ";
}
:root {
	interpolate-size: allow-keywords;
}

.accordion details {
	transition: height 0.5s ease;
}

.accordion details[open] {
	height: auto;
	/** height: 270px;  **/
}

::details-content {
	opacity: 0;
	transition: opacity 1000ms, content-visibility 600ms allow-discrete;
}
details[open]::details-content {
	opacity: 1;
}