/* Neue Ansicht der Hauptseite www.pilzepilze.de. Gerüst wie die neue Forumsansicht (theme/modern/modern.css):
   schwarzer Kopf mit Leiste und Originalbanner, salbeigrünes Band, Inhalt auf Papier, schwarzer Fuß.
   Aufteilung der Startseite wie im Original. Unterseiten behalten ihren Inhalt, Farben aus bgcolor-
   Attributen gehen auf die Palette (Attribute zählen weniger als jede CSS-Regel), Signalfarben bleiben. */
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap; src: url(../themes/default/fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url(../themes/default/fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url(../themes/default/fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-style: normal; font-display: swap; src: url(../themes/default/fonts/source-serif-4-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../themes/default/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../themes/default/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(../themes/default/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }
/* Schrift der alten Schriftbilder und des Logos: Romeo DN (Mike Allard 1992, Freeware), Umlaute und ß ergänzt */
@font-face { font-family: "Romeo PP"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(romeo.woff2) format("woff2"); }

:root {
	--schwarz: #1c1f1a;
	--dunkel: #30352e;
	--salbei: #889988;
	--salbei-hell: #e6e9e1;
	--salbei-mittel: #d3d9ce;
	--salbei-linie: #c9cfc4;
	--papier: #f4f5f1;
	--gelb: #ffee22;
	--violett: #770077;
	--violett-dunkel: #4a004a;
	--grau: #5d665b;
	--romeo: #c9dcb5;
	--text: "Source Serif 4", Georgia, serif;
	--ui: "IBM Plex Sans", system-ui, sans-serif;
	--breite: 76rem;
	--rand: 1.25rem;
	--kante: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
}

* { box-sizing: border-box; }
html { background: var(--papier); }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--papier);
	color: var(--schwarz);
	font-family: var(--ui);
	font-size: 1.0625rem;
	line-height: 1.5;
}
a, a:link { color: var(--violett); text-underline-offset: 0.15em; }
a:visited { color: var(--violett-dunkel); }
a:hover, a:focus { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* Kopf wie im Forum */
#pp-kopf { background: var(--salbei); border-bottom: 6px solid var(--schwarz); }
#pp-leiste {
	background: var(--schwarz);
	color: var(--salbei-hell);
	padding: 0.75rem var(--kante) 1rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.5rem;
}
#pp-leiste ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 1rem;
	font-size: 0.94rem;
}
#pp-leiste li a, #pp-leiste li a:visited { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--gelb); text-decoration: none; }
#pp-leiste li a:hover { text-decoration: underline; }
#pp-leiste li.ansicht { padding-left: 1rem; border-left: 1px solid #4a5247; }
#pp-leiste li.ansicht a, #pp-leiste li.ansicht a:visited { color: #b7c1b5; }
#pp-banner { justify-self: center; line-height: 0; }
#pp-banner img { display: block; width: 519px; max-width: 100%; height: auto; }
#pp-band { padding: 1.1rem var(--kante); font-size: 1.05rem; }
#pp-aktuell { margin: 0; text-align: center; }
#pp-band a, #pp-band a:visited { color: var(--schwarz); font-weight: 600; }
.pp-neu { font-family: var(--ui); font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gelb); color: var(--schwarz); padding: 0.05em 0.3em; vertical-align: 0.15em; }
#pp-band a.pp-zurueck, #pp-band a.pp-zurueck:visited {
	display: inline-flex;
	align-items: center;
	height: 2.75rem;
	padding: 0 1.2rem;
	background: var(--schwarz);
	color: var(--gelb);
	font-weight: 700;
	text-decoration: none;
}
#pp-band a.pp-zurueck:hover { background: #000; color: #fff; }

/* Startseite: links die Galeriefotos, rechts die Rubriken */
#pp-start {
	flex: 1;
	width: 100%;
	padding: 2.5rem var(--kante) 3rem;
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}
#pp-galerie { display: grid; gap: 2rem; }
#pp-galerie figure { margin: 0; }
#pp-galerie figcaption { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
#pp-galerie img { display: block; width: 100%; border: 1px solid var(--schwarz); }
#pp-galerie p { margin: 0.4rem 0 0; font-family: var(--text); font-size: 1.05rem; }
#pp-galerie p i { display: block; font-size: 0.95rem; color: var(--grau); }
#pp-rubriken { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--schwarz); }
#pp-rubriken li {
	display: grid;
	grid-template-columns: 21.5rem minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--salbei-linie);
}
#pp-rubriken p { margin: 0; font-family: var(--text); font-size: 1.1rem; line-height: 1.5; }
a.pp-rubrik, a.pp-rubrik:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.6rem;
	/* Romeo hat über den Großbuchstaben kaum Luft, darunter die volle Unterlänge (Zeilenmaße 1012 und
	   377 von 1000, Großbuchstaben bis 1000). Der Innenabstand oben schiebt die Schrift so weit nach
	   unten, dass Wörter ohne Unterlänge gleich viel Luft oben und unten haben (gemessen im Browser). */
	padding: 0.45em 0.5em 0.02em;
	white-space: nowrap;
	background: var(--schwarz);
	color: var(--romeo);
	font-family: "Romeo PP", var(--text);
	font-size: 1.55rem;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
}
a.pp-rubrik:hover, a.pp-rubrik:focus { color: var(--gelb); }

/* Unterseiten: Inhalt des Originals auf Papier */
#pp-inhalt { flex: 1; width: 100%; padding: 2rem var(--kante) 3rem; font-family: var(--text); font-size: 1.1rem; line-height: 1.6; }
#pp-inhalt font { font-family: inherit; font-size: inherit; color: inherit; }
#pp-inhalt td, #pp-inhalt th { font-family: var(--ui); font-size: 0.95rem; line-height: 1.45; vertical-align: top; }
#pp-inhalt :is(h1, h2, h3, h4) { font-family: var(--text); font-weight: 600; line-height: 1.2; }
#pp-inhalt h1 { font-size: 2.2rem; margin: 0 0 1rem; }
#pp-inhalt h2 { font-size: 1.6rem; margin: 2rem 0 0.6rem; }
#pp-inhalt h3 { font-size: 1.25rem; margin: 1.5rem 0 0.4rem; }
#pp-inhalt h4 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
#pp-inhalt p, #pp-inhalt li { max-width: 46rem; }
#pp-inhalt pre { font-family: var(--ui); font-size: 0.95rem; white-space: pre-wrap; }
#pp-inhalt hr { border: 0; border-top: 1px solid var(--salbei-linie); margin: 2rem 0; }
#pp-inhalt table { border-collapse: collapse; max-width: 100%; }
#pp-inhalt table[border]:not([border="0"]) td { border: 1px solid var(--salbei-linie); }
#pp-inhalt td { padding: 0.35rem 0.6rem; }
#pp-inhalt center > table, #pp-inhalt table[align="center"] { margin-left: auto; margin-right: auto; }
#pp-inhalt img[src*="/pics/"] { vertical-align: middle; }

[bgcolor="778877" i], [bgcolor="#778877" i], [bgcolor="ffffff" i], [bgcolor="#ffffff" i] { background: transparent; color: var(--schwarz); }
[bgcolor="000000" i], [bgcolor="#000000" i] { background: var(--schwarz); color: var(--salbei-hell); }
[bgcolor="333333" i], [bgcolor="555555" i], [bgcolor="666666" i], [bgcolor="004400" i] { background: var(--dunkel); color: var(--salbei-hell); }
[bgcolor="888888" i], [bgcolor="999999" i], [bgcolor="aa9999" i] { background: var(--salbei); color: var(--schwarz); }
[bgcolor="aaaaaa" i], [bgcolor="b2b2b2" i], [bgcolor="bbbbbb" i], [bgcolor="c0c0c0" i] { background: var(--salbei-mittel); color: var(--schwarz); }
[bgcolor="cccccc" i], [bgcolor="dddddd" i], [bgcolor="eeeeee" i], [bgcolor="ddddee" i] { background: var(--salbei-hell); color: var(--schwarz); }
:is([bgcolor="000000" i], [bgcolor="#000000" i], [bgcolor="333333" i], [bgcolor="555555" i], [bgcolor="666666" i]) a { color: var(--gelb); }

/* Fuß wie im Forum */
#pp-fuss { background: var(--schwarz); color: #b7c1b5; padding: 1.5rem var(--kante); font-size: 0.95rem; }
#pp-fuss a, #pp-fuss a:visited { color: #b7c1b5; margin-left: 1rem; }

@media (max-width: 52rem) {
	#pp-start { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 1.5rem; }
	#pp-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
	#pp-rubriken li { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
	a.pp-rubrik { justify-content: flex-start; white-space: normal; }
}
@media (max-width: 30rem) {
	#pp-leiste ul { justify-content: flex-start; }
	#pp-inhalt h1 { font-size: 1.7rem; }
}