/*
Theme Name: Trainer Gumbel Classic
Description: WordPress-Nachbau der alten Website trainer-gumbel.de (Layout "Fabrizio" von PVII, Menü "my_arktic"), zusätzlich responsiv.
Author: rw2 Robert & Willi Schneider GbR
Version: 1.0.2
Text Domain: tg-classic
*/

/* ---------- Grundlayout (aus Lefty/fabL.css) ---------- */
html { scroll-behavior: smooth; }
body {
	background-image: url(img/fabL_pbg.jpg);
	background-color: #B6A29B;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 101%;
	min-width: 748px;
	margin: 24px 0;
	padding: 0;
}
[hidden] { display: none !important; }
#contentwrapper {
	background-color: #F8F9F1;
	background-image: url(img/fabL_shadow.jpg);
	background-repeat: repeat-y;
	margin: 0 auto;
	width: 748px;
}
#contentwrapper::after { content: ""; display: table; clear: both; }
#masthead h1 { margin: 0; line-height: 0; }
#masthead img { display: block; border: 0; }
#tg-menu-toggle { display: none; }

#maincontent {
	float: right;
	font-size: 0.8em;
	line-height: 1.5em;
	padding: 0 36px 0 24px;
	width: 478px;
}
#maincontent p { margin: 6px 0 12px; display: block; clear: both; }
#maincontent h2 {
	color: #9C8C85;
	font-size: 2em;
	font-weight: normal;
	letter-spacing: 0.2em;
	line-height: normal;
	margin: 24px 0 0 0;
}
#maincontent h3 {
	color: #B4A79F;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: 0.2em;
	line-height: normal;
	margin: 24px 0 0 0;
}
#maincontent a:link { color: #B4A79F; }
#maincontent a:visited { color: #B9A199; }
#maincontent a:hover, #maincontent a:active, #maincontent a:focus { color: #333333; }
#maincontent img {
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	padding: 5px;
	border: 1px dashed #DBCEBD;
}
#maincontent img[align="left"], #maincontent img.alignleft { float: left; }
#maincontent img[align="right"], #maincontent img.alignright { float: right; }
#maincontent hr {
	border: 0;
	border-top: 1px solid #808080;
	height: 0;
	margin: 8px 0;
}

/* Datum, Intro und Brotkrumen */
#tg-date, #breadcrumbs { font-size: 0.9em; }
#tg-date p { margin: 12px 0 6px; }
#breadcrumbs a { font-size: 1em; text-decoration: none; }
.tg-trail { padding: 2px 0; font-size: 0.9em; }
#introControls { margin: 0; }
#introControls li { list-style-type: none; }
#introSection {
	background-image: url(img/fabL_quote.gif);
	background-repeat: no-repeat;
	color: #938266;
	font-size: 1.4em;
	letter-spacing: 0.1em;
	line-height: 1.4em;
	margin: 20px auto 10px;
	padding: 0 0 0 45px;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	width: 340px;
}

/* Unterseiten-Listen (alte #CoSeiten / #Parallelseiten) */
#CoSeiten::after { content: ""; display: table; clear: both; }
#CoSeiten ul, #Parallelseiten ul { margin: 0; padding: 0; }
#CoSeiten li, #Parallelseiten li { list-style-type: none; text-align: left; }
#CoSeiten a, #Parallelseiten a { display: block; margin: 2px; font-size: 0.9em; text-decoration: none; }
#Parallelseiten { clear: both; }

/* Sonstige Inhaltsklassen der alten Seite */
#stimmen {
	background-color: #F4F3EE;
	padding: 10px;
	clear: right;
	float: right;
	width: 160px;
	font-size: 12px;
	font-style: italic;
	border: 1px solid #DED0B6;
}
#slogan { font-weight: normal; font-style: italic; color: #9C8C85; text-align: center; font-size: 12px; }
.picture { float: left; margin: 2px 5px; border: 1px solid #D6C3A2; padding: 2px; }
#content::after, #footercontent::after { content: ""; display: table; clear: both; }
#footercontent { clear: both; padding-bottom: 12px; }

#tagline {
	background-image: url(img/fabL_bottom.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 28px;
}
#tagline p { margin: 0; display: none; }

#sidebar {
	color: #866B64;
	float: left;
	font-size: 0.75em;
	padding: 12px;
	width: 160px;
}
#sidebar h3 { color: #9C8C85; font-size: 1.2em; margin: 24px 0 0 0; }
#sidebar p { margin: 6px 0 12px 0; }
#sidebar a { color: #333333; text-decoration: none; font-weight: bold; }
#sidebar a:hover { color: #FFFFFF; text-decoration: none; font-weight: bold; }
#tg-address a:hover { color: #FFFFFF; }

#footer {
	clear: both;
	color: #E3DFDD;
	font-size: 0.75em;
	margin: 0 auto;
	padding: 12px 24px 0 24px;
	width: 700px;
}
#footer a:link, #footer a:visited { color: #675954; }
#footer a:hover, #footer a:active, #footer a:focus { color: #FFFFFF; }

/* ---------- Menü (aus cssmenus2/skins/my_arktic/vertical.css) ---------- */
div.vertical, nav.vertical { clear: both; }
nav.vertical::after { content: ""; display: table; clear: both; }
.my_arktic, .my_arktic ul { margin: 0; padding: 0; list-style: none; }
.my_arktic {
	background: #CECECE url(img/menu/bgtop_v.gif) repeat-y;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .75em;
	font-weight: bold;
	border: 1px solid #afafaf;
	width: 180px;
}
.my_arktic li {
	border-bottom: 1px solid white;
	width: 180px;
	position: relative;
	text-align: left;
}
.my_arktic ul {
	background: #FFFFFF url(img/menu/bg.gif) repeat-y;
	border: 1px solid #afafaf;
	font-weight: bold;
	position: absolute;
	left: 100%;
	top: -1px;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease, visibility 0s linear .35s;
}
.my_arktic ul li { width: 200px; }
#sidebar .my_arktic a {
	display: block;
	text-decoration: none;
	line-height: 18px;
	color: #555555;
	padding: 1px 2px 1px 21px;
	border-left: 2px solid #385698;
	cursor: pointer;
	font-weight: bold;
}
#sidebar .my_arktic ul a { border: none; color: #333333; }
.my_arktic li:hover > ul, .my_arktic li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s ease, visibility 0s;
}
/* aktuelle Seite */
.my_arktic > li.current-menu-item, .my_arktic > li.current-menu-ancestor, .my_arktic > li.current-page-ancestor { background-color: #E3D98B; }
#sidebar .my_arktic > li.current-menu-item > a, #sidebar .my_arktic > li.current-menu-ancestor > a, #sidebar .my_arktic > li.current-page-ancestor > a { color: #000000; border-left-color: #4469ba; }
#sidebar .my_arktic ul li.current-menu-item > a { color: #FF9900; }
/* Mouse-over */
.my_arktic li:hover, .my_arktic li:focus-within { background-image: none !important; background-color: #996633; }
#sidebar .my_arktic li:hover > a, #sidebar .my_arktic li:focus-within > a { color: #333333 !important; border-left-color: #92a7d7; }
/* Pfeile bei Untermenüs */
#sidebar .my_arktic > li.menu-item-has-children > a { background: url(img/menu/arrow_right_color.gif) no-repeat right center; }
#sidebar .my_arktic ul li.menu-item-has-children > a { background: url(img/menu/sarrow_right_dark.gif) no-repeat right center; }
#sidebar .my_arktic > li.menu-item-has-children:hover > a { background-image: url(img/menu/arrow_right_light.gif); }
#sidebar .my_arktic ul li.menu-item-has-children:hover > a { background-image: url(img/menu/sarrow_right_light.gif); }

/* ---------- Responsiv (neu, nicht im Original) ---------- */
@media (max-width: 780px) {
	body { min-width: 0; margin: 0; background-attachment: fixed; }
	#contentwrapper { width: auto; background-image: none; }
	#masthead img { width: 100%; height: auto; }

	#tg-menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 12px 16px;
		background: #CECECE url(img/menu/bgtop_v.gif) repeat-y;
		border: 0;
		border-top: 1px solid #afafaf;
		border-bottom: 1px solid #afafaf;
		border-left: 4px solid #385698;
		color: #333;
		font: bold 15px/1.2 Verdana, Arial, Helvetica, sans-serif;
		cursor: pointer;
		text-align: left;
	}
	.tg-burger, .tg-burger::before, .tg-burger::after {
		display: block;
		width: 18px;
		height: 2px;
		background: #333;
		position: relative;
		content: "";
	}
	.tg-burger::before { position: absolute; top: -6px; }
	.tg-burger::after { position: absolute; top: 6px; }

	#tg-body { display: flex; flex-direction: column; }
	#sidebar { display: contents; }
	#tg-nav { order: -1; display: none; }
	#tg-nav.is-open { display: block; }
	#tg-address { order: 2; padding: 4px 16px 16px; font-size: 0.85em; }

	.my_arktic { width: auto; font-size: 14px; border-width: 0 0 1px; }
	.my_arktic li, .my_arktic ul li { width: auto; }
	.my_arktic ul {
		position: static;
		visibility: visible;
		opacity: 1;
		transition: none;
		border: 0;
		border-top: 1px solid #fff;
	}
	#sidebar .my_arktic a { line-height: 20px; padding: 8px 12px 8px 16px; }
	#sidebar .my_arktic ul a { padding-left: 32px; }
	#sidebar .my_arktic ul ul a { padding-left: 48px; }
	#sidebar .my_arktic li.menu-item-has-children > a { background-image: none !important; }
	.my_arktic li:hover, .my_arktic li:focus-within { background-color: transparent; }
	.my_arktic > li.current-menu-item, .my_arktic > li.current-menu-ancestor, .my_arktic > li.current-page-ancestor { background-color: #E3D98B; }

	#maincontent { float: none; width: auto; padding: 0 16px; font-size: 0.9em; }
	#maincontent h2 { font-size: 1.7em; letter-spacing: 0.1em; }
	#maincontent img { max-width: 100%; height: auto; box-sizing: border-box; }
	#introSection { width: auto; max-width: 340px; }
	#stimmen { float: none; width: auto; }
	#tagline { background-size: 100% 100%; }
	#footer { width: auto; padding: 12px 16px 24px; }
}
@media (max-width: 480px) {
	#maincontent img[align="left"], #maincontent img[align="right"], #maincontent img.alignleft, #maincontent img.alignright {
		float: none;
		display: block;
		margin: 0 auto 10px;
	}
	#introSection { font-size: 1.2em; padding-left: 40px; }
	#maincontent h2 { font-size: 1.45em; letter-spacing: 0.06em; overflow-wrap: anywhere; }
}
