/* Startseite (Entwurf: branding/startseite.html). Alle Regeln hängen an .yl-start, damit nichts auf andere Seiten wirkt. */

/* =========================================================
   HERO
   ========================================================= */
.yl-hero { position: relative; padding: 40px 0 72px; overflow-x: clip; }   /* nur seitlich abschneiden (Skizze), oben darf der Stempel überstehen */
/* Wärmepumpen-Skizze (aus dem Mega-Menü) groß und blass im Hintergrund, unten angeschnitten */
.yl-hero__skizze {
	position: absolute;
	left: calc(50% - 640px - 300px);   /* links neben der Inhaltskante, vom Rand angeschnitten */
	top: 24px;
	width: 600px;
	aspect-ratio: 480 / 360;
	color: var(--yl-navy);
	opacity: .13;
	pointer-events: none;
	z-index: -1;
}
.yl-hero > .yl-wrap { position: relative; }
/* breiter als der normale Inhalt: Kanten bündig mit der Header-Karte (1280 px) */
.yl-hero > .yl-wrap { max-width: calc(1280px + 48px); }
.yl-hero__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 80px;
	align-items: center;
}
.yl-hero__kicker {
	margin: 0 0 20px;
	font: 400 11px/1.4 var(--yl-font-kopf);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--yl-blau);
}
.yl-hero h1 { margin: 0; font-size: clamp(1.625rem, 3.2vw, 2.75rem); line-height: 1.25; }
.yl-hero h1 em { font-style: normal; color: var(--yl-orange); }
.yl-hero__lead { margin: 24px 0 0; max-width: 520px; font-size: 1.125rem; color: var(--yl-grau); }
.yl-hero__knoepfe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* Am Foto: Stempel ragt über die obere rechte Ecke, leicht schief aufgedrückt */
.yl-siegel--bild {
	position: absolute;
	top: -28px;
	right: -20px;   /* nicht weiter raus: bei schmalen Fenstern bleibt nur der Seitenrand (24 px) */
	z-index: 2;
	margin: 0;
	rotate: 8deg;
	filter: drop-shadow(0 8px 16px rgba(29, 53, 87, .22));
}

@media (max-width: 1279px) { .yl-siegel--bild { right: -8px; } }

/* Desktop: „Termin anfragen“ groß und allein, Telefon nur als ruhiger Textlink daneben.
   Heatmap-Test 19.10. (Variante H, branding/startseite/heatmaps/cta/): doppelte Aufmerksamkeit für den Termin-Button. */
@media (min-width: 1024px) {
	.yl-hero__knoepfe { align-items: center; gap: 24px; }
	.yl-hero__knoepfe .yl-knopf--primaer { --h: 68px; font-size: 1.125rem; }
	.yl-hero__knoepfe .yl-knopf--primaer .yl-knopf__text { padding: 0 40px; }
	.yl-hero__knoepfe .yl-knopf--primaer .yl-knopf__icon svg { width: 22px; height: 22px; }
	.yl-hero__knoepfe .yl-knopf--kontur { --rahmen: transparent; --kreis: transparent; --t: var(--yl-grau); font-weight: 500; }
	.yl-hero__knoepfe .yl-knopf--kontur .yl-knopf__text { padding: 0 8px 0 0; }
	.yl-hero__knoepfe .yl-knopf--kontur .yl-knopf__icon { width: 32px; }
	.yl-hero__knoepfe .yl-knopf--kontur:hover { --t: var(--yl-navy); }
	.yl-hero__knoepfe .yl-knopf--kontur:hover .yl-knopf__icon { translate: none; }   /* als Textlink: nur Farbe, nichts bewegt sich */
	.yl-dunkel .yl-hero__knoepfe .yl-knopf--kontur { --t: rgba(255, 255, 255, .8); }
	.yl-dunkel .yl-hero__knoepfe .yl-knopf--kontur:hover { --t: #fff; }
}

/* Vertrauensbooster: Google-Bewertung + wechselndes Kurzzitat */
.yl-bewertung {
	display: flex;
	align-items: stretch;
	margin-top: 40px;
	max-width: 560px;
	background: var(--yl-karte);
	border: 1px solid var(--yl-linie);
	color: var(--yl-navy);
	text-decoration: none;
	transition: border-color .2s;
}
.yl-bewertung:hover { color: var(--yl-navy); border-color: #CFC6B9; }
.yl-bewertung__wert { display: flex; align-items: center; gap: 14px; flex: none; padding: 16px 20px; }
.yl-bewertung__g { width: 28px; height: 28px; flex: none; }
.yl-bewertung__zahl { display: flex; align-items: center; gap: 8px; }
.yl-bewertung__note { font: 400 1.375rem/1 var(--yl-font-kopf); }
.yl-bewertung__sterne { display: flex; gap: 2px; color: var(--yl-orange); }
.yl-bewertung__sterne svg { width: 15px; height: 15px; display: block; }
.yl-bewertung__anzahl { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 400; color: var(--yl-grau); }
.yl-bewertung__anzahl b { font-weight: 600; color: var(--yl-navy); }

/* Zitat-Teil: alle Zitate liegen übereinander im selben Rasterfeld, nur eins ist sichtbar (blendet weich über) */
.yl-bewertung__zitate {
	display: grid;
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	border-left: 1px solid var(--yl-linie);
	align-items: center;
}
.yl-bewertung__zitat {
	grid-area: 1 / 1;
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.yl-bewertung__zitat.an { opacity: 1; transform: none; }
.yl-bewertung__zitat cite { display: block; margin-top: 4px; font-style: normal; font-size: .75rem; color: var(--yl-grau); }

/* Foto: Firmenbus vor dem Betrieb, mit Handnotiz auf kariertem Zettel */
.yl-hero__bild { position: relative; margin: 0; }
.yl-hero__bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
/* feine Bauplan-Linie, leicht versetzt hinter dem Foto */
.yl-hero__bild::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	border: 1px solid var(--yl-navy);
	opacity: .18;
	z-index: -1;
}
.yl-hero__notiz {
	display: flex;
	align-items: center;
	gap: 6px;
	position: absolute;
	left: -40px;
	bottom: 48px;
	padding: 10px 18px 8px;
	font-size: 1.625rem;
	line-height: 1.1;
	color: var(--yl-navy);
	transform: rotate(-3deg);
	box-shadow: 0 6px 18px -6px rgba(29, 53, 87, .35);
}
/* Standort-Pin, freihand gezeichnet wie die Notiz: leicht schief, gleiche Tinte */
.yl-hero__pin { width: 1em; height: 1em; flex: none; margin-top: -.1em; rotate: -8deg; }

/* ---------------------------------------------------------
   Variante „zentriert“: Text mittig, links und rechts je ein schief hingelegter Foto-Abzug
   --------------------------------------------------------- */
.yl-hero--zentriert {
	padding-top: 24px;
	/* leichter Verlauf statt flachem Papier: helle Mitte hinter dem Text, kühles Aqua links, warmes Orange rechts.
	   Oben und unten läuft alles ins Papier aus, damit keine Kante zum Header oder zum nächsten Abschnitt entsteht. */
	background:
		radial-gradient(ellipse 34% 46% at 50% 48%, rgba(251, 248, 244, .95), rgba(251, 248, 244, 0) 100%),
		radial-gradient(ellipse 38% 55% at 6% 62%, rgba(168, 218, 220, .5), rgba(168, 218, 220, 0) 100%),
		radial-gradient(ellipse 34% 50% at 95% 58%, rgba(255, 113, 36, .16), rgba(255, 113, 36, 0) 100%),
		linear-gradient(to bottom, var(--yl-papier) 0%, #EEE6DA 55%, var(--yl-papier) 100%);
}
/* feines Bauplan-Raster wie im Footer, blendet zur Mitte und zu den Rändern hin aus */
.yl-hero--zentriert::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(29, 53, 87, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 53, 87, .06) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 72% 52% at 50% 50%, transparent 30%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 52% at 50% 50%, transparent 30%, #000 62%, transparent 100%);
	pointer-events: none;
}
.yl-hero--zentriert { isolation: isolate; }
.yl-hero--zentriert .yl-hero__raster { grid-template-columns: 1fr; gap: 48px; }
.yl-hero--zentriert .yl-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.yl-hero--zentriert .yl-siegel { width: 132px; margin-bottom: 16px; }
.yl-hero--zentriert h1 { max-width: 900px; font-size: clamp(1.625rem, 3.6vw, 3.25rem); }
.yl-hero--zentriert .yl-hero__lead { max-width: 600px; }
.yl-hero--zentriert .yl-hero__knoepfe { justify-content: center; }
.yl-hero--zentriert .yl-bewertung { text-align: left; margin-top: 32px; }

/* Teamfoto 16:9 als dritter Abzug unter der Wärmepumpe (bis zum echten Foto ein Platzhalter mit Bauplan-Raster) */
.yl-hero__team-platzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	aspect-ratio: 16 / 9;
	color: var(--yl-grau);
	background:
		linear-gradient(rgba(29, 53, 87, .07) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(29, 53, 87, .07) 1px, transparent 1px) 0 0 / 16px 16px,
		var(--yl-hell);
	outline: 1px dashed rgba(29, 53, 87, .3);
	outline-offset: -8px;
}
.yl-hero__team-platzhalter svg { width: 28px; height: 28px; opacity: .6; }
.yl-hero__team-titel { font: 400 .75rem/1 var(--yl-font-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--yl-navy); }
.yl-hero__team-info { font-size: .6875rem; }
.yl-hero__karte--team img { aspect-ratio: 16 / 9; }

/* Variante „großes Teamfoto“: 16:9 mittig unter dem Text, links nur die Wärmepumpe */
.yl-hero__team { position: relative; z-index: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 10px; background: #fff; box-shadow: 0 2px 4px rgba(29, 53, 87, .06), 0 24px 56px -24px rgba(29, 53, 87, .35); }
.yl-hero__team img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.yl-hero__team .yl-hero__team-platzhalter { gap: 8px; background-size: 24px 24px, 24px 24px, auto; outline-offset: -12px; }
.yl-hero__team .yl-hero__team-platzhalter svg { width: 40px; height: 40px; }
.yl-hero__team .yl-hero__team-titel { font-size: 1rem; }
.yl-hero__team .yl-hero__team-info { font-size: .8125rem; }
.yl-hero__team .yl-hero__karte-notiz { left: 48px; translate: none; rotate: -2deg; }
@media (min-width: 1200px) { .yl-hero--team-gross .yl-hero__karte--links { top: 120px; } }

/* Foto-Abzüge: weißer Rand wie ein Abzug, eckig, leichter Schatten; Handnotiz auf kariertem Zettel */
.yl-hero__karte { position: relative; margin: 0; padding: 10px; background: #fff; box-shadow: 0 2px 4px rgba(29, 53, 87, .06), 0 18px 40px -16px rgba(29, 53, 87, .35); }
.yl-hero__karte img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.yl-hero__karte-notiz {
	position: absolute;
	left: 50%;
	bottom: -20px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 6px;
	font-size: 1.375rem;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--yl-navy);
	translate: -50% 0;
	box-shadow: 0 6px 16px -6px rgba(29, 53, 87, .35);
}
.yl-hero__karte-notiz .yl-hero__pin { width: 1em; height: 1em; flex: none; rotate: -8deg; }
.yl-hero__karte--links .yl-hero__karte-notiz { rotate: 3deg; }
.yl-hero__karte--rechts .yl-hero__karte-notiz { rotate: -3deg; }

@media (min-width: 1200px) {
	.yl-hero--zentriert > .yl-wrap { position: relative; }
	.yl-hero__karte { position: absolute; width: clamp(200px, 19vw, 268px); }
	.yl-hero__karte--links { left: 24px; top: 40px; rotate: -5deg; }
	.yl-hero__karte--rechts { right: 24px; top: 300px; rotate: 4deg; }
	.yl-hero__karte--team { left: 32px; top: 450px; width: clamp(220px, 21vw, 320px); rotate: 3deg; }
}
@media (max-width: 1199px) {
	.yl-hero__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 560px; width: 100%; margin: 8px auto 0; }
	.yl-hero__karte--links { rotate: -3deg; }
	.yl-hero__karte--rechts { rotate: 3deg; translate: 0 24px; }
	.yl-hero__karte--team { grid-column: 1 / -1; grid-row: 2; width: 82%; margin: 24px auto 0; rotate: -1.5deg; }
	.yl-hero__karte { padding: 6px; }
	.yl-hero__karte-notiz { font-size: 1rem; padding: 5px 8px 3px; bottom: -16px; }
}
@media (max-width: 599px) {
	.yl-hero__karten { gap: 14px; }
	.yl-hero__karte-notiz { font-size: .9375rem; padding: 4px 7px 2px; }
}

/* ---------------------------------------------------------
   Variante „Vollbild“: Foto/Video über die ganze Breite, Text hell darauf.
   Der Abschnitt zieht sich unter die schwebende Header-Karte (negativer Abstand = Kopfhöhe).
   --------------------------------------------------------- */
.yl-hero--vollbild {
	--kopf: 112px;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(100svh, 860px);
	margin-top: calc(var(--kopf) * -1);
	padding: calc(var(--kopf) + 24px) 0 88px;
	color: #fff;
}
.yl-hero__medien { position: absolute; inset: 0; z-index: -1; background: var(--yl-navy); }
.yl-hero__medien :is(img, video) { width: 100%; height: 100%; object-fit: cover; object-position: var(--bild-pos, 50% 50%); }
/* Navy-Schleier: Mitte dunkler für die Lesbarkeit, Ränder lassen das Foto durch */
.yl-hero__medien::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 70% at 50% 50%, rgba(29, 53, 87, .82), rgba(29, 53, 87, .55) 70%, rgba(29, 53, 87, .45)),
		linear-gradient(to bottom, rgba(29, 53, 87, .35), transparent 30%);
}
.yl-hero--vollbild .yl-hero__raster { width: 100%; }
.yl-hero--vollbild .yl-hero__kicker { color: var(--yl-aqua); }
.yl-hero--vollbild h1 { color: #fff; }
.yl-hero--vollbild .yl-hero__lead { color: rgba(255, 255, 255, .85); }
.yl-hero--vollbild .yl-siegel { width: 124px; margin-bottom: 12px; }
.yl-hero--vollbild .yl-bewertung { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); }
/* Hintergrund-Video über dem Standbild; blendet ein, sobald es läuft */
.yl-hero__medien { overflow: hidden; }
.yl-hero__medien img, .yl-hero__video { position: absolute; inset: 0; }
.yl-hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.yl-hero__video.laeuft { opacity: 1; }


/* ---------------------------------------------------------
   Variante „Vollbild unten“: Überschrift unten links, Text + Buttons darunter,
   rechts unten die Google-Karte mit dem Siegel auf der oberen rechten Ecke
   --------------------------------------------------------- */
.yl-hero--unten { align-items: flex-end; min-height: min(100svh, 940px); padding-bottom: 72px; }
/* Schleier: unten links am dunkelsten, dort steht der Text */
.yl-hero--unten .yl-hero__medien::after {
	background:
		linear-gradient(to top, rgba(20, 37, 61, .92) 0%, rgba(20, 37, 61, .55) 45%, rgba(29, 53, 87, .25) 75%, rgba(29, 53, 87, .35) 100%),
		linear-gradient(to right, rgba(20, 37, 61, .55), transparent 60%);
}
.yl-hero--unten .yl-hero__raster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.yl-hero--unten h1 { font-size: clamp(1.75rem, 4.2vw, 4rem); line-height: 1.15; }
.yl-hero--unten .yl-hero__lead { max-width: 540px; }
.yl-hero__beweis { position: relative; justify-self: end; width: 100%; max-width: 400px; }
.yl-hero--unten .yl-bewertung { flex-direction: column; margin: 0; max-width: none; }
.yl-hero--unten .yl-bewertung__zitate { border-left: 0; border-top: 1px solid var(--yl-linie); min-height: 104px; }
/* Desktop (21.10., Wunsch Ilia): Überschrift + Text links an derselben Stelle, aber breiter nach rechts.
   Der Textblock läuft über beide Spalten; die Google-Karte sitzt unten rechts daneben (Text endet links von ihr). */
@media (min-width: 1024px) {
	.yl-hero--unten .yl-hero__raster { grid-template-columns: minmax(0, 1fr) 400px; }
	.yl-hero--unten .yl-hero__text { grid-column: 1 / -1; grid-row: 1; }
	.yl-hero--unten .yl-hero__beweis { grid-column: 2; grid-row: 1; align-self: end; z-index: 1; }
	.yl-hero--unten h1 { max-width: 1120px; }
	.yl-hero--unten .yl-hero__lead { max-width: 720px; }
}
.yl-siegel--ecke { position: absolute; top: -78px; right: clamp(-44px, calc((1360px - 100vw) / 2), -8px); z-index: 2; width: 136px; margin: 0; rotate: 8deg; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }

/* =========================================================
   HANDY / TABLET
   ========================================================= */
@media (max-width: 1023px) {
	.yl-hero { padding: 16px 0 56px; }
	.yl-hero__skizze { left: -210px; top: 0; width: 420px; opacity: .08; }
	.yl-hero__raster { grid-template-columns: 1fr; gap: 48px; }
	.yl-hero__bild { max-width: 520px; margin-right: 16px; }
	.yl-hero__notiz { left: auto; right: -12px; bottom: 24px; font-size: 1.5rem; }
	.yl-siegel--bild { width: 120px; top: -36px; right: -12px; }
}
@media (max-width: 1023px) {
	.yl-hero--vollbild { --kopf: 102px; min-height: 0; padding: calc(var(--kopf) + 32px) 0 104px; }
	.yl-hero--vollbild .yl-hero__notiz { left: auto; right: 16px; bottom: 28px; }
}
@media (max-width: 599px) {
	.yl-hero--zentriert .yl-hero__text { align-items: stretch; }
	.yl-hero--zentriert :is(h1, .yl-hero__lead, .yl-siegel) { align-self: center; }
	.yl-hero__kicker { margin-bottom: 14px; }
	.yl-hero__lead { margin-top: 16px; font-size: 1rem; }
	.yl-hero__knoepfe { flex-direction: column; gap: 12px; margin-top: 24px; }
	.yl-hero__knoepfe .yl-knopf { width: 100%; }
	.yl-bewertung { flex-direction: column; margin-top: 28px; }
	.yl-bewertung__zitate { border-left: 0; border-top: 1px solid var(--yl-linie); }
}

@media (prefers-reduced-motion: reduce) {
	.yl-bewertung__zitat { transition: none; }
}

/* Vollbild unten: Handy/Tablet (muss nach den Grundregeln stehen) */
@media (max-width: 1023px) {
	.yl-hero--unten { min-height: 0; padding-bottom: 56px; }
	.yl-hero--unten .yl-hero__raster { grid-template-columns: 1fr; gap: 88px; }
	.yl-hero__beweis { justify-self: start; max-width: 420px; margin-right: 24px; }
	.yl-siegel--ecke { width: 112px; top: -64px; right: -8px; }
}

/* Vollbild unten, kompakte Fassung (body.kompakt): schmalerer Rand, kleinerer Kopf, kleinere Überschrift, Google-Karte ohne Zitate */
.kompakt .yl-kopf { --zeile: 64px; padding: 16px 140px; height: calc(var(--zeile) + 2px + 32px); }
.kompakt .yl-kopf .karte { max-width: none; }
.kompakt .yl-kopf .zeile { padding: 0 20px; }
.kompakt .yl-kopf .logo .zeichen { width: 34px; height: 34px; }
.kompakt .yl-kopf .logo .wort { height: 11px; }
.kompakt .yl-kopf .nav a, .kompakt .yl-kopf .nav button { font-size: 14px; padding: 6px 10px; }
.kompakt .yl-hero--unten { --kopf: 98px; padding-bottom: 96px; }
.kompakt .yl-hero--unten > .yl-wrap { max-width: none; padding: 0 164px; }   /* bündig mit dem Logo in der Kopfkarte */
.kompakt .yl-hero--unten h1 { font-size: clamp(1.625rem, 3.3vw, 3.125rem); }
.kompakt .yl-hero--unten .yl-bewertung { flex-direction: row; }
.kompakt .yl-hero--unten .yl-bewertung__wert { padding-right: 72px; }   /* Platz für das Siegel auf der Ecke */
.kompakt .yl-hero__beweis { max-width: none; width: auto; }
.kompakt .yl-siegel--ecke { width: 112px; top: -64px; right: -20px; }
@media (max-width: 1439px) {
	.kompakt .yl-kopf { padding: 16px 80px; }
	.kompakt .yl-hero--unten > .yl-wrap { padding: 0 104px; }
}
@media (max-width: 1279px) {
	.kompakt .yl-kopf { padding: 16px 40px; }
	.kompakt .yl-hero--unten > .yl-wrap { padding: 0 64px; }
}
@media (max-width: 1023px) {
	.kompakt .yl-kopf { --zeile: 60px; padding: 16px 20px; height: calc(var(--zeile) + 2px + 32px); }
	.kompakt .yl-hero--unten > .yl-wrap { padding: 0 28px; }
	.kompakt .yl-siegel--ecke { width: 100px; top: -56px; right: -6px; }
	.kompakt .yl-hero--unten .yl-bewertung__wert { padding-right: 64px; }
}