/*
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

die Farben des HESS-Logos:
Grün: #21766c;
Rosa: #d51180;
 */

/* 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(213, 204, 208, 0.1);	/* Background, Text Color on Buttons */
	--color-accent: 	#d51180; 	/* Accent: h1, h2, Links, Marker */
	--color-logo-pink: 	#d51180; 	/* Accent: h1, h2, Links, Marker */
	--color-logo-green: #21766c;
	--color-accent-link-hover: 	rgb(58, 60, 29);	/* Links bei Hover */
	--color-primary-button: rgb(55, 56, 53);	/* Background of primary Buttons, Background of Footer */
	--color-secondary-button: rgb(240, 229, 193);	/* Secondary Button, Background of Boxes, Headline of Tables */
	--color-accent-hover: 	rgba(38, 54, 101,.3);	/* Hover bei Tabellenzeilen */

	/* Font-Sizes - toll erläutert von Kevin Powell in https://www.youtube.com/watch?v=wARbgs5Fmuw
	@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.7813rem, 0.7923rem + -0.0111vi, 0.7901rem);
	--font-size--1: clamp(0.8889rem, 0.8767rem + 0.0608vi, 0.9375rem);
	--font-size-0: clamp(1rem, 0.9688rem + 0.1563vi, 1.125rem);
	--font-size-1: clamp(1.125rem, 1.0688rem + 0.2813vi, 1.35rem);
	--font-size-2: clamp(1.2656rem, 1.177rem + 0.443vi, 1.62rem);
	--font-size-3: clamp(1.4238rem, 1.2938rem + 0.6502vi, 1.944rem);
	--font-size-4: clamp(1.6018rem, 1.4191rem + 0.9137vi, 2.3328rem);
	--font-size-5: clamp(1.802rem, 1.5527rem + 1.2467vi, 2.7994rem);
}
@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");
}
*, *: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 var(--font-size-0)/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 {
	color:var(--color-accent); 
	font: normal var(--font-size-0) 'OpenSansBold', 'system-ui';
	text-wrap: balance; /* bricht den Text so um, dass nicht einzelne Wörter in Zeile stehen */
	/* clear:both; */
}
h1 { font-size: var(--font-size-4);
	font-style: normal;
	font-weight: 300;
	margin:1.5rem 0 2.5rem 0;
}
h2 { font-size: var(--font-size-3); margin:2rem 0 .5rem 0;}
h3 { font-size: var(--font-size-2); margin:2rem 0 .5rem 0;}
h4 { font-size: var(--font-size-1); }
h5 { font-size: var(--font-size-0); }
a { 
	color:var(--color-accent);
	text-decoration:none; 
	font-weight: 500;
}
a:hover { text-decoration:underline; color:var(--color-accent-link-hover);}

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;
}
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;
}

.yellow { background: rgb(241, 196, 15);}
.red { background:rgba(255, 0, 0, 0.4); }
.blue { background: rgba(0, 0, 255, 0.4); }
.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);}

/* -------------- header ------------------ */
header.logo {
	position:relative;
	background:url('/upload/logo/Hess-Logo-verlaengert.png') repeat-x left center;
	background-size: cover;
	width:100%; height:min(12vh,120px);
	padding:0; margin:0;
}
nav{
	position:absolute;
	top:0; right:0;
}
header {
    width:100%;
	aspect-ratio: 3 / 1; /* damit die Header-Bilder voll zu sehen sind */
    position:relative;
}
header, header * { color:var(--color-secondary-text); }
header * { padding: 0; margin: 0; }
header section { /* Titeltext  */
    position:absolute;
	bottom:12vh; left:0;
	padding:0rem 1.2rem;
}
header h1{
	font: min(9vw,400%)/110% 'Calibri', system-ui;
	margin:0 0 2rem 0;
}
header p { font-size:min(5vw, 140%); }
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; }
}
.flaggen {
	position:absolute;
	top:4px; right:106px;
	width:120px; height:26px;
	margin:0; padding:0;
	white-space: nowrap;
}
.flaggen img {
	width:40px; 
	height:100% !important;
	margin:0 !important; padding:0;
}
.flagge-active {
	outline:2px solid #db1975;
}
.fb {
	width:26px; height:26px;
	margin:0; padding:0;
}
.fb img {
	width:26px; height:26px;
	margin:0; padding:0;
}
@media only screen and (min-width: 620px) { 
	.flaggen { top:-8px; right:120px; }
}
/* -------------- 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); /* 120ch klingt viel, wir haben aber 3 Spalten! */
	margin-inline: auto; /* rechtes und linkes margin zur Zentrierung */
}

/* 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:var(--color-primary-button);
	display:flex;
	flex-flow: wrap;
	gap:1rem;
	justify-content: space-around;
	margin:1rem 0 0 0; padding: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:1rem;
	/* white-space:nowrap; */
	font-size: .9rem;
}
footer ul {
	list-style: none;
	margin:0; padding:0;
	text-transform:uppercase;
}
footer li{ margin:0 0 .7rem 0; padding:0; }
footer.copyright {
	display:block; /* display:flex aufheben */
	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; }
}
/* --------------- 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%)); } }

/* --------------- 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(0,140,216,.4);
	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; }
}