/* Brickknackery - LEGO-inspirierter Stil: klare Farben, saubere Flaechen */

/* Design-Tokens */
:root {
	/* Farben */
    --red:#C91A09; /* LEGO Red */
    --dark-red:#841208;
    --blue:#0055BF; /* LEGO Blue */
    --dark-blue:#0B2F73;
    --yellow:#FFCD00; /* Minifig Yellow */
    --orange:#D67923; /* LEGO Orange */
    --bright-light-orange:#D67923;
    --green:#237841;
    --lime:#BBE90B;
	--tan:#DCC7A1;
	--reddish-brown:#5A3524;
	--tblue:#2C7DA0;
	--black:#000;
	--dbg:#44464A;
	--lbg:#E6E8EC;
	--off:#F6F6F7;
	--white:#fff;
	--red-top:#E66C5B;
	--blue-top:#3F7CE8;
	--yellow-top:#FFE17A;
	--orange-top:#E8924A;
	--danger:#D92D20; --warn:#F79009; --success:#16A34A; --info:#0EA5E9;

	/* Text */
    --text-primary:#141414;
    --text-secondary:#494A4D;
	--link:#C91A09;
    --link-hover:#841208;

	/* Spacing (4px-Baseline) */
	--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
	--s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px;

	/* Radius & Border */
    --radius-1:4px; --radius-2:8px;
    --border:1px solid #d9d9d9;
    --border-strong:2px solid #c9c9c9;

	/* Schatten - hart/versetzt */
	--shadow-1:0 4px 0 var(--black);
	--shadow-2:0 6px 0 var(--black);

	/* Typografie */
	--font-head:'Rubik', 'Inter', system-ui, sans-serif;
	--font-body:'Inter', system-ui, sans-serif;
	--lh-head:1.15; --lh-body:1.6;
	--fs-900:clamp(2.5rem, 5vw, 3.5rem);
	--fs-700:clamp(1.75rem, 3vw, 2.5rem);
	--fs-400:1rem;

	/* Container */
	--container:1200px;
}

/* Basis */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
	margin: 0;
	font-family: var(--font-body);
	line-height: var(--lh-body);
	color: var(--text-primary);
	background: var(--white);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }

.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
	left: var(--s-6); top: var(--s-6);
	background: var(--yellow); color: var(--black);
	padding: var(--s-2) var(--s-3);
	border: var(--border);
	box-shadow: var(--shadow-1);
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.1); }
.site-header .container.header-inner { padding: 0 var(--s-6) 0 var(--s-2); max-width: none; margin: 0; }
.header-inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); min-height: 96px; }
.logo { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; }
.brand-logo { display:block; height: auto; width: clamp(220px, 26vw, 360px); filter: drop-shadow(0 4px 12px rgba(0,0,0,.12)); }
.site-nav { }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-5); }
.site-nav a { color: var(--text-primary); text-decoration: none; padding: var(--s-2) var(--s-4); background: var(--white); border: 2px solid #111; border-radius: 8px; box-shadow: 2px 2px 0 #111; font-weight: 600; font-size: 0.85rem; letter-spacing: .05em; text-transform: uppercase; transition: transform .1s ease, box-shadow .1s ease, background .1s ease; }
.site-nav a:hover,
.site-nav a:focus-visible { background: var(--yellow); color: var(--black); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #111; outline: none; }
.nav-toggle { display: none; align-items: center; gap: var(--s-2); font-family: var(--font-head); font-weight: 700; background: var(--red); color: var(--white); border: 0; border-radius: var(--radius-2); padding: var(--s-2) var(--s-4); cursor: pointer; box-shadow: var(--shadow-1); }
.nav-toggle:focus-visible { outline: 2px solid var(--dark-red); outline-offset: 2px; }
.nav-toggle__icon { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; border-radius: 999px; }
.nav-toggle__icon::before,
.nav-toggle__icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 999px; transition: transform .2s ease; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero - Neue großflächige Logo-Präsentation */
.hero--large-logo { background: var(--white); color: var(--text-primary); border-bottom: 1px solid rgba(0,0,0,.1); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: var(--s-4) var(--s-6) var(--s-6); }
.hero-logo-container { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: var(--s-4); }
.hero-logo-large { width: clamp(500px, 80vw, 1200px); max-width: 95vw; height: auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.15)); }
.hero-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.hero-nav-link { display: inline-block; min-width: 210px; padding: var(--s-5) var(--s-6); text-align: center; font-family: var(--font-head); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--white); text-decoration: none; border: 3px solid #111; border-radius: 14px; box-shadow: 6px 6px 0 #111; background: var(--hero-nav-color, var(--red)); transition: transform .15s ease, box-shadow .15s ease; }
.hero-nav-link:nth-child(2) { --hero-nav-color: var(--blue); }
.hero-nav-link:nth-child(3) { --hero-nav-color: var(--yellow); color: var(--black); }
.hero-nav-link:hover,
.hero-nav-link:focus-visible { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #111; outline: none; }

/* Alte Hero-Stile (für Shop/andere Seiten) */
.hero { background: var(--white); color: var(--text-primary); border-bottom: 3px solid var(--yellow); }
.hero .container { padding: var(--s-11) var(--s-6) var(--s-10); display: flex; justify-content: center; }
.hero-stack { width: min(720px, 100%); background: var(--white); border: 4px solid #111; border-radius: 32px; padding: clamp(var(--s-7), 8vw, var(--s-9)); box-shadow: 12px 12px 0 #111; display: grid; gap: var(--s-7); justify-items: center; position: relative; overflow: visible; }
.hero-stack::before { content: ""; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: calc(100% - clamp(3rem, 10vw, 5rem)); height: 30px; border: 4px solid #111; border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--white); box-shadow: 8px 0 0 #111; }
.hero-stack::after { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(17,17,17,.15); border-radius: 24px; pointer-events: none; }
.hero-logo-wrap { display: flex; justify-content: center; align-items: center; width: 100%; padding: var(--s-6); background: var(--white); border: 3px solid #111; border-radius: 24px; box-shadow: 6px 6px 0 rgba(17,17,17,.8); }
.hero-logo { width: clamp(180px, 36vw, 360px); height: auto; filter: drop-shadow(0 8px 0 rgba(17,17,17,.4)); }
.hero-links { display: grid; gap: var(--s-5); width: 100%; }
.hero-subtitle { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--text-secondary); text-align: center; max-width: 38ch; }
.hero-link { display: block; padding: var(--s-6) var(--s-5); text-align: center; font-family: var(--font-head); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--white); text-decoration: none; border: 4px solid #111; border-radius: 18px; box-shadow: 12px 12px 0 #111; background: var(--hero-link-color, var(--red)); transition: transform .15s ease, box-shadow .15s ease; }
.hero-link:nth-child(2) { --hero-link-color: var(--blue); }
.hero-link:nth-child(3) { --hero-link-color: var(--yellow); color: var(--black); }
.hero-link:hover,
.hero-link:focus-visible { transform: translate(-6px, -6px); box-shadow: 14px 14px 0 #111; outline: none; }

/* Shop hero variant */
.hero--shop { border-bottom-color: var(--red); }
.hero-stack--shop { gap: var(--s-6); }
.hero-title { margin: 0; font-family: var(--font-body); font-size: clamp(2.8rem, 7vw, 4rem); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; text-align: center; color: var(--red); }
.hero-links--single { display: flex; justify-content: center; width: 100%; margin: 0; }
.hero-links--single .hero-link { margin: 0 auto; }
.hero-email { margin: 0; font-family: var(--font-head); font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); text-align: center; }
.hero-email a { color: inherit; text-decoration: none; }
.hero-email a:hover,
.hero-email a:focus-visible { text-decoration: underline; outline: none; }

.pillars { background: transparent; padding: var(--s-9) 0 var(--s-10); border: 0; }

.pillars--minimal .pillar-inner { display: flex; justify-content: center; }
.pillars--minimal .pillar-list { list-style: none; margin: 0 auto; padding: 0 0 clamp(var(--s-6), 5vw, var(--s-8)); display: flex; justify-content: center; gap: var(--s-6); flex-wrap: nowrap; }
.pillars--minimal .pillar-list li { position: relative; padding: var(--s-8); border: 4px solid #111; border-radius: 24px; text-align: center; box-shadow: 16px 16px 0 #111; height: 260px; width: 360px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; background: var(--yellow); color: var(--black); }
.pillars--minimal .pillar-list li::before { content: ""; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: calc(100% - clamp(2.5rem, 9vw, 4rem)); height: 28px; border: 4px solid #111; border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--yellow); }
.pillars--minimal .pillar-list h2 { margin: 0; font-family: var(--font-head); font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: .12em; text-transform: uppercase; color: inherit; line-height: 1.2; }

/* Default content slabs */
.site-main > section.container {
	margin: var(--s-10) auto;
	padding: clamp(var(--s-7), 6vw, var(--s-9)) !important;
	max-width: min(960px, calc(100% - 2 * var(--s-6)));
	background: var(--white);
	border: 4px solid #111;
	border-radius: 26px;
	box-shadow: 12px 12px 0 #111;
	display: grid;
	gap: var(--s-5);
}
.site-main > section.container:first-child { margin-top: var(--s-10); }
.site-main > section.container:last-child { margin-bottom: var(--s-11); }
.site-main > section.container h1,
.site-main > section.container h2 {
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--blue);
	margin: 0;
}
.site-main > section.container h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.site-main > section.container h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.site-main > section.container p,
.site-main > section.container li,
.site-main > section.container label {
	color: var(--text-secondary);
	font-size: 1rem;
}
.site-main > section.container a.link { color: var(--red); font-weight: 600; }
.site-main > section.container[style*="text-align:center"],
.site-main > section.container[style*="text-align: center"] { text-align: center; }
.site-main > section.container ul { padding-left: 1.2rem; }

.contact-grid { display: grid; gap: var(--s-6); }
.lego-help { font-size: .875rem; color: var(--text-secondary); }
.contact-meta { display: grid; gap: var(--s-4); text-align: left; }
.contact-meta__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.contact-meta__list li { font-size: 1rem; }
.legal-text { display: grid; gap: var(--s-3); text-align: left; }
.legal-text p { margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5ch; font-weight: 700; text-decoration: none; border-radius: 18px; padding: var(--s-3) var(--s-6); border: 3px solid #111; box-shadow: 8px 8px 0 #111; background: var(--red); color: var(--white); cursor: pointer; text-transform: uppercase; letter-spacing: .1em; transition: transform .15s ease, box-shadow .15s ease; }
.btn--primary { background: var(--red); color: var(--white); }
.btn--secondary { background: var(--blue); color: var(--white); }
.btn--tertiary { background: var(--orange); color: var(--white); }
.btn:hover,
.btn:focus-visible { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 #111; outline: none; }
.btn:active { transform: translate(-2px, -2px); }
/* Abwaertskompatibilitaet zu vorhandenen Klassen */
.btn.btn-primary { background: var(--red); color: var(--white); }
.btn.btn-secondary { background: var(--blue); color: var(--white); }
.btn.btn-tertiary { background: var(--orange); color: var(--white); }

/* Karten / Produktkacheln */
.produkte { padding: var(--s-10) 0; background: #f7f7f7; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.produkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-6); }
.produkt-card { background: var(--white); border: var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.produkt-link { text-decoration: none; color: inherit; }
.produkt-media img { width: 100%; height: auto; display: block; border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2); }
.produkt-body { padding: var(--s-6); }
.produkt-titel { margin: 0 0 var(--s-2); font-family: var(--font-head); font-size: 1.25rem; line-height: var(--lh-head); }
.produkt-meta { margin: 0 0 var(--s-3); color: var(--text-secondary); font-size: .875rem; }
.produkt-preis { font-weight: 800; font-size: 1.25rem; }
.produkt-actions { padding: var(--s-6); border-top: var(--border); display: flex; gap: var(--s-3); }
.produkt-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* Chips/Badges */
.badge { display: inline-block; padding: 6px 10px; border: var(--border); border-radius: var(--radius-2); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.badge--ok { background: var(--green); color: var(--white); }
.badge--warn { background: var(--yellow); color: var(--black); }
.badge--info { background: var(--tblue); color: var(--white); }

/* Newsletter */
.newsletter-teaser { padding: var(--s-10) 0; background: var(--yellow); border-top: var(--border-strong); border-bottom: var(--border-strong); }
.newsletter-inner { max-width: 560px; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); }
.newsletter-form input[type="email"] { padding: 12px; border: var(--border-strong); border-radius: var(--radius-2); }
.newsletter-form input[type="email"]:focus { outline: none; box-shadow: var(--shadow-1); }

/* Links */
.link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--link-hover); }

/* Footer */
.site-footer { padding: var(--s-6) 0; background: var(--white); border-top: 1px solid rgba(31,42,68,.12); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: nowrap; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-4); flex-wrap: nowrap; }
.footer-nav a { text-decoration: none; color: var(--blue); padding: var(--s-2) var(--s-3); border-radius: 999px; font-weight: 600; }
.footer-nav a:hover,
.footer-nav a:focus-visible { background: rgba(31,42,68,.12); color: var(--dark-blue); outline: none; }
.footer-disclaimer { max-width: 60ch; color: var(--text-secondary); margin: 0; font-size: .85rem; }

/* Deko - Noppenstruktur (sparsam einsetzen) */
.brick-studs { background: repeating-radial-gradient(circle at 8px 8px, rgba(0,0,0,.08) 0 3px, transparent 3px 16px), var(--white); }

/* Responsiv */
@media (max-width: 720px) {
	.header-inner { flex-direction: column; align-items: flex-start; padding: var(--s-4) 0; gap: var(--s-3); }
	.nav-toggle { display: inline-flex; }
	.site-nav { display: none; width: 100%; margin-top: var(--s-2); }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: var(--s-3); width: 100%; }
	.site-nav a { width: 100%; }
	.hero--large-logo { padding: var(--s-5) var(--s-4) var(--s-6); }
	.hero-logo-container { margin-bottom: var(--s-8); }
	.hero-logo-large { width: clamp(320px, 90vw, 900px); }
	.hero-nav { justify-content: flex-start; gap: var(--s-3); }
	.hero-nav-link { padding: var(--s-4) var(--s-5); font-size: clamp(0.875rem, 1.8vw, 1.1rem); }
	.hero .container { padding: var(--s-9) var(--s-6) var(--s-8); }
    .hero-stack { padding: var(--s-7); border-radius: 24px; box-shadow: 8px 8px 0 #111; }
    .hero-stack::after { inset: 10px; border-radius: 18px; }
    .hero-logo-wrap { padding: var(--s-5); border-radius: 18px; box-shadow: 4px 4px 0 rgba(17,17,17,.8); }
    .hero-links { gap: var(--s-4); }
    .hero-link { padding: var(--s-5) var(--s-4); box-shadow: 8px 8px 0 #111; }
    .hero-title { font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: .1em; }
    .pillars { padding: var(--s-9) 0; }
    .pillars--minimal .pillar-list { flex-wrap: wrap; }
	.footer-inner { flex-direction: column; align-items: flex-start; }
	.newsletter-form { grid-template-columns: 1fr; }
}






@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }