/* ------------------------------------
   FONTS
------------------------------------ */

/* Helvetica */

@font-face {
	font-family: 'HelveticaLTStd';
	src: url('https://www.herold.xyz/fnt/HelveticaLTStd-Roman.woff2') format('woff2'),
		 url('https://www.herold.xyz/fnt/HelveticaLTStd-Roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'HelveticaLTStd';
	src: url('https://www.herold.xyz/fnt/HelveticaLTStd-Bold.woff2') format('woff2'),
		 url('https://www.herold.xyz/fnt/HelveticaLTStd-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'HelveticaLTStd';
	src: url('https://www.herold.xyz/fnt/HelveticaLTStd-Obl.woff2') format('woff2'),
		 url('https://www.herold.xyz/fnt/HelveticaLTStd-Obl.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'HelveticaLTStd';
	src: url('https://www.herold.xyz/fnt/HelveticaLTStd-BoldObl.woff2') format('woff2'),
		 url('https://www.herold.xyz/fnt/HelveticaLTStd-BoldObl.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Josefin Sans */

@font-face {
	font-family:'josefin_sans';
	src: url('https://www.herold.xyz/fnt/josefinsans-thin.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family:'josefin_sans';
	src: url('https://www.herold.xyz/fnt/josefinsans-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family:'josefin_sans';
	src: url('https://www.herold.xyz/fnt/josefinsans-semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family:'josefin_sans';
	src: url('https://www.herold.xyz/fnt/josefinsans-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Youngblood */

@font-face {
	font-family:'youngblood';
	src: url('https://www.herold.xyz/fnt/youngblood-regular-webfont.woff2') format('woff2');
	font-display: swap;
}

/* ------------------------------------
   BASIS
------------------------------------ */

h1, h2, h3, h4 { line-height: 1.5; }

h1 { font-size: 4em; font-weight: 700; letter-spacing: -2px; }
h2 { font-size: 3em; }
h3 { font-size: 2.5em; color: DimGrey; }
h4 { font-size: 1.2em; color: DimGrey; font-weight: 400; }

p, ul { font-size: 1.5em; line-height: 2; }

ul { list-style: square outside; }

/* ------------------------------------
   GRID INHALT
------------------------------------ */

.inhalt-grid { display: grid; grid-template-columns: repeat(2, 1fr); }

/* ------------------------------------
   SELEKTOREN
------------------------------------ */

.BK, .GY, .WH, .BU, .BR, .TR {
	padding: 5%;
}

.BK-50, .GY-50, .WH-50, .BU-50, .BR-50, .TR-50 {
	padding: 10%;
}

.BK-100, .GY-100, .WH-100, .BU-100, .BR-100, .TR-100 {
	padding: 5% 25%;
}

.TR, .TR-50, .TR-100 { background: transparent; color: #111; }
.BK, .BK-50, .BK-100 { background: #111; color: #eee; }
.GY, .GY-50, .GY-100 { background: #eee; color: #111; }
.WH, .WH-50, .WH-100 { background: #fff; color: #111; }
.BU, .BU-50, .BU-100 { background: #004080; color: #eee; }
.BR, .BR-50, .BR-100 { background: peru; color: #eee; }

/* ------------------------------------
   LINKS
------------------------------------ */

a {
	color: #004080;
	text-decoration: none;
	font-weight: 700;
}

a:hover {
	color: #0080FF;
}

/* ------------------------------------
   BUTTONS
------------------------------------ */

.btndark, .btnlight { margin: 3em; text-align: center; }

.btndark a, .btnlight a {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid #0066cc;
	border-radius: 2em;
	text-decoration: none;
	letter-spacing: .05em;
	transition: .3s;
}

.btnlight a {
	color: #0066cc;
	background: transparent;
}

.btndark a,
.btnlight a:hover {
	background: #0066cc;
	color: #fff;
}

.btndark a:hover { opacity: .85; }

/* ------------------------------------
   BILDER
------------------------------------ */

.HeroldBlume {
	height: 13px;
	width: auto;
}

.person {
	width: 40%;
	height: auto;
	border-radius: 50%;
}

/* ------------------------------------
   SPRACHEN
------------------------------------ */

.lang {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(0,0,0,0.5);
	border-radius: 30px;
	display: flex;
	gap: 10px;
	padding: 5px;
	z-index: 1000;
}

.lang a {
	padding: 10px;
	color: #fff;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1.5;
}

.lang a:hover, .lang a.aktiv {
	background-color: #fff;
	color: #000;
}

/* ------------------------------------
   NAVBAR
------------------------------------ */

.navbar {
	display: flex;
	align-items: center;
	background: rgba(0,0,0,.85);
	backdrop-filter: blur(4px);
	position: sticky;
	top: 0;
	z-index: 9999;
	flex-wrap: wrap;
}

.navbar a, .dropbtn {
	color: #fff;
	padding: 14px 16px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1em;
	letter-spacing: 1px;
	white-space: nowrap;
	font-family: inherit;
	font-weight: 400;
}

.navbar a:hover, .dropbtn:hover { background: #333; }

.dropdown { position: relative; }

.dropdown-content {
	display: none;
	position: absolute;
	background: #222;
	min-width: 100%;
	top: 100%;
	left: 0;
	z-index: 10000;
}

.dropdown-content a {
	display: block;
	padding: 12px 16px;
}

.dropdown:hover .dropdown-content { display: block; }

/* ------------------------------------
   TECH-DATA
------------------------------------ */

.tech-data, .vergleich {
	display: grid;
	margin: 40px 0 20px 0;
	border: 1px solid rgba(127,127,127,.5);
	border-radius: 10px;
}

.tech-data { grid-template-columns: repeat(2, auto); }
.vergleich { grid-template-columns: repeat(6, auto); }

.tech-data div, .vergleich div {
	padding: 20px;
	font-size: 1.2em;
	line-height: 1.4;
}

div.col1-oben {
	background-color: LightGray;
	background-image: linear-gradient(45deg, DimGrey, Grey);
	color: White;
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
	font-weight: bold;
	border-top-left-radius: 10px;
}

div.col1 {
	background-color: LightGray;
	background-image: linear-gradient(45deg, DimGrey, Grey);
	color: White;
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
	font-weight: bold;
}

div.col1-unten {
	background-color: LightGray;
	background-image: linear-gradient(45deg, DimGrey, Grey);
	color: White;
	font-weight: bold;
	border-bottom-left-radius: 10px;
}

div.col2 {
	background-color: none;
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
}

div.col2-unten {
	background-color: none;
	border-bottom: none;
}

/* ------------------------------------
   COMIC-BOX
------------------------------------ */

.comic-box p {
	font-size: 1.2em;
	line-height: 1.4;
}

.comic-box {
	position: relative;
	width: 75%;
	background-color: white;
	border: 2px solid rgba(127, 127, 127, 0.5);
 	border-radius: 20px;
	cursor: default;
	padding: 10px;
}

.comic-pointer {
	position: absolute;
	bottom: -12px;
	left: 10%;
	margin-left: 10px;
	width: 20px;
	height: 20px;
	background-color: white;
	border: 2px solid rgba(127, 127, 127, 0.5);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ------------------------------------
   LAGER-AMPEL
------------------------------------ */

.imLager_RD::before {
	content: "●";
	color: #FF0000;
}

.imLager_YE::before {
	content: "●";
	color: #FFD700;
}

.imLager_GN::before {
	content: "●";
	color: #228B22;
}

/* ------------------------------------
   RESPONSIVE
------------------------------------ */

@media (max-width: 978px) {

	.inhalt-grid { grid-template-columns: 1fr; }

	p, ul, .tech-data div, .comic-box p { font-size: 1em; }

	h1 { font-size: 2.4em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
	h4 { font-size: 1em; }

	.vergleich { margin: 20px 0 10px; }
	.vergleich div, .lang a { padding: 10px; font-size: .6em; }

	.BK, .GY, .WH, .BU, .BR, .TR,
	.BK-50, .GY-50, .WH-50, .BU-50, .BR-50, .TR-50,
	.BK-100, .GY-100, .WH-100, .BU-100, .BR-100, .TR-100 { padding: 10%; }
}