/*
07.03.2026 FD - Es wird Zeit, eine neue CSS zu erstellen.
*/
:root {
    /* Color-Palette von https://realtimecolors.com/?colors=040301-f7f1de-172a63-f0e5c1-172a63 */
	--color-text: 	    rgb(4 3 1);		/* Text */
	--color-surface: 	rgb(247 241 222);	/* Background, Text-Color on Buttons and on Footer */
	--color-titel:	 	rgb(51 107 135);	/* h1, h2, h3 */
	--color-accent: 	rgb(51 107 135);	/* Links, Footer-Background */
	--color-primary-button: 	rgb(115  97  81);	/* Buttons */

	/* @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;}
h2 { font-size: var(--font-size-3); font-weight: 400; margin-top:3rem; }
h3 { font-size: var(--font-size-2); font-weight: 400; margin-top:2rem; }
h4 { font-size: var(--font-size-1); font-weight: 400; }
h5 { font-size: var(--font-size-0); font-weight: 300;}
a { 
	color:var(--color-accent);
	text-decoration:none; 
	font-weight: 600;
}
/* a::before { content: "➔"} */		/* geht leider nicht wegen der anklickbaren Bilder: */
a:hover { text-decoration:underline; color:var(--color-accent-link-hover);}

button {
	color:var(--color-surface);
	letter-spacing: .1rem;
	font-variant: small-caps;
	font-size:110%;
	padding: .5rem .8rem;	
	margin:0 .1rem;
	background: var(--color-primary-button);
	border:1px solid var(--color-surface);
	border-radius:.3rem;
}
button:hover { cursor:pointer; }
/* -------------- Navi in einer Seite - inline ------------------ */
nav.in-page button {
	display:inline-block;
	margin:1rem .5rem 1rem 0;
}

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

/* --------------- Die Medien  --------------- */
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;
}
figure.pic-right { /* einzelnes Bild rechtsbündig und anklickbar mit Untertitel durch figcaption */
	float:right; 
	margin:0 0 1rem 1rem;
	max-width:100%;
}
@media (min-width: 900px) { 
	figure.pic-right { max-width:50%; }
}
figcaption { 
	font-style: italic;
	font-size:90%;
}
/* --------------- 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; }
/* --------------- Chronik als Definitions-Listen --------------- */
dl.chronik > * { 
	/* line-height:1.0rem; */
	margin-bottom:.5rem;
}
dl.chronik dt { float:left; font-weight:500; width: 6rem; text-align:right; }
dl.chronik dd { margin-left:7rem; }
dl.chronik dd::after { clear:left; content: " "; display:block;}
/* --------------- Quellen als Definitions-Listen --------------- */
dl.quellen > * { 
	margin-bottom:.5rem;
}
dl.quellen dt { font-weight:500; }
dl.quellen dd { margin-bottom:1rem; }

/* -------------- header ------------------ */
header {
    height: 70vh; 
    position:relative; /* wegen absolut positionierter Navi und Flaggen */
}
header section { /* der Text auf dem Header-Bild */
    position:absolute;
	bottom:max(6rem, 8vh);
	left:0;
	padding:0rem 1.2rem;
	animation:fadein 2s normal forwards;
	width:100%;
	text-align: center;
}
header *{
	color:var(--color-surface);
}
header .logo {
	position:absolute;
	top:2rem; left:2rem;
	margin:0; padding:0;
	width:clamp(4rem, 6vw, 6rem);
}
header #pfeil *{
    position:absolute;
	bottom:0.6rem; left:48.8%;
	display:none;
	margin:0 0 1rem 0;
	font-size:2.5vw;
}
@media (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:90%;
    bottom:.3rem; right:.8rem;
    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;} }

/* -------------- Flex-Gedöns -------------- */
.column3, .blog, .gridi {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}
/* -------------- Flex-Gedöns -------------- */
.column3, .blog, .gridi, .gallery, .gallery2 {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}
/* -------------- blog + gallery -------------- */
.column3 section, .blog section, .gallery a, .gallery2 a, .gridi a {
	flex:0 0 98%;
	margin:.9rem 1%;
	padding:0;
}
.blog section img{ width:100%; height:auto; }
.blog section .date{ color:rgba(150,150,150,1.00); }
.blog section .title{ border-top: 1px dotted #c2c2c2; padding:1rem 0 0 0; font-weight:bold; letter-spacing:.1rem; text-transform:uppercase; }

.gallery figure, .gallery2 figure, .grid-itemi { width:100%; margin:0; padding:0; }

@media all and (min-width:  500px) { .blog section, .gallery a, .gallery2 a, .gridi a { flex:0 0 48%; } }
@media all and (min-width:  800px) { .column3 section, .blog section, .gallery a, .gridi a { flex:0 0 31.3333%; } }
@media all and (min-width: 1100px) { .blog section, .gallery a, .gridi a { flex:0 0 23%; } }

.grid-itemi { 
	position:relative;
	height:13rem;
	background-size:cover;
	background-position:center center;
	color:white;
	overflow:hidden;
	transition: all .4s ease-in-out;
}
.grid-itemi *{
	position:absolute;
	bottom:0; left:0;
	margin:0; padding:1rem;
}
.btn >* {
	display:block;
	width:20rem;
	margin: 0 auto;
	border:1px solid grey; 
	padding:.6rem;
	border-radius:3px; 
	background:rgba(240,240,240,1.00);
}

/* -------------- footer ------------------ */
footer {
	clear:both;
	background:var(--color-accent);
	display:flex;
	flex-flow: wrap;
	gap:1rem;
	justify-content: space-around;
	margin:2rem 0 0 0; padding:1rem 0 .5rem 0;
}
footer .logo {
	width:clamp(4rem, 6vw, 6rem);
}
footer, footer h4, footer a, footer a:hover { color:var(--color-surface); }
footer h4 { margin:0; }
footer > * {
	margin:0; padding:1rem;
	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 0 1rem 0;
	border-top:1px dotted var(--color-surface);
}
footer.copyright > * { padding:0; }
footer address { font-style:normal; } /* address wird sonst kursiv dargestellt */