/* =========================================================
   HEADLINES
   ========================================================= */

h1,
h2,
h3 {
	border: 0;
	text-align: left;
}


/* =========================================================
   H1
   Große Seitentitel
   ========================================================= */

h1 {
	position: relative;

	max-width: 980px;

	margin: 18px 0 46px;
	padding: 0 0 22px 25px;

	color: var(--sidebit-text-strong);

	font-family: var(--sidebit-display);
	font-size: clamp(42px, 4.5vw, 66px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 0.95;

	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke: 0;
}


/* kleine Raute links */

h1::before {
	position: absolute;

	top: 0.43em;
	left: 2px;

	width: 7px;
	height: 7px;

	content: "";

	border: 1px solid var(--sidebit-accent-light);

	transform: rotate(45deg);
}


/* ornamentale Linie */

h1::after {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 25px;

	height: 1px;

	content: "";

	background:
		linear-gradient(
			to right,
			var(--sidebit-accent-light),
			var(--sidebit-line-accent) 18%,
			var(--sidebit-line) 58%,
			var(--sidebit-transparent)
		);
}


/* =========================================================
   H2
   Abschnittsüberschriften
   ========================================================= */

h2 {
	position: relative;

	margin: 42px 0 23px;
	padding: 0 0 13px;

	color: var(--sidebit-accent-pale);

	font-family: var(--sidebit-display);
	font-size: clamp(27px, 2.4vw, 35px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.05;
}


/* kleine obere Kennzeichnung */

h2::before {
	display: block;

	width: 34px;
	height: 1px;

	margin-bottom: 10px;

	content: "";

	background: var(--sidebit-accent-dark);
}


h2::after {
	position: absolute;

	bottom: 0;
	left: 0;

	width: 90px;
	height: 1px;

	content: "";

	background:
		linear-gradient(
			to right,
			var(--sidebit-accent-light),
			var(--sidebit-line-accent),
			var(--sidebit-transparent)
		);
}


/* =========================================================
   H3
   Kleinere Unterüberschriften
   ========================================================= */

h3 {
	position: relative;

	margin: 32px 0 18px;
	padding: 0 0 10px 18px;

	color: var(--sidebit-text-strong);

	font-family: var(--sidebit-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.45;

	text-transform: uppercase;
}


/* kleine rote Markierung */

h3::before {
	position: absolute;

	top: 0.45em;
	left: 0;

	width: 5px;
	height: 5px;

	content: "";

	background: var(--sidebit-accent-dark);

	transform: rotate(45deg);
}


h3::after {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 18px;

	height: 1px;

	content: "";

	background:
		linear-gradient(
			to right,
			var(--sidebit-line-accent),
			var(--sidebit-line) 38%,
			var(--sidebit-transparent)
		);
}


/* =========================================================
   LINKS INNERHALB VON HEADLINES
   ========================================================= */

h1 a,
h2 a,
h3 a {
	color: inherit;

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;

	text-decoration: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px), (max-device-width: 820px) {

	h1 {
		margin: 16px 0 38px;
		padding:
			0
			0
			19px
			23px;

		font-size: clamp(46px, 11vw, 62px);
		line-height: 0.98;
	}


	h1::before {
		width: 7px;
		height: 7px;
	}


	h1::after {
		left: 23px;
	}


	h2 {
		margin: 38px 0 21px;
		padding-bottom: 13px;

		font-size: clamp(31px, 7.5vw, 39px);
		line-height: 1.08;
	}


	h2::before {
		width: 38px;

		margin-bottom: 11px;
	}


	h3 {
		margin: 30px 0 18px;
		padding-left: 18px;

		font-size: 18px;
		letter-spacing: 0.045em;
		line-height: 1.5;
	}
}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 520px), (max-device-width: 520px) {

	h1 {
		margin-bottom: 34px;

		font-size: clamp(43px, 12.5vw, 56px);
	}


	h2 {
		margin-top: 34px;

		font-size: clamp(30px, 8.5vw, 37px);
	}


	h3 {
		margin-top: 28px;

		font-size: 18px;
		line-height: 1.52;
	}
}