@font-face {
	font-family: "Compacta-Online";
	src:	url("../data/fonts/unicode.compacta.woff"),
	url("../data/fonts/unicode.compacta.woff2"),
	url("../data/fonts/unicode.compacta.otf"),
	url("../data/fonts/unicode.compacta.ttf");
	font-display: fallback;
}

@font-face {
	font-family: "FreeSans-Online";
	src: local("FreeSans"),
	url("../data/fonts/FreeSans.woff"),
	url("../data/fonts/FreeSans.woff2"),
	url("../data/fonts/FreeSans.otf");
}
@font-face {
	font-family: "FreeSansBold-Online";
	src:  local("FreeSans"),
	url("../data/fonts/FreeSansBold.woff"),
	url("../data/fonts/FreeSansBold.otf"),
	url("../data/fonts/FreeSansBold.woff2");
}
body {
	font-family: FreeSans-Online;
	line-height: 1.5;
	background-color: #cfcfcf;
	font-size: 12pt;
}

#banner {
	background-color: black;
	color: white;
	padding: 5mm;
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	margin: -5mm;

}
#banner a:visited {
	fill: #a7a7a7;
}
#banner svg a {
	fill:#a7a7a7;
	font-size:4.47px;
	letter-spacing:0px;
	line-height:0.85;
	stroke-width:.451
}
#banner svg a:active,#banner svg a:hover, #banner svg a:focus {
	fill: red;
}
#banner svg path {
	fill:#a7a7a7;
}
#banner-logo-telegram {
	stroke-width:.00602
}
#banner-logo-mail {
	stroke-width:.0634;
}
#banner-logo-instagram {
	stroke-width:.079;
}
#banner-initiative-title {
	font-family:'Compacta-Online', Compacta, 'sans';
	font-size:14.7px;
	letter-spacing:0px;
	line-height:1;
	stroke-width:.239;
	fill: #ffffff;
	text-anchor: end;
}
#banner-initiative-2mai {
	font-size:31.9px;
}
nav {
	position: sticky;
	top: 0;
	background-color: black;
	color: white;
	padding: 5mm;
	margin: -5mm;
	width: 100%;
	z-index: 100;
}
nav a {
	color: white;
	padding: 5mm;
	margin-bottom: 5mm;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 250%;
}
nav a:hover, nav a:focus, nav a:active {
	background-color: red;
	border-radius: 2px;
}
nav ul {
list-style-type: none!important;
margin: 0px!important;
padding:0px!important;
}
nav li {
display: inline-block;
margin: 0px!important;
padding:0px!important;
}
a {
	break-inside: avoid;
}
#content {
	background-color: #cfcfcf;
	width: 98%;
	height: 100%;
	margin: auto;
	position: relative;
	bottom: 0px;
	margin-top: 5%;
	overflow:clip;
}
article, .article-preview, .article {

	background-color: #f4f4f4;
	padding: 1mm;
	margin: 5mm;
	clear: both;
	hyphens: auto;
	display: block;
}
.article-preview {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.article-preview img {
	display: inline-block;
}
.weiterlesen {
  display: block;
  margin-top: 20px;
  font-size: 140%;
  border-left: 2px solid black;
  padding-left: 5px;
  color: black;
  text-decoration: none;
  width: fit-content;
  padding-top: 0;
  padding-bottom: 0;
}
.weiterlesen:hover, .weiterlesen:active, .weiterlesen:focus {
color: red;
border-left: 2px solid red;

}
.info {
	display: flex;
	flex: 1 0 0;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	hyphens: auto;
}

.info .infosection {
	background-color: #fdfdfd;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
	padding: 20px;
	display: grid;
	grid-template-rows: minmax(auto, 10%) auto 20px;
	flex: 0 0 25vw;
}
.akachel {
	color:black;
	text-decoration:none;
}
.akachel:hover, .akachel:active, .akachel:focus {
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
}
.info .infosection * {
	display: block;
	margin-bottom: 10px;
	margin-top: auto;
	min-height: max-content;
}
.infosection header {
	margin-top: 0!important;

}

.infosection h2 {
	font-size: 14pt;
	display: inline-flex!important;
	flex-direction: row;
	flex-wrap: wrap;
}

.infosection img {
	margin-top: 0!important;
	max-height: 20vh;
}
.linkDIV {
	display:flex;
	clear: both;
	gap: 1vw;
	justify-content: space-between;
	flex-wrap: wrap;


	hyphens: auto;
	margin:5mm;
}

.linkDIV h2 {
	font-size:14pt;
}
.linkDIV h3 {
	font-size:12pt;
}

.linksection {
	display: flex;
	background-color: #fdfdfd;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
	gap: 10px;
	flex: 1 0 25vw;
	color: black;
	text-decoration: none;
	min-height:150px;
	padding:5px;
}

.linksection img {
	max-width: 10vw;
	margin-top: auto;
	margin-bottom: auto;
}
.linktextpart {
	display: grid;
	width: 100%;
	align-items: stretch;
	height: 100%;
}
.linktextpart * {
	padding: 0;
	margin: 0;
}

.linktextpart .denominator, #alleartikel{
	margin-top: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.linkDIV .linksection:first-of-type .denominator {
	display: block;
	margin-right: auto;
	margin-left: 0;
}
.linkDIV .linksection:last-of-type .denominator {
	display: block;
	margin-right: 0;
	margin-left: auto;
}

p {
	break-inside: avoid-page;
}

img, video {
	max-width: 100%;
	height: auto;
	object-position: center bottom;
	object-fit: contain;
	display: block;
		max-height: 70vh;/*
	width: auto;*/
}

h1, h2, h3, h4, h5, h6 {
	font-family: FreeSansBold-Online;
	word-wrap: break-word;
}
h6 {
	font-size: 12pt;
}
h5 {
	font-size: 14pt;
}
h4 {
	font-size: 16pt;
}
h3 {
	font-size: 18pt;
}
h2 {
	font-size: 20pt;
}
h1 {
	font-size: 22pt;
}
#banner h1 {
	font-weight: 200;
	margin: 0px;
	padding: 0px;
}

.img-preview {
	max-height: 60vh;
	margin-right: auto;
	margin-left: auto;
}
strong {
	font-family: FreeSansBold-Online;
	font-weight: 600;
}
.spelldigit {
speak-as: digits;
}
header strong + h2, header strong + h1 {
	margin-top: auto;
}
.modal {
	position:fixed;
	top:10px;
	margin-top:18px;
	z-index: 101;
	font-size: 14pt;
}
#spendenbutton ~ #Spendenkonto,#spendenbutton, #spendenbutton + label {
	overflow:clip;
	overflow-wrap: break-word;
	padding: 10px;
	margin-left: -7px;
	background-color: #000000;
	color: white;
	width: 100%;
}
#spendenbutton:checked + label {
	text-align: right;
	font-size: 15pt;
	height: max-content;
	text-shadow: 1px 1px 1px #8a8a8a;
	border-top: solid 1px #fafaf0;
}
#spendenbutton, #spendenbutton:checked ~ #Spendenkonto {

	display: none;
	height: max-content;
	margin-top: -12px;
	box-shadow: 5px 5px 5px grey;
}

#spendenbutton:checked ~ #Spendenkonto, #spendenbutton:checked + label {
	display:block;
}
.akkordeon, details {
	border: solid 1px #cfcfff;
	max-width: 1080px;
	margin-bottom: 5mm;
}
.akkordeon input[type=checkbox] {
	display:none;
}

.akkordeon input[type='checkbox'] ~ .balg {
	display:none;
	height: 0px;
	transition: all 500ms;
}
.akkordeon input[type='checkbox']:checked ~ .balg{
	display:block;
	height: max-content;
	transition: all 500ms;
}

.balg section, .akkordeon label, summary, details section {
	border-bottom: solid 1px #cfcfff;
}
.akkordeon label {
	display:block;
}
.akkordeon label *, summary * {
	display: inline-block;
	max-width: 90%;
}
.akkordeon input[type='checkbox'] + label::after, summary::after{
	content: "+";
	float: right;
	font-size: 350%;
}
.akkordeon input[type='checkbox']:checked + label::after, details[open] summary::after {
	content: "-";
}
summary::marker {
	content: "";

}
.float {
	float: left;
	max-width: 40vw;
}
.audioTag {
	float:left;
	padding: 5mm;
	max-width: 100%;
}
.floatblock + div {
	clear: both;
}
audio, input, textarea {
	width: 400px;
	max-width: 98%;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="date"] {
    display: block;
    margin-bottom: 0.5cm;
  }
input[type='checkbox'], input[type='radio'] {
	width: min-content;
}
textarea {
	height: max-content;
}
.audioTag .akkordeon, .audioTag details {
	border: none;
	max-width: 400px;
	margin-bottom: 5mm;
}
.audioTag .akkordeon input[type=checkbox] {
	display:none;
}

.audioTag .akkordeon input[type='checkbox'] ~ .balg {
	display:none;
	height: 0px;
}
.audioTag .akkordeon input[type='checkbox']:checked ~ .balg{
	display:block;
	height: max-content;
}

.audioTag .balg section, .audioTag .akkordeon label, .audioTag summary, .AudioTag details section {
	border-bottom: none;
}
.audioTag .akkordeon input[type='checkbox'] + label::after, .audioTag summary::after{
	font-size: 14pt;
	position: relative;
	top: 25px;

}

.floatBlock {
	clear: both;
}

#Spendenanzeige {
	border: none;
	width: 100%;
	height: 150px;
}


.Artikeltext {
	max-width:1080px;
}
#Spenden header, .Artikeltext{
	max-width: 100%;
	width: 1080px;
	margin-left: auto;
	margin-right: auto;
} 
.ausstellungsText {
	width:1080px;
	max-width: 100%;
	text-align:justify;
}
#meterbar, .meterbar {
	display: grid;

}
meter {
	max-width: 100%;
	width: 100%;
	grid-row: 1;
	grid-column: 1/span 3;
}

#nullwert, .nullwert {
	grid-row: 2;
	grid-column: 1;
}
#stand, .stand {
	grid-row: 2;
	grid-column: 2;
	text-align: center;
	justify-content: center;
}
#zielwert, .zielwert {
	grid-row: 2;
	grid-column: 3;
	text-align: right;
	justify-content: right;
}
#status, .status {
	grid-row: 4;
	grid-column: 1/span 3;
	text-align: left;
	justify-content: left;
	color: red;
}
.description {
	grid-row: 3;
	grid-column: 1/span 2;
	text-align: left;
	justify-content: left;
	margin-top: 10px;
}
#linkcontainer, .linkcontainer {
	grid-row: 3;
	grid-column: 3;
	justify-self: right;


}
#linkcontainer img, .linkcontainer img{
	display:block;
	width: 156px;
}
#link, .link {
	display:block;
	background-color: #9ecb0a;
	background-image: linear-gradient(#8bb309,#6f8e07);
	border-radius: 6px;
	font-size: 18px;
	padding: 8px 20px;
	color: white;
	text-decoration: none;
	text-shadow: 1px 1px 0 #357c00;
	font-weight: 600;
	line-height: 1.42;
	box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,.2),0 1px 2px 0 rgba(0,0,0,.047);
	text-align: center;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-top: 10px;
	width: 156px;

}

.autoText {
	white-space: pre-wrap;
}
.gallery {
	width: fit-content;
	overflow: hidden;
	white-space: nowrap;
	max-width: 99%;
	scroll-behavior: smooth;
}
.gallery figure, .gallery .figure {
	position: relative;;
	display: inline-block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.gallery figure img, .gallery .figure img {	
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-height: 70vh;
	margin-top: 90px;
}
.gallery  figure .markleft, .gallery  figure .markright, .gallery  .figure .markleft, .gallery  .figure .markright {
	font-size: 4vw;
	display: inline-block;
	width: 5vw;
	height: 5vw;
	color: darkgrey;
	text-align: center;
	vertical-align: middle;
	line-height: 5vw;
	background-color: grey;
	text-decoration: none;
	opacity: 50%;
	position: absolute;
	top: 47%;
	scroll-behavior: unset;
	z-index: 200;
}
.gallery  figure .gallerymark-container .markleft, .gallery  figure .gallerymark-container  .markright, .gallery  .figure .gallerymark-container .markleft, .gallery  .figure .gallerymark-container  .markright {
	position: unset;
	top: unset;
	margin-left: 0;
}
.gallerymark-container {
	display: flex;
	justify-content: space-between;
}
.gallery  figure .markleft:hover, .gallery  figure .markright:hover, .gallery  .figure .markleft:hover, .gallery  .figure .markright:hover  {
	opacity: 100%;
}
.gallery figure .markleft, .gallery .figure .markleft {
	margin-left: 1vw;
}
.gallery figure .markright,.gallery .figure .markright  {
	right: 1vw;
}
.gallery figure figcaption {
	white-space: normal;
	max-width: 1920px;
	width: 100%;
	display:block;
	position:relative;
	margin-left: auto;
	margin-right: auto;
}

.dramacontainer {
	height: fit-content;
	display:grid;
	grid-gap: 5mm;
	justify-content: left;
	grid-template-columns: auto auto;
}
.dramacontainer p:nth-child(odd) {
	height: 100%;
}
.printonly, .nostyle {
	display: none;
}
#Offener-Brief-zur-Abwahl-von-Zahra-Alibabanezhad-Salem-als-Migrationsbeirätin ul, ul.noliststyle {
list-style: none;
}
#Offener-Brief-zur-Abwahl-von-Zahra-Alibabanezhad-Salem-als-Migrationsbeirätin ul li {
margin-bottom: 2rem;
}
#emailhinzufügen table * {
border: solid 1px black;
}
@media screen and (width <= 900px), screen and (orientation: portrait) {
	#banner svg {
		display: none;
	}
	#banner {
		position: fixed;
		top: 15px;
		left: 19px;

		background-image: url("img/logo.svg");
		width: 60px;
		height: 60px;
		padding: 0;
		background-size:cover;
		background-position: center;
		z-index: 100;
	}
	nav {
		margin-left:50px;
		position: fixed;
		height: 37px;
		padding: 5mm;
	}
	nav * {
		display: none;
		background-color: black;

	}
	nav::before {
		content: url("img/stripe.svg");
		text-align: right;
		position: fixed;
		right: 15px;
		top: 15px;
		width: 45px;
		height: 45px;
	}
	nav:focus, nav:hover, nav:active {
		z-index: 102;
		text-align: right;
		right: 0px;
		max-width: 90%;
		height: 100%;
		overflow:auto;
		position: fixed
		;
	}
	nav:focus::before, nav:hover::before, nav:active::before {
		content: "";
	}
	header {
		max-width: 100%;
		word-wrap: break-word;
	}
	nav:focus *, nav:hover *, nav:active * {
		visibility: visible;
		display: block;
	}
	#content {
		margin-top: 70px;
	}
	.info {
		grid-template-columns: 49% 49% ;
	}
	audio, input {
		max-width: 98%;
	}
	.audioTag {
		padding: 0;
	}

	.description {
		grid-row: 3;
		grid-column: 1/span 3;
	}

	#linkcontainer, .linkcontainer {
		grid-row: 4;
		grid-column: 3;
	}
	.infosection {
		flex: 0 0 38vw!important;
	}
	.linksection {
		flex-direction: column;
		flex: 1;
		justify-content: end;
	}
	.linksection img {
		width: 100%;
		max-width: 100%;
	}
	.linktextpart {

	}
}
@media screen and (width <= 600px) {
	.info .infosection {
		flex: 1 0 80vw;
		min-width: 75vw;
		max-width: 80vw;
	}
}
@media screen and (width <= 450px) {
	.linkDIV {
		flex-direction: column;
		row-gap: 10px;

	}
	.linksection {
		width: 80vw;
		max-width: 80vw;
		flex: 1 1 auto;
		min-height: 100px;
	}
	.linktextpart {
		min-height: 98px;
	}
}
@media screen and (width<250px) {
	nav a {
		/*font-size: 50%;*/
	}

	nav:focus , nav:hover , nav:active  {
		margin-left: 0px;
		width: 100%;
	}
	nav:focus *, nav:hover *, nav:active * {
		width: 100%;
	}
	.dramacontainer {
		grid-template-columns: auto;
	}

	.dramacontainer p:nth-child(odd) {
		margin-bottom: -20px;
	}

}
@media print {

	nav, #banner, .linkDIV {
		display: none;
	}

	body, #content, #banner {
		background-color: #ffffff;
	}

	article, p, details, .keeptogether, .audioTag, .article-preview, .infosection {

		background-color: #ffffff;
		break-inside: avoid;
		break-after: auto;
		widows: 4;
		orphans: 4;
	}
	h1,h2,h3, h4, h5, h6 {
		break-before: auto;
		break-inside: avoid;
		break-after: avoid;
	}
	.infosection {
		flex: 0 1 40%!important;
	}
	h3 + *, h4 + *, h5 + *, h6 + * {
		break-before: avoid;
		break-inside: avoid;
	}
	details {
		display:none;
	}
	details[open], details section, summary {
		border: none;
		border-bottom:none;
		display:block;
		break-inside: avoid;
	}
	summary::after {
		display: none;
	}
	audio {
		display: none;
	}
	audio + details summary {
		display: none;
	}
	.audioTag {
		float: none;
		clear:both;
	}
	input {
		border: none;
		border-bottom: solid 1px black;
	}
	input[type=submit], input[type=reset] {
		display: none;
	}
	.footnotes {
		display: block;
		position: static;
		bottom: 5mm;
	}
	img, figure, ul, ol, .figure {
		break-inside: avoid;
		break-after: auto;
		break-before: auto;
	}
	.gallery figure, .gallery .figure  {
		margin-top: 1cm;
	}
	.gallery  figure .markleft, .gallery  figure .markright ,.gallery  .figure .markleft, .gallery  .figure .markright {
		display: none;
	}
	.gallery {
		width: 100%;
		height: fit-content;
		overflow-y: visible;
		break-after: always;
	}
	.gallery figure, .gallery .figure {
		display: block;
		break-inside: avoid;
		width: 100%;
		margin-top: 5mm;
		margin-bottom: auto;
	}
.gallery figure img , .gallery .figure img {
		width: 100%;
	}
	.printonly {
		display: inherit;
	}
	.screenonly {
		display: none;
}}