@charset "UTF-8";

/* Startseite (FUF, Entwurf 10/2026)
   Wirkt nur auf Seiten mit <body class="sp">, alle anderen Seiten bleiben unberuehrt.
   Kopfbereich: Raster in 3D (01-css/raster-hero.css, Scripts/raster-3d.js, Motiv "bauplatz")
   statt der Diashow mit den runden Bildern; hier nur, was die Startseite zusaetzlich braucht.
   Farben aus dem Bestand: Hellgruen #9dbd74, Dunkelgruen #405430, Schwarzgruen #2c3d1f,
   Akzent #ABCF8E, Angebots-Gruen #8aed00. */

html { scroll-behavior: smooth; }

body.sp #leistungen,
body.sp #kontakt { scroll-margin-top: 96px; }

/* ---------- Buttons (wie auf den Leistungsseiten) ---------- */

body.sp .sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 6px;
	font-family: lato-bold, lato-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.sp a.sp-btn-primary:link,
body.sp a.sp-btn-primary:visited {
	background-color: #8aed00;
	color: #1d2c11;
}

body.sp a.sp-btn-primary:hover,
body.sp a.sp-btn-primary:focus {
	background-color: #a6ff2e;
	color: #1d2c11;
}

body.sp a.sp-btn-ghost:link,
body.sp a.sp-btn-ghost:visited {
	background-color: rgba(29,44,17,0.35);
	color: #FFFFFF;
	box-shadow: inset 0 0 0 1px #ABCF8E;
}

body.sp a.sp-btn-ghost:hover,
body.sp a.sp-btn-ghost:focus {
	background-color: rgba(171,207,142,0.16);
	color: #FFFFFF;
}

body.sp .sp-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

body.sp .sp-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---------- Text im Kopfbereich ---------- */

body.sp .sp-eyebrow {
	margin: 0 0 18px 0;
	font-family: roboto-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ABCF8E;
}

/* Titelzeile (bis 02.10. die H1, Wortlaut gleich) */
body.sp .rh-hero .sp-titel {
	display: block;
	margin: 0;
	font-family: lato-light, Verdana, Arial, Helvetica, sans-serif;
	font-size: 3.2em;
	line-height: 1.08;
	letter-spacing: 0.02em;
	color: #FFFFFF;
}

/* H1 darunter (Paul 02.10.: "für SEO"): Hauptbegriff und Standorte als Unterzeile */
body.sp .rh-hero h1.seo-h {
	display: block;
	margin: 18px 0 0 0;
	font-family: lato-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #ABCF8E;
}

body.sp .sp-lead {
	/* schmaler als der Kopftext, damit die Zeile nicht in die Masszahlen der Zeichnung laeuft */
	max-width: 28em;
	margin: 22px 0 30px 0;
	font-family: lato-light, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: #E8EDE3;
}

body.sp .sp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Standorte unter den Knoepfen (Paul 02.10.), fuehrt zu den Kontaktkacheln */
body.sp .sp-standorte {
	margin: 22px 0 0 0;
	font-family: lato-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	letter-spacing: 0.04em;
}

body.sp .sp-standorte a:link,
body.sp .sp-standorte a:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: #C9D6BC;
	text-decoration: none;
}

body.sp .sp-standorte a:hover { color: #FFFFFF; }
body.sp .sp-standorte .sp-ico { color: #8aed00; }

@media only screen and (max-width:1399px) {
	body.sp .rh-hero .sp-titel { font-size: 2.7em; }
	body.sp .rh-hero h1.seo-h { font-size: 1.25em; }
}

@media only screen and (max-width:1023px) {
	body.sp .rh-hero .sp-titel { font-size: 2.2em; }
	body.sp .rh-hero h1.seo-h { font-size: 1.2em; margin-top: 12px; }
	body.sp .sp-lead { font-size: 1.12em; margin: 14px 0 22px 0; }
}

@media only screen and (max-width:767px) {
	body.sp .sp-cta-row .sp-btn { flex: 1 1 100%; }
	body.sp .rh-hero .sp-titel { font-size: 1.85em; }
	body.sp .rh-hero h1.seo-h { font-size: 1.08em; }
	body.sp .sp-eyebrow { font-size: 0.78em; }
}

/* ---------- Text einspaltig, daneben die Karte ---------- */

/* Abstand zu den Leistungskacheln darueber so gross wie zwischen den Kacheln (raster-hero.css) */
body.sp .sp-kacheln { margin-bottom: 0; }

body.sp .sp-ueber {
	position: relative;
	z-index: 3;
	margin: 24px 3% 4% 3%;
}

body.sp .sp-ueber .textbox-info {
	margin: 0 0 24px 0;
	padding: 26px 30px;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}

body.sp .sp-karte {
	box-sizing: border-box;
	margin: 0 0 24px 0;
	padding: 26px 24px 22px 24px;
	background-color: #2c3d1f;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	font-family: lato-light, Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

body.sp .sp-fakten,
body.sp .sp-telefone {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.sp .sp-fakten li {
	margin: 0 0 12px 0;
	padding-left: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%238aed00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0.2em;
	background-size: 16px 16px;
	font-family: lato-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.05em;
	line-height: 1.4;
}

body.sp .sp-eyebrow-telefon {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(171,207,142,0.25);
}

body.sp .sp-telefone li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 8px 0;
	color: #CCCCCC;
}

body.sp .sp-telefone a:link,
body.sp .sp-telefone a:visited {
	font-family: lato-regular, Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
}

body.sp .sp-telefone a:hover { color: #9dbd74; }

/* Kontaktkacheln: Telefonnummern sind jetzt anklickbar */
body.sp .adressbox a[href^="tel:"]:link,
body.sp .adressbox a[href^="tel:"]:visited { color: #FFFFFF; }

@media only screen and (min-width:1024px) {
	/* Zeilenlaenge wie im Lesetext aller Seiten: hoechstens ca. 38em */
	body.sp .sp-ueber .textbox-info { padding-right: max(30px, calc(100% - 38em - 30px)); }
	/* gleiches Spaltenraster wie die Leistungskacheln darueber (raster-hero.css): ab 1280 px vier Spalten,
	   Text ueber drei, Karte in der vierten; darunter zwei Spalten, Text links, Karte rechts */
	body.sp .sp-ueber {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 24px;
		align-items: start;
	}
	body.sp .sp-karte {
		position: -webkit-sticky;
		position: sticky;
		top: 104px;
	}
}

@media only screen and (min-width:1280px) {
	body.sp .sp-ueber { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.sp .sp-ueber .textbox-info { grid-column: 1 / span 3; }
	body.sp .sp-karte { grid-column: 4; }
}

@media only screen and (max-width:1023px) {
	body.sp .sp-ueber .textbox-info { padding: 22px 20px; }
}

@media only screen and (max-width:767px) {
	body.sp .sp-ueber { margin-top: 12px; }
}

/* Kacheln je Leistung: Gestaltung jetzt in raster-hero.css (Variante C, auch am Handy) */