@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

/*
 * mabetec-shop Design-Tokens — Industrial-Editorial mit Slope-Signatur
 * Quelle: docs/design-konzept-2026-05-27.md
 * Stand: 2026-05-27
 */

:root {
	/* ---------- FARBE ---------- */
	--mb-red:          #FF0434;
	--mb-red-hover:    #D60028;
	--mb-red-tint:     #FFE5EA;

	--mb-ink-900:      #020A0A;
	--mb-ink-800:      #282C37;
	--mb-ink-700:      #394553;
	--mb-ink-600:      #5D6374;
	--mb-ink-500:      #818181;

	--mb-paper:        #FEFEFE;
	--mb-card:         #FFFFFF;
	--mb-rule:         #DEDEDE;
	--mb-rule-strong:  #C8C8C7;

	/* Neutral-Stufen (Aliase fuer Sektions-Hintergruende + Borders,
	   genutzt u.a. vom Bewertungs-Block) */
	--mb-neutral-100:  #F6F6F5;
	--mb-neutral-200:  var(--mb-rule);
	--mb-neutral-300:  var(--mb-rule-strong);
	--mb-neutral-400:  #ABADAA;

	--mb-sand:         #FFBC7D;
	--mb-sand-ink:     #5A3010;

	--mb-success:      #2F7D32;
	--mb-warning:      #C77700;
	--mb-error:        #B00020;

	/* ---------- TYPOGRAFIE ---------- */
	--mb-font-display: "Roboto Slab", Georgia, serif;
	--mb-font-body:    "Roboto", system-ui, sans-serif;
	--mb-font-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

	--mb-fs-meta:      0.75rem;
	--mb-fs-small:     0.875rem;
	--mb-fs-body:      1rem;
	--mb-fs-lead:      1.25rem;
	--mb-fs-h4:        1.5rem;
	--mb-fs-h3:        2rem;
	--mb-fs-h2:        2.75rem;
	--mb-fs-h1:        4rem;
	--mb-fs-display:   5.5rem;

	--mb-lh-tight:     1.05;
	--mb-lh-body:      1.55;
	--mb-tracking-cap: 0.08em;

	--mb-weight-body:    400;
	--mb-weight-medium:  500;
	--mb-weight-strong:  700;
	--mb-weight-display: 900;

	/* ---------- SPACING (6 px Basis) ---------- */
	--mb-space-1:  6px;
	--mb-space-2:  12px;
	--mb-space-3:  18px;
	--mb-space-4:  24px;
	--mb-space-5:  36px;
	--mb-space-6:  48px;
	--mb-space-7:  72px;
	--mb-space-8:  96px;
	--mb-space-9:  144px;

	/* ---------- GEOMETRIE ---------- */
	--mb-radius-0:     0px;
	--mb-radius-input: 2px;
	--mb-radius-pill:  9999px;

	/* Slope-Signatur — Marken-Ornament aus dem Logo.
	   --mb-slope-angle: der Leitwinkel der großen Schrägen (Hero-Panel u.a.),
	   aus dem Mockup ausgemessen: 22° gegen die Vertikale. Zentral, damit sich
	   derselbe Winkel konsistent durchs Design zieht. */
	--mb-slope-angle: 22deg;
	--mb-slope-sm: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
	--mb-slope-md: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	--mb-slope-lg: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));

	/* ---------- BORDER & SHADOW ---------- */
	--mb-border:       1px solid var(--mb-rule);
	--mb-border-ink:   1px solid var(--mb-ink-900);
	--mb-border-thick: 2px solid var(--mb-ink-900);

	--mb-shadow-none:    none;
	--mb-shadow-rule:    0 1px 0 var(--mb-rule);
	--mb-shadow-sticky:  0 2px 0 var(--mb-ink-900);
	--mb-shadow-press:   4px 4px 0 var(--mb-ink-900);

	/* ---------- LAYOUT ---------- */
	--mb-container:      1280px;
	--mb-container-wide: 1440px;
	--mb-gutter-mobile:  var(--mb-space-4);
	--mb-gutter-desk:    var(--mb-space-6);

	/* ---------- MOTION ---------- */
	--mb-ease-cut:    cubic-bezier(0.2, 0, 0, 1);
	--mb-ease-editor: cubic-bezier(0.16, 1, 0.3, 1);
	--mb-dur-fast:    120ms;
	--mb-dur-base:    220ms;
	--mb-dur-reveal:  520ms;
}

* {
	box-sizing: border-box;
}

html {
	font-family: var(--mb-font-body);
	font-size: 16px;
	line-height: var(--mb-lh-body);
	color: var(--mb-ink-900);
	background: var(--mb-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font-weight: var(--mb-weight-body);
}

h1, h2, h3, h4 {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	line-height: var(--mb-lh-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--mb-space-4);
	color: var(--mb-ink-900);
}

h1 { font-size: var(--mb-fs-h1); }
h2 { font-size: var(--mb-fs-h2); }
h3 { font-size: var(--mb-fs-h3); }
h4 { font-size: var(--mb-fs-h4); }

p {
	margin: 0 0 var(--mb-space-3);
}

a {
	color: var(--mb-red);
	text-decoration: none;
	transition: color var(--mb-dur-fast) var(--mb-ease-cut);
}

a:hover {
	color: var(--mb-red-hover);
}

img {
	max-width: 100%;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
}

@media (max-width: 768px) {
	:root {
		--mb-fs-h1:      2.5rem;
		--mb-fs-h2:      2rem;
		--mb-fs-h3:      1.5rem;
		--mb-fs-display: 3rem;
	}
}