/*
Theme Name: Maier TL 2026
Theme URI: https://www.maier-tl.de/
Author: Maier Typo & Litho
Description: Schlankes, individuelles Theme fuer Maier Typo & Litho.
Version: 1.0.3
Text Domain: maier-tl-2026
*/

:root {
	--mtl-green: #10a982;
	--mtl-dark-green: #2c6f50;
	--mtl-mint: #cfe7dc;
	--mtl-pale: #e1ede5;
	--mtl-text: #151515;
	--mtl-page: min(960px, calc(100% - 30px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	color: var(--mtl-text);
	background: #fff;
	font-family: Raleway, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

a { color: var(--mtl-dark-green); }
a:hover { color: var(--mtl-green); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .65rem 1rem;
	background: #fff;
	color: #000;
}
.skip-link:focus { left: 0; }

.site-header {
	position: relative;
	min-height: 140px;
	padding-top: 14px;
	background: #fff;
	text-align: center;
}

.site-branding { display: inline-flex; }
.site-logo,
.custom-logo-link,
.custom-logo { display: block; width: 241px; height: auto; }

.menu-toggle { display: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.primary-navigation {
	position: absolute;
	left: 50%;
	bottom: -26px;
	z-index: 5;
	width: min(960px, calc(100% - 30px));
	transform: translateX(-50%);
	background: #fff;
	box-shadow: 1px 1px 6px #d6d5d6;
}

.primary-navigation ul {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation a {
	display: block;
	padding: .55rem 1.25rem;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}

.primary-navigation .current-menu-item > a,
.primary-navigation a:hover,
.primary-navigation a:focus-visible { background: var(--mtl-mint); }

.hero {
	width: 100%;
	overflow: hidden;
	background: var(--mtl-pale);
}

.hero img {
	display: block;
	width: 100%;
	height: auto;
}

.hero--page { max-height: 450px; }
.hero--page img { min-height: 280px; object-fit: cover; object-position: center; }

/* The start image is intentionally taller than the other hero images. On desktop it
   continues behind the content instead of extending the document flow. */
@media (min-width: 701px) {
	.hero--home { position: relative; height: min(450px, 26.041667vw); overflow: visible; }
	.hero--home img { position: absolute; inset: 0 auto auto 0; z-index: 0; }
	.hero--home + .content-area { position: relative; z-index: 1; }
}

.content-area {
	width: var(--mtl-page);
	margin: 30px auto 0;
	padding-bottom: 3rem;
}

.entry-title,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	margin: 0 0 .65rem;
	font-weight: 400;
	line-height: 1.2;
}

.entry-title,
.entry-content h1 { color: var(--mtl-dark-green); font-size: clamp(1.5rem, 2vw, 2rem); }
.entry-content h2 { color: var(--mtl-dark-green); font-size: clamp(1.3rem, 1.7vw, 1.65rem); }
.entry-content p { margin: 0 0 1rem; }
.entry-content img { max-width: 100%; height: auto; }

.entry-content ul { padding-left: 1.3rem; }
.entry-content li::marker { color: var(--mtl-green); }

/* Leistungen: Gutenberg groups remain individually editable while preserving the two columns. */
.entry-content .griddy { margin: 2px; padding: 2%; background: var(--mtl-pale); }
.entry-content .h2g { display: flex; align-items: center; gap: 1rem; margin: 0 0 1em; color: var(--mtl-green); }
.entry-content .h2g .wp-block-image { flex: 0 0 50px; margin: 0; }
.entry-content .h2g .wp-block-image img { display: block; width: 50px; height: auto; }
.entry-content .h2g h2 { margin: 0; color: inherit; font-size: 1.6rem; font-weight: 400; line-height: 1.2; }
.entry-content .leistungen-hinweis { margin: .5rem 3rem 1.5rem  2.5rem; color: #000; font-size: 1rem; line-height: 1.5rem; }
.entry-content .leistungen-spalten.wp-block-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2%; }
.entry-content .leistungen-spalten > .wp-block-column { min-width: 0; margin: 0; }
.entry-content .leistungs-eintrag,
.entry-content .loesungen-eintrag { position: relative; margin: 0 0 1rem; padding-left: 1.25rem; }
.entry-content .leistungs-eintrag::before,
.entry-content .loesungen-eintrag::before { position: absolute; top: .55rem; left: 0; width: .65rem; height: .65rem; background: url(//www.maier-tl.de/wp-content/uploads/2026/10/pfeil.png) center / contain no-repeat; content: ''; }
.entry-content .leistungs-eintrag h3,
.entry-content .loesungen-eintrag h3 { margin: 0; color: var(--mtl-text); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.entry-content .leistungs-eintrag p,
.entry-content .loesungen-eintrag p { margin: 0 0 .75rem; }
.entry-content .loesungen-eintrag .wp-block-list { margin: 0 0 .75rem 1rem; padding-left: 1rem; }

/* Impressum: source content is deliberately split into the LINKS and RECHTS areas. */
.entry-content .impressum-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4%; }
.entry-content .impressum-spalten.wp-block-columns > .wp-block-column { margin: 0; }
.entry-content .impressum-spalten > div { min-width: 0; }
.entry-content .impressum-spalten h2 { margin-top: 0; }
.entry-content .impressum-links { border-right: 1px solid #d6d5d6; padding-right: 4%; }
.entry-content .impressum-rechts ul { margin: 0 0 1.5rem; padding-left: 1.3rem; }

.site-footer {
	/* Same green hairlines above and below as on the original site. */
	border-block: 1px solid var(--mtl-dark-green);
	background: #eee;
	overflow: visible;
}

.footer-inner {
	width: var(--mtl-page);
	margin: 0 auto;
	padding: 1.5rem 0;
	line-height: 1.6;
}

.footer-row { display: grid; gap: 1.5rem; }
.footer-row + .footer-row { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d6d5d6; }
.footer-row--cols-1 { grid-template-columns: minmax(0, 1fr); }
.footer-row--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-row--cols-3 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.footer-row--cols-3.footer-row--layout-equal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-row--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-block { min-width: 0; }
.footer-block p { margin: 0; }

@media (max-width: 700px) {
	.site-header { min-height: 112px; padding: 8px 15px 0; }
	.site-logo,
	.custom-logo-link,
	.custom-logo { width: 190px; }
	.menu-toggle { position: absolute; top: 33px; right: 15px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--mtl-dark-green); border-radius: 2px; background: #fff; color: var(--mtl-dark-green); cursor: pointer; }
	.menu-toggle:focus-visible { outline: 3px solid var(--mtl-green); outline-offset: 2px; }
	.menu-toggle__icon,
	.menu-toggle__icon::before,
	.menu-toggle__icon::after { display: block; width: 23px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
	.menu-toggle__icon { position: relative; }
	.menu-toggle__icon::before,
	.menu-toggle__icon::after { position: absolute; left: 0; content: ''; }
	.menu-toggle__icon::before { top: -7px; }
	.menu-toggle__icon::after { top: 7px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }
	.primary-navigation { position: static; left: auto; bottom: auto; width: 100%; margin-top: .75rem; transform: none; text-align: left; }
	.menu-ready .primary-navigation { display: none; }
	.menu-ready .primary-navigation.is-open { display: block; }
	.primary-navigation ul { display: block; overflow: visible; }
	.primary-navigation a { padding: .7rem 1rem; font-size: 1rem; white-space: normal; }
	.hero--page { max-height: 250px; }
	.hero--page img { min-height: 180px; }
	.content-area { margin-top: 1rem; }
	.entry-content .leistungen-spalten.wp-block-columns { grid-template-columns: 1fr; gap: 0; }
	.entry-content .impressum-spalten { grid-template-columns: 1fr; gap: 1.5rem; }
	.entry-content .impressum-links { border-right: 0; border-bottom: 1px solid #d6d5d6; padding: 0 0 1.5rem; }
	.footer-row--cols-2,
	.footer-row--cols-3,
	.footer-row--cols-4 { grid-template-columns: 1fr; }
}