/* =========================================================
   PlanetMTG – Header/Footer-Navigation + Responsive Layout
   ========================================================= */

/* ---------- Header-Navigation ---------- */
.pm-header {
	position: relative;
	z-index: 50;
	background: #003366;
	background: linear-gradient(180deg, #0a4a8c 0%, #003366 100%);
	border-bottom: 3px solid #d00000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	font-family: arial, helvetica, sans-serif;
}
.pm-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 960px;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
}
.pm-header .pm-brand,
.pm-header .pm-brand:visited {
	flex: 0 0 auto;
	margin-right: 24px;
	padding: 12px 0;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: .5px;
	color: #ffffff;
	text-decoration: none;
}
.pm-header .pm-brand span {
	color: #77caf7;
}
.pm-header .pm-brand:hover {
	color: #ffffff;
}
.pm-nav-toggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.pm-burger {
	display: none;
}
.pm-nav {
	flex: 1 1 auto;
}
.pm-nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pm-nav li {
	margin: 0;
	padding: 0;
}
.pm-header .pm-nav a,
.pm-header .pm-nav a:visited {
	display: block;
	padding: 15px 12px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
}
.pm-header .pm-nav a:hover,
.pm-header .pm-nav a:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
	border-bottom-color: #77caf7;
}
.pm-header .pm-nav a.is-active {
	border-bottom-color: #77caf7;
	color: #ffffff;
}

/* ---------- Footer-Navigation ---------- */
.pm-footer {
	margin-top: 12px;
	background: #003366;
	border-top: 3px solid #d00000;
	color: #c9d6e6;
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
}
.pm-footer .pm-wrap {
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	gap: 8px 24px;
}
.pm-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pm-footer li {
	margin: 0;
	padding: 0;
}
.pm-footer a,
.pm-footer a:visited {
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
}
.pm-footer a:hover,
.pm-footer a:focus-visible {
	color: #77caf7;
	text-decoration: underline;
}
.pm-footer a.is-active {
	color: #77caf7;
}
.pm-footer .pm-copy {
	margin: 0;
	font-size: 12px;
}

/* ---------- Allgemeine Sicherheitsnetze ---------- */
#main img,
#main video,
#main iframe {
	max-width: 100%;
}
#main img {
	height: auto;
}
/* 1px-Spacer/Trennlinien nicht durch height:auto zu Quadraten aufblähen */
img.line,
img[src*="px_"]:not([height]),
img[src*="px_"][height="1"] {
	height: 1px !important;
}
img[src*="px_"][height="2"] {
	height: 2px !important;
}
img[src*="px_"][height="10"] {
	height: 10px !important;
}
img[src*="px_"][height="103"] {
	height: 103px !important;
}

/* =========================================================
   Tablet & Mobile (das alte Layout ist ~960px breit)
   ========================================================= */
@media (max-width: 980px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}
	body {
		font-size: 15px;
		background-image: none;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* Header: Burger-Menü */
	.pm-wrap {
		padding: 0 12px;
	}
	.pm-header .pm-brand {
		padding: 11px 0;
		font-size: 19px;
	}
	.pm-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin: 2px -6px 2px auto;
		padding: 0 10px;
		box-sizing: border-box;
		cursor: pointer;
		border-radius: 4px;
		-webkit-tap-highlight-color: transparent;
	}
	.pm-burger span {
		display: block;
		height: 3px;
		border-radius: 2px;
		background: #ffffff;
		transition: transform .2s, opacity .2s;
	}
	.pm-nav-toggle:focus-visible + .pm-burger {
		outline: 2px solid #77caf7;
	}
	.pm-nav-toggle:checked + .pm-burger span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.pm-nav-toggle:checked + .pm-burger span:nth-child(2) {
		opacity: 0;
	}
	.pm-nav-toggle:checked + .pm-burger span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	.pm-nav {
		display: none;
		flex: 1 1 100%;
		margin: 0 -12px;
		background: #002a55;
	}
	.pm-nav-toggle:checked ~ .pm-nav {
		display: block;
	}
	.pm-nav ul {
		display: block;
	}
	.pm-header .pm-nav a,
	.pm-header .pm-nav a:visited {
		padding: 14px 16px;
		font-size: 16px;
		white-space: normal;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		border-left: 4px solid transparent;
		margin-bottom: 0;
	}
	.pm-header .pm-nav a:hover,
	.pm-header .pm-nav a.is-active {
		border-bottom-color: rgba(255, 255, 255, .12);
		border-left-color: #77caf7;
	}

	/* Footer */
	.pm-footer .pm-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.pm-footer ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}
	.pm-footer a,
	.pm-footer a:visited {
		display: block;
		padding: 9px 0;
		font-size: 15px;
	}

	/* Altes Tabellen-Layout in eine Spalte umbauen */
	body > table,
	body > table > tbody,
	body > table > tbody > tr,
	body > table > tbody > tr > td {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	/* Seitenmenüs, Artwork-Kopf und Deko-Spalten ausblenden */
	body > table > tbody > tr > td:not(#main):not(#footer),
	body > table > tbody > tr:first-child,
	#menu,
	#menu-2 {
		display: none !important;
	}
	#main,
	td.main {
		padding: 10px 12px 0 !important;
		background-image: none;
		font-size: 15px;
	}
	#main td {
		font-size: inherit;
	}

	/* Feste 626px-Breiten aufheben */
	#main table.t0,
	#main table.t1,
	#main table.t2,
	#main table.t3,
	#main .table {
		display: block;
		width: 100% !important;
		max-width: 100%;
	}
	#main table.t0 > tbody,
	#main table.t1 > tbody,
	#main table.t2 > tbody,
	#main table.t3 > tbody,
	#main table.t0 > tbody > tr,
	#main table.t1 > tbody > tr,
	#main table.t2 > tbody > tr,
	#main table.t3 > tbody > tr,
	#main table.t0 > tbody > tr > td,
	#main table.t1 > tbody > tr > td,
	#main table.t2 > tbody > tr > td,
	#main table.t3 > tbody > tr > td,
	#main table.t2 > tbody > tr > th,
	#main > table:not(.banner1):not(.content),
	#main > table:not(.banner1):not(.content) > tbody,
	#main > table:not(.banner1):not(.content) > tbody > tr,
	#main > table:not(.banner1):not(.content) > tbody > tr > td {
		display: block;
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Leere Abstands-Zellen der Box-Tabellen entfernen */
	#main table.t2 > tbody > tr > td:empty {
		display: none;
	}
	#main > table.content,
	#main .content,
	#main .contentadmin,
	.content,
	.contentadmin {
		width: auto !important;
		max-width: 100%;
		padding: 10px 12px !important;
		text-align: left;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 15px;
		line-height: 1.55;
		box-sizing: border-box;
	}
	#main > table.content {
		display: block;
	}
	#main table {
		max-width: 100%;
		text-align: left;
	}
	#main td[width],
	#main th[width],
	#main table[width] {
		max-width: 100%;
	}
	#main h1 {
		font-size: 24px;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}
	#main h2 {
		font-size: 20px;
		line-height: 1.3;
	}
	#main h3 {
		font-size: 17px;
	}
	#main a,
	#main a:visited {
		font-size: inherit;
		overflow-wrap: anywhere;
	}

	/* Banner */
	#main table.banner1 {
		display: table;
		max-width: 100%;
		margin: 0 auto 8px;
	}
	#main table.banner1 img {
		width: 100%;
		max-width: 468px;
		height: auto;
	}

	/* Startseite: Teaser-Raster */
	#main table.featured1,
	#main table.featured2,
	#main table.featured3,
	#main table.featured4 {
		width: 100% !important;
		height: auto !important;
		border-width: 1px;
		margin-bottom: 6px;
		box-sizing: border-box;
	}
	#main td.featured2 {
		width: auto !important;
	}
	#main table.featured4 table {
		width: 100% !important;
	}
	#main table.t2 > tbody > tr > td[valign="top"] > img[src*="kategorie_"] {
		display: none;
	}

	/* Altes Footer-Feld */
	#footer {
		padding: 10px 12px !important;
		text-align: left;
		line-height: 1.9;
	}
	#footer img[width="626"] {
		width: 100% !important;
	}

	/* Formulare */
	#main input:not([type="image"]):not([type="checkbox"]):not([type="radio"]),
	#main select,
	#main textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Textlisten-Bullet-Grafik nicht abschneiden */
	#main ul {
		margin-left: 1.2em;
	}
}

@media (max-width: 480px) {
	#main h1 {
		font-size: 22px;
	}
	#main .content {
		padding: 8px 10px !important;
	}
}

@media print {
	.pm-header,
	.pm-footer {
		display: none;
	}
}