@charset "UTF-8";

/* Kopfbereich mit Raster in 3D (FUF, Entwurf 10/2026), fuer Startseite und Leistungsseiten.
   Die Zeichnung kommt aus Scripts/raster-3d.js, je Seite ein Motiv (data-szene am <canvas>).
   Am Computer steht der Text links und die Zeichnung rechts, am Handy die Zeichnung oben
   und der Text darunter. Farben aus dem Bestand: Schwarzgruen #2c3d1f, Hellgruen #9dbd74. */

.rh-hero {
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	height: 640px;
	height: clamp(520px, 70vh, 700px);
	margin: 80px 0 0 0;
	padding: 0;
	overflow: hidden;
	background-color: #1f2d16;
	background-image:
		radial-gradient(ellipse 60% 70% at 66% 60%, rgba(157,189,116,0.20) 0%, rgba(157,189,116,0) 70%),
		linear-gradient(to bottom, #2c3d1f 0%, #1c2913 100%);
}

/* Leistungsseiten: gleicher Aufbau, etwas niedriger, damit der Inhalt frueher beginnt */
body.lp .lp-hero.rh-hero {
	height: 560px;
	height: clamp(480px, 62vh, 620px);
	margin: 80px 0 0 0;
	padding: 0;
	background-color: #1f2d16;
}

.rh-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Abdunklung hinter dem Text, damit er auf jeder Stelle der Zeichnung lesbar bleibt */
.rh-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(24,36,16,0.9) 0%, rgba(24,36,16,0.66) 34%, rgba(24,36,16,0) 60%);
	pointer-events: none;
}

.rh-inhalt {
	position: absolute;
	z-index: 2;
	left: 4.1%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 48%;
	max-width: 700px;
	color: #FFFFFF;
}

@media only screen and (max-width:1399px) {
	.rh-inhalt { width: 52%; }
}

/* Tablet und Handy: Zeichnung oben, Text darunter. --rh-oben ist der Textanfang (Paul 04.10.: tiefer, damit die
   Zeichnung frei darueber steht); raster-3d.js liest ihn und setzt die Zeichnung mittig in die Flaeche darueber.
   Die Abdunklung beginnt erst kurz vor dem Text. */
@media only screen and (max-width:1023px) {
	.rh-hero,
	body.lp .lp-hero.rh-hero {
		--rh-oben: 400px;
		height: auto;
		min-height: 520px;
		margin-top: 55px;
		padding: 0;
	}
	.rh-hero::after {
		background: linear-gradient(to bottom, rgba(24,36,16,0) 0, rgba(24,36,16,0) calc(var(--rh-oben) - 110px),
			rgba(24,36,16,0.6) calc(var(--rh-oben) - 20px), rgba(24,36,16,0.92) calc(var(--rh-oben) + 70px));
	}
	.rh-inhalt {
		position: relative;
		top: auto;
		left: auto;
		-webkit-transform: none;
		transform: none;
		width: auto;
		max-width: none;
		padding: var(--rh-oben) 5% 28px 5%;
	}
}

@media only screen and (max-width:539px) {
	.rh-hero,
	body.lp .lp-hero.rh-hero { --rh-oben: 290px; }
}

/* Kacheln je Leistung (Startseite, Leistungsuebersicht): das Motiv der Leistung statt des Fotos.
   width/height am <canvas> geben das Seitenverhaeltnis 1:1 auch ohne aspect-ratio vor. */
.rh-kachel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background-color: #1f2d16;
	background-image:
		radial-gradient(ellipse 80% 75% at 50% 60%, rgba(157,189,116,0.24) 0%, rgba(157,189,116,0) 72%),
		linear-gradient(to bottom, #2c3d1f 0%, #1c2913 100%);
}

/* Kacheln je Leistung, Variante C (Paul 02.10.): Motiv oben, darunter Titel mit Pfeil und ein Satz.
   Computer vier, Tablet zwei nebeneinander; am Handy als flache Zeile (kleines Motiv links), damit die
   Startseite kurz bleibt. Gilt fuer Startseite und Leistungsuebersicht (Klasse aus kacheln_als_raster). */
/* unten 4 % Luft wie auf allen Seiten vor der KONTAKT-Leiste (die alten Kacheln brachten ihren Abstand selbst mit) */
.kachel-container:has(> .rh-karte) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 3% 3% 4% 3%;
	overflow: visible;
}

.kachel.rh-karte {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	background-color: #2c3d1f;
	box-shadow: 0 12px 30px rgba(0,0,0,0.3);
	transition: background-color 0.15s ease;
}

.kachel.rh-karte:hover { background-color: #34482a; }

.kachel.rh-karte > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.kachel.rh-karte .rh-kachel {
	order: -1;
	aspect-ratio: 16 / 11;
	border-radius: 0;
}

/* Titel so knapp gesetzt, dass das laengste Wort (GRUNDSTÜCKSVERMESSUNG) mit Pfeil in die Kachel passt */
.kachel.rh-karte h3.seo-h {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 20px 18px 8px 18px;
	font-family: lato-bold, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

.kachel.rh-karte h3.seo-h::after {
	content: "\2192";
	color: #8aed00;
	font-size: 1.2em;
	line-height: 0.9;
	letter-spacing: 0;
	transition: transform 0.15s ease;
}

.kachel.rh-karte:hover h3.seo-h::after { transform: translateX(3px); }

/* Referenzen (Paul 03.10.): Motiv und Titel mit Pfeil, ohne Satz darunter, daher unten mehr Luft */
.kachel.rh-karte .rh-karte-titel {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 18px 20px 18px;
	font-family: lato-bold, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

.kachel.rh-karte .rh-karte-titel::after {
	content: "\2192";
	color: #8aed00;
	font-size: 1.2em;
	line-height: 0.9;
	letter-spacing: 0;
	transition: transform 0.15s ease;
}

.kachel.rh-karte:hover .rh-karte-titel::after { transform: translateX(3px); }

.rh-karte-satz {
	display: block;
	padding: 0 18px 22px 18px;
	font-family: lato-regular, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.5;
	letter-spacing: 0;
	color: #D3DDC9;
}

/* Fotokacheln im Inhalt der Leistungsseiten 203 und 213 (Paul 02.10.): seit die Kachel ANGEBOT entfallen ist,
   stehen die drei uebrigen ueber die volle Breite, im selben Aufbau wie die Leistungskacheln, mit Foto statt Motiv. */
body.lp .lp-content .kachel-container:has(> .rh-karte) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 24px 0;
}

body.lp .lp-content .kachel.rh-karte {
	width: auto;
	margin: 0;
	padding: 0;
}

.kachel.rh-karte img.rh-karte-foto {
	order: -1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

/* Vier Kacheln nebeneinander erst ab 1280 px, darunter zwei: schmaler passen die Titel nicht mehr in die Kachel */
@media only screen and (min-width:1280px) and (max-width:1439px) {
	.kachel.rh-karte h3.seo-h,
	.kachel.rh-karte .rh-karte-titel { font-size: 0.92em; }
}

@media only screen and (min-width:768px) and (max-width:1279px) {
	.kachel-container:has(> .rh-karte) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.lp .lp-content .kachel-container:has(> .rh-karte) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* Fotokacheln der Leistungsseiten: dort ist die Inhaltsspalte neben der Angebotskarte schmal */
@media only screen and (min-width:1024px) and (max-width:1279px) {
	body.lp .lp-content .kachel.rh-karte h3.seo-h { padding: 16px 14px 6px 14px; font-size: 0.85em; }
	body.lp .lp-content .rh-karte-satz { padding: 0 14px 18px 14px; font-size: 0.92em; }
}

@media only screen and (max-width:767px) {
	.kachel-container:has(> .rh-karte) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.kachel.rh-karte > a {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 16px;
	}
	.kachel.rh-karte .rh-kachel,
	.kachel.rh-karte img.rh-karte-foto {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 112px;
		height: 100%;
		min-height: 112px;
		aspect-ratio: auto;
	}
	/* Foto auf Zeilenhoehe ziehen (die Seite gibt ihm style="height:auto" mit) */
	.kachel.rh-karte img.rh-karte-foto { align-self: stretch; }
	body.lp .lp-content .kachel-container:has(> .rh-karte) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.kachel.rh-karte h3.seo-h {
		grid-column: 2;
		padding: 14px 16px 4px 0;
		font-size: 0.9em;
	}
	.rh-karte-satz {
		grid-column: 2;
		padding: 0 16px 14px 0;
		font-size: 0.92em;
		line-height: 1.45;
	}
	/* Referenzen: nur der Titel, mittig neben dem kleinen Motiv */
	.kachel.rh-karte .rh-karte-titel {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		padding: 14px 16px 14px 0;
		font-size: 0.9em;
	}
}