/*–– DEFINE THE COLOR SET –––––––––––––––––––––––––––––––––––––––––––*/
:root {

	/*–– BASIC COLOR SHEME ––––––––––––––––––––––––––––––––––––––––––––––*/
	/* 2DO:		BASIC COLORS komplett anpassen.| Ist von der _DEV-Edition nur rüberkpiert worden, aber nicht voll integriert worden  */
	/* 2DO:		TXT-Editions definieren. | Text benötig SOLID Colors, also ohne Transparenz  */

	--BASE:					#EFD495ff;		/* Grundton der Seite					*/
	--BASE-fade:			#EFD495aa;		/* Grundton der Seite, halbtransparent	*/
	--BASE-dark:			#;		/* Grundton der Seite, dunklere Version,	= +20% schwarz				*/
	--BASE-light:			#;		/* Grundton der Seite, hellere Version,		= +20% weiß					*/
	--BASE-light_solid:		#F2DDB1ff;
	--BASE-shiny:			#FCD24Cff;		/* Grundton der Seite, Leuchtendere Version	= +1,6 Saturation	*/

	--DARK:					#400000bb;		/* Dunkler Grundton; z.B. für dunklen Text, dunkler Hintergrund, dunkle Ränder etc. */
	--DARK_solid:			#6f3928ff;		/* ohne Transparenz */						/* #6f3928 = #400000bb auf BG:#EFD495ff	*/
	--DARK-fade:			#40000088;		/* Dunkler Grundton, halbtransparent	*/
	--DARK-dark:			#200000bb;		/* Dunkler Grundton, dunklere Version	*/
	--DARK-dark_solid:		#573928ff;		/* ohne Transparenz */						/* #573928 = #200000bb auf BG:#EFD495ff	*/
	--DARK-light:			#580000bb;		/* Dunkler Grundton, hellere Version	*/
	--DARK-light_solid:		#800000ff;	/* Org: #9e3928ff; ohne Transparenz; geschätzt */		/* #9e3928 = #800000bb auf BG:#EFD495ff	*/
	--DARK-shiny:			#BB0000bb;		/* Dunkler Grundton, Leuchtendere Version; zum hervorheben von Überschriften oder Elementen */
	--DARK-shiny_solid:		#c93928ff;		/* ohne Transparenz */						/* #c93928 = #BB0000bb auf BG:#EFD495ff	*/

	--LIGHT:				#F7E9C8ff;		/* Heller Grundton; Komplement zu DARK		*/
	--LIGHT-fade:			#F7E9C8aa;		/* Heller Grundton, halbtransparent			*/
	--LIGHT-dark:			#;		/* Heller Grundton, dunklere Version		*/
	--LIGHT-light:			#;		/* Heller Grundton, hellere Verison			*/
	--LIGHT-light_solid:	#FFF1D0ff;		/* ohne Transparenz */
	--LIGHT-shiny:			#FFF1D0bb;		/* Heller Grundton, leuchtendere Version	*/
	--LIGHT-shiny_solid:	#FFF1D0ff;		/* ohne Transparenz */

	--LIGHTEN:				#FFFFFF55;		/* Overlay to lighten the objects below			*/
	--LIGHTEN-slight:		#FFFFFF33;		/* Lighten slightly (i.e. mouse-over reaction)	*/
	--LIGHTEN-strong:		#FFFFFFAA;		/* Lighten dominantly (i.e. fade-out BG)		*/
	--DARKEN:				#00000044;		/* Overlay to darken the objects below	*/
	--DARKEN-slight:		#00000022;		/* Darken slighty						*/
	--DARKEN-strong:		#00000099;		/* Darken dominantly					*/

	--COLORIZE-slight:		#DDBB7766;		/* Make visible by colorizing the default-BG	*/






	/*—— COLORS BY THEIR PURPOSE —— Refer to the Basic Color Sheme ————— */

	--BG:				var(--BASE, #EFD495ff);
	--TXT:				var(--DARK-dark_solid);			/* Standard Text					//was #800000; */
	--X-BG:				var(--LIGHT-shiny);				/* X = BG hervorheben				//was #F7E9C8; */
	--X-TXT:			var(--DARK-shiny, #BB0000);		/* X = Text hervorheben				//was #BB0000; */
	--LNK:				var(--TXT);
	--BRDR:					transparent;		/* 			//was #111 */
	--HIGHLIGHT-area:	var(--LIGHTEN-slight);
	--LIGHT:				#FFF3;
	--X-LIGHT:				#FFF7;

	--BG-box:			var(--COLORIZE-slight);			/* default fill for boxes/frames	//was --LIGHTEN, #FFF7 */
	--BG-pics:			var(--DARKEN);					/* background for picture subtitle	*/
	--TXT-pics:			var(--LIGHT-shiny);					/* text for picture subtitle	*/

	--BG-title:				#D7A83A;
	--TXT-title:		var(--DARK_solid);				/*								//was #B00000; */
	--X-TXT-title:			#BB0000;
	--LNK-title:		var(--TXT-titled);
	--BRDR-title:		var(--BRDR);

	--BG-menu:				#B00000;
	--TXT-menu:				#F7E9C8;
	--X-BG-menu:			#C00000;
	--X-TXT-menu:			#FFF1D0;
	--LNK-menu:			var(--TXT-menu);
	--BRDR-menu:		var(--BRDR);

	--BG-menu-title:	var(--BG-title);
	--TXT-menu-title:	var(--TXT-title);
	--X-TXT-menu-title:	var(--X-TXT-title);
	--LNK-menu-title:	var(--LNK-title);
	--BRDR-menu-title:	var(--BRDR-menu);



	/*== DEFINE THE FONTS SIZES =====================================*/
	--FS:					9.5pt;				/* Standard-Text-Größe		*/
	--FS-title:				2.6em;				/* Überschriften			*/
	--FS-menu:			var(--FS);				/* Menü-Einträge			*/
	--FS-menu-title:	var(--FS-menu);			/* Überschrift eines Menü-Eintrags	*/
	--FS-ticker:		calc(var(--FS) * 1.35);	/* Schriftgröße des Tickers			*/



	/*== DEFINE THE FRAMES, POSITIONS AND BORDERS ===================*/
	/* NOTE:  This is the column sheme of the old Alex Layout */
	--w-col1:				17.2%;				/* 180px */
	--w-col2:				43.6%;				/* 456px */
	--w-col3:				21.7%;				/* 227px */
	--w-col4:				17.5%;				/* 183px */
	--w-ausgleich:			0.05rem;			/* Rundungsfehler-Ausgleich */

	--intent-top:			0.1em;				/* Einrücken von Text */
	--intent-bottom:		0.25em;
	--intent-left:			0.4em;
	--intent-right:			0.25em;
												/*	0.1639rem = kleinster Wert ohne Spaltensprung bei resize */
	--border-row:			0.0625rem;			/* Randstärken; sie zählen zur Objektbreite hinzu! */
	--border-col:			calc(var(--border-row) / 2);

	--padding-col:			0.125rem;			/* Spalt zwischen Spaltenrand und Inhalt */

	--width-available:	calc(100% - 0.5em - 0.0625rem - 0.0625rem);	/* opt. <li> Spaltenbreite mit Randberücksichtigung = -moz-available */

												/* -- NEUES BLOCK-LAYOUT -- */
	--margin-block:			0.3rem;				/* Abstand zwischen den Objekt-Blöcken (neues Layout) */
	--border-width:			0.18rem;			/* Randabstand zwischen Parent- und Objekt */
	--border-rad:			0.35rem;			/* Definiert den Borderradius, sofern er angewandt wird. */
	--border-rad-page:		calc(var(--border-rad) + var(--border-width)) calc(var(--border-rad) + var(--border-width)) 0 0;
	--shadow-item:			0.1rem 0.1rem 0.85rem 0.2rem #0002;		/* Schatten der Blöcke */
	--shadow-block:			0.1rem 0.1rem 0.85rem 0.3rem #0003;		/* Schatten der Blöcke */
	--shadow-page:			0.1rem 0.1rem 0.85rem 0.3rem #0003;		/* Schatten der Seite */



	/*== DEFINE THE PATHS TO THE SITE SECTIONS ======================*/

	--WS-forum:				"/phpbb/";			/* currently not used. obsolete?  */

}	/*===============================================================*/

body {
	background-image: url('/assets.g/img/ws_bg.jpg');
	background-color: var(--bg-col);
	/* background-blend-mode: color-dodge;		/**/
	border-style: solid; border-color: var(--BRDR); border-width: 0;
	max-width: 100%; height: 100%;		/* min-width: 100%;    nicht setzen, da der V-Scrollbalken zur Verdeckung führt. => H-Scrollbalken */

	text-align: left;
	font-family: 'Raleway', 'Roboto', 'Verdana', 'Liberation Sans', 'Helvetica', sans-serif;
	font-size: 16px;					/* define rem standard */
}

ul, ul > li { list-style-type: none; padding: 0; margin: 0; }		/* Eliminate default list settings */

p {
	padding: 0.25em 0;
	margin: 0;
}

#page, #pagebody {								border-width: 0.03125rem;		/* nur für den IE notwendig */
	padding: 0 0 0.5rem 0;
	margin: 36px auto;					/* #2DO: Fußbereich reagiert nicht mit 36px Abstand — Das ist unerwartet. */
	font-size: var(--FS);
	color: var(--TXT);
	background-color: var(--BG);
	border-color: var(--BRDR); border-style: solid;
	border-width: var(--border-col);	/* 0.0125rem; */
	border-radius: 0.6em 0.6em 0 0;
	box-shadow: var(--shadow-page);
	/* width: 1068px; 					/* ?? 1046 ??		height: 1564px; */

	max-width: 1068px;					/* max-width: 1090px *//* size phpBB */
	min-width: 150px;
	width: 96%;
	text-align: center;
	/* margin: 0 auto;					/* Aktivieren, wenn #header außerhalb #page[body] */
}

#header {	
	position: relative;					/* Basis für die Ticker-Positionierung -*/
	padding: 0;
	margin: 0 auto;						/* wenn #header innerhalb #page[body] */
	/* width: calc(100% - 0.36rem);		not required *//* substract the border-width (2x) */
	max-height: max-content;
	border-color: var(--BRDR); border-style: solid;
	border-width: var(--border-width);
	border-radius: var(--border-rad) var(--border-rad) 0 0;
	line-height: 0;
	/* Aktivieren, wenn #header außerhalb von #page[body] ist		*//*
	margin: 36px auto 0 auto;
	font-size: var(--FS);
	color: var(--TXT);
	background-color: var(--BG);
	box-shadow: var(--shadow-page);
	max-width: 1068px;
	min-width: 150px;
	width: 96%;
	text-align: center;
	/* ENDE · #header außerhalb #page[body]*/
}
#header img {
	min-width: 100%; max-width: 100%;
	max-height: 188px;
	border-radius: var(--border-rad);
}

/*	DEFINE COLUMN WIDTH	*/

#menu {
	max-width: 180px;
	width: calc(var(--w-col1, 17.2084%) - calc(2 * calc(var(--border-col) + var(--padding-col) + var(--w-ausgleich))));
}
#content {
	max-width: 456px;
	width: calc(var(--w-col2, 43.5946%) - calc(2 * calc(var(--border-col) + var(--padding-col) + var(--w-ausgleich))));
}
#col3 {
	max-width: 227px;
	width: calc(var(--w-col3, 21.7017%) - calc(2 * calc(var(--border-col) + var(--padding-col) + var(--w-ausgleich))));
	/*	width: calc(calc(var(--w-col3) + var(--w-col4)) / 100 * var(--w-col3));	*/
}
#col4 {
	max-width: 183px;
	width: calc(var(--w-col4, 17.4952%) - calc(2 * calc(var(--border-col) + var(--padding-col) + var(--w-ausgleich))));
	/*	width: calc(calc(var(--w-col3) + var(--w-col4)) / 100 * var(--w-col4));	*/
}
#right-cols {
	padding:0;
	margin: auto;
	max-width: 400px;
	width: calc(var(--w-col3) + var(--w-col4));
}

/*	DEFINE COMMON APPEARANCE OF THE COLUMNS	*/

#menu, #content, #artikel, #teaser, #col3, #col4 { /* Eigenschaften der Spalten zueinander */
											border-width: 0.03125rem;		/* nur für den IE notwendig */
	display: inline-block;
	vertical-align: top;
	text-align: center;
	min-width: auto;
/*	color: var(--TXT);				/* hat #page definiert. */
/*	background-color: var(--BG);	/* hat #page definiert. */
	border-color: var(--BRDR); border-style: solid;
	border-width: var(--border-row)	var(--border-col) 0 var(--border-col);	/* 0.0625rem 0.03125rem 0 0.03125rem; */
	padding: 0 var(--padding-col);
	margin: 0.125rem 0;
	/* max-width: var(--width-available); */
}

#menu ul, #content ul, #artikel ul, #teaser ul, #col3 ul, #col4 ul {		/* Sub-Liste */
	padding: 0.0625rem 0;
	border-width: 0;
	margin: 0 0 var(--margin-block) 0;
	min-width: 100%;
}

#menu li, #content li, #artikel li, #teaser li, #col3 li, #col4 li {	/* Inhalt */
											border-width: 0 0 0.0625rem 0;		/* nur für den IE notwendig */
	/* display: inline-block;
	vertical-align: middle;		/* nur zusammen mit display i-b */
	text-align: left;
	line-height: 1.25em;
	margin: auto;
	border-color: var(--BRDR); border-style: solid;
	border-width: 0 0 var(--border-row) 0;
}
#menu li, #artikel li, #teaser li, li p {	/* Text-Positionierung */
	padding: var(--intent-top) var(--intent-right) var(--intent-bottom) var(--intent-left);
}
#menu li {									background-color: #B00000;		/* nur für den IE notwendig */
	color: var(--TXT-menu);
	background-color: var(--BG-menu);
}
#menu li a > img {	/* ausgleichen des <li>-paddings */
	margin: calc(-1 * var(--intent-top)) calc(-1 * var(--intent-right)) calc(-1 * var(--intent-bottom)) calc(-1 * var(--intent-left));
	min-width: calc(100% + var(--intent-left) + var(--intent-right));
}

#content li, #artikel li, #teaser li, #col3 li, #col4 li {
	color: var(--TXT);
	background-color: transparent;	/* erase value.  var(--BG);		#EFD495;	*/
}

#col3 li {
	background-color: var(--X-LIGHT);
}
#col3 .media li {
	margin: auto auto 0.1rem auto;		/* etwas mehr Abstand zum nächsten Media Item */
}

#menu > li, #content > li, #artikel > li, #teaser > li, #col3 > li, #col4 > li {	/* Überschrift, ergänzend zu "Inhalt"-Eigenschaften */
											background-color: #D7A83A;		/* nur für den IE notwendig */
	color: var(--X-TXT-title);
	background-color: var(--BG-title);
	padding: var(--intent-top) var(--intent-right) var(--intent-bottom) var(--intent-left);
	border-radius: var(--border-rad) var(--border-rad) 0 0;
}

/* DEFINE INDIVIDUAL CHARACTERISTICS OF THE COLUMNS */

#menu ul {
	padding: 0;
}
#menu a, #artikel a, #teaser a, #col3 a, #col4 a, .media object {	/* not  #content a 	– marquee  will breakt ! */
	display: block;	/* with width=100% it makes the whole li-cell a link */
	width: 100%;
	color: var(--LNK);
	text-decoration: none;
}
#menu a {
	color: var(--LNK-menu);
}
#menu a:hover, #content a:hover, #artikel a:hover, #teaser a:hover, #col3 a:hover, #col4 a:hover {
	background-color: var(--HIGHLIGHT-area, #fff3);
	/* box-shadow: var(--shadow-item);	/**/

}
#menu img, #content img, #col3 img, #col4 img, #content marquee, .fb, .donate, object, video, iframe {
	display: block;
	margin: auto;
	max-width: 100%;
	/*	min-width: 100%;	*/
}

#content li {
	border-width: 0;
}
#content > li, #artikel > li, #teaser > li {	/* Überschrift */
/*	Einschalten für "Alex Original" Marquee-Überschrift	/**/

	color: var(--TXT);	/* color: #8F0A00; */
	font-size: var(--FS-title); /* 1.25rem; */ font-weight: normal;	/* bold; *//* scheint sich nur auf Titel "Reiseberichte" auszuwirken */
	background-color: transparent;	/* erase value of title defaults.  var(--BG); */
/*	padding: 0.125rem;
	margin: 0.1875rem auto 0.1875rem 0.1875rem 			/* 2DO:  px uf rem umrechnen.*/
	padding: 0.3em;
	margin: 0.3em 0 0.3em 0;
}

#content .picture {	/* Das Bild */					border-width: 0.0625rem 0;		/* nur für den IE notwendig */
	position: relative;
	border-color: var(--BRDR); border-style: solid;
	border-width: var(--border-row) 0;
	padding: 0.25rem 0;
}
#content .picture img { border-radius: var(--border-rad); }   

.picture > .info { /* Info-Text zum Bild *//* 2DO: Finish design */
	DISPLAY: NONE;					/* <<—— Block until designed propperly. —— */
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: var(--FS);
	font-weight: 450;
	text-align: right;
	line-height: 1.5em;
	padding: 0 0.25em;
	color: var(--TXT-pics);
	background-color: var(--BG-pics);
}

/* START: TICKER  marquee-animation - - - */
.ticker {
	display: block;
	position: absolute;		/* braucht position: relative bei #header */
	bottom: 2%;
	right: 2%;
	margin: 0;
	padding: 0;
	width: 64%;
	/* height: var(--FS-ticker);	/* 1.47em; */
	min-height: 1.2em;				/* überschreibt "height", Vorzug */
	line-height: 90%;
	font-size:  var(--FS-ticker);	/* 1.47em; */
	font-family: 'courier new', courier, monospace;
	font-weight: bold;
	color: var(--X-BG);
	text-decoration: none;
	overflow: hidden;
}
.ticker a {
	color: inherit;
	text-decoration: none;
}
.ticker a::after {
	content: "	 +++ ";
	font-weight: normal;
}
.ticker p {
	white-space: nowrap;			/* verhindert den Zeilenumbruch */
	animation-name: 'Wüstenschiff Ticker';
	transform: translateX(0%);
	animation: ticker 45s linear infinite;
	position: absolute;
}
.ticker p::before {
	content: " +++ ";
	font-weight: normal;
}
@keyframes ticker {
	0%	 { transform: translateX(15%); }
	100% { transform: translateX(-100%); }
}
/* END: TICKER  marquee-animation - - - */

.banner {
	background-color: var(--BG-box);		/* Den Canvas von Nur-Text-Bannern mit etwas Tönung einrahmen. */
}
.fb {											background-color: #D7A83A;		/* nur für den IE notwendig */
	/* diplay sorgt für fb + donate = nebeneinander, wenn Platz */
	/*	display: inline-block; */
	text-align: center !important;
	line-height: 6em !important;

	border-style: solid; border-color: var(--BRDR);
	border-width: var(--border-row) 0 !important;
	background-color: var(--BG-title) !important;

}
.fb iframe {						/* style=	margin:0; border:medium none; overflow:hidden; width:292px; height:55px;word-spacing:0 */
	min-width: auto;				/*  TEST-CODE */
	max-width: 59%;
	max-height: 70px;
	overflow: hidden;
}
.donate {
	/* display: inline-block; */
	text-align: center !important;
	line-height: 6em !important;
}
.donate form input, .donate img {
	display: inline-block;
	vertical-align: middle;
}
/* START: Der übergeblendete Standort-Titel der WebCams: */
.media li a {	position: relative; }
.media li a p {
	position: absolute; top: 0.1rem; left: 0.3rem; display: inline-block;
	width: max-content; padding-left: 0.5em; padding-right: 0.5em;
	border-radius: var(--border-rad);
	background-color: #00000033; color: #ffffffdd; text-shadow: -0.05em 0.05em 0.4em #000;
}
.media li a p::before {		content: "· "; }
.media li a p::after {		content: " ·"; }		/* ENDE: Der übergeblendete Standort-Titel der WebCams. */

video, object {
	display: inline-block;
	vertical-align: middle;
}
video.yt a:hover {	/* 2DO: ––	experimental */
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	url('./media/yt_run.png')
}

#artikel li, #teaser li {
	/* color: #800000; */
	text-align: left;
}
#artikel a, #teaser a {
	color: var(--X-TXT);	/* color: #F7E9C8; */
	font-weight: bold;
}
#artikel ul p, #teaser ul p {
	padding: 0;	margin: 0;
	color: var(--TXT);
	font-weight: normal;
}

#artikel > ul li, #teaser > ul li { /* make the title slightly lager ... */
	font-size: 1.0em;
	padding-top: 0.3em;
}
#artikel > ul p, #teaser > ul p {  /* ... and the sub slightly smaller. */
	font-size: 0.9em;
}

#teaser > ul li { /* make the teaser-version slightly larger */
	font-size: 1.2em;
	padding-top: 0.4em;
}
#teaser > ul p {
	font-size: 0.85em;
}
#artikel > li, #teaser > li {  /* Headline */
	color: var(--TXT-title);		/* inverse Verwendung, weil inverse Farbgebung */
}

#col3 img, #col3 object, #col3 embed, #col3 video, #col3 iframe,
#col4 img, #col4 object, #col4 embed, #col4 video, #col4 iframe {		/* Inhalte */
	text-align: center;
	vertical-align: middle;
	max-width: 100%;	/* required by YT-object */
	max-height: 100%;	/* required by YT-object */
}

/* Limit resources	*/
.banner img, .media video, .media object {
	max-height: calc( calc(7.5em + 7.5rem) / 2);
}
.media img, .media video, .media object {	/* allways upscale to max, accepting assymetric xy-scale */
	max-height: calc( calc(9em + 9rem) / 2);
/*		width: calc(100% + 0.65em);	*/
	min-width: 100%;
}
.wbg img, .wbg video, .wbg object, .wbg iframe {	/* noch nicht genutzt –– stattdessen:  "fix-h" */
	min-height: calc( calc(5em + 5rem) / 2) !important;
	max-height: calc( calc(5em + 5rem) / 2) !important;
}
.fix-w img {										/* Nicht mehr genutzt. Wurde für quadratische Logos verwendet */
	/* Standard-Vorgabe - über das style Attribut ggf. individuelle Werte setzen */
	width: calc( calc(6em + 6rem) / 2) !important;
	min-width: auto !important;
}
.fix-h img {
	/* Standard-Vorgabe - über das style Attribut ggf. individuelle Werte setzen */
	max-height: calc( calc(5.5em + 5.5rem) / 2) !important;
	/*	min-height: calc( calc(5em + 5rem) / 2) !important;		/* testing	*/
	min-width: auto !important;
	
	height: 8vw;
}
/* Das Mittel über em und rem ergibt eine dezentere Skalierung als der umgebende Text */
.canvas img {
	padding: 5% 7.5%;
}
.white-bg img {
	background-color: #f5f5f5;
}