/*
Theme Name: Murface Digital
Theme URI: https://murface.com
Description: Zentrale Designbasis für Murface Digital. Child-Theme von Hello Elementor für Website, WooCommerce und Murface-Portale.
Author: Murface GmbH
Author URI: https://murface.com
Template: hello-elementor
Version: 1.1.0
Text Domain: murface-digital
*/

/* =========================================================
   MURFACE DIGITAL – DESIGN FOUNDATION
   Globale, seitenunabhängige Designregeln.
   Seitenspezifische Gestaltung gehört NICHT in dieses Theme.
   ========================================================= */

:root {
	--murface-black: #000000;
	--murface-white: #ffffff;
	--murface-text: #000000;
	--murface-muted: #6f747b;
	--murface-line: #d9dde1;
	--murface-soft: #f7f7f7;

	--murface-content-width: 1385px;
	--murface-narrow-width: 980px;

	--murface-space-xs: 8px;
	--murface-space-sm: 16px;
	--murface-space-md: 24px;
	--murface-space-lg: 40px;
	--murface-space-xl: 64px;
	--murface-space-2xl: 96px;

	--murface-font-body: Tahoma, "Open Sans", Arial, sans-serif;
	/* Die exakte Serifenschrift wird nach Übernahme der Elementor-Site-Settings finalisiert. */
	--murface-font-heading: "Open Sans", Tahoma, Arial, sans-serif;

	--murface-font-xs: 12px;
	--murface-font-sm: 14px;
	--murface-font-md: 16px;
	--murface-font-lg: 20px;

	--murface-border: 1px solid var(--murface-line);
	--murface-transition: .25s cubic-bezier(.37,0,.63,1);
}

/* ---------------------------------------------------------
   GLOBAL RESET / BASE
   --------------------------------------------------------- */
html {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--murface-white);
	color: var(--murface-text);
	font-family: var(--murface-font-body);
	font-size: 14px;
	line-height: 2;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--murface-black);
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--murface-black);
}

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--murface-black);
	font-family: var(--murface-font-heading);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
}

h1 {
	font-size: clamp(44px, 5vw, 72px);
}

h2 {
	font-size: clamp(34px, 4vw, 54px);
}

h3 {
	font-size: clamp(26px, 3vw, 36px);
}

h4 {
	font-size: 24px;
}

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

/* Standard-Microcopy wie bestehende Murface-Navigation */
.murface-eyebrow,
.is-style-murface-eyebrow {
	font-family: var(--murface-font-body);
	font-size: var(--murface-font-xs);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--murface-muted);
}

/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */
.murface-container,
.site-main,
.elementor-section.elementor-section-boxed > .elementor-container {
	width: min(calc(100% - 40px), var(--murface-content-width));
	margin-inline: auto;
}

.murface-container--narrow {
	width: min(calc(100% - 40px), var(--murface-narrow-width));
	margin-inline: auto;
}

.murface-section {
	padding-block: var(--murface-space-xl);
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.murface-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--murface-black);
	border-radius: 0;
	background: var(--murface-black);
	color: var(--murface-white);
	font-family: var(--murface-font-body);
	font-size: var(--murface-font-sm);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition:
		background var(--murface-transition),
		color var(--murface-transition);
}

button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.murface-button:hover,
.murface-button:focus-visible {
	background: var(--murface-white);
	color: var(--murface-black);
}

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */
label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--murface-black);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #9da3aa;
	border-radius: 0;
	background: var(--murface-white);
	color: var(--murface-black);
	font-family: var(--murface-font-body);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--murface-black);
	outline: 1px solid var(--murface-black);
	box-shadow: none;
}

/* ---------------------------------------------------------
   CARDS / PANELS
   --------------------------------------------------------- */
.murface-card {
	padding: var(--murface-space-md);
	border: var(--murface-border);
	border-radius: 0;
	background: var(--murface-white);
	box-shadow: none;
}

/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */
table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 14px 12px;
	border-bottom: var(--murface-border);
	text-align: left;
}

th {
	font-size: var(--murface-font-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------
   WOOCOMMERCE BASE
   --------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-family: var(--murface-font-body);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------
   RESPONSIVE FOUNDATION
   --------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--murface-space-xl: 52px;
		--murface-space-2xl: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--murface-space-lg: 28px;
		--murface-space-xl: 40px;
		--murface-space-2xl: 56px;
	}

	.murface-container,
	.murface-container--narrow,
	.site-main,
	.elementor-section.elementor-section-boxed > .elementor-container {
		width: min(calc(100% - 28px), var(--murface-content-width));
	}

	h1 {
		font-size: clamp(38px, 11vw, 56px);
	}

	h2 {
		font-size: clamp(30px, 9vw, 44px);
	}
}


/* =========================================================
   V1.1.0 – zentrale Murface.com-Übernahme
   Quelle: bestehendes Murface-Theme auf murface.com.
   Nur globale, wiederverwendbare Regeln wurden übernommen.
   ========================================================= */

/* CONTENT / RASTER */
#content,
.site-main,
.header-inner,
.footer-inner {
	max-width: 1385px;
	margin-left: auto;
	margin-right: auto;
}

/* HEADER */
#site-header,
.site-header {
	background: #fff;
	padding-block-start: 20px;
	padding-block-end: 20px;
}

#site-header {
	box-shadow: 10px 10px 10px rgba(0,0,0,.05);
	justify-content: center;
}

.header-inner {
	width: min(calc(100% - 64px), 1385px);
	margin-top: 0;
	margin-bottom: 0;
}

/* HAUPTNAVIGATION */
.site-navigation ul.menu li {
	padding: 8px 15px;
}

.site-navigation ul.menu li a {
	position: relative;
	overflow: hidden;
	padding: 0;
	color: #000;
	font-family: "Open Sans", Tahoma, Arial, sans-serif;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.site-navigation ul.menu li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #000;
	transition: width .3s ease-out;
}

.site-navigation ul.menu li a:hover::after,
.site-navigation ul.menu li.current-menu-item > a::after,
.site-navigation ul.menu li.current-menu-ancestor > a::after {
	width: 100%;
}

.site-navigation ul.menu li.menu-item-has-children::after {
	display: none;
}

.site-navigation ul.menu li ul {
	border: 1px solid #000;
}

.site-navigation ul.menu li ul li {
	border-block-end: none;
}

/* MOBILE NAVIGATION */
.site-navigation-toggle-holder .site-navigation-toggle {
	background-color: transparent;
}

.site-navigation-toggle-holder {
	position: absolute;
	right: 40px;
	z-index: 20000;
}

.site-navigation-toggle-holder .site-navigation-toggle-icon::before,
.site-navigation-toggle-holder .site-navigation-toggle-icon::after {
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 8px;
	background: #000;
	transition: all .25s cubic-bezier(.37,0,.63,1);
}

.site-navigation-toggle-holder .site-navigation-toggle-icon::before {
	box-shadow: 0 5px 0;
}

/* H2 – Murface-Linie */
main h2,
.elementor-widget-heading h2.elementor-heading-title {
	position: relative;
	overflow: hidden;
	padding-top: 15px;
}

main h2::after,
.elementor-widget-heading h2.elementor-heading-title::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 0;
	height: 2px;
	background: #000;
	animation: murface-line-grow 1.5s ease-in-out forwards;
}

@keyframes murface-line-grow {
	from { width: 0; }
	to { width: 100%; }
}

/* BUTTON – Murface.com Designprinzip */
.elementor-widget-button .elementor-button,
.murface-button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	position: relative;
	overflow: hidden;
	z-index: 1;
	min-height: 60px;
	padding: 0 28px;
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #000 !important;
	font-family: "Open Sans", Tahoma, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none !important;
	transition:
		color .5s cubic-bezier(.37,0,.63,1),
		background .5s cubic-bezier(.37,0,.63,1);
}

.elementor-widget-button .elementor-button::after,
.murface-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #000;
	transform: translateX(-100%);
	transition: transform .5s cubic-bezier(.37,0,.63,1);
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible,
.murface-button:hover,
.murface-button:focus-visible,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: #000 !important;
	color: #fff !important;
}

.elementor-widget-button .elementor-button:hover::after,
.elementor-widget-button .elementor-button:focus-visible::after,
.murface-button:hover::after,
.murface-button:focus-visible::after {
	transform: translateX(0);
}

/* FORMULARBASIS – reduziert und themeweit */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	border-radius: 0 !important;
}

/* FOOTER */
#site-footer,
.site-footer {
	max-width: 1385px;
	margin: 30px auto 0;
	padding-left: 40px;
	padding-right: 40px;
	background: #000;
	color: #fff;
}

#site-footer a,
.site-footer a,
#site-footer p,
.site-footer p {
	color: #fff;
}

.site-footer .site-navigation ul.menu li a {
	color: #fff;
}

.site-footer .site-navigation ul.menu li a::after {
	background: #fff;
}

/* RESPONSIVE GRUNDLAGE */
@media (max-width: 1024px) {
	.header-inner {
		width: min(calc(100% - 48px), 1385px);
	}

	#site-footer,
	.site-footer {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 782px) {
	.header-inner {
		width: min(calc(100% - 40px), 1385px);
	}

	#site-footer,
	.site-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.site-navigation-toggle-holder {
		right: 20px;
	}
}