/*
em - width of a capital 'M', thus 'em'
rem - width of a capital 'M' in root element
ch - width of the number '0' in the font
 */

/* Color-Palette von https://realtimecolors.com/?colors=040301-f7f1de-172a63-f0e5c1-172a63 */
:root{
	--color-text: 	rgb(4,3,1);					/* Text */
	--color-secondary-text: rgb(234, 232, 225);	/* Text im Header, Footer, auf Buttons */
	--color-surface: 	rgba(66, 135, 2, .05);	/* Background, Text Color on Buttons */
	--color-accent: 	rgba(66, 135, 2, 1); 	/* Accent: h1, h2, Links, Marker */
	--color-accent-link-hover: 	rgb(58, 60, 29);	/* Links bei Hover */
	--color-primary-button: rgba(66, 135, 2, 1);	/* Background of primary Buttons, Background of Footer */
	--color-secondary-button: rgb(255, 255, 255);	/* Secondary Button, Background of Boxes, Headline of Tables */
	--color-accent-hover: 	rgba(38, 54, 101,.2);	/* Hover bei Tabellenzeilen */

	/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1800,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

	--font-size--2: clamp(0.63rem, calc(0.82rem + -0.17vw), 0.79rem);
	--font-size--1: clamp(0.84rem, calc(0.90rem + -0.05vw), 0.89rem);
	--font-size-0: clamp(1.00rem, calc(0.97rem + 0.14vw), 1.13rem);
	--font-size-1: clamp(1.13rem, calc(1.04rem + 0.40vw), 1.50rem);
	--font-size-2: clamp(1.27rem, calc(1.11rem + 0.79vw), 2.00rem);
	--font-size-3: clamp(1.42rem, calc(1.16rem + 1.34vw), 2.66rem);
	--font-size-4: clamp(1.60rem, calc(1.18rem + 2.11vw), 3.55rem);
	--font-size-5: clamp(1.80rem, calc(1.17rem + 3.17vw), 4.74rem);
}
@font-face {
	font-family: 'Open Sans';
	src: url("../fonts/Open_Sans/OpenSans-Light.ttf");
}
@font-face {
	font-family: 'OpenSansBold';
	src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");
}
@font-face {
	font-family: "RonySiswadi Architect 2";
	src: url("../fonts/RonySiswadi_Architect_2.ttf");
  }
  *, *:after, *:before { box-sizing: border-box; } /* include the padding and border in an element's total width and height. */
html{ 
	scroll-behavior: smooth; /* weiches Scrollen innerhalb einer Seite */
	/* color-scheme: light dark; je nach PC-Einstellungen wird das helle oder dunkle (Dark-Mode) Farb-Schema übernommen. Der Dark-Mode versaut mir aber die Farben, deshalb rausgenommen - 16.06.23 FD */
}
body{
    position:relative; /* wegen des absolut positionierten Modal-Fensters */
	margin:0;
    font: normal 110%/1.2 'system-ui', sans-serif; /* font-weight font-size/line-height font-family */
	color:var(--color-text);
	background: var(--color-surface); 
}
h1, h2, h3, h4, h5 {
	font-family: 'system-ui';
	font-weight: normal;
	text-wrap: balance; /* bricht den Text so um, dass nicht einzelne Wörter in Zeile stehen */
}
h1, h2 {
	color:var(--color-accent); 
	font-family: "RonySiswadi Architect 2", system-ui;
	font-weight: 300;
}
h3, h4, h5 {
	color:var(--color-text);
	font-weight: normal;
}
h1 { font: 2.0rem "RonySiswadi Architect 2", system-ui; 
	letter-spacing: .2rem;
	margin:1.5rem 0 2.5rem 0;
	font-style: normal;
	font-weight: normal;
}
h2 { font-size: 1.6rem;  margin:2rem 0 .5rem 0; font-weight: normal; }
h3 { font-size: var(--font-size-1);}
h4 { font-size: var(--font-size-0); }	
h5 { font-size: var(--font-size-0); }
@media only screen and (min-width: 1040px) { 
	h1 { font-size:2.8rem; }
}
a { 
	color:var(--color-accent);
	text-decoration:none; 
	font-weight: 500;
}
a:hover { text-decoration:underline; color:var(--color-accent-link-hover);}
em { font-style: normal; font-weight: 500; letter-spacing: .2rem; }
img, svg, video { max-width:100%; height:auto !important;} /* damit die Bilder, die im CKEditor Breite + Höhe bekommen, trotzdem auf Smartphones richtig gestaucht werden. */
audio { 
	display:block;
	width:80%;
	margin:0 auto;
}
/* automaisch pdf-icon vor einem Link setzen, wenn Link auf PDF-Datei zeigt. */
/* auf Bitten von Horst Augustin rausgenommen - 17.05.2024 FD */
/* a[href$=".pdf"] {
	background: rgba(40,126,80,.08) url(/bootstrap-icons/file-pdf.svg) no-repeat;
	background-size: 1.5rem;
	background-position: .4rem center;
	padding: .7rem .5rem .7rem 2.2rem;
	border-bottom: none !important;
  } */
figcaption { 
	font-style: italic;
	font-size:90%;
}
button {
	color:var(--color-secondary-text);
	background:var(--color-primary-button);
	padding: 0.5rem;	
	margin:0;
	border: 1px solid rgba(0,0,0,.4);
	border-radius: 3px;	
}
button:hover { cursor:pointer;}
#film-button button {
	border:none;
	color:var(--color-surface); 
	background:transparent;
	margin:1rem 0 0 0; padding:.8rem 1.2rem;
}
#film-button button i {
	font-size: 4.5rem;
	vertical-align: -.2rem;
	width:4rem;
}

.right { text-align: right;}
.bi { display:inline-block; width:1.6rem; } /* für Bootstrap-Icons */

/* --------------- Meldungen vom System---------------  */
.red-warning {color:red; background-color:#FFC4C4; border: 1px dotted red; padding:4px;}
.yellow-warning {color:#bb8a02; background-color:#FEE99E; border: 1px dotted #bb8a02; padding:4px;}
.green-warning {color:#007700; background-color:#BDF2D9; border: 1px dotted #007700; padding:4px;}

/* --------------- Listen --------------- */
li { 
	padding-left:.8rem; /* Abstand zwischen Aufzählungszeichen und Inhalt */
	margin:1rem 0 .6rem 0;
}
::marker { color: var(--color-accent); } /* die Listenpunkte einfärben */

/* --------------- Tabellen --------------- */
table { max-width:100%; border-spacing: .2rem; overflow-x: auto; } /* Lücken zwischen den Zellen */
td, th {padding:.4rem; vertical-align: top; }
th { 
	color: var(--color-surface);
	background-color: var(--color-accent);
	text-align:left; font-weight: normal; 
	cursor:pointer; /* anklickbar wegen der Sortierfunktion in main.js */
}
tr:nth-child(odd) { background-color: var(--color-secondary-button); }
tr:nth-child(even) { background-color: var(--color-surface); }
tr:hover { color:var(--color-text); background:var(--color-accent-hover);}

.green { background: rgba(162, 255, 0, 0.4); }
.blue { background: rgba(0, 119, 255, 0.4); }
.yellow { background: rgba(255, 234, 0, 0.4); }
.red { background: rgba(255, 47, 0, 0.4); }

/* -------------- Lauftext -------------- */
.marquee {
	/* position:absolute;
	top:1rem; left:1rem; right:1rem; */
	margin:0; padding:.2rem;
	max-width: 100vw; /* iOS braucht das */
	white-space: nowrap;
	overflow: hidden;
	font-size:1.2rem;
	font-weight: bold;
	background:rgba(255,255,255,.8);
}
.marquee span {
	color: rgb(178,95,0);
	display: inline-block;
	padding-left: 100%;
	animation: marquee 30s linear infinite;
}
/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.marquee span:hover {
	animation-play-state: paused 
}
/* Make it move */
@keyframes marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* -------------- header ------------------ */
header {
    height: 60vh; 
    position:relative;
	margin:0;
}
header, header * { color:var(--color-secondary-text); }
header * { padding: 0; margin: 0; }
header section { /* Titeltext  */
	position:absolute;
	bottom:10%; left:min(3.5%,300px);
	margin:0; padding:0;
	text-shadow: 3px 3px 9px rgba(0,0,0,.5);
	animation:fadein 2s normal forwards;
}
header h1{
	font:min(10vw,5.5rem)/115% "RonySiswadi Architect 2", system-ui;
	letter-spacing: .0rem;
	margin:0;
}
header h1 span {
  color: rgb(80, 165, 0);
}
@keyframes fadein {
    from { transform: translateX(-60px); color:rgba(255,255,255,0); }
    to   { transform: translateX(0px); color:rgba(255,255,255,1); }
}
header p { font-size:min(5vw, 140%); }
header .logo{
	width:min(24%,290px); height:auto;
	position:absolute;
	bottom:14%;
	left:10%;
	margin:0; padding:0;
}
header .logo img{
	width:100%;
	padding:0; margin:0rem;
}
header #pfeil *{
    position:absolute;
	bottom:0; left:48.8%;
	display:none;
	margin:0 0 1rem 0;
	font-size:2.5vw;
}
/* @media only screen and (min-width: 960px) { 
	header #pfeil *{ display:inline-block; }
} */
/* -------------- slideshow ------------------ */
/* frei nach https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
03.05.2023 FD, dazu gehört 'slideshow.js' */
#slideshow { 
    margin: 0; 
    position: relative; 
    width: 100%; 
    height: 100%;
    padding: 0; 
    background: rgba(200,200,200,0.5);
    z-index: -1;
  }
#slideshow > li { 
    position: absolute;
    width:100%; height:100%;
    background-size: cover;
	background-position: center center;
}
#slideshow > li > p { /* Angaben zu den Bildern */
    position: absolute;
    font-size:1rem;
    bottom:0; right:0;
    margin:.5rem;
}
/* -------------- main ------------------ */
main {
	width:min(100% - 2rem, 120ch);
	padding:0.5rem;
	margin:.5rem auto;
	/* background:rgba(255,255,255,0.8); */
}

/* Lange Texte werden in Spalten geteilt und damit deutlich einfacher lesbar (Zeitungsstil).
Dazu muss im CDEditor der Text in einen div-Container mit der Klasse .columns gesetzt werden. */
.columns { columns:1; }
.columns figure { margin:0; } /* hier sollen die Bilder die volle Spalten-Breite einnehmen */
.columns p { margin: 0 0 1rem 0; }
@media (min-width:80ch) { .columns { columns:2; margin:0 0 1rem 0; } }
@media (min-width:140ch) { .columns { columns:3; margin:0 0 1rem 0;} }

/* -------------- footer ------------------ */
footer {
	clear:both;
	background: linear-gradient( 180deg, rgba(66, 135, 2, 0.801) 0%, rgba(66, 135, 2, 1) 100%	);
	display:flex;
	flex-flow: wrap;
	gap:2rem;
	justify-content: space-around;
	margin:1rem 0 0 0; padding:2rem 0 0 0;
}
footer, footer h4, footer h5 { color:var(--color-secondary-text); }
footer h4, footer h5 { margin:0; }
footer a, footer a:hover { color: #fff; }
footer > * {
	margin:0; padding:0;
	/* white-space:nowrap; */
	font-size: 1rem;
	letter-spacing: .05rem;
}
footer ul {
	list-style: none;
	margin:0; padding:0;
	text-transform:uppercase;
}
footer li{ margin:0 0 .8rem 0; padding:0; }
footer .copyright {
	display:block; /* display:flex aufheben */
	width:98%;
	font-size:80%;
	text-align:center;
	margin:0; padding:.5rem;
	border-top:1px dotted var(--color-secondary-text);
}
footer.copyright > * { padding:0; }
footer address { font-style:normal; } /* address wird sonst kursiv dargestellt */

@media only screen and (min-width: 800px) {
	footer > * { border-top:none; }
}
@media only screen and (max-width: 1200px) {
	footer > * { flex:auto; }
}
/* --------------- Tabelle auf Seite "Unser Team"  --------------- */
.team2 {
	width:90%;
	background-color: rgba(255,255,255,1);
	margin:.7rem auto;
	padding:1rem 2rem;
	clear:both;
	border-radius:.5rem;
	box-shadow:3px 3px 5px 0px rgba(0,0,0,0.3);
}
.team2:after { /* damit das Bild immer in der Box bleibt */
  content: '';
  display: block;
  clear: both;
}
.team2 figure {
	width:80%;
	float:none !important;
	margin:.5rem auto;
}
@media only screen and (min-width: 800px) { 
	.team2 figure { width:25%; float:right !important; 	margin:1rem 0 .5rem .5rem; } 
}
/* --------------- Bildergalerie, Meldungen in Box wie Aktuelles  --------------- */
.gallery, .meldung_in_box {
	display: grid;
	gap:1rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	break-inside:avoid; /* damit die Bilder beim Wechsel der Spalte nicht zerschnitten werden. */
}
.gallery > *, .meldung_in_box > * {
	background:white;
	box-shadow:3px 3px 5px 0px rgba(0,0,0,0.5);
}
.gallery > * {
	aspect-ratio: calc(16/9);
}
.gallery > * figure {
	position:relative;
	width:100%; height:100%;
	margin:0; padding:0;
}
.gallery figcaption {
	position:absolute;
	width:100%; height:100%;
	display:grid; align-items: end; /* damit der Text unten steht */
	padding:.3rem .6rem;
	color:white;
    font: normal 80%/1.2 'system-ui'; /* font-weight font-size/line-height font-family */
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 30%);
}
/* --------------- Meldungen wie Aktuelles --------------- */
.meldung_in_box > *:hover {
	text-decoration: none;
}
.meldung_in_box > * figure{
	width:100%;
	height:15rem;
	padding:0; margin:0;
}
.meldung_in_box > * section { padding: 0 1rem 1rem 1rem; }
.meldung_in_box > * section p{ margin:0; padding:.6rem 0; }
.meldung_in_box > * section .date{ color:grey; margin:0; padding:.6rem 0; border-bottom: 1px dotted #c2c2c2;}
.meldung_in_box > * section .title{
	margin:0; padding:1rem 0; text-transform:uppercase; font-weight:bold; letter-spacing:.1rem; }
@media only screen and (min-width: 800px) { 
	.meldung_in_box article{ grid-template-columns: repeat(auto-fit, minmax(240px, 30%)); } 
}
.einzelmeldung_in_box {
	padding: 2rem;
	background: rgba(66, 135, 2, 0.2); /* Hintergrundfarbe auch des Menüs */
	border-radius: 0.5rem;
}
  
/* --------------- Liste der Veranstaltungen --------------- */
.veranstaltungen {
	display:flex;
	flex-flow:column;
	margin:0;
	padding:0;
}
.veranstaltungen a { text-decoration: none; color:black; }
.veranstaltungen a:hover article>*:last-child { background:rgba(50,73,106,.1); }
.veranstaltungen article {
	display:flex;
	flex-flow:row;
	justify-content: space-between;
	margin:0.5rem 0;
	padding:0;
}
.veranstaltungen article>* {
	border:1px solid rgb(200,200,200);
	margin:0;
	padding:0.5rem 1rem;
	border-radius:.4rem;
}
.veranstaltungen article>*:nth-child(1) {  /* Datum */
	background: rgba(255, 201, 135, 0.8);
	font-weight:bold;
	font-size: 1.1rem;
	transform:rotate(-10deg);
	margin:0 -4.0rem 0 0;
	text-align: right;
}
.veranstaltungen article>*:nth-child(2) {  /* Inhalt */
	flex:1;
	margin:0;
	padding:1rem 2rem 1rem 5rem;
}
.veranstaltungen figure {  /* Bild */
	display:none;
	float:right;
	width:11rem;
	height:6rem;
	margin:-.5rem -1rem -.5rem 1rem;
	background-size:auto 110%;
}
.veranstaltungen p {
	margin:0 0 .6rem 0; padding:0;
}
.veranstaltungen .title { text-transform:uppercase; font-weight:bold; font-size:1.1rem; letter-spacing:.1rem; }
@media only screen and (min-width: 700px) { 
	.veranstaltungen figure { display: block; } 
}

/* --------------- Suchfeld --------------- */
.suchfeld{ 
	float:right; margin:-.8rem 1rem 0 0;
}
.suchfeld input{ 
	width:14rem;
	padding:.5rem;
	background: rgb(247, 247, 247);
	border: 1px solid rgba(147, 184, 189,0.8);
	box-shadow:	
		0pt 2px 5px rgba(105, 108, 109,  0.7),	
		0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	border-radius: 5px;
}
@media only screen and (min-width: 1200px) {
	.suchfeld{ margin:.8rem 1rem 0 0; }
}
/* ------- Such-Funktion ------- */
.such_ergebnis_liste{
	padding:0;
}
.such_ergebnis_liste li{
	display:flex;
}
.such_ergebnis_liste li>*{
	margin:0 1rem 1rem 0;
	border-bottom: 1px dotted grey;
	min-height:4rem; /* wegen des Bildes, wird sonst zu klein */
}
.such_ergebnis_liste li>*:nth-child(1){ display:none; } /* laufende Nr */
.such_ergebnis_liste li>*:nth-child(2){ width:40%; }
.such_ergebnis_liste li>*:nth-child(3){ width:60%; }
.such_ergebnis_liste li>*:nth-child(4){ display:none; } /* Bild */
.such_ergebnis_liste li img{ width:100%; height:auto; }
.such_ergebnis_liste .hervorgehoben { background-color: yellow; }

@media only screen and (min-width: 800px) {
	.such_ergebnis_liste li>*:nth-child(1){ width:3%; display:block; } /* laufende Nr */
	.such_ergebnis_liste li>*:nth-child(2){ width:25%; }
	.such_ergebnis_liste li>*:nth-child(3){ width:57%; }
	.such_ergebnis_liste li>*:nth-child(4){ width:15%; display:block; }
}