/* =========================================================
   ANGRYLAND – BASIS
   Farben, Materialien, Typografie und globale Grundlagen
========================================================= */


/* =========================================================
   LOKALE SCHRIFTARTEN
========================================================= */

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald/oswald-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
}

@font-face {
	font-family: "Teko";
	src: url("../fonts/teko/teko-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
}


/* =========================================================
   GLOBALE DESIGNVARIABLEN
========================================================= */

:root {
	/* Grundflächen */
	--al-color-black: #0d0d0d;
	--al-color-black-soft: #121212;
	--al-color-surface: #171717;
	--al-color-surface-light: #2a2a2a;

	/* Metall und Rost */
	--al-color-rust: #b85c2e;
	--al-color-rust-light: #d67a46;
	--al-color-rust-dark: #69311f;
	--al-color-copper: #8b4a30;
	--al-color-metal-border: #4a3e38;
	--al-color-metal-dark: #211b18;

	/* Textfarben */
	--al-color-text: #f2e9e1;
	--al-color-text-muted: #b8b0a8;
	--al-color-text-dark: #191512;

	/* Zusätzlicher Akzent */
	--al-color-olive: #66704b;

	/* Schriftarten */
	--al-font-display: "Teko", Impact, sans-serif;
	--al-font-body: "Oswald", Arial, sans-serif;

	/* Inhaltsbreiten */
	--al-width-content: 1200px;
	--al-width-text: 760px;

	/* Abstände */
	--al-space-xs: 0.5rem;
	--al-space-sm: 1rem;
	--al-space-md: 1.5rem;
	--al-space-lg: 2.5rem;
	--al-space-xl: 4rem;

	/* Radien */
	--al-radius-small: 2px;
	--al-radius-medium: 4px;
	--al-radius-large: 6px;

	/* Rahmen */
	--al-border-thin: 1px solid rgba(255, 255, 255, 0.1);
	--al-border-metal: 3px solid var(--al-color-metal-border);
	--al-border-rust: 2px solid var(--al-color-rust-dark);

	/* Schatten */
	--al-shadow-small:
		0 4px 12px rgba(0, 0, 0, 0.45);

	--al-shadow-large:
		0 14px 35px rgba(0, 0, 0, 0.65);

	--al-shadow-inset:
		inset 0 0 20px rgba(0, 0, 0, 0.85);

	--al-shadow-plate:
		0 5px 10px rgba(0, 0, 0, 0.75),
		inset 0 1px 0 rgba(255, 238, 220, 0.08),
		inset 0 -2px 3px rgba(0, 0, 0, 0.75);

	--al-shadow-hardware:
		0 2px 3px rgba(0, 0, 0, 0.9),
		inset 0 1px 1px rgba(255, 255, 255, 0.12);

	/* Übergänge */
	--al-transition-fast: 160ms ease;
	--al-transition: 180ms ease;
	--al-transition-standard: 240ms ease;
}


/* =========================================================
   TECHNISCHER GRUNDAUFBAU
========================================================= */

html {
	box-sizing: border-box;
	min-height: 100%;
	scroll-behavior: smooth;
	background-color: var(--al-color-black);
}

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

body {
	min-width: 320px;
	min-height: 100%;
	margin: 0;
	overflow-x: hidden;

	color: var(--al-color-text);
	font-family: var(--al-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   GLOBALER SEITENHINTERGRUND
========================================================= */

/* =========================================================
   GLOBALER SEITENHINTERGRUND
========================================================= */

body,
body.ast-plain-container,
body.ast-page-builder-template,
body.ast-separate-container {
	background-color: var(--al-color-black);
	background-image:
		linear-gradient(
			rgba(0, 0, 0, 0.18),
			rgba(0, 0, 0, 0.34)
		),
		url("../images/textures/angryland-background-dark-metal.webp");

	background-position: center top;
	background-repeat: repeat-y;
	background-size: 1920px auto;
	background-attachment: scroll;
}

/* =========================================================
   ASTRA-TYPOGRAFIE AUF ANGRYLAND UMLEITEN
========================================================= */

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button,
.wp-block-button__link {
	font-family: var(--al-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.entry-title a,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.widget-title {
	font-family: var(--al-font-display);
}

/* =========================================================
   ASTRA-GRUNDFLÄCHEN FREISTELLEN
========================================================= */

#page,
.site,
.site-content,
.site-content > .ast-container,
.ast-container,
#primary,
.site-main,
.ast-plain-container #primary,
.ast-page-builder-template #primary,
.ast-separate-container #primary {
	background-color: transparent;
	background-image: none;
}


/* =========================================================
   MEDIEN
========================================================= */

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}


/* =========================================================
   ÜBERSCHRIFTEN
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--al-color-text);
	font-family: var(--al-font-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 7vw, 5.8rem);
}

h2 {
	font-size: clamp(2.1rem, 5vw, 4rem);
}

h3 {
	font-size: clamp(1.7rem, 3.5vw, 2.8rem);
}

h4 {
	font-size: clamp(1.4rem, 2.5vw, 2rem);
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1.1rem;
}


/* =========================================================
   FLIESSTEXT
========================================================= */

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}


/* =========================================================
   LINKS
========================================================= */

a {
	color: var(--al-color-rust-light);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;

	transition:
		color var(--al-transition),
		opacity var(--al-transition),
		border-color var(--al-transition);
}

a:hover,
a:focus-visible {
	color: var(--al-color-text);
}


/* =========================================================
   LISTEN
========================================================= */

ul,
ol {
	margin-top: 0;
	margin-bottom: 1.5rem;
	padding-left: 1.4rem;
}

li + li {
	margin-top: 0.35rem;
}


/* =========================================================
   FORMULARE UND BEDIENELEMENTE
========================================================= */

button,
input,
select,
textarea {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}


/* =========================================================
   BEDIENBARKEIT
========================================================= */

::selection {
	background-color: var(--al-color-rust);
	color: #ffffff;
}

:focus-visible {
	outline: 3px solid var(--al-color-rust-light);
	outline-offset: 3px;
}


/* =========================================================
   GLOBALE INHALTSBREITEN
========================================================= */

.al-container {
	width: min(
		calc(100% - 2rem),
		var(--al-width-content)
	);
	margin-inline: auto;
}

.al-container-text {
	width: min(
		calc(100% - 2rem),
		var(--al-width-text)
	);
	margin-inline: auto;
}