/* CSS zum Blog @cz+, verfasst von Gerhard Großmann */

/* Schriften: Source Sans 3 Regular & Italic, czSlab */
@font-face { font-family: 'Source Sans 3';
	font-style: normal; font-weight: 400;
	src: url(SourceSans3-Rg.woff2) format('woff2');
	font-display: fallback; }
@font-face { font-family: 'Source Sans 3';
	font-style: italic; font-weight: 400;
	src: url(SourceSans3-It.woff2) format('woff2');
	font-display: fallback; }
@font-face { font-family: 'czSlab';
	font-style: normal; font-weight: bold;
	src: url(czSlab.woff2) format('woff2');
	font-display: fallback; }

/* FARBEN */
:root {
	--text-stark: #000; --text-basis: #222; --text-matt: #333;
	--grau-basis: #666; --grau-matt: #ccc; --nebelgrau: hsla(0,0%,92%,.7);
	--hintergrund: #fff; --schatten: rgba(0,0,0,.15); --licht: #fff;

	--gruen-stark: #060; --gruen-basis: #281; --gruen-aktiv: #3a1;
	--gruen-blass: #deb; --akzent-basis: #839; --akzent-aktiv: #c2b;
	--akzent-blass: #ece; /* hier nicht verwendet */

	--hg-bild: repeating-linear-gradient(110deg, transparent, hsla(0, 0%, 100%, .4) 91px, hsla(0, 0%, 100%, .1) 214px),
	repeating-linear-gradient(10deg, transparent, hsla(0, 0%, 100%, .1) 130px, hsla(0, 0%, 100%, .2) 243px),
	repeating-linear-gradient(325deg, transparent, hsla(0, 0%, 100%, .3) 81px, hsla(0, 0%, 100%, .3) 293px),
	linear-gradient(90deg, transparent 51rem, var(--gruen-blass) 80%, var(--gruen-aktiv) 100%); }

@media screen and (prefers-color-scheme: dark) {
:root { --text-stark: #fff; --text-basis: #ddd; --text-matt: #ccc;
	--grau-basis: #999; --grau-matt: #444; --nebelgrau: hsla(0,0%,15%,.7);
	--hintergrund: #000; --schatten: hsla(0,0%,50%,.7); --licht: hsla(0,0%,100%,.15);

	--gruen-stark: #7c3; --gruen-basis: #5a4; --gruen-aktiv: #8e2;
	--gruen-blass: #230; --akzent-basis: #94a; --akzent-aktiv: #c4d;
	--akzent-blass: #404; /* hier nicht verwendet */

	--hg-bild: repeating-linear-gradient(110deg, transparent, rgba(0,0,0,.4) 91px, rgba(0,0,0,.1) 214px),
	repeating-linear-gradient(10deg, transparent, rgba(0,0,0,.1) 130px, rgba(0,0,0,.2) 243px),
	repeating-linear-gradient(325deg, transparent, rgba(0,0,0,.3) 81px, rgba(0,0,0,.3) 293px),
	linear-gradient(90deg, transparent 51rem, var(--gruen-stark) 80%, var(--gruen-aktiv) 100%); }
iframe { background-color: #eee; }
img, iframe { filter: brightness(.8); }
img[src$='#invert'], /* als invertierbar markierte Bilder */
	.icon-rss::after { filter: invert(1) hue-rotate(180deg); }
/* background-color an Form-Elementen würden auch den border-style ändern */
}

/* GRUNDSÄTZLICHES LAYOUT */

*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; padding: 1.7em 1.5em 3em; text-align: left;
	font: 400 1.1em/1.5 'Source Sans 3', 'Source Sans Pro', Seravek,
		Myriad, 'Segoe UI', Calibri, sans-serif;
	font-variant: oldstyle-nums;
	color: var(--text-basis); background-color: var(--hintergrund);
	accent-color: var(--gruen-aktiv);
	background-image: var(--hg-bild); }
@media (max-width: 45em) {
	body { padding: 1.4em 2% 2.1em 3%; line-height: 1.4;
	border-top: .4em solid var(--gruen-basis); } }
@media (min-width: 94em) { /* Rand links für sehr breite Bildschirme */
	body { position: relative; left: 20%; margin-right: 20%; } }

/*body { background: #fff linear-gradient(rgba(0,0,0,.2) .06em, transparent 0) 0 .5em / auto .751em } /* Grundlinienraster */

header, main, aside, article, section { display: block; }
header, main, aside { max-width: 43em; }

header { display: flex; flex-wrap: wrap; margin-bottom: 2.8em; }
header a { color: var(--text-matt) !important; font-size: 1.05em; }
header > a { flex:1; align-self: center; padding:0;
	font-size: 1.7em; line-height: 1; }
header img { float: left; margin-right: .4em; margin-top: -.02em;
	width: 2em; }

header > div:nth-child(2) {
	display: flex; flex-direction: column; align-items: flex-end; }
#suchform { display: flex; margin: 0 .5em .5em 0; }
#keyword { width: inherit; }

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; margin-bottom: .4em; }
nav li a { padding: .25em .4em .2em; }
nav a:hover, nav a:focus { background-color: var(--gruen-blass); }

@media (min-width: 71.5em) { nav { display: none; } }

@media (max-width: 37em) {
	header { display: inherit; }
	header > div:nth-child(2) {align-items:flex-start; margin-top:1.5em;}
	nav { margin-left: -.4em; } }

aside { margin: 1.4em 0 -1em; padding: .01em .8em 1.25em 1em;
	background-color: var(--nebelgrau); }
@media (min-width: 71.5em) { aside { position: absolute; top: .4em;
	left: 48em; right: 1.5em; max-width: 24em; } }
@media (max-width: 45em) { aside { margin: 1.4em -2% -2.1em -3.2%; } }

/* Onlex-Counter ausblenden, Zählung unbeeinträchtigt */
.onlex_counter { display: none; }

/* Zweitschrift für Titel, Links und fett; Monospace-Schrift */
h1, h2, h3, b, strong, a, form label {
	font-family: czSlab,Georgia,serif; font-weight: bold; }
h1, h2, h3 { letter-spacing: -.01em;
	font-variant: lining-nums; }
b, strong, a, form label { padding: 0 .04em; }
code, pre, kbd { font: .9em/1 'Source Code Pro', Consolas, Monaco,
	'Lucida Console', 'Andale Mono', 'DejaVu Sans Mono', monospace; }

/* Optischer Randausgleich für Blockelemente mit sichtbarem Rand */
hr, pre, blockquote, .hinterlegt, .klappkasten, audio, textarea {
	width: 98.8%; }
.hinterlegt > audio { width: 100%; }
img, figure { max-width: 98.8%; }
time { padding-right: 1.2% }

/* ÜBERSCHRIFTEN */

h1 { font-size: 2em; line-height: 1.125 /* 1.5÷2 ×1.5 */;
	margin: 1.5em 0 .5em -.04em; color: var(--text-matt); }
h2 { font-size: 1.4em; line-height: 1.071 /* 1.5÷1.4 */;
	margin: 1.25em 0 -.179em -.02em; color: var(--text-matt); }
h3 { font-size: 1.1em; line-height: 1.364 /* 1.5÷1.1 */;
	margin: 1.2em 0 -.518em -.01em; }

/* FORMATIERUNGEN FÜR LESETEXTE */

p, ul, ol { margin-bottom: -.25em; hyphens: auto;
	hyphenate-limit-chars: 6 2 3; -webkit-hyphenate-limit-lines: 3; }
aside p { margin-bottom: -.22em; font-size: .9em; line-height: 1.667; }

/* Keine Trennung für Voriger-/Nächster-Link, Kommentarformatierungen */
.no-hyphens, .no-hyphens > * { hyphens:manual; }

i, em, b, strong { color: var(--text-stark); }
i, em { font-style: italic; }
sup, sub { line-height: 0; letter-spacing: .05em; }
small { font-size: 50%; } /* für <small>&nbsp;</small>, statt U+202F */
kbd { font-size: .8em; display: inline-block; position: relative;
	top: -.1em; margin: 0 .2em; padding: .15em .35em .2em;
	background-color: var(--nebelgrau); border: 1px solid var(--grau-basis); border-radius: .2em; box-shadow: .08em .05em 0 var(--schatten), .15em .15em 0 var(--licht) inset; }

/* bei Datumsangabe eines Artikels, im Archiv und bei Kommentaren */
time { display: block; float: right; padding-left: 1em; color: var(--grau-basis); }
#kommentare time:first-of-type { margin-top: 1.2em; }
/* Wenn Fenster schmal, dann rechts oberhalb der Überschrift */
@media (max-width: 32em) { time { margin-top: -1.6em; }
	#kommentare time { margin-top: 0; } }

hr { margin: 1.9em 0 1.23em; color: var(--grau-matt); }

/* Angepasste Farbe für ::selection? Dagegen spricht https://alistapart.com/article/paint-the-picture-not-the-frame/#section6 */
::selection { background: var(--gruen-blass); color: var(--text-stark); }
.hinterlegt::selection, a[download]::selection, .klappkasten ::selection,
.hinterlegt ::selection, a[download] ::selection { background: var(--hintergrund); }

/* LISTEN, CODE, ZITATBLÖCKE */

ul, ol { margin: 1.3em 0 1.2em; padding-left: .95em; }
ul ul, ul ol, ol ul, ol ol { margin: 0; }
ul { list-style: square; }
ul ul { list-style: circle; }
ol ol { list-style: lower-alpha; }
li p { margin: .75em 0; }

pre, code { margin: 1.5em 0 1.167em; padding: .05em .2em;
	border-radius: .1em; background-color: var(--nebelgrau);
	-webkit-box-decoration-break: clone; box-decoration-break: clone; }
pre > code { font-size: 1em; line-height: 1.667; white-space: pre-wrap;
	background-color: transparent; }

blockquote { margin: 1.35em 0 1.4em; padding: 0 .4em;
	border-left: .75em solid var(--gruen-blass); background-color: var(--nebelgrau); }
blockquote + blockquote { margin-top: 1.75em; }
blockquote > :is(h1, h2, h3) { padding-top: .25em; }
@media (max-width: 32em) {
	blockquote { padding-left: .35em; border-width: .4em; } }

.hinterlegt, .klappkasten { position: relative; margin: 1.2em 0 -.15em;
	padding: .22em .4em .23em; background-color: var(--gruen-blass); }
.hinterlegt { /* für Inline-Elemente wie h3, a oder span */
	-webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hinterlegt p { margin: 0; }
.hinterlegt p + p { margin-top: .75em; }

.klappkasten input { position: absolute; top: 0; left: 0;
	height: 2.1em; opacity: 0; cursor: pointer; }
.klappkasten label { cursor: pointer; }
.klappkasten:focus-within {
	outline:2px dotted var(--grau-basis); outline-offset:1px; }
.klappkasten:focus-within:not(:focus-visible) { outline: none; }

.klappkasten label::before { content: '→'; padding-right: .3em; }
.klappkasten input:checked ~ label::before { content: '↓'; }

.klappkasten p { max-height: 0; margin: 0 .2em; overflow: hidden;
	transition: max-height .4s, margin .2s; }
.klappkasten input:checked ~ p {
	max-height: 17em; margin: .6em .2em .15em; }
.klappkasten input:checked ~ p + p { margin-top: .75em }

/* LINKS (Schrift: Siehe oben bei b, strong) */

a { color: var(--gruen-basis);  text-decoration: none;
	text-underline-offset: .15em;}
:is(aside, .hinterlegt, figcaption, blockquote) a {
	color: var(--gruen-stark); }
a:visited { color: var(--akzent-basis); }
a:hover { color: var(--gruen-aktiv); text-decoration: underline; }
:is(aside, .hinterlegt, figcaption, blockquote) a:hover {
	color: var(--gruen-basis); }
a:active { color: var(--akzent-aktiv) }
a:focus-visible { outline:1.5px dotted var(--grau-basis); outline-offset:1px; }

:target { background-color: transparent; animation: target-fade 2s; }
@keyframes target-fade { 0% { background-color: var(--gruen-blass); } }

a[download] { margin: 2.06em auto; padding: .35em .4em .4em;
	display: block; max-width: 18em; text-align: center; color: var(--text-basis);
	font: inherit; background-color: var(--gruen-blass); border: .065em solid var(--gruen-basis);
	box-shadow: 1px 1px 2px var(--schatten); }
a[download]:hover { border-color: var(--akzent-basis); box-shadow: none; }
@media (max-width: 25em) { a[download] { margin: 2.06em 1.5em; } }

a.anhoeren { color:inherit; font:inherit; text-decoration:underline dotted; cursor:help; }

.anhoeren::after, .icon-rss::after, .icon-ccbysa::after {
	padding: 0; display: inline-block; }
.anhoeren::after { width:.9em; margin: 0 0 0 .1em; vertical-align: .2em; content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.2%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11%205%206%209H2v6h4l5%204V5z%22%2F%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M19%205a10%2010%200%200%201%200%2014M16%208a5%205%200%200%201%200%208%22%2F%3E%3C%2Fsvg%3E'); }
.icon-rss::after { width: 1em; margin: 0 .15em 0 .4em; vertical-align: -.1em; content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2014%2014%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%2013V1H1v12z%22%20fill%3D%22%23f60%22%20stroke%3D%22%23f60%22%2F%3E%3Cpath%20d%3D%22M11%2011c1-9-8-8-8-8m4.5%208C8%206%203%206.5%203%206.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%223.5%22%20cy%3D%2210.5%22%20r%3D%221.5%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.icon-ccbysa::after { width: 5.6em; margin: 0 .15em 0 .4em;  vertical-align: -.2em; content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2075%2015%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M3%202h18v11H3z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M.4.4h74.2v14H.4z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23000%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M2%202h71v11H2z%22%2F%3E%3Cpath%20d%3D%22M2%202v11h20c2.5-3.7%202.5-7.7%200-11z%22%20fill%3D%22%23aaa%22%2F%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cellipse%20cx%3D%2212.6%22%20cy%3D%227.5%22%20rx%3D%227%22%20ry%3D%226.5%22%20fill%3D%22%23fff%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M11.5%206.8c-.2-.4-.5-.6-.9-.6-.6%200-1%20.5-1%201.3%200%20.9.3%201.3%201%201.3.4%200%20.8-.2%201-.6l.9.5c-.4.8-1.1%201.1-2%201.1-.7%200-1.2-.2-1.7-.6-.4-.4-.6-1-.6-1.7s.2-1.2.6-1.6c.5-.4%201-.6%201.7-.6.9%200%201.6.4%202%201.1zm4.4%200c-.2-.4-.5-.6-.8-.6-.7%200-1%20.4-1%201.3s.3%201.3%201%201.3c.4%200%20.8-.2.9-.6l1%20.5c-.4.8-1.1%201.1-2%201.1-.7%200-1.2-.2-1.7-.6-.4-.4-.6-1-.6-1.7s.2-1.2.6-1.6c.4-.4%201-.6%201.6-.6.9%200%201.6.4%202%201.1z%22%2F%3E%3Ctext%20style%3D%22line-height%3A1%22%20x%3D%2227%22%20y%3D%2210.4%22%20font-weight%3D%22bold%22%20font-size%3D%228.25%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20fill%3D%22%23fff%22%3EBY-SA%3C%2Ftext%3E%3C%2Fsvg%3E'); }

/* BILDER, AUDIO-ELEMENT */

img, figure { line-height: 0; border: 0; }
p > img { margin: .6em 0 .25em; } /* Extra-Abstand */

figure { margin: 1.65em 0 1.45em; background-color: var(--nebelgrau); }
figure img { max-width: 100%; }
figcaption { padding: .4em .6em .3em; font-style: italic;
	font-size: .9em; line-height: 1.667; color: var(--text-stark); }

audio { margin: .4em 0 -.15em; }

/* FORMULARE */

input { font: inherit; font-size: .9em; line-height: 1.667; }
textarea { font: inherit; padding: .1em .2em; overflow: auto;
	resize: vertical; }
form { margin-top: 1.5em; }
form > div { padding-top: .4em; clear: both; }

form label { position: relative; float: left; top: .35em; width: 20%;
	padding-bottom: 1.4em; }
form label::after { content: ': '; }
form > div > div { float: right; width: 80%; }
form input[type=text], form input[type=email], form input[type=url] {
	width: 50%; }
input[type='submit'] { -webkit-appearance: button; }

@media (max-width: 32em) {
	form label { float: none; top: 0; width: 100%; }
	form > div > div { float: none; width: 98.5%; }
	form input[type=text],form input[type=email],form input[type=url] { width: 100%; } }

/* ANPASSUNGEN FÜR DEN DRUCK */

@media print {
@page { margin: 1.5cm 1.5cm 2cm; }
body { background-image: none; }
header, main, aside { width: 100%; }
aside { position: static; float: none; }

aside,figure,blockquote,.hinterlegt,.klappkasten,pre,code,a[download] {
	background: #fff; border: 1px solid #666; break-inside: avoid; }
pre > code { border: 0; }

h1, h2, h3, time {
	break-after: avoid; break-inside: avoid; color: #222; }
p, ul, ol, code, pre, figcaption, blockquote, a:link, a:visited {
	color: #000; }

p, ul, ol { widows: 2; orphans: 2; }

/* Klappkästen im Druck geöffnet anzeigen */
.klappkasten p { max-height: 17em; margin: .2em; }
.klappkasten p + p, blockquote + blockquote { margin-top: .7em }
blockquote > :is(h1, h2, h3) { margin: 0 0 .25em; }
blockquote > p { margin: 0 0 .3em; }

img { break-inside: avoid; }
article div { -webkit-print-color-adjust: exact !important;
	print-color-adjust:exact !important; /* Hintergrundbilder drucken */}

#suchform, .no-print, a[href$='#kommentieren'], a[href$='#kommentare'] { display: none; }
a[href]::after { content: ' [' attr(href) ']'; font: italic 1rem/1.4
	'Source Sans 3', 'Source Sans Pro', Seravek, Myriad, 'Segoe UI',
	Calibri, sans-serif; width: auto; vertical-align: inherit; }
a[href^='#']::after, a[href^='javascript']::after, a.anhoeren::after, header a[href]::after, a[href^='archiv.html?']::after {
	content: ''; margin:0; }
a.anhoeren { text-decoration: none; }
}