/* =========================================================
   ANGRYLAND – LAYOUT
   Container, Sektionen, Raster, Header und Footer
========================================================= */


/* =========================================================
   CONTAINER
========================================================= */

/*
 * Regulärer Inhaltscontainer.
 * Die Breite stimmt mit --al-width-content aus base.css überein.
 */
.al-container {
	width: min(
		calc(100% - 2rem),
		var(--al-width-content)
	);
	margin-inline: auto;
}


/*
 * Breiter Container für Header, Footer und große Shop-Raster.
 */
.al-container-wide {
	width: min(
		calc(100% - 2rem),
		1440px
	);
	margin-inline: auto;
}


/*
 * Volle Breite mit sicherem Innenabstand.
 */
.al-container-fluid {
	width: 100%;
	padding-inline: var(--al-space-sm);
}


/* =========================================================
   SEKTIONEN
========================================================= */

.al-section {
	position: relative;
	padding-block: var(--al-space-xl);
}


/*
 * Kompaktere Sektion.
 */
.al-section-small {
	position: relative;
	padding-block: var(--al-space-lg);
}


/*
 * Große hervorgehobene Sektion.
 */
.al-section-large {
	position: relative;
	padding-block: calc(var(--al-space-xl) * 1.25);
}


/*
 * Dunkle Standardfläche.
 */
.al-section-dark {
	background-color: var(--al-color-black-soft);
	color: var(--al-color-text);
}


/*
 * Metallisch erhöhte Fläche.
 */
.al-section-metal {
	background-color: var(--al-color-metal-dark);
	color: var(--al-color-text);

	border-top: 1px solid var(--al-color-metal-border);
	border-bottom: 1px solid var(--al-color-metal-border);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03),
		inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}


/* =========================================================
   RASTER
========================================================= */

.al-grid {
	display: grid;
	gap: 2rem;
	min-width: 0;
}


/*
 * Unterschiedliche Abstandsvarianten.
 */
.al-grid-small {
	gap: var(--al-space-sm);
}

.al-grid-large {
	gap: 3rem;
}


.al-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.al-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.al-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}


/*
 * Automatisches Raster für Produkt- und Kartenübersichten.
 */
.al-grid-auto {
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(min(100%, 260px), 1fr)
		);
}


/* =========================================================
   FLEX-LAYOUTS
========================================================= */

.al-flex {
	display: flex;
	gap: var(--al-space-md);
}

.al-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--al-space-md);
}

.al-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--al-space-md);
}

.al-flex-wrap {
	flex-wrap: wrap;
}


/* =========================================================
   AUSRICHTUNG
========================================================= */

.al-align-start {
	align-items: start;
}

.al-align-center {
	align-items: center;
}

.al-align-end {
	align-items: end;
}

.al-text-center {
	text-align: center;
}

.al-text-left {
	text-align: left;
}

.al-text-right {
	text-align: right;
}


/* =========================================================
   SPALTEN UND INHALTSSICHERHEIT
========================================================= */

.al-grid > *,
.al-flex > * {
	min-width: 0;
}


/*
 * Verhindert übermäßig breite Textzeilen.
 */
.al-content-narrow {
	max-width: 720px;
}

.al-content-medium {
	max-width: 920px;
}

.al-content-center {
	margin-inline: auto;
}


/* =========================================================
   ANGRYLAND – HEADER-STRUKTUR
========================================================= */

.al-site-header {
	position: relative;
	z-index: 100;

	width: 100%;
	padding: 18px 16px 0;
}


/*
 * Äußerer Metallrahmen.
 * Das eigentliche Metallaussehen wird in components.css definiert.
 */
.al-header-frame {
	position: relative;

	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
	padding: 18px;
}


/*
 * Hauptaufteilung:
 * Logo | Navigation | Konto/Warenkorb
 */
.al-header-inner {
	position: relative;

	display: grid;
	grid-template-columns:
		minmax(120px, 170px)
		minmax(0, 1fr)
		auto;

	align-items: center;
	gap: clamp(16px, 2.5vw, 34px);

	width: 100%;
	max-width: 1420px;
	margin-inline: auto;
}


/* =========================================================
   HEADER – MARKE UND LOGO
========================================================= */

.al-header-brand {
	position: relative;
	z-index: 3;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
}

.al-header-logo-link {
	display: block;

	width: min(100%, 160px);

	flex: 0 0 auto;
	text-decoration: none;
}

.al-header-logo {
	display: block;

	width: 100%;
	height: auto;
}

.al-header-description {
	min-width: 0;
	margin: 8px 0 0;

	text-align: center;
	white-space: nowrap;
}


/* =========================================================
   HEADER – NAVIGATION
========================================================= */

.al-header-navigation {
	min-width: 0;
	width: 100%;
}


/*
 * Der sichtbare Navigationsbereich.
 * Horizontal scrollen bleibt auf allen Bildschirmgrößen möglich.
 */
.al-header-navigation-scroll {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	overflow-x: auto;
	overflow-y: hidden;

	padding: 18px 18px 13px;

	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}


/*
 * Menü bleibt immer in einer Reihe.
 */
.al-header-menu {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 12px;

	width: max-content;
	min-width: max-content;
	margin: 0 auto;
	padding: 0;

	list-style: none;
	white-space: nowrap;
}

.al-header-menu > .menu-item {
	position: relative;

	display: flex;
	flex: 0 0 auto;

	margin: 0;
	padding: 0;
}

.al-header-menu > .menu-item > .menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 132px;
	min-height: 58px;
	padding: 10px 20px;
}


/* =========================================================
   HEADER – UNTERMENÜS
========================================================= */

.al-header-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;

	display: none;

	min-width: 220px;
	margin: 0;
	padding: 10px;

	list-style: none;
}

.al-header-menu .menu-item:hover > .sub-menu,
.al-header-menu .menu-item:focus-within > .sub-menu {
	display: grid;
	gap: 6px;
}

.al-header-menu .sub-menu .menu-item {
	position: relative;
	margin: 0;
}

.al-header-menu .sub-menu .menu-link {
	display: block;
	width: 100%;
	padding: 10px 14px;
}


/*
 * Zweite Untermenüebene.
 */
.al-header-menu .sub-menu .sub-menu {
	top: 0;
	left: calc(100% + 8px);
}


/* =========================================================
   HEADER – KONTO UND WARENKORB
========================================================= */

.al-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 10px;

	flex: 0 0 auto;
}

.al-header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 46px;
	padding: 8px 14px;

	white-space: nowrap;
}

.al-header-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 24px;
	height: 24px;
	padding-inline: 5px;
}


/* =========================================================
   ANGRYLAND – FOOTER-LAYOUT
   Anordnung, Spalten und Struktur
========================================================= */

.al-site-footer {
	position: relative;
}

.al-footer-frame {
	position: relative;
}

.al-footer-main {
	display: grid;
	grid-template-columns:
		minmax(260px, 1.35fr)
		repeat(3, minmax(160px, 1fr))
		minmax(150px, 0.75fr);

	align-items: start;
	gap: 36px;

	padding-block: 46px;
}

.al-footer-brand,
.al-footer-column,
.al-footer-art {
	min-width: 0;
}

.al-footer-brand-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.al-footer-toggle {
	width: 100%;
}

.al-footer-menu-panel {
	min-width: 0;
}

.al-footer-menu {
	display: grid;
	gap: 10px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.al-footer-menu li {
	margin: 0;
}

.al-footer-art {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 180px;
}

.al-footer-art img {
	display: block;

	width: 100%;
	max-width: 190px;
	height: auto;
}


/* =========================================================
   FOOTER – UNTERE LEISTE
========================================================= */

.al-footer-bottom-inner {
	display: grid;
	grid-template-columns:
		minmax(190px, 1fr)
		minmax(300px, 1.5fr)
		minmax(170px, 1fr);

	align-items: center;
	gap: 28px;

	padding-block: 18px;
}

.al-footer-copyright {
	margin: 0;
}

.al-footer-signoff {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;

	min-width: 0;

	text-align: center;
}

.al-footer-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.al-footer-socials {
	display: flex;
	align-items: center;
	gap: 8px;

	margin: 0;
	padding: 0;

	list-style: none;
}