/*!
************************************************************************
**  sotke2025.css
**  General/Basic/Main Styles for Skin sotke2025 / 19-06-2025
**  Copyright 2025 Dierk Onken
**
**  Holy Grail Layout
**  Flex things:
**  — Mobile first
**  — Responsive
**
**  Breakpoints: 768px, 1000px
***********************************************************************/


/* ========== VARIABLEN ========== */
:root {
	--myskin-headfont: 'Alegreya Sans SC',sans-serif;
	--myskin-textfont: 'Alegreya Sans','Segoe UI',Arial,Helvetica,sans-serif;
	--myskin-monofont: 'Lucida Console','Andale Mono',monospace;
	--myskin-iconfont: 'Font Awesome 6 Free';
	;
	/* Alegreya: Regular 400, Medium 500, Bold 700, ExtraBold 800, Black 900 */
	--myskin-textfont-light: 400; /* Nicht moeglich bei Sans SC ! */
	--myskin-textfont-normal: 500;
	--myskin-textfont-bold: 700;

	--myskin-topnav-item-width: 150px;
	--myskin-topnav-item-padding: 7px 10px;
	--myskin-topnav-bgcolor: rgb(34, 34, 34); /* #222 */
	--myskin-topnav-inner-bgcolor: rgb(68, 68, 68); /* #444 */

	--myskin-color: rgb(17, 17, 17); /* #111 */
	--myskin-color-rgb: 17, 17, 17;
	--myskin-bgcolor-rgb: 234, 216, 181;
	/* --myskin-linkcolor: #267aba; */
	--myskin-linkcolor: rgb(204, 68, 34);
	--myskin-linkhover: #ce6a06;
	/* --myskin-linkvisited: #8e44ad; */
	/* --myskin-linkvisited: #e16e51; */
	--myskin-linkvisited: #ff8000;
	--myskin-linkactive: darkorange;
	--myskin-selflink-linkcolor: darkorange;
	/* --myskin-selflink-linkcolor: rgb(var(--myskin-color-rgb)); */
	/* --myskin-main-bgcolor: rgb(221, 221, 221); #ddd */
	--myskin-main-bgcolor: rgb(218, 218, 218); /*  */
	--myskin-sidebar-icon-color: rgb(42,143,31);
	--myskin-sidebar-color: rgb(68, 68, 68);
	--myskin-sidebar-bgcolor: rgb(255, 255, 255);
	--myskin-sidebar-linkcolor: rgb(68, 68, 68); /* #444 */
	--myskin-sidebar-linkhover: #267aba;
	--myskin-sidebar-selflink-color: #555;
	/* --myskin-sidehead-linkcolor: rgb(80, 80, 80); #505050 */
	/* --myskin-sidefloat-shadow: rgb(6, 24, 44); */
	--myskin-sidefloat-shadow-rgb: 6, 24, 44;
	--myskin-sidehead-linkcolor: rgb(68, 68, 68);
	--myskin-simpletable-th-bgcolor: rgb(204, 204, 204);
	--myskin-simpletable-zebra-bgcolor: rgb(238, 238, 238); /* #eee */
	--myskin-footer-linkcolor: rgb(102, 102, 102); /* #666 */
	--myskin-bordercolor: rgba(var(--myskin-color-rgb), .4);
	--myskin-frame-bgcolor: rgb(245, 245, 245);
	--myskin-wikicmds-iconcolor: rgb(68, 68, 68);
}
@media screen {
	html.pmDarkTheme {
		--myskin-color: rgb(221, 221, 221); /* #ddd */
		--myskin-color-rgb: 221, 221, 221; /* ddd */
		--myskin-bgcolor: rgb(34, 34, 34); /* #222 */
		--myskin-bgcolor-rgb: 34, 34, 34; /* 222 */
		--myskin-linkcolor: #8ff;




		--myskin-main-bgcolor: rgb(68, 68, 68);
		--myskin-sidebar-icon-color: rgb(136, 136, 136); /*#888*/
		--myskin-sidebar-color: rgb(204, 204, 204);
		--myskin-sidebar-bgcolor: rgb(17, 17, 17); /*#111*/
		--myskin-sidebar-linkcolor: rgb(204, 204, 204);
		--myskin-sidebar-linkhover: #267aba;
		--myskin-sidebar-selflink-color: darkorange;
		--myskin-sidefloat-shadow-rgb: 249, 231, 211;
		--myskin-sidehead-linkcolor: rgb(221, 221, 221);
		--myskin-simpletable-th-bgcolor: rgb(51, 51, 51);
		--myskin-simpletable-zebra-bgcolor: rgb(17, 17, 17); /* #111 */
		--myskin-footer-linkcolor: rgb(170, 170, 170); 
		--myskin-bordercolor: rgba(var(--myskin-color-rgb), .4);
		--myskin-frame-bgcolor: rgb(44, 44, 44); /*bgcolor + 10*/
		--myskin-wikicmds-iconcolor: rgb(204, 204, 204);

		/* this is for the input forms, links */
		/* color-scheme: dark; */
	}
}

/* ========== FONTS ========== */
/* alegreya-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/alegreya-sans-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/alegreya-sans-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/alegreya-sans-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/alegreya-sans-v25-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/alegreya-sans-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/alegreya-sans-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/alegreya-sans-v25-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 800;
  src: url('./fonts/alegreya-sans-v25-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* alegreya-sans-sc-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/alegreya-sans-sc-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-sc-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans SC';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/alegreya-sans-sc-v23-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-sc-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/alegreya-sans-sc-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-sc-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans SC';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/alegreya-sans-sc-v23-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* norican-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Norican';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/norican-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ========== GLOBAL STYLES ========== */
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	width: 100%;
	box-sizing: border-box;
	height: 100vh;
	font-size: 18px;
}
body {
	width: 100%;
	/* height: 100%; */
	min-height: 100vh;
	margin: 0 auto;
	/* background-color: #e4e5e6; */
	background-color: #fff;
	color: rgb(var(--myskin-color-rgb));
	font-family: var(--myskin-textfont);
	font-size: 1rem;
	font-weight: var(--myskin-textfont-normal);
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.375rem;
}
#bodywrap {
	display: flex;
	/* background-color: rgb(255, 255, 255); */
	background-color: rgba(var(--myskin-bgcolor-rgb), 0.4);
	background-position: top;
	background-repeat: repeat-y;
	background-size: cover;
	background-size: auto;
}
@media screen and (min-width: 768px) {
	html, body, #bodywrap {
		/* line-height: 1.4rem; */
		/* width: 100%; */
		margin: 0 auto;
		/* background-color: rgb(var(--myskin-bgcolor-rgb)); */
	}
}

p {
	margin: 0;
	padding: 0;
}
em {
	font-style: normal;
	font-weight: var(--myskin-textfont-bold);
	/* color: var(--myskin-linkactive); */
}
ul, ol, pre, dl, p {
	margin-top: 0;
	margin-bottom: 0;
}
img {
	border: 0;
}
#foo input, img, iframe {
	max-width: 100%;
}
dd {
	margin-left: 15px;
}
@media screen and (min-width: 768px) {
	dd {
		margin-left: 40px;
	}
}
ul, ol {
	margin: 0;
}

select, textarea, input {
	font-size: 16px; /*disable zoom-in on some phones*/
}
@media screen and (min-width: 768px) {
	select, textarea, input {
		font-size: 14px;
	}
}

/* These control the fixed-width text elements of the page */
pre, code, .diffmarkup {
	font-family: var(--myskin-monofont);
	letter-spacing: normal;
	line-height: 17px;
}
pre, code {
	/* font-size:14px didn't scale down in smaller text */
	font-size: .875em;
	white-space: pre-wrap;
}
pre code, code code, pre pre {
	font-size: .875em;
}
pre, code.escaped {
	max-width: 100%;
	overflow: auto;
	/* background: yellow; */
}
code.escaped {
	white-space: pre-line;
	text-indent: 0;
	/* background: lightcyan; */
}

.vspace {
	margin-top: .5rem;
	/* background: lightgoldenrodyellow; */
}
@media screen and (min-width: 768px) {
	.vspace {
		margin-top: .8rem;
		background: transparent;
	}
}
a {
	color: var(--myskin-linkcolor);
	font-weight: var(--myskin-textfont-normal);
	text-decoration: none;
	padding-right: 1px;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: var(--myskin-linkactive);
}
a:visited {
	color: var(--myskin-linkvisited);
	text-decoration: none;
}
a.selflink {
	color: var(--myskin-selflink-linkcolor);
	cursor: default;
	text-decoration: none;
}

/* These primarily adjust the size and spacing of heading elements,
** most browsers have atrocious defaults for these. */
h1, h2, h3, h4, h5, h6 {
	margin-top: 15px;
	margin-bottom: 9px;
	/* margin: 0; */
}
h1, h2, h3, h6 {
	font-weight: var(--myskin-textfont-bold);
}
h4, h5 {
	font-weight: var(--myskin-textfont-bold);
}
/* h1 code, h2 code, h3 code, h4 code {font-size:15px;} */
/* h1 {font-size:27px;} */
/* h2 {font-size:22px;} */
/* h3 {font-size:18px;} */
/* h4 {font-size:16px;} */
/* h5 {font-size:15px;} */
/* h6 {font-size:15px;} */
h3 {
	font-size: 1.25rem;
	font-weight: var(--myskin-textfont-normal);
	line-height: 1.25rem;
}
h5 {
	margin-top: 1rem;
	margin-bottom: .2rem;
	font-size: 1rem;
	font-weight: var(--myskin-textfont-normal);
	line-height: 1.4rem;
}
iframe {
	/* margin: .75rem 0 0; */
	margin: 0;
	padding: 0;
	border: 1px solid #aaa;
	/* border: none; */
	border-style: inset;
}
/* This used by Cookbook Ape (Automagical PmWiki Embed) */
span.embed,
span.map {
	margin-top: 1rem;
}
@media screen and (max-width: 768px) {
	span.FOOembed,
	span.FOOmap,
	iframe[id^="iframe_ape"] {
		width: 94% !important;
	}
}
iframe[id^="FOOiframe_ape"] {
	/* verhindert saemtliche Klick-, Scroll- und Hover-Events auf den iframes */
	pointer-events: none;
}

/* hr {clear: both;} */
/* <div class=clear><hr/></div> for a horizontal line with clear... */
.clear > hr {
	clear: both;
}


/* ========== FONT AWESOME ICONS ========== */
a > i.fa-solid {
	color: rgb(var(--myskin-color-rgb));
	/* font-size: 12px; */
	/* padding: 4px; */
	font-size: .7222rem;/*13px*/
	padding: 3px;
}


/* ========== FORMULARE ========== */
.inputbox
select,
select > option,
input[type="text"],
input[type="email"],
input[type="file"],
input[type="button"],
input[type="search"],
input[type="reset"],
input[type="submit"] {
	font-family: var(--myskin-textfont);
	font-size: 1rem;
	/* font-size: 15px; */
	font-weight: var(--myskin-textfont-normal);
}
select,
select > option {
	padding: 1px;
	border-radius: 0;
}
input[type="checkbox"],
input[type="radio"] {
	margin: 0;
}
/* input mit Element label direkt danach */
/* input[type="checkbox"] + label {
	padding-right: 5px;
} */
input[type="text"],
input[type="email"],
input[type="file"],
input[type="button"],
input[type="search"] {
	margin: 3px 0;
}
input[type="text"],
input[type="email"],
input[type="button"],
input[type="search"] {
	border: 1px solid #6c757d;
	border-radius: 0;
	/* border-color: #767676; */
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-size: 15px;
	font-weight: var(--myskin-textfont-normal);
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-block;
	/* color: #212529; */
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	/* padding: .375rem .75rem; */
	padding: 1px 6px;
	line-height: 1.5;
	border-radius: 3px;
	letter-spacing: normal;
	cursor: pointer;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
input[type="button"] {
	color: #fff;
	background-color: #0078D4;
	border-color: #0078D4;
}

.foo-btn-primary {
	color: #fff;
	background-color: #0078D4;
	border-color: #0078D4;
}
.foo-btn-secondary {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: #4585CF;
	border-color: #4a90e2;
}


/* ========== FLEX-CONTAINER COLUMN [TOPNAV + MAIN + WIKICMDS + FOOTER] ========== */
#flexwrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: initial;
	background-color: transparent;
	/* min-height fehlte, hier immer erforderlich ?? */
	min-height: 100vh;
}
@media screen and (min-width: 768px) {
	#flexwrap {
		min-height: 100vh;
	}
}
@media screen and (min-width: 1000px) {
	#flexwrap {
		/* Hint: für flex hier ist display:flex des übergeordneten Elements #bodywrap erforderlich! */
		flex: 0 0 980px;
		margin: 0 auto;
		/* border-right: 1px solid #999; */
		/* border-left: 1px solid #999; */
	}
	#bodywrap {
		display: flex;
	}
}


/* ========== FLEX-ITEM TOPNAV ========== */
.hg-topnav {
	padding: 0;
}


/* ========== FLEX-ITEM MAIN [mit header#wikihead + #wikimid] ========== */
#flexmain {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
	padding: 0px 0px 15px;
	border-radius: 0px;
	border: 1px solid rgba(var(--myskin-color-rgb), 0.1);
	background-color: rgb(var(--myskin-bgcolor-rgb));
	color: rgb(var(--myskin-color-rgb));
	/* opacity: .9; */
}
@media only screen and (min-width: 480px) {
	#flexmain {
		margin: 20px 15px 0;
	}
}


/* ========== HEADER / LOGO ========== */
:root {
	--myskin-head-content-bottom: 50px;
}

#wikihead {
	position: relative;
	height: auto;
	margin-bottom: 14px;
	background-color: transparent;
	/* background: tomato; */
}
/* Overlay-Container */
#wikihead-content {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 3px 3px 0;
	background-color: transparent;
	/* border: 1px solid #ccc; */
}
#wikihead-content img {
	/* display:block removes the white space below image */
	display: block;
}
/* Overlay (image) */
#wikilogo {
	position: absolute;
	bottom: 5px;
	left: 15px;
	width: 63px;
	height: auto;
	margin: 0;
	border-radius: 0px;
	border: 1px solid #eee;
}
/* Overlay */
h1#headertitle {
	position: absolute;
	bottom: 5px;
	left: 90px;
	display: inline-block;
	margin: 0;
	margin-right: 2px;
	padding: 0;
	color: rgb(238, 181, 0);
	font-family: 'Alegreya Sans SC',sans-serif;
	font-size: 1.6rem;
	font-weight: var(--myskin-textfont-bold);
	font-style: normal;
	line-height: 0.75em;
	text-align: left;
	/* border-right: 1px solid red; */
}
h1#headertitle a,
h1#headertitle a:hover {
	color: rgb(238, 181, 0);
	font-weight: var(--myskin-textfont-bold);
	font-style: normal;
	text-decoration: none;
}
h1#headertitle span {
	display: inline-block;
	margin-top: 8px;
	font-family: 'Norican';
	font-size: .92em;
  font-style: normal;
  font-weight: 400;
}
/* * 1.19 */
@media only screen and (min-width: 360px) {
	#wikilogo {
		bottom: 8px;
		left: 15px;
		width: 75px;
	}
	h1#headertitle {
		bottom: 8px;
		left: 100px;
		font-size: 1.8rem;
		line-height: 0.7em;
		/* border-right: 1px solid blue; */
	}
}
/* * 1.375 */
@media only screen and (min-width: 480px) {
	#wikilogo {
		bottom: 10px;
		left: 15px;
		width: 100px;
	}
	h1#headertitle {
		bottom: 10px;
		left: 130px;
		font-size: 2.2rem;
		line-height: 0.85em;
		/* border-right: 1px solid orange; */
	}
}
/* * 1.625 */
@media only screen and (min-width: 768px) {
	#wikilogo {
		bottom: 15px;
		left: 25px;
		width: 120px;
	}
	h1#headertitle {
		bottom: 15px;
		left: 165px;
		font-size: 2.6rem;
		line-height: 0.85em;
		/* border-right: 1px solid violet; */
	}
}
/* * 2.22 */
@media only screen and (min-width: 840px) {
	#wikilogo {
		bottom: 50px;
		left: 35px;
		width: 140px;
	}
	h1#headertitle {
		bottom: 50px;
		left: 200px;
		font-size: 3.1rem;
		line-height: 0.9em;
		/* border-right: 1px solid black; */
	}
}



#wikihead-content h2 {
	display: inline-block;
	position: relative;
	/* top: 35px; */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: var(--myskin-textfont-normal);
	font-style: italic;
	line-height: 20px;
	/* background: lightpink; */
}


/* ========== FLEX-CONTAINER #2 ========== */
/* == [WIKILEFT, ARTICLE, WIKIRIGHT, WIKISIDEFLOAT] == */
#wikimid {
	/* border: 1px solid tomato; */
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
	padding: 0 10px;
	/* background-color: tomato; */
	/* background-color: rgba(var(--myskin-sidefloat-shadow-rgb), 0.5); */
}
@media screen and (min-width: 768px) {
	#wikimid {
		flex-wrap: nowrap;
		padding: 0 20px;
	}
}


/* ========== WIKISIDEFLOAT ========== */
#wikisidefloat {
	margin-top: 3px;
	margin-bottom: 28px;
	padding: 0px;
	background-color: rgba(var(--myskin-color-rgb), .04);
	border-radius: 4px;
	border: 2px solid var(--myskin-bordercolor);
}
#wikisidefloat.left,
#wikisidefloat.right {
	float: none;
	margin-right: 2px;
	margin-left: 2px;
}
@media screen and (min-width: 768px) {
	#wikisidefloat {
		margin-top: 10px;
		margin-bottom: 18px;
		/* background-color: #0078D4; */
	}
	#wikisidefloat.left {
		float: left;
		margin-right: 20px;
		margin-left: 0px;
	}
	#wikisidefloat.right {
		float: right;
		margin-right: 0px;
		margin-left: 20px;
	}
}


#mymenu-toggle {
	display: none;
}
#mymenu-toggle-label {
	display: block;
}
#mymenu-toggle-label::before {
	display: block;
	margin: 0;
	padding: 8px 8px 5px;
	content: '☰ MENU';
	color: inherit;
	font-family: var(--myskin-monofont);
	font-size: 19px;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	cursor: pointer;
	z-index: 3;
	transition: content 4s ease-out;
	/* background-color: green; */
}
#mymenu-toggle-label:hover::before {
	color: #000;
}
#mymenu-toggle:checked + #mymenu-toggle-label::before {
	content: '✖';
}
div.menu-wrapper {
	display: flex;
	/* border: 1px solid blue; */
}
div.menu-inner-wrapper {
	width: 100%;
}
div.menu-inner {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
	/* border: 1px solid green; */
}
#mymenu-toggle:checked ~ .menu-wrapper > div > div.menu-inner {   
	max-height: 100%;
}
@media screen and (min-width: 768px) {
	#mymenu-toggle-label {
		display: none;
	}
	div.menu-inner {
		max-height: 100%;
		max-width: 240px;
		margin-top: 4px;
		margin-bottom: 4px;
		/* border: 1px solid green; */
	}
}


/* ========== FLEX-ITEM WIKISIDEBAR / WIKILEFT + WIKIRIGHT ========== */
#wikisidebar {
	flex: 1;
	order: 2;
	margin: 0;
	margin-top: 1.5rem;
	padding: 10px 20px 0;
	border-right: none;
}
@media screen and (min-width: 768px) {
	#wikisidebar {
		flex: 0 0 190px;
		order: -1;
		margin-right: 14px;
		margin-top: 0;
		padding: 0;
		border-right: 1px solid var(--myskin-bordercolor);
		background-color: transparent;
	}
}
#wikisidebarright {
	flex: 1;
	order: 2;
	margin: 0;
	padding: 10px 20px 0;
	border-left: none;
}
@media screen and (min-width: 768px) {
	#wikisidebarright {
		flex: 0 0 190px;
		order: -1;
		margin-left: 14px;
		margin-top: 0;
		padding: 0;
		border-left: 1px solid var(--myskin-bordercolor);
		background-color: transparent;
	}
}

#wikileft, #wikiright {
	margin: 0;
	padding: 6px;
	background: transparent;
	color: var(--myskin-color);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.4rem;
	/* z-index: 4; */
}
@media screen and (min-width: 768px) {
	#wikileft, #wikiright {
		padding: 10px 0 6px;
		overflow: auto;
		/* box-shadow: none; */
	}
	#wikileft {
		padding-right: 6px;
	}
	#wikiright {
		padding-left: 6px;
	}
}
/* These are for the sidebar and sidefloat */
#wikileft .vspace,
#wikiright .vspace,
#wikisidefloat .vspace {
	margin-top: 7px;
}

#wikileft .sidehead,
#wikiright .sidehead,
#wikisidefloat .sidehead {
	/* margin-top erforderlich wenn ohne .vspace */
	margin-top: 7px;
	margin-bottom: 0;
	padding: 3px 2px 3px;
	font-size: 18px;
	font-weight: var(--myskin-textfont-bold);
	font-style: normal;
	/* background: gold; */
}
#wikileft .sidehead > a,
#wikiright .sidehead > a,
#wikisidefloat .sidehead > a {
	color: var(--myskin-sidehead-linkcolor);
	font-weight: var(--myskin-textfont-bold);
	font-style: normal;
}

#wikileft ul,
#wikiright ul,
#wikisidefloat ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wikileft li,
#wikiright li,
#wikisidefloat li {
	margin: 0;
	padding: 0;
	line-height: 1.25rem;
}
#wikileft a,
#wikiright a,
#wikisidefloat a {
	display: inline-block;
	width: 100%;
	padding: 10px 12px 8px;
	color: var(--myskin-sidebar-linkcolor);
	font-size: 18px;
	text-decoration:none;
	/* background-color: #0078D4; */
}
#wikiright > p,
#wikisidefloat .menu-inner > p {
	text-align: right;
}
#wikiright > p > a,
#wikisidefloat .menu-inner > p > a {
	display: inline;
	padding: 6px 9px 9px 12px;
	line-height: 1.9;
}
@media screen and (min-width: 768px) {
	#wikileft .sidehead,
	#wikiright .sidehead,
	#wikisidefloat .sidehead {
		font-size: 1rem;
	}
	#wikileft a,
	#wikiright a,
	#wikisidefloat a {
		padding: 5px 12px 4px;
		font-size: 1rem;
	}
	#wikiright > p > a,
	#wikisidefloat .menu-inner > p > a {
		padding: 4px;
		line-height: 1.4;
	}
}
#wikileft a:hover,
#wikiright a:hover,
#wikisidefloat a:hover {
	background-color: rgba(var(--myskin-color-rgb), .08);
	color: var(--myskin-sidebar-linkhover);
	text-decoration: underline;
}
#wikileft a.selflink,
#wikiright a.selflink,
#wikisidefloat a.selflink {
	background-color: rgba(238, 238, 238, .7);
	color: var(--myskin-sidebar-selflink-color);
	text-decoration: none;
}
#wikileft a > i.fa-solid,
#wikiright a > i.fa-solid,
#wikisidefloat a > i.fa-solid {
	color: var(--myskin-sidebar-icon-color);
}


/* ========== FLEX-ITEM WIKIBODY / WIKITEXT (ARTICLE) ========== */
#wikibody {
	/* background: deepskyblue; */
	flex: 1 1 auto;
	order: 1;
	padding: 10px 0px 0;
	background: transparent;
	position: relative;
}
@media screen and (min-width: 768px) {
	#wikibody {
		order: -1;
	}
}

#wikitext {
	max-width: 100%;
}
#foo-wikitext > p {
	margin-bottom: .5rem;
	/* background: gold; */
}
/* Selektiert p Elemente mit einem Anker Element direkt innerhalb */
/* des Absatzes und wendet diesen Stil auf das p Element an */
#foo-wikitext > p:has(> a[id]) {
	margin-bottom: 0;
	/* height: 0px; */
	font-size: 5px;
	/* border: 1px solid red; */
}
/* Ausnahmen von vorheriger Regel */
#wikitext > p:has(a#unicode),
#wikitext > p:has(a#trailstart),
#wikitext > p:has(a#trailend) {
	margin-bottom: 0;
	height: initial;
	font-size: inherit;
	/* border: 1px solid red; */
}
#wikitext hr {
	margin: 2px 0;
	border-top: 1px solid rgb(var(--myskin-color-rgb));
}
#wikitext h2 {
	font-size: 1.8rem;
	margin-top: 5px;
	margin-bottom: 20px;
	line-height: 1.0em;
}
#wikitext ul {
	margin-left: 0;
	margin-top: 0;
	padding-inline-start: 23px;
}


/* Fotoleiste - rechts + links im Text      */
/* ======================================== */
#wikitext table.PhotostripRight {
  float: right;
  clear: both;
  margin: 12px 0 0 0;
  padding: 0;
  /* border: 1px solid #fff; */
}
#wikitext table.PhotostripRight img {
  margin-bottom: 1em;
  margin-left: 1em;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
@media screen and (max-width: 767px) {
  #wikitext table.PhotostripRight {
    float: none;
    clear: both;
    margin: 10px auto 0 auto;
    padding: 0;
    /* border: 1px solid #fff; */
  }
  #wikitext table.PhotostripRight img {
    margin-bottom: 1em;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
}
/* Fotogalerie, max. 3 bis 1 Bild           */
/* nebeneinander, Bildbreite max. 280px     */
/* ======================================== */
#wikitext table.Fotogalerie {
  width: 100%;
  margin-top: 0.2em;
  margin-bottom: 0.7em;
}
#wikitext table.Fotogalerie td {
  text-align: center;
  font-size: 0.94em;
  font-style: italic;
}
#wikitext table.Fotogalerie td img {
  border: 1px solid #ddd;
  margin: 3px 1px 3px 0px;
  padding: 0;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
#wikitext table.Fotogalerie td a img:hover {
  border: 1px solid #c99;
  margin-top: 2px;
  margin-bottom: 4px;
  padding: 0;
}
@media handheld, only screen and (max-width: 767px) {
  #wikitext table.Fotogalerie td img {
    border: 1px solid #ddd;
    margin: 3px 0 3px 0;
    padding: 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #wikitext table.Fotogalerie td a img:hover {
    border: 1px solid #ddd;
    margin: 3px 0 3px 0;
    padding: 0;
  }
}

#wikitext div.fotogalerie {
  margin-top: 4px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 0.94em;
  font-style: italic;
}
#wikitext div.fotogalerie p {
	margin: 0;
	padding: 0;
}
#wikitext div.fotogalerie img {
	margin: 3px 0 3px 0;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 2px;
}
#wikitext div.fotogalerie a img:hover {
	border: 1px solid #ddd;
	margin: 3px 0 3px 0;
}
@media screen and (min-width: 768px) {
	#wikitext div.fotogalerie img {
		margin: 3px 1px 3px 0px;
		border: 1px solid #ddd;
	}
	#wikitext div.fotogalerie a img:hover {
		border: 1px solid #c99;
		margin: 2px 1px 4px 0px;
	}
}




/* Bildgalerie, verwende ".zoomgalerie" wenn mit Zoomfunktion, ".bildgalerie" wenn ohne Zoomf. */
.zoomgalerie, 
.bildgalerie {
	float: none;
	line-height: 0;
	/*remove the space between images. Use pixel units!*/
	font-size: 0;
	/* padding-top erforderlich fuer sichtb. Zoom-Effekt beim ersten Bild */
	padding-top: 3px;
  width: 100%;
  margin-top: .2em;
  margin-bottom: .7em;
	/* border: 1px solid orange; */
}
.zoomgalerie img, 
.bildgalerie img {
	width: 100%;
	max-width: 100%;
	height: auto;
  border: 1px solid #666;
  margin: 0px 0px 5% 0px;
  padding: 0;
}
.foozoomgalerie img:hover, 
.foobildgalerie img:hover {
  border: 3px solid #c99;
  margin-top: 2px;
  margin-bottom: 4px;
  padding: 0;
}
@media only screen and (min-width: 480px) {
	.zoomgalerie img, 
	.bildgalerie img {
		max-width: 46.6%;
		height: auto;
		margin-right: 3%;
		margin-bottom: 2.5%;
  	padding: 0;
	  /* border: 1px solid blue; */
	}
}
@media only screen and (min-width: 768px) {
	.zoomgalerie img, 
	.bildgalerie img {
		width: 31%;
		max-width: 100%;
		height: auto;
		margin-bottom: 2%;
		margin-right: 2%;
		/* background-color: rgb(255,255,255); */
	}
	/* Zoom-Effekt ueber verlinkten Bildern */
	.zoomgalerie {
		overflow: hidden;
	}
	.foozoomgalerie img {
		-moz-transition: -moz-transform 0.2s ease-out;
		-webkit-transition: -webkit-transform 0.2s ease-out;
		transition: transform 0.2s ease-out;
	}
	.foozoomgalerie img:hover {
		-moz-transform: scale(1.02);
		-webkit-transform: scale(1.02);
		transform: scale(1.02);
	}
}
img:nth-of-type(3n) {
	border-width: 3px;
	width: 100px;
}



/* .pagegroup {line-height: 30px;} */
/* .pagetitle {line-height: 24px; margin: 0; font-size: 24px; font-weight: normal;} */
.pagegroup {
	line-height: 1.4rem;
}
.pagetitle {
	margin: 0;
	margin-bottom: .2em;
	font-family: 'Alegreya Sans SC',sans-serif;
	font-size: 1.6rem;
	font-weight: var(--myskin-textfont-bold);
	font-style: normal;
	line-height: 1.6rem;
	text-align: center;
	/* padding-right schafft Freiraum fuer .pmToggleDarkTheme */
	margin-right: 24px;
	/* text-transform: uppercase; */
}
@media only screen and (min-width: 360px) {
	.pagetitle {
		/* margin: 0; */
		margin-bottom: .05em;
		font-size: 2.3rem;
		line-height: 2.3rem;
		text-align: center;
	}
}
@media only screen and (min-width: 480px) {
	.pagetitle {
		/* margin: 0; */
		margin-top: -2px;
		margin-bottom: .05em;
		font-size: 1.8rem;
		line-height: 1.8rem;
		text-align: left;
	}
}
@media only screen and (min-width: 768px) {
	.pagetitle {
		margin-right: 1.6rem;
		margin-bottom: .4em;
	}
}


/* ========== WIKIFOOT ========== */
#wikifoot {
	margin: 35px 0px 0px;
	padding: 0;
	/* font-family: 'Alegreya Sans SC',sans-serif; */
	font-size: .9375rem;
	/* font-weight: var(--myskin-textfont-normal); */
	text-align: center;
	/* line-height: 1.15rem; */
	/* border: 1px solid green; */
}
#wikifoot address {
	margin: 0;
	padding: 0;
	font-family: 'Alegreya Sans SC',sans-serif;
	font-size: .9375rem;
	font-weight: var(--myskin-textfont-normal);
	line-height: 1.15rem;
	/* border: 1px solid green; */
}
#wikifoot em {
	padding-right: .33em;
	color: rgb(238, 181, 0);
	font-family: 'Norican';
  font-style: normal;
  font-weight: 400;
	font-size: 1.6em;
}
#wikifootmenu {
	margin: 10px 0 0;
}


/* ========== FLEX-ITEM WIKICMDS ========== */
#wikicmds {
	margin: 8px 14px 0;
	color: var(--myskin-footer-linkcolor);
	font-size: 14px;
	font-weight: var(--myskin-textfont-normal);
	text-align: center;
	/* background: gold; */
}
#wikicmds ul {
	margin: 0;
	padding: 0;
	padding-bottom: 2px;
	list-style: none;
	line-height: 1;
}
#wikicmds li {
	display: inline-block;
	padding: 6px 6px;
	line-height: 1.2rem;
	/* background: orangered; */
}
#wikicmds li a {
	color: var(--myskin-footer-linkcolor);
	font-weight: var(--myskin-textfont-normal);
	text-decoration: underline;
}
#wikicmds li a > i.fa-solid {
	color: var(--myskin-wikicmds-iconcolor);

}
#wikicmds li:has(a.createlink),
#wikicmds li:has(a.createlinktext) {
	display: none;
}
#wikicmds #noedit {
	font-size: 12px;
	color: #aaa;
}
#wikicmds li.logout > a {
	color: red;
	font-weight: var(--myskin-textfont-bold);
}
/* Die Klasse 'noauth' wird vom Skin.php generiert */
#wikicmds.noauth {
	margin-top: 0;
	padding-right: 5px;
	text-align: right;
	/* border: 1px solid green; */
}
#wikicmds.noauth li {
	padding: 0;
	line-height: 1;
}
#wikicmds.noauth li a > i.fa-solid {
	font-size: 11px;
	color: #bbb;
}

@media screen and (min-width: 768px) {
	#foo-wikicmds {
		background-color: transparent;
		white-space: nowrap; 
		/* font-size: 1rem;  */
	}
	#wikicmds li {
		padding: 0 5px 2px;
		border: none;
	}
}


/* ========== FLEX-ITEM FOOTER ========== */
footer {
	margin: 0px 0px 0px;
	color: var(--myskin-footer-linkcolor);
	/* font-family: 'Alegreya Sans SC',sans-serif; */
	font-size: .9375rem;
	font-weight: var(--myskin-textfont-normal);
	text-align: center;
	/* background: gold; */
	/* border: 1px solid green; */
}
footer a,
footer a:visited {
	/* color: #5c6670; */
	color: var(--myskin-footer-linkcolor);
	font-weight: var(--myskin-textfont-normal);
	text-decoration: underline;
}
footer > p,
footer .debug-info {
	margin: 0;
	padding: 0;
	font-size: .9375rem;
	line-height: 1.5;
}
footer .light > .fa-solid {
	/* color: var(--myskin-footer-linkcolor); */
	opacity: .5;
}
footer #noedit {
	opacity: .5;
}
@media screen and (min-width: 768px) {
	footer {
		margin: 1px 14px 6px;
		font-size: .875rem;
		text-align: center;
	}
	footer > p,
	footer .debug-info {
		font-size: .75rem;
		line-height: 1.0625rem;
	}
}