/*
28.01.2024 - von kriegsende-niederrhein.de übernommen und angepasst - FD
- Font auf 'system-ui' umgestellt. Nachdem Webdesigner es für Jahre toll fanden, eigene Fonts nutzen zu können, kommt jetzt der Gegentrend. Tips dazu wie so oft von Kevin Powell: www.youtube.com/watch?v=VOd6jfAImV4

Kleine Erinnerungsstützen:
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-surface: 	rgb(247,241,222);		/* Background, Text Color on Buttons */
	--color-titel:	 	rgb(70, 72, 36);		/* Accent: h1, h2, h3 */
	--color-accent: 	rgb(123, 23, 0);		/* Accent: h1, h2, Links, Marker */
	--color-accent-link-hover: 	rgb(58, 60, 29);		/* Links bei Hover */
	--color-primary-button: rgba(70, 72, 36, 0.8);	/* Background of primary Buttons */
	--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 */

	/* @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);
}
*, *: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{
	font-family: system-ui, sans-serif;
	position:relative; /* wegen des absolut positionierten Modal-Fensters */
	margin:0; padding:0;
    font: normal 100%/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-titel); 
	font: normal 2rem;
	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-weight: 400;}	/* vorher: clamp(1.7rem, 2.8rem + .6vw, 4.0rem); */
h2 { font-size: var(--font-size-3); font-weight: 100; margin-top:4rem; }	/* vorher: clamp(1.6rem, 1.9rem + .6vw, 2.2rem); */
h3 { font-size: var(--font-size-2); font-weight: 100; margin-top:4rem; }	/* vorher: clamp(1.4rem, 1.5rem + .6vw, 1.6rem); */
h4 { font-size: var(--font-size-1); font-weight: 100; }	/* vorher: clamp(1.2rem, 1.3rem + .6vw, 1.4rem); */
h5 { font-size: var(--font-size-0); font-weight: 300;}

a { 
	color:var(--color-accent);
	text-decoration:none; 
	font-weight: 600;
}
/* geht leider nicht wegen der anklickbaren Bilder: */
/* a::before { content: "➔"} */
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-surface);
	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;
}
/* für Hinweise, am besten in p-Tag einbauen: */
.yellow, .red, .blue { padding:.3rem; border:1px solid grey; border-radius:.3rem;}
.yellow { background: rgba(241, 196, 15, .4);}
.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 */

/* --------------- 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 */
/* --------------- Definitions-Listen --------------- */
dl > * { 
	/* line-height:1.0rem; */
	margin-bottom:1rem;
}
dt { float:left; font-weight:500; width: 5rem; text-align:right; }
dd { margin-left:6rem; }
dd::after { clear:left; content: " "; display:block;}

/* ------- Modal-Fenster, wird für den Einführungsfilm auf Startseite genutzt --------- */
#modal { 
	background:var(--color-surface);
	z-index:8;
	top:2vh;
	padding:.6rem 2%;
	border:1px solid var(--color-surface);
	border-radius:.6rem;
	box-shadow: .5rem .5rem 1rem 0 rgba(0,0,0,.5);
}
#modal * { color:black; }
#modal .close-button-topright {
	float:right;
	margin:0 0 .3rem 0; padding:0.3rem;
	background:transparent;
	border:none;
	font-size:2rem;
}
@media (min-width: 960px) { 
	#modal { width:76vw; padding:1rem 4%; }
}
#modal::backdrop { 
	background: rgba(0, 0, 0, 0.5) ; /* funktioniert leider nicht! */
}

/* --------------- Tabellen --------------- */
table { max-width:100%; border-spacing: .2rem; overflow-x: auto; } /* Lücken zwischen den Zellen */
td, th {padding:.2rem; 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);}
.table-inhalt-rechts td {text-align: right;}

/* --------------- Accordion --------------- */
/* html-Tags, die kaum jemand kennt - schade! Leider ist der Marker nicht vertikal verschiebbar und nicht animierbar ;-( */
details { margin:1rem 0; }
details summary { 
	cursor: pointer;
	background: var(--color-secondary-button);
	margin:.5rem 0; padding:0 1rem;
	border-radius:.5rem;
}
details summary * { 
	display:inline; 
	font-size: var(--font-size-1);
}
summary::-webkit-details-marker, summary::marker {
  /* content:  " ▶ "; Verwendung des Pfeils anstelle des Dreiecks: 🡳 🡱   */
  color: var(--color-accent);
  font-size: var(--font-size-0);
}	
details[open] summary::-webkit-details-marker, details[open] summary::marker {
  /* content:  " ▼ "; */
}

/* -------------- Fußnoten/Quellenangaben im Text ------------------ */
/* https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Fu%C3%9Fnoten_mit_CSS 
leider mit dem CKEditor wieder mal nicht umsetzbar.  
Finde es aber super elegant. Deshalb steht der Code hier noch in der Hoffnung auf Gebrauch - FD 24.06.2023 
Was sich auf diese Weise leider nicht erreichen lässt, ist ein mehrfacher Verweis auf die gleiche Fußnote. 
CSS ist ein Layout-Tool, kein Desktop-Publishing System.*/
/* body { counter-reset: footnotes; }
[role="doc-noteref"] {
	counter-increment: footnotes; 
	padding-left:.1em;
	padding-right: 0.1em;
	text-decoration: none;
}
[role="doc-noteref"]::after {
	content: '[' counter(footnotes) ']'; 
	vertical-align: super; 
	font-size: 0.75em; 
}
[role="doc-noteref"]:focus::after {
	outline: thin dotted;
	outline-offset: 2px;
}
article > footer {
	margin-top: 2em;
	border-top: 1px solid silver;
	font-size: 0.8em;
}
article > footer ol {
	padding-left: 2em;
} */
/* -------------- ab hier die eigene Variante der Fußnoten ------------------ */
[role="doc-noteref"] {
	padding:.1em;
	text-decoration: none;
}
[role="doc-noteref"]::before { content: '['; }
[role="doc-noteref"]::after { content: ']'; }
[role="doc-noteref"]:focus {
	outline: thin dotted;
	outline-offset: 2px;
}
.footnotes > dt::before { content: '['; }
.footnotes > dt::after { content: ']'; }

/* -------------- header ------------------ */
header {
    height: 70vh; 
    position:relative; /* wegen absolut positionierter Navi und Flaggen */
}
header.ersteSeite { height:100vh; }
header, header section>* { color:var(--color-surface); }
header * { padding: 0; margin: 0; }
header section {
    position:absolute;
	bottom:max(10rem, 10vh);
	left:0;
	padding:0rem 1.2rem;
	animation:fadein 2s normal forwards;
	width:100%;
	text-align: center;
}
header h1 { font-size: var(--font-size-5);}
header section * { margin:2rem 0 0 0;}
header #slideshow li {
	background-image: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,.6) 100%), url('gfx/Feltmann-bearbeitet-FD-ohne-Untertitel-02.png');
}
/* -------------- Logo -------------- */
.logo {
	position:absolute;
	top:1rem;
	left:1.5rem;
	
}
/* -------------- Flaggen -------------- */
.flaggen {
	position:absolute;
	top:1.7rem; right:8rem;
	display:block;
	white-space: nowrap;
}
.flaggen img {
	width:40px; 
	height:auto;
	margin:0 0 0 2%;
}
.flagge-active {
	border:2.5px solid rgba(200,200,200,1.00);
}
header #pfeil *{
    position:absolute;
	bottom:0.6rem; left:48.8%;
	display:none;
	margin:0 0 1rem 0;
	font-size:2.5vw;
	color:var(--color-surface);
}
@media (min-width: 960px) { 
	header #pfeil *{ display:inline-block; }
}
@media (min-width: 1600px) { 
	.flaggen { top:3rem; right:1rem; }
}
/* -------------- 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:90%;
    bottom:0; right:0;
    margin:.5rem;
}
/* -------------- main ------------------ */
main {
	width:min(100% - 2rem, 140ch); /* 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; margin:1rem 0 1rem 0; }
.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:3rem 0 1rem 0; } }
@media (min-width:240ch) { .columns { columns:3; margin:1rem 0 1rem 0;} }

/* -------------- footer ------------------ */
footer {
	clear:both;
	background:var(--color-accent);
	display:flex;
	flex-flow: wrap;
	gap:1rem;
	justify-content: space-around;
	margin:1rem 0 0 0; padding:0;
}
footer, footer h4 { color:var(--color-surface); }
footer h4 { 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-surface);
}
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%);
}
/* --------------- Bildergalerie Variante 2: Texte unter den Bildern  --------------- */
.gallery2 {
	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. */
}
.gallery2 figure { margin:1rem 0; }

/* --------------- 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; }
/* --------------- die Aufmacher/Kernthemen auf der Startseite --------------- */
.aufmacher h3 { font-size: var(--font-size-1); }