/* nickeltest.com - responsives Layout
   Wird nach stile.css geladen. Hebt die feste Seitenbreite (958px) auf,
   ersetzt das alte Menü (#menu) durch ein aufklappbares, bewegliches Menü
   und stapelt auf kleinen Bildschirmen die linke Spalte unter den Inhalt. */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Seitenrahmen ---------- */

div#centerhelper { display: none; }

div#container
	{
	width: auto;
	max-width: 1400px;
	margin: 0 auto;
	clear: none;
	background: #fff;
	}

body { margin: 8px clamp(0px, 1vw, 10px); }

/* ---------- Kopf ---------- */

.ni-kopf { background: #fff; }

.ni-kopf-oben
	{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 10px;
	min-height: 52px;
	}

#content .ni-firmenlogo { display: block; width: 159px; height: auto; }

.ni-kopf-rechts
	{
	display: flex;
	align-items: center;
	gap: 6px;
	}

.ni-sprache
	{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 44px;
	font: 9px Arial, Verdana, Helvetica, sans-serif;
	color: #3E4C67;
	text-decoration: none;
	}
.ni-sprache img { display: block; width: 30px; height: 17px; margin-bottom: 1px; }
.ni-sprache:hover { color: #FF0D3D; }

.ni-warenkorb { margin-left: 30px; }
.ni-warenkorb img { display: block; }

/* Kopfbild: Schriftzug links, der senkrechte Verlauf füllt jede Breite */
.ni-banner
	{
	height: clamp(48px, 9.1vw, 87px);
	background: #FF0D3D url("../bilder/kopf_verlauf.png") left top / auto 100% repeat-x;
	overflow: hidden;
	}
#content .ni-banner img { display: block; height: 100%; width: auto; max-width: none; }

/* ---------- Hauptmenü ---------- */

.ni-menue { position: relative; z-index: 50; background: #FF0D3D; }

.ni-menue-schalter { position: absolute; opacity: 0; pointer-events: none; }
.ni-menue-knopf { display: none; }

.ni-menue ul { list-style: none; margin: 0; padding: 0; }
.ni-menue li { float: none !important; height: auto !important; position: relative; }

.ni-hm { display: flex; }
.ni-hm > li { flex: 1 1 0; }

.ni-menue a
	{
	display: block;
	height: auto !important;
	padding: 4px 10px;
	font: 0.76em/1.3 Arial, Verdana, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #FF0D3D;
	}

.ni-hm > li > a { text-align: center; border-right: 1px solid #fff; padding-top: 5px; padding-bottom: 5px; }
.ni-hm > li:last-child > a { border-right: 0; }
.ni-menue a:hover, .ni-menue a:focus-visible { background: #FB7013; }

/* 1. Untermenü */
.ni-hm li ul
	{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 100%;
	border-top: 1px solid #fff;
	opacity: 0.95;
	}
.ni-hm ul a
	{
	text-align: left;
	white-space: nowrap;
	border: 1px solid #fff;
	border-top: 0;
	background: #BC2C14;
	}
.ni-hm ul a:hover, .ni-hm ul a:focus-visible { background: #FC7D6C; }

/* 2. Untermenü (Download) */
.ni-hm ul ul { top: -1px; left: 100%; min-width: 0; }
.ni-hm ul ul a { background: #841708; }
.ni-hm ul ul a:hover, .ni-hm ul ul a:focus-visible { background: #9B6E69; }

/* rechte Menüpunkte klappen nach links auf, damit nichts aus dem Bild ragt */
.ni-hm > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
.ni-hm > li:nth-last-child(-n+2) ul ul { left: auto; right: 100%; }

.ni-hm li:hover > ul,
.ni-hm li:focus-within > ul { display: block; }

/* ---------- Inhalt ---------- */

#content > table { width: 100% !important; }
#content img { max-width: 100%; }

/* ================= Kleine Bildschirme ================= */

@media (max-width: 760px)
	{
	body { margin: 0; }

	.ni-kopf-oben { flex-wrap: wrap; padding: 4px 8px; }
	#content .ni-firmenlogo { width: 130px; }
	.ni-sprache { width: 38px; }
	.ni-warenkorb { margin-left: 8px; }

	.ni-menue-knopf
		{
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		color: #fff;
		font: 0.95rem Arial, Verdana, Helvetica, sans-serif;
		cursor: pointer;
		}
	.ni-menue-icon, .ni-menue-icon::before, .ni-menue-icon::after
		{
		display: block;
		position: relative;
		width: 22px;
		height: 2px;
		background: #fff;
		content: "";
		}
	.ni-menue-icon::before { position: absolute; top: -7px; }
	.ni-menue-icon::after  { position: absolute; top: 7px; }

	.ni-hm { display: none; flex-direction: column; }
	.ni-menue-schalter:checked ~ .ni-hm { display: flex; }
	.ni-menue-schalter:focus-visible + .ni-menue-knopf { outline: 2px solid #fff; outline-offset: -4px; }

	.ni-menue a { font-size: 0.95rem; padding: 10px 12px; white-space: normal; }
	.ni-hm > li > a { text-align: left; border-right: 0; border-top: 1px solid rgba(255,255,255,.5); font-weight: bold; }

	/* Untermenüs auf dem Handy immer offen, eingerückt */
	.ni-hm li ul,
	.ni-hm > li:nth-last-child(-n+2) > ul,
	.ni-hm > li:nth-last-child(-n+2) ul ul
		{
		display: block;
		position: static;
		border-top: 0;
		opacity: 1;
		}
	.ni-hm ul a { border: 0; border-top: 1px solid rgba(255,255,255,.25); padding-left: 28px; font-size: 0.9rem; }
	.ni-hm ul ul a { padding-left: 44px; }

	/* Inhaltstabelle: linke Spalte unter den Inhalt */
	#content > table,
	#content > table > tbody { display: block; width: 100% !important; }
	#content > table > tbody > tr { display: flex; flex-direction: column; }
	#content > table > tbody > tr > td { display: block; width: auto !important; }
	#content > table > tbody > tr > td.hfz2.c.t { order: 2; padding-bottom: 12px; }
	#content > table > tbody > tr:last-child { flex-direction: row; justify-content: space-between; }
	#content > table > tbody > tr:last-child > td { width: auto !important; }

	/* Inhaltstabellen: Spaltenaufteilung (Prozent) beibehalten, aber nie breiter als der Bildschirm;
	   Bilder passen sich ihrer Spalte an, lange Adressen dürfen umbrechen */
	#content td.hfz1 table { table-layout: fixed; width: 100% !important; }
	#content td.hfz1 td { overflow-wrap: anywhere; }
	#content td.j { text-align: left; }
	#content img { height: auto; max-width: 100%; }
	#content > table > tbody > tr > td.hfz1 { overflow-x: auto; }
	#content img.bildlinks { float: none; display: block; margin: 8px auto; }
	div.ni-logo { background-size: 60% auto; }
	}