/* ==========================================================================
   Gebäude Technik Roth – Main Stylesheet
   Designstil: naturnah & grün
   ========================================================================== */

/* -------- 1. Design-Tokens -------- */
:root {
	--green-900: #14321c;
	--green-800: #1f4a2c;
	--green-700: #2d6a3f;
	--green-600: #3b8a52;
	--green-500: #4fa866;
	--green-400: #7dc48c;
	--green-100: #e7f3ea;
	--green-50:  #f3faf4;

	--earth-900: #3b2d1a;
	--earth-700: #6b4f2a;
	--earth-500: #a07948;
	--earth-200: #e9dcc6;

	--ink-900: #17221c;
	--ink-700: #344036;
	--ink-500: #57665c;
	--ink-300: #8a968f;
	--ink-100: #d7ddd8;
	--bg:      #ffffff;
	--bg-alt:  #f6f8f5;

	--accent:  #d9a441;
	--accent-dark: #b7832a;

	--radius:   14px;
	--radius-lg: 22px;
	--shadow:   0 10px 30px rgba(20, 50, 28, 0.08);
	--shadow-lg: 0 20px 50px rgba(20, 50, 28, 0.14);

	--container: 1200px;
	--transition: 180ms ease;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
}

/* -------- 2. Reset & Grundtypografie -------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	margin:0;
	font-family:var(--font-sans);
	font-size:17px;
	line-height:1.65;
	color:var(--ink-900);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--green-600)}

h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.2;color:var(--green-900);margin:0 0 .6em}
h1{font-size:clamp(2rem,4vw,3.4rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
p.lead{font-size:1.12rem;color:var(--ink-700)}

ul,ol{padding-left:1.2em}
.muted{color:var(--ink-500)}
.center{text-align:center}

.eyebrow{
	display:inline-block;
	font-size:.85rem;
	font-weight:600;
	color:var(--green-700);
	text-transform:uppercase;
	letter-spacing:.12em;
	margin-bottom:.6em;
	padding:.3em .8em;
	background:var(--green-100);
	border-radius:100px;
}

/* -------- 3. Layout -------- */
.container{
	width:100%;
	max-width:var(--container);
	margin:0 auto;
	padding:0 24px;
}
.section{padding:80px 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:760px;margin:0 auto 48px}
.section-head.center{text-align:center}
.section-head p{color:var(--ink-700);font-size:1.08rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:32px}.section{padding:56px 0}}

.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;word-wrap:normal}
.skip-link{position:absolute;top:-40px;left:8px;background:var(--green-800);color:#fff;padding:8px 12px;border-radius:6px}
.skip-link:focus{top:8px}

/* -------- 4. Topbar & Header -------- */
.topbar{
	background:var(--green-900);
	color:#e7f3ea;
	font-size:.88rem;
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 24px}
.topbar-contact{display:flex;gap:22px}
.topbar-contact a{color:#e7f3ea;display:inline-flex;align-items:center;gap:6px}
.topbar-contact a:hover{color:#fff}
.topbar svg{width:16px;height:16px}
@media (max-width:700px){
	.topbar-info{display:none}
	.topbar-inner{justify-content:center}
}

.site-header{
	background:#fff;
	border-bottom:1px solid var(--ink-100);
	position:sticky;top:0;z-index:40;
	backdrop-filter:saturate(1.1) blur(6px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px}
.site-branding .site-title-link{display:flex;align-items:center;gap:10px;color:var(--green-900)}
.site-branding .logo-mark{
	width:40px;height:40px;border-radius:50%;
	background:var(--green-100);color:var(--green-700);
	display:grid;place-items:center;
}
.site-branding .logo-mark svg{width:24px;height:24px}
.site-title{font-family:var(--font-serif);font-weight:700;font-size:1.25rem;line-height:1}

.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.main-navigation a{
	display:block;padding:10px 14px;border-radius:10px;
	color:var(--ink-900);font-weight:500;
}
.main-navigation a:hover,
.main-navigation .current-menu-item a{background:var(--green-100);color:var(--green-800)}

.menu-toggle{
	display:none;background:none;border:0;cursor:pointer;
	width:44px;height:44px;padding:10px;border-radius:10px;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink-900);margin:4px auto;border-radius:2px;transition:var(--transition)}
.menu-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.btn-header{white-space:nowrap}
@media (max-width:900px){
	.btn-header{display:none}
	.menu-toggle{display:block}
	.main-navigation ul{
		display:none;position:absolute;top:100%;left:0;right:0;
		flex-direction:column;gap:4px;background:#fff;
		padding:16px 24px;border-top:1px solid var(--ink-100);
		box-shadow:var(--shadow);
	}
	.main-navigation.active ul{display:flex}
}

/* -------- 5. Buttons -------- */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	padding:12px 22px;border-radius:100px;font-weight:600;
	font-family:var(--font-sans);font-size:1rem;cursor:pointer;
	border:2px solid transparent;transition:var(--transition);
	text-decoration:none;line-height:1;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.btn-primary:hover{background:var(--green-800);border-color:var(--green-800);color:#fff}
.btn-outline{background:transparent;color:var(--green-800);border-color:var(--green-700)}
.btn-outline:hover{background:var(--green-100);color:var(--green-900)}
.btn-ghost{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.28);color:#fff}
.btn-lg{padding:16px 28px;font-size:1.05rem}

/* -------- 6. Hero -------- */
.hero{
	position:relative;overflow:hidden;
	background:linear-gradient(135deg,var(--green-800) 0%,var(--green-900) 100%);
	color:#fff;padding:110px 0 100px;
}
.hero-bg{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(circle at 20% 10%,rgba(125,196,140,.18) 0,transparent 40%),
		radial-gradient(circle at 85% 80%,rgba(217,164,65,.18) 0,transparent 45%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'><path d='M50 300 Q100 200 150 300 T250 300 T350 300'/><path d='M20 340 Q80 250 140 340 T260 340 T380 340'/></g></svg>");
	background-size:auto,auto,auto;
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:40px}
.hero-content{max-width:760px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .eyebrow{background:rgba(255,255,255,.1);color:#c4e9cd}
.hero-lead{font-size:1.18rem;color:#d7e9dc;max-width:640px;margin-bottom:2em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-actions.center{justify-content:center}
.hero-badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:18px;color:#e7f3ea;font-size:.95rem}
.hero-badges li{display:inline-flex;align-items:center;gap:8px}
.hero-badges svg{width:18px;height:18px;color:var(--green-400)}

/* -------- 7. Services-Grid -------- */
.services-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr}}

.service-card{
	background:#fff;border:1px solid var(--ink-100);
	border-radius:var(--radius-lg);padding:28px;
	display:flex;flex-direction:column;gap:10px;
	color:var(--ink-900);transition:var(--transition);
	box-shadow:0 2px 0 rgba(20,50,28,.02);
}
.service-card:hover{
	transform:translateY(-4px);border-color:var(--green-400);
	box-shadow:var(--shadow);color:var(--ink-900);
}
.service-icon{
	width:56px;height:56px;border-radius:16px;
	background:var(--green-100);color:var(--green-700);
	display:grid;place-items:center;margin-bottom:6px;
}
.service-icon svg{width:30px;height:30px}
.service-title{margin:0 0 2px;font-size:1.2rem}
.service-excerpt{color:var(--ink-700);font-size:.97rem;margin:0 0 8px;flex-grow:1}
.service-link{color:var(--green-700);font-weight:600;font-size:.95rem}

/* -------- 8. Why / Features -------- */
.stats{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column}
.stat strong{font-family:var(--font-serif);font-size:2.4rem;color:var(--green-700);line-height:1}
.stat span{color:var(--ink-500);font-size:.95rem;margin-top:4px}

.why-features{display:grid;gap:18px}
.feature{
	display:grid;grid-template-columns:40px 1fr;gap:14px;
	padding:18px;background:#fff;border-radius:var(--radius);
	border:1px solid var(--ink-100);
}
.feature-icon{
	width:40px;height:40px;border-radius:50%;
	background:var(--green-700);color:#fff;
	display:grid;place-items:center;
}
.feature-icon svg{width:20px;height:20px}
.feature h4{margin:0 0 4px}
.feature p{margin:0;color:var(--ink-700);font-size:.96rem}

/* -------- 9. Prozess-Steps -------- */
.process-steps{
	list-style:none;padding:0;margin:0;
	display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step;
}
@media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process-steps{grid-template-columns:1fr}}
.process-steps li{
	background:#fff;border:1px solid var(--ink-100);
	border-radius:var(--radius-lg);padding:28px;text-align:left;
	position:relative;
}
.step-num{
	display:inline-grid;place-items:center;
	width:44px;height:44px;border-radius:50%;
	background:var(--green-700);color:#fff;font-weight:700;
	font-family:var(--font-serif);font-size:1.2rem;margin-bottom:14px;
}
.process-steps h4{margin:0 0 6px}
.process-steps p{margin:0;color:var(--ink-700);font-size:.96rem}

/* -------- 10. Testimonials -------- */
.testimonials{
	display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{
	margin:0;padding:28px;border-radius:var(--radius-lg);
	background:var(--green-50);border:1px solid var(--green-100);
	position:relative;
}
.testimonial p{font-family:var(--font-serif);font-style:italic;color:var(--ink-900);font-size:1.02rem}
.testimonial cite{display:block;margin-top:14px;color:var(--ink-500);font-style:normal;font-weight:600;font-size:.9rem}

/* -------- 11. Page-Hero (Unterseiten) -------- */
.page-hero{
	background:linear-gradient(135deg,var(--green-800),var(--green-900));
	color:#fff;padding:80px 0 60px;
}
.page-hero .page-title{color:#fff;margin-bottom:.3em}
.page-hero .eyebrow{background:rgba(255,255,255,.1);color:#c4e9cd}
.page-hero .page-subtitle{color:#d7e9dc;font-size:1.1rem;max-width:760px}

/* -------- 12. Leistungs-Detail -------- */
.service-anchors{
	display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px;
	padding-bottom:24px;border-bottom:1px solid var(--ink-100);
}
.service-anchors a{
	padding:8px 14px;border-radius:100px;background:var(--green-50);
	color:var(--green-800);font-weight:500;font-size:.9rem;
	border:1px solid var(--green-100);
}
.service-anchors a:hover{background:var(--green-100)}

.service-detail{
	display:grid;grid-template-columns:1.2fr 1fr;gap:56px;
	align-items:center;padding:56px 0;border-bottom:1px solid var(--ink-100);
	scroll-margin-top:120px;
}
.service-detail.reverse{grid-template-columns:1fr 1.2fr}
.service-detail.reverse .service-detail-visual{order:-1}
.service-detail:last-of-type{border-bottom:0}
@media (max-width:860px){
	.service-detail,.service-detail.reverse{grid-template-columns:1fr;gap:24px}
	.service-detail.reverse .service-detail-visual{order:0}
}
.service-icon-lg{
	display:inline-grid;place-items:center;
	width:68px;height:68px;border-radius:18px;
	background:var(--green-100);color:var(--green-700);margin-bottom:10px;
}
.service-icon-lg svg{width:36px;height:36px}
.visual-card{
	aspect-ratio:4/3;border-radius:var(--radius-lg);
	background:linear-gradient(135deg,var(--green-600),var(--green-800));
	color:rgba(255,255,255,.85);display:grid;place-items:center;
	box-shadow:var(--shadow-lg);
}
.visual-card svg{width:80px;height:80px}

.check-list{list-style:none;padding:0;margin:18px 0 26px}
.check-list li{
	display:grid;grid-template-columns:24px 1fr;gap:12px;
	padding:8px 0;color:var(--ink-800);
}
.check-list svg{width:22px;height:22px;color:var(--green-600);margin-top:2px}

/* -------- 13. Werte / Referenzen -------- */
.values-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:800px){.values-grid{grid-template-columns:1fr}}
.value-card{
	background:#fff;padding:28px;border-radius:var(--radius-lg);
	border:1px solid var(--ink-100);
}
.value-card h3{margin:0 0 8px;color:var(--green-800)}
.value-card p{margin:0;color:var(--ink-700)}

.reference-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:32px;
}
@media (max-width:900px){.reference-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reference-grid{grid-template-columns:1fr}}
.reference-card{
	background:#fff;border-radius:var(--radius-lg);overflow:hidden;
	border:1px solid var(--ink-100);transition:var(--transition);
}
.reference-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.reference-visual{
	aspect-ratio:4/3;background:var(--green-100);
	background-size:cover;background-position:center;
}
.reference-visual-1{background:linear-gradient(135deg,#8a968f,#57665c)}
.reference-visual-2{background:linear-gradient(135deg,#a07948,#6b4f2a)}
.reference-visual-3{background:linear-gradient(135deg,#4fa866,#2d6a3f)}
.reference-visual-4{background:linear-gradient(135deg,#344036,#17221c)}
.reference-visual-5{background:linear-gradient(135deg,#d9a441,#b7832a)}
.reference-visual-6{background:linear-gradient(135deg,#7dc48c,#3b8a52)}
.reference-body{padding:20px 22px}
.reference-body h3{margin:6px 0 6px;font-size:1.15rem}
.reference-body p{margin:0;color:var(--ink-700);font-size:.95rem}
.tag{
	display:inline-block;font-size:.78rem;font-weight:600;
	padding:4px 10px;border-radius:100px;
	background:var(--green-100);color:var(--green-800);
	text-transform:uppercase;letter-spacing:.08em;
}

/* -------- 14. Kontaktseite -------- */
.contact-section{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
@media (max-width:860px){.contact-section{grid-template-columns:1fr;gap:32px}}
.contact-list{list-style:none;padding:0;margin:24px 0}
.contact-list li{
	display:grid;grid-template-columns:48px 1fr;gap:14px;
	padding:14px 0;border-bottom:1px solid var(--ink-100);
}
.contact-list li:last-child{border-bottom:0}
.contact-list .icon{
	width:44px;height:44px;border-radius:12px;
	background:var(--green-100);color:var(--green-700);
	display:grid;place-items:center;
}
.contact-list .icon svg{width:22px;height:22px}
.contact-list strong{display:block;color:var(--green-900);margin-bottom:2px}
.contact-list small{display:block;color:var(--ink-500);margin-top:2px}
.contact-list a{color:var(--ink-900);font-weight:500}

.contact-form-wrap{
	background:#fff;padding:36px;border-radius:var(--radius-lg);
	border:1px solid var(--ink-100);box-shadow:var(--shadow);
}
.contact-form label{display:block;margin-bottom:16px;font-weight:500;color:var(--ink-700)}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea,
.contact-form select{
	width:100%;margin-top:6px;padding:12px 14px;
	border:1px solid var(--ink-100);border-radius:10px;
	font-family:inherit;font-size:1rem;color:var(--ink-900);
	background:#fff;transition:var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
	outline:0;border-color:var(--green-600);
	box-shadow:0 0 0 3px rgba(75,168,102,.18);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.contact-form .checkbox{
	display:grid;grid-template-columns:auto 1fr;gap:10px;
	align-items:start;font-size:.95rem;color:var(--ink-700);
	font-weight:400;margin:8px 0 20px;
}
.contact-form .checkbox input{margin-top:5px}
.notice{padding:16px 20px;border-radius:12px;margin-bottom:20px}
.notice-success{background:var(--green-100);color:var(--green-900);border:1px solid var(--green-400)}

/* -------- 15. CTA-Band -------- */
.cta-band{
	background:linear-gradient(135deg,var(--green-700),var(--green-900));
	color:#fff;padding:56px 0;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 6px}
.cta-band p{color:#d7e9dc;margin:0;font-size:1.05rem}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* -------- 16. Footer -------- */
.site-footer{background:var(--green-900);color:#d7e9dc;padding:64px 0 0}
.footer-grid{
	display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;
	padding-bottom:48px;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4.widget-title{color:#fff;margin:0 0 14px;font-size:1.05rem}
.footer-col p{color:#a8c9b1;font-size:.95rem}
.footer-address{margin-top:14px}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{padding:4px 0}
.footer-list a{color:#c4e9cd;display:inline-flex;align-items:center;gap:6px}
.footer-list a:hover{color:#fff}
.footer-list svg{width:16px;height:16px}
.footer-bottom{
	border-top:1px solid rgba(255,255,255,.08);padding:22px 0;
	font-size:.88rem;color:#a8c9b1;
}
.footer-bottom p{margin:0;text-align:center}

/* -------- 17. Legal / Blog -------- */
.legal-page h2{margin-top:36px;font-size:1.25rem}
.legal-page p{color:var(--ink-700)}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.posts-grid{grid-template-columns:1fr}}
.post-card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--radius-lg);overflow:hidden}
.post-body{padding:22px}
.post-meta{color:var(--ink-500);font-size:.88rem;margin-bottom:8px}

.page-content p,.page-content li{color:var(--ink-800)}
.page-content h2{margin-top:2em}