/* Leistungs-Vorlage (Prototyp 23.10., Beispiel Wärmepumpe). Abschnitte der Startseite kommen aus abschnitte.css, hier nur das Neue. */
/* ---------- Kopf ---------- */
.yl-lkopf { padding: 40px 0 96px; }
.yl-lkopf__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
.yl-pfad ol { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 28px; padding: 0; list-style: none; font-size: .8125rem; color: var(--yl-grau); }
.yl-pfad li + li::before { content: "/"; margin: 0 10px; color: #B9B1A6; }
.yl-pfad a { color: var(--yl-grau); text-decoration: none; }
.yl-pfad a:hover { color: var(--yl-navy); text-decoration: underline; text-underline-offset: 3px; }
.yl-pfad [aria-current] { color: var(--yl-navy); font-weight: 600; }
.yl-lkopf h1 { margin: 0; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.12; }
.yl-lkopf h1 em { display: block; margin-top: 14px; font-size: .52em; line-height: 1.3; font-style: normal; color: var(--yl-orange); } /* Unterzeile kleiner, H1 bleibt kurz */
.yl-lkopf__lead { max-width: 540px; margin: 24px 0 0; font-size: 1.125rem; color: var(--yl-grau); }
.yl-lkopf__knoepfe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.yl-lkopf__punkte { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 36px 0 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 500; }
.yl-lkopf__punkte li { display: flex; align-items: center; gap: 10px; }
.yl-lkopf__punkte li::before { content: ""; width: 14px; height: 2px; flex: none; background: var(--yl-orange); }
.yl-lkopf__bild { position: relative; margin: 0; aspect-ratio: 4 / 3.4; background: #F06A22; }
.yl-lkopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.yl-lkopf__schild { position: absolute; left: 24px; top: 24px; padding: 3px 10px; background: var(--yl-navy); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yl-lkopf__zettel { position: absolute; left: -36px; bottom: -28px; padding: 10px 22px 12px; rotate: -3deg; box-shadow: 0 18px 34px -18px rgba(29, 53, 87, .45); }
.yl-lkopf__zettel::before { content: ""; position: absolute; left: 50%; top: -12px; width: 84px; height: 24px; translate: -50% 0; rotate: 4deg; background: rgba(168, 218, 220, .7); } /* Klebestreifen */
.yl-lkopf__zettel .yl-hand { font-size: 2.125rem; line-height: 1; color: var(--yl-blau); white-space: nowrap; }
/* ---------- Leistungsumfang ---------- */
.yl-umfang { background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-umfang__liste { counter-reset: u; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--yl-linie); border-left: 1px solid var(--yl-linie); }
.yl-umfang__liste li { counter-increment: u; position: relative; padding: 32px 32px 36px; border-right: 1px solid var(--yl-linie); border-bottom: 1px solid var(--yl-linie); background: var(--yl-karte); transition: background-color .2s; }
.yl-umfang__liste li:hover { background: #fff; }
.yl-umfang__liste li::before { content: counter(u, decimal-leading-zero); display: block; margin-bottom: 22px; font: 400 13px/1 var(--yl-font-kopf); letter-spacing: .1em; color: var(--yl-orange-dunkel); }
.yl-umfang h3 { margin: 0 0 10px; font-size: 1rem; line-height: 1.35; }
.yl-umfang p { margin: 0; color: var(--yl-grau); }
/* ---------- Eignung ---------- */
.yl-eignung__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.yl-eignung h2 { margin: 0 0 24px; font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.25; }
.yl-eignung__text p:not(.yl-kicker) { max-width: 560px; margin: 0 0 16px; font-size: 1.0625rem; color: var(--yl-grau); }
.yl-eignung__zettel { position: relative; padding: 36px 36px 28px; rotate: 1deg; box-shadow: 0 22px 40px -22px rgba(29, 53, 87, .35); }
.yl-eignung__zettel::before { content: ""; position: absolute; left: 50%; top: -14px; width: 110px; height: 28px; translate: -50% 0; rotate: -3deg; background: rgba(168, 218, 220, .7); }
.yl-eignung__titel { margin: 0 0 14px; font-size: 1.875rem; line-height: 1.1; color: var(--yl-blau); }
.yl-eignung__liste { margin: 0; padding: 0; list-style: none; }
.yl-eignung__liste li { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px dashed rgba(29, 53, 87, .25); }
.yl-eignung__liste li::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--yl-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13c2 1.5 3.5 3.5 5 6 3-6 6.5-10.5 11-14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13c2 1.5 3.5 3.5 5 6 3-6 6.5-10.5 11-14'/%3E%3C/svg%3E") center / contain no-repeat; } /* Häkchen wie von Hand */
.yl-eignung__liste .yl-hand { font-size: 1.625rem; line-height: 1.15; color: var(--yl-navy); }
.yl-eignung__fuss { margin: 18px 0 0; font-size: .875rem; color: var(--yl-grau); }
/* ---------- Weitere Leistungen ---------- */
.yl-weitere { background: var(--yl-karte); border-top: 1px solid var(--yl-linie); }
.yl-weitere__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3×2 (23.10.) */ gap: 16px; margin: 0; padding: 0; list-style: none; }
/* Karte: Bild oben, darunter Titel | Pfeil in einer Zeile, senkrecht mittig; Pfeil mit gleichem Randabstand wie der Titel. Hover ohne Rand/Schatten (Ilia 23.10.) */
.yl-weitere__karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: center; height: 100%; background: #fff; border: 1px solid var(--yl-linie); color: var(--yl-navy); text-decoration: none; }
.yl-weitere__karte:hover { color: var(--yl-navy); }
.yl-weitere__bild { grid-column: 1 / -1; align-self: stretch; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--yl-navy); }
.yl-weitere__bild img { width: 100%; height: 100%; object-fit: cover; }
.yl-weitere__titel { padding: 16px; font-weight: 600; font-size: .9375rem; line-height: 1.35; hyphens: auto; }
.yl-weitere__pfeil { display: grid; place-items: center; width: 40px; height: 40px; margin: 16px 16px 16px 0; background: var(--yl-orange); color: #fff; transition: background-color .2s, translate .3s cubic-bezier(.22, 1, .36, 1); }
.yl-weitere__karte:hover .yl-weitere__pfeil { background: var(--yl-orange-dunkel); translate: 5px 0; } /* Hover nur am Pfeil, wie Startseite (.yl-studio__knopf) */
.yl-weitere__pfeil svg { width: 18px; height: 18px; }
/* Kontakt direkt nach „Weitere“: gleiche Fläche, keine doppelte Linie */
.yl-weitere + .yl-kontakt { border-top: 0; padding-top: 24px; }
/* ---------- Tablet / Handy ---------- */
@media (max-width: 1199px) {
.yl-weitere__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
.yl-lkopf__raster, .yl-eignung__raster { grid-template-columns: 1fr; gap: 56px; }
.yl-lkopf__bild { max-width: 640px; }
.yl-lkopf__zettel { left: auto; right: 16px; }
.yl-umfang__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-eignung__zettel { max-width: 520px; }
}
@media (max-width: 599px) {
.yl-lkopf { padding: 24px 0 72px; }
.yl-lkopf__lead { font-size: 1rem; }
.yl-lkopf__knoepfe { flex-direction: column; }
.yl-lkopf__knoepfe .yl-knopf { width: 100%; }
.yl-lkopf__punkte { flex-direction: column; }
.yl-lkopf__zettel { right: 8px; bottom: -22px; padding: 8px 16px 10px; }
.yl-lkopf__zettel .yl-hand { font-size: 1.625rem; }
.yl-umfang__liste { grid-template-columns: 1fr; }
.yl-umfang__liste li { padding: 24px 22px 28px; }
.yl-eignung__zettel { padding: 30px 22px 22px; rotate: .5deg; }
.yl-eignung__liste .yl-hand { font-size: 1.375rem; }
.yl-weitere__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yl-weitere__titel { padding: 12px 8px 12px 12px; font-size: .8125rem; hyphens: manual; } .yl-weitere__pfeil { width: 32px; height: 32px; margin: 12px 12px 12px 0; } /* Trennung nur an im HTML */
}
/* ---------- Hero Wärmepumpe: Blick fährt beim Scrollen am Gerät nach oben (23.10., Idee Ilia) ----------
Foto 3:4 (Lale). --b = Fotobreite, Höhe = --b × 4/3. Bühne klebt (sticky), das Foto wandert von „unten sichtbar“ nach „oben sichtbar“.
Gerätekante oben bei 29,5 % der Fotohöhe, links 3,5 %, rechts 78,5 % → Titel sitzt genau darauf (Größen in % der Fotobreite = cqw). */
.yl-wphero { --b: max(100vw, 100svh); --h: calc(var(--b) * 4 / 3); --buehne: 100svh; --kopf: 98px;
--x: clamp(0px, calc(var(--b) / 2 - 50vw), calc(var(--b) * .09)); /* Foto nach rechts schieben, damit das Gerät (Mitte 41 %) mittig steht, ohne Rand zu zeigen */
position: relative; margin-top: calc(var(--kopf) * -1); height: var(--buehne); background: #C9CACA; }
.yl-wphero.faehrt { height: calc(var(--buehne) + (var(--h) - var(--buehne)) * 1.15); } /* Scrollweg = Fahrweg × 1,15 */
.yl-wphero__buehne { position: sticky; top: 0; height: var(--buehne); overflow: hidden; }
.yl-wphero__foto { position: absolute; left: calc(50% + var(--x)); top: 0; width: var(--b); height: var(--h); translate: -50% 0; container-type: inline-size; will-change: transform; }
.yl-wphero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Titel: unten bündig auf der Gerätekante, links bündig mit dem Gerät – aber nie außerhalb des Bildschirms */
.yl-wphero__titel { position: absolute; left: max(3.5%, calc(var(--b) / 2 - 50vw - var(--x) + 20px)); bottom: 70.5%; margin: 0; white-space: nowrap;
color: var(--yl-navy); font-size: min(6.75cqw, calc((100vw - 40px) / 11.4)); line-height: .98; letter-spacing: -.01em;
opacity: var(--titel, 1); translate: 0 calc((1 - var(--titel, 1)) * 24px); }
.yl-wphero__titel span { display: block; }
.yl-wphero__titel span + span { font-size: .5em; margin-top: .25em; color: var(--yl-orange-dunkel); }
.yl-wphero__hinweis { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; white-space: nowrap; background: rgba(29, 53, 87, .82); color: #fff; font: 400 10px/1 var(--yl-font-kopf); letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s; }
.yl-wphero__hinweis svg { width: 16px; height: 16px; animation: yl-hinweis 1.6s ease-in-out infinite; }
@keyframes yl-hinweis { 50% { translate: 0 4px; } }
.yl-wphero:not(.faehrt) .yl-wphero__hinweis, .yl-wphero.oben .yl-wphero__hinweis { opacity: 0; }
/* Einleitung unter dem Hero */
.yl-wpintro { position: relative; padding: 56px 0 88px; }
.yl-wpintro__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 72px; align-items: end; }
.yl-wpintro .yl-pfad ol { margin-bottom: 20px; }
.yl-wpintro__unter { margin: 0; font: 400 clamp(1.25rem, 2.4vw, 2rem)/1.2 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-orange); }
.yl-wpintro .yl-lkopf__lead { margin-top: 18px; }
.yl-wpintro__aktion .yl-lkopf__knoepfe { margin-top: 0; }
.yl-wpintro__aktion .yl-lkopf__punkte { margin-top: 28px; }
.yl-wpintro__zettel { position: absolute; right: 24px; top: -92px; margin: 0; padding: 10px 22px 12px; rotate: -3deg; box-shadow: 0 18px 34px -18px rgba(29, 53, 87, .45); }
.yl-wpintro__zettel::before { content: ""; position: absolute; left: 50%; top: -12px; width: 84px; height: 24px; translate: -50% 0; rotate: 4deg; background: rgba(168, 218, 220, .7); }
.yl-wpintro__zettel .yl-hand { font-size: 2.125rem; line-height: 1; color: var(--yl-blau); white-space: nowrap; }
@media (max-width: 1023px) { .yl-wpintro__raster { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
.yl-wphero { --b: max(100vw, 110svh); --kopf: 94px; } /* Handy: Foto höher als der Bildschirm, seitlich beschnitten */
.yl-wpintro { padding: 48px 0 72px; }
.yl-wpintro__zettel { right: 12px; top: -70px; padding: 8px 16px 10px; }
.yl-wpintro__zettel .yl-hand { font-size: 1.625rem; }
}
/* ---------- Video-Hero Wärmepumpe (23.10.): Scroll spult das Video, Bühne klebt ----------
Video 16:9, Endbild: Gerätekante bei --kante der Bildhöhe (gemessen), darüber Papierton. object-fit: cover →
Bildhöhe = max(Bühnenhöhe, Breite × 9/16), vertikal mittig; Titel sitzt unten bündig knapp über der Kante. */
.yl-wpvideo { --kopf: 98px; --kante: .41; --bildh: max(100svh, 56.25vw);
position: relative; margin-top: calc(var(--kopf) * -1); height: 100svh; background: #EFEAE0; }
.yl-wpvideo.faehrt { height: 320svh; } /* Scrollweg für die Fahrt */
.yl-wpvideo__buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.yl-wpvideo__standbild, .yl-wpvideo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yl-wpvideo__video { opacity: 0; transition: opacity .3s; }
.yl-wpvideo.bereit .yl-wpvideo__video { opacity: 1; }
.yl-wpvideo__titel { position: absolute; left: 0; right: 0; bottom: calc(50% + (.5 - var(--kante)) * var(--bildh) + 2.2vw); margin: 0; padding: 0 20px;
text-align: center; color: var(--yl-navy); font-size: clamp(2rem, 6.4vw, 7rem); line-height: .95; letter-spacing: -.01em;
opacity: var(--titel, 1); translate: 0 calc((1 - var(--titel, 1)) * 40px); }
.yl-wpvideo__titel span { display: block; }
.yl-wpvideo__titel span + span { margin-top: .3em; font-size: .36em; letter-spacing: .3em; color: var(--yl-orange-dunkel); }
.yl-wpvideo:not(.faehrt) .yl-wpvideo__hinweis, .yl-wpvideo.oben .yl-wpvideo__hinweis { opacity: 0; }
@media (max-width: 599px) {
.yl-wpvideo { --kopf: 94px; }
.yl-wpvideo.faehrt { height: 260svh; }
.yl-wpvideo__titel { font-size: 9.6vw; }
}
/* ---------- Hero Wärmepumpe „Licht“ (23.10.): Streiflicht wandert an der Gehäusekante ----------
Bild 1376×768, Kante hinten bei 37,4 % der Bildhöhe. Bild + SVG mit gleichem Ausschnitt (cover / slice). */
.yl-wplicht { --kopf: 98px; --kante: .374; --bildh: max(100svh, 55.8vw);
position: relative; overflow: hidden; margin-top: calc(var(--kopf) * -1); height: 100svh; min-height: 560px; background: #0E1A2C; }
.yl-wplicht__bild, .yl-wplicht__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yl-wplicht__video { opacity: 0; }
.yl-wplicht.mitvideo .yl-wplicht__video { opacity: 1; } /* Poster = dunkles Startbild, bis das Video läuft */
.yl-wplicht__titel { position: absolute; left: 0; right: 0; bottom: calc(50% + (.5 - var(--kante)) * var(--bildh) + 3.6vw); margin: 0; padding: 0 20px;
text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(14, 26, 44, .45); font-size: clamp(2rem, 6.6vw, 7rem); line-height: .95; letter-spacing: -.01em; animation: yl-titel-auf 1.4s 2.2s cubic-bezier(.22, 1, .36, 1) both; } /* kommt, wenn das Licht die Mitte erreicht hat */
.yl-wplicht__titel span { display: block; }
.yl-wplicht__titel span + span { margin-top: .32em; font-size: max(.3em, 12px); letter-spacing: .32em; color: #fff; } /* weiß: Orange ginge im Licht unter */
@keyframes yl-titel-auf { from { opacity: 0; translate: 0 28px; } }
@media (max-width: 599px) {
.yl-wplicht { --kopf: 94px; height: 86svh; --bildh: max(86svh, 55.8vw); } /* Kante tiefer, Titel frei unter dem Kopf */
.yl-wplicht__titel { font-size: calc((100vw - 40px) / 11.6); } /* „WÄRMEPUMPE“ passt genau in die Breite */
}
@media (prefers-reduced-motion: reduce) {
.yl-wplicht__titel { animation: none; }
}
/* ---------- Hero Wärmepumpe „breit“ (23.10., Idee Ilia): verlängertes Leistungsbild, Text links auf Orange ----------
Bild 2800×1200, Gerät ab x = 1820 (65 %). Desktop: Bild füllt den Hero, rechts verankert. Handy: Text auf Orange, Bild (4:3, rechts) darunter. */
.yl-wpbreit { --kopf: 98px; position: relative; overflow: hidden; margin-top: calc(var(--kopf) * -1); min-height: min(100svh, 900px);
display: flex; align-items: center; padding: calc(var(--kopf) + 48px) 0 96px; background: #F8782E; color: var(--yl-navy); } /* = Orange oben im Bild */
.yl-wpbreit__bild { position: absolute; right: 0; bottom: 0; width: auto; height: min(100%, 51.4vw); max-width: none;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%); mask-image: linear-gradient(to bottom, transparent, #000 9%); } /* Gerät beginnt bei ca. 58 % der Breite, unten angeschnitten; oberer Rand weich */
.yl-wpbreit__inhalt { position: relative; width: 100%; }
.yl-wpbreit__text { max-width: min(560px, 46vw); }
.yl-wpbreit .yl-pfad ol { margin-bottom: 48px; color: rgba(29, 53, 87, .7); }
.yl-wpbreit .yl-pfad a { color: rgba(29, 53, 87, .75); }
.yl-wpbreit .yl-pfad li + li::before { color: rgba(29, 53, 87, .45); }
.yl-wpbreit h1 { margin: 0; font-size: clamp(1.875rem, 4vw, 3.5rem); line-height: 1.08; color: var(--yl-navy); }
.yl-wpbreit h1 em { display: block; margin-top: 18px; font-size: .42em; line-height: 1.3; font-style: normal; color: #fff; }
.yl-wpbreit__lead { max-width: 500px; margin: 24px 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--yl-navy); }
.yl-wpbreit .yl-lkopf__knoepfe { margin-top: 36px; }
.yl-wpbreit__punkte { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 32px 0 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
.yl-wpbreit__punkte li { display: flex; align-items: center; gap: 10px; }
.yl-wpbreit__punkte li::before { content: ""; width: 14px; height: 2px; flex: none; background: #fff; }
.yl-wpbreit__zettel { position: absolute; z-index: 1; left: calc(58vw - 150px); bottom: 64px; margin: 0; padding: 10px 22px 12px; rotate: -3deg; box-shadow: 0 18px 34px -18px rgba(29, 53, 87, .5); }
.yl-wpbreit__zettel::before { content: ""; position: absolute; left: 50%; top: -12px; width: 84px; height: 24px; translate: -50% 0; rotate: 4deg; background: rgba(168, 218, 220, .7); }
.yl-wpbreit__zettel .yl-hand { font-size: 2.125rem; line-height: 1; color: var(--yl-blau); white-space: nowrap; }
.yl-wpbreit + .yl-umfang { border-top: 0; }
@media (max-width: 899px) {
.yl-wpbreit { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--kopf) + 24px) 0 0; }
.yl-wpbreit__text { max-width: none; }
.yl-wpbreit__bild { position: relative; order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: 40px; object-fit: cover; object-position: 100% 50%; }
.yl-wpbreit__zettel { left: 16px; bottom: 20px; }
}
@media (max-width: 599px) {
.yl-wpbreit { --kopf: 94px; }
.yl-wpbreit__lead { font-size: 1rem; }
.yl-wpbreit .yl-lkopf__knoepfe { flex-direction: column; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf { width: 100%; }
.yl-wpbreit__punkte { flex-direction: column; }
.yl-wpbreit__zettel { padding: 8px 16px 10px; }
.yl-wpbreit__zettel .yl-hand { font-size: 1.625rem; }
}
/* Social Proof im Hero (23.10.): Google-Karte (Stil aus startseite.css) + Siegel daneben, Handnotiz */
.yl-wpbreit__beweis { display: flex; align-items: center; gap: 20px; margin-top: 36px; }
.yl-wpbreit .yl-bewertung { margin: 0; box-shadow: 0 16px 36px -18px rgba(29, 53, 87, .45); }
.yl-wpbreit__siegel { flex: none; width: 104px; margin: 0; rotate: 8deg; filter: drop-shadow(0 8px 16px rgba(29, 53, 87, .3)); }
.yl-wpbreit__notiz { position: relative; margin: 18px 0 0 4px; font-size: 1.75rem; line-height: 1; color: #fff; rotate: -2deg; }
@media (max-width: 599px) {
.yl-wpbreit__beweis { gap: 12px; }
.yl-wpbreit .yl-bewertung__wert { padding: 12px 14px; gap: 10px; }
.yl-wpbreit__siegel { width: 84px; }
.yl-wpbreit__notiz { font-size: 1.5rem; }
}
/* ---------- Anfrage mehrstufig (23.10.): eine Frage pro Schritt, Kacheln, Fortschritt ---------- */
.yl-anfrage { display: block; position: relative; }
.yl-anfrage__kopf { display: none; }
.yl-anfrage.schritte .yl-anfrage__kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.yl-anfrage__zaehler { flex: none; font: 400 11px/1 var(--yl-font-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--yl-grau); }
.yl-anfrage__zaehler b { font-weight: 400; color: var(--yl-navy); }
.yl-anfrage__balken { flex: 1; height: 4px; background: var(--yl-hell); }
.yl-anfrage__balken span { display: block; width: var(--fortschritt, 0%); height: 100%; background: var(--yl-orange); transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.yl-schritt { margin: 0 0 40px; padding: 0; border: 0; min-width: 0; }
.yl-anfrage.schritte .yl-schritt { margin: 0; }
.yl-schritt[hidden] { display: none; }
.yl-schritt.rein { animation: yl-schritt-rein .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes yl-schritt-rein { from { opacity: 0; translate: 0 14px; } }
.yl-schritt__frage { padding: 0; margin: 0 0 8px; font: 400 clamp(1.125rem, 1.8vw, 1.5rem)/1.3 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); outline: none; }
.yl-schritt__hinweis { margin: 0 0 4px; font-size: .9375rem; color: var(--yl-grau); }
.yl-schritt .yl-feld { margin-top: 20px; max-width: 280px; }
.yl-schritt__ort { min-height: 1.5em; margin: 12px 0 0; font-size: .9375rem; font-weight: 500; color: var(--yl-navy); }
.yl-schritt__ort.drin::before { content: "✓ "; color: var(--yl-orange-dunkel); font-weight: 700; }
.yl-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.yl-kachel { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; background: var(--yl-karte); border: 1px solid var(--yl-linie); cursor: pointer; font-weight: 600; color: var(--yl-navy); transition: border-color .15s, background-color .15s; }
.yl-kachel:hover { border-color: var(--yl-navy); background: #fff; }
.yl-kachel input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--yl-navy); border-radius: 50%; background: #fff; transition: box-shadow .15s, background-color .15s; }
.yl-kachel input:checked { background: var(--yl-orange); border-color: var(--yl-orange); box-shadow: inset 0 0 0 4px #fff; }
.yl-kachel:has(input:checked) { border-color: var(--yl-navy); background: #fff; box-shadow: inset 0 0 0 1px var(--yl-navy); }
.yl-kachel:has(input:focus-visible) { outline: 2px solid var(--yl-blau); outline-offset: 2px; }
.yl-schritt__weiter, .yl-schritt__senden { margin-top: 28px; }
.yl-schritt__weiter[disabled] { opacity: .4; pointer-events: none; }
.yl-schritt__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 4px 0 20px; }
.yl-schritt__felder .yl-feld { max-width: none; margin-top: 16px; }
.yl-anfrage__zurueck { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 6px 0; border: 0; background: none; font: 500 .875rem/1 var(--yl-font-text); color: var(--yl-grau); cursor: pointer; }
.yl-anfrage__zurueck:hover { color: var(--yl-navy); }
.yl-anfrage__zurueck[hidden] { display: none; }
.yl-anfrage__zurueck svg { width: 16px; height: 16px; }
.yl-anfrage__fehler { margin: 12px 0 0; font-size: .875rem; font-weight: 500; color: #B3261E; }
.yl-anfrage__danke { outline: none; }
.yl-anfrage__danke-titel { margin: 0 0 8px; font: 400 1.5rem/1.3 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-anfrage__liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 20px 0; font-size: .9375rem; }
.yl-anfrage__liste dt { color: var(--yl-grau); }
.yl-anfrage__liste dd { margin: 0; font-weight: 600; color: var(--yl-navy); }
@media (max-width: 599px) {
.yl-kacheln { grid-template-columns: 1fr; gap: 10px; }
.yl-kachel { min-height: 56px; }
.yl-schritt__felder { grid-template-columns: 1fr; gap: 0; }
.yl-schritt__weiter, .yl-schritt__senden { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .yl-schritt.rein { animation: none; } .yl-anfrage__balken span { transition: none; } }
.yl-anfrage__kopf[hidden] { display: none !important; }
.yl-anfrage.schritte { min-height: 440px; } /* Kasten springt zwischen den Schritten weniger */
@media (max-width: 599px) { .yl-anfrage.schritte { min-height: 0; } }
/* Frage 1: Karte zum Antippen (Einsatzgebiet navy, angrenzende Orte hell, Auswahl orange) */
.yl-anfrage__karte { margin-top: 16px; }
.yl-anfrage .gebiet--wahl { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.gebiet--wahl path[data-ort] { cursor: pointer; stroke-linejoin: round; transition: fill .2s, fill-opacity .2s; outline: none; -webkit-tap-highlight-color: transparent; }
.gebiet--wahl .ort { fill: var(--yl-navy); fill-opacity: .85; stroke: #fff; stroke-width: .9; }
.gebiet--wahl .nachbar { fill: #E6DED3; stroke: #fff; stroke-width: .9; }
.gebiet--wahl .ort:hover { fill-opacity: 1; }
.gebiet--wahl .nachbar:hover { fill: #D3C8B9; }
.gebiet--wahl path.an { fill: var(--yl-orange); fill-opacity: 1; }
.gebiet--wahl text { font: 600 9px var(--yl-font-text); fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--yl-navy); stroke-width: 2px; stroke-linejoin: round; }
.gebiet--wahl text.klein { font-size: 7.5px; }
.gebiet--wahl .pin path { fill: var(--yl-orange); stroke: var(--yl-navy); stroke-width: .8; pointer-events: none; }
.gebiet--wahl .pin circle { fill: #fff; pointer-events: none; }
.yl-anfrage__legende { display: flex; justify-content: center; gap: 20px; margin: 10px 0 0; font-size: .8125rem; color: var(--yl-grau); }
.yl-anfrage__legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.yl-anfrage__legende .drin::before { background: var(--yl-navy); opacity: .85; }
.yl-anfrage__legende .nah::before { background: #E6DED3; }
.yl-anfrage [data-schritt="ort"] .yl-feld { max-width: none; }
.yl-anfrage__plz[hidden] { display: none; }
/* Ilia 23.10.: kein „Frage x von y“, Leiste mit Glanz alle 5 s */
.yl-anfrage__zaehler { display: none; }
.yl-anfrage__balken { position: relative; overflow: hidden; height: 6px; }
.yl-anfrage__balken > span { position: relative; overflow: hidden; } /* Glanz nur im orangen Teil (Ilia 23.10.) */
.yl-anfrage__balken > span::after { content: ""; position: absolute; inset: 0; width: 60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85) 50%, transparent); translate: -110% 0; animation: yl-glanz 5s 1s ease-in-out infinite; }
@keyframes yl-glanz { 0% { translate: -110% 0; } 24%, 100% { translate: 180% 0; } }
@media (prefers-reduced-motion: reduce) { .yl-anfrage__balken > span::after { animation: none; display: none; } }
/* Zurück links + Weiter rechts auf einer Ebene; Honeypot unsichtbar; ungültige Felder rot umrandet */
.yl-schritt__aktion { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.yl-schritt__aktion .yl-schritt__weiter, .yl-schritt__aktion .yl-schritt__senden { margin: 0 0 0 auto; }
.yl-schritt__aktion .yl-anfrage__zurueck { margin: 0; }
.yl-anfrage__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yl-anfrage [aria-invalid="true"] { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
@media (max-width: 599px) { .yl-schritt__aktion .yl-schritt__weiter, .yl-schritt__aktion .yl-schritt__senden { width: auto; flex: 1; } }
.yl-anfrage { min-width: 0; } /* Rasterspalte darf nicht mit dem Inhalt wachsen (Handy war 35 px zu breit) */
@media (max-width: 599px) {
.yl-schritt__aktion { gap: 10px; }
.yl-schritt__aktion .yl-knopf { min-width: 0; }
.yl-schritt__aktion .yl-knopf__text { padding: 0 14px; white-space: nowrap; }
.yl-schritt__aktion .yl-anfrage__zurueck { flex: none; }
}
/* Frage 1 ohne Liste/Legende (Ilia 23.10.): Karte = Auswahl, Warnung außerhalb, „Mein Ort ist nicht dabei“ */
.gebiet--wahl path[role="radio"]:focus-visible { stroke: var(--yl-blau); stroke-width: 2.4; }
.yl-anfrage .gebiet--wahl { max-width: 460px; }
.yl-schritt__ort.warnung { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #FFF4EC; border-left: 3px solid var(--yl-orange); font-weight: 500; }
.yl-schritt__ort.warnung::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yl-orange); color: #fff; font-weight: 700; font-size: .8125rem; line-height: 1; }
.yl-anfrage__anderer { display: inline-block; margin: 14px 0 0; padding: 4px 0; border: 0; background: none; font: 500 .9375rem/1.4 var(--yl-font-text); color: var(--yl-blau); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.yl-anfrage__anderer:hover { color: var(--yl-navy); }
.yl-anfrage__anderer[aria-expanded="true"] { display: none; }
/* Zurück + Weiter als reine Pfeil-Knöpfe, links nebeneinander (Ilia 23.10.) */
.yl-schritt__aktion { justify-content: flex-start; gap: 8px; }
.yl-schritt__aktion .yl-schritt__weiter, .yl-schritt__aktion .yl-schritt__senden { margin: 0; }
.yl-pfeilknopf { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--yl-navy); background: var(--yl-navy); color: #fff; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.yl-pfeilknopf svg { width: 22px; height: 22px; transition: translate .3s cubic-bezier(.22, 1, .36, 1); }
.yl-pfeilknopf:hover { background: var(--yl-blau); border-color: var(--yl-blau); }
.yl-schritt__weiter:hover svg { translate: 3px 0; }
.yl-pfeilknopf--zurueck { background: transparent; color: var(--yl-navy); }
.yl-pfeilknopf--zurueck:hover { background: var(--yl-navy); border-color: var(--yl-navy); color: #fff; }
.yl-pfeilknopf--zurueck:hover svg { translate: -3px 0; }
.yl-pfeilknopf:focus-visible { outline: 2px solid var(--yl-blau); outline-offset: 3px; }
.yl-pfeilknopf[hidden] { display: none; }
@media (max-width: 599px) { .yl-schritt__aktion .yl-schritt__weiter { width: 52px; flex: none; } .yl-schritt__aktion .yl-pfeilknopf--zurueck { width: 52px; } }
.gebiet--wahl path.an, .gebiet--wahl path.an:hover { fill: var(--yl-orange); fill-opacity: 1; }
/* Gleiche Höhe aller Schritte (JS misst den höchsten), Pfeile immer unten; kleinere Karte (Ilia 23.10.) */
.yl-anfrage.schritte { min-height: 0; }
.yl-anfrage.schritte .yl-schritt { display: flex; flex-direction: column; min-height: var(--schritt-hoehe, 0px); } /* Warnung „außerhalb“ kommt in Schritt 2–6 gleichmäßig obendrauf */
.yl-anfrage.schritte .yl-schritt[hidden] { display: none; }
.yl-anfrage.schritte .yl-schritt__aktion { margin-top: auto; padding-top: 24px; }
.yl-anfrage .gebiet--wahl { width: auto; max-width: 100%; height: 250px; margin: 0 auto; }
.yl-anfrage__karte { margin-top: 12px; }
.yl-anfrage [data-schritt="ort"] .yl-schritt__weiter { display: none; } /* Karte springt selbst weiter */
.yl-anfrage [data-schritt="ort"]:has(.yl-anfrage__plz:not([hidden])) .yl-schritt__weiter { display: grid; } /* nur bei „Mein Ort ist nicht dabei“ */
.yl-anfrage [data-schritt="ort"] .yl-schritt__ort.drin { display: none; }
.yl-anfrage__gebiet { display: none; margin: -12px 0 20px; padding: 8px 12px; background: #FFF4EC; border-left: 3px solid var(--yl-orange); font-size: .8125rem; font-weight: 500; color: var(--yl-navy); }
.yl-anfrage.ab2 .yl-anfrage__gebiet:not([hidden]) { display: block; }
@media (max-width: 599px) { .yl-anfrage .gebiet--wahl { height: 220px; } }
/* Karte näher am Einsatzgebiet (viewBox), volle Kastenbreite – seitlich Nachbarorte (Ilia 23.10.) */
.yl-anfrage .gebiet--wahl { width: 100%; height: 270px; overflow: hidden; }
@media (max-width: 599px) { .yl-anfrage .gebiet--wahl { height: 250px; } }
/* Letzter Schritt: „Anfrage senden“ volle Breite, Zurück darunter rechts */
.yl-anfrage [data-schritt="kontakt"] .yl-schritt__aktion { flex-wrap: wrap; gap: 12px; }
.yl-anfrage [data-schritt="kontakt"] .yl-schritt__senden { order: 1; flex: 1 1 100%; width: 100%; }
.yl-anfrage [data-schritt="kontakt"] .yl-anfrage__zurueck { order: 2; margin-left: auto; }
.yl-anfrage .gebiet--wahl { height: 320px; } /* größer – Kontakt-Schritt ist ohnehin der höchste */
@media (max-width: 599px) { .yl-anfrage .gebiet--wahl { height: 300px; } }
/* Karte füllt den freien Platz im 1. Schritt (Ilia 23.10.: unten zu viel Luft) – gemessen wird mit 300 px, danach wächst sie mit */
.yl-anfrage__karte { position: relative; height: calc(300px + var(--luft, 0px)); }
.yl-anfrage__karte .gebiet--wahl { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 599px) { .yl-anfrage__karte { height: calc(280px + var(--luft, 0px)); } }
.yl-anfrage.schritte .yl-schritt__aktion { margin-top: var(--luft, 0px); } /* Pfeile unten bündig */
.yl-anfrage.schritte [data-schritt="ort"] .yl-schritt__aktion { margin-top: 0; } /* hier wächst die Karte */
.yl-anfrage [data-schritt="ort"]:not(:has(.yl-anfrage__plz:not([hidden]))) .yl-schritt__aktion { padding-top: 0; } /* leere Zeile ohne Pfeil weg */
/* Warnung „außerhalb“ nur im letzten Schritt unter dem Datenschutz-Haken (Ilia 23.10.), nicht oben und nicht auf der Karte */
.yl-anfrage__gebiet, .yl-anfrage.ab2 .yl-anfrage__gebiet:not([hidden]) { display: none; }
.yl-anfrage [data-schritt="kontakt"] .yl-anfrage__gebiet:not([hidden]) { display: block; margin: 16px 0 0; }
.yl-anfrage [data-schritt="ort"] .yl-schritt__ort { display: none; }
/* Handy: Vorname + Nachname nebeneinander, damit der Kontakt-Schritt nicht höher wird */
@media (max-width: 599px) { .yl-schritt__felder { grid-template-columns: 1fr 1fr; gap: 0 12px; } .yl-schritt__felder .yl-feld:nth-child(n+3) { grid-column: 1 / -1; } }
/* Anfrage direkt nach dem Hero (Ilia 23.10.): links unter den Kontaktdaten Google-Bewertung + Siegel */
.yl-kontakt__beweis { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.yl-kontakt__beweis .yl-bewertung { margin: 0; box-shadow: 0 16px 36px -18px rgba(29, 53, 87, .35); }
.yl-kontakt__siegel { flex: none; width: 104px; margin: 0; rotate: 8deg; filter: drop-shadow(0 8px 16px rgba(29, 53, 87, .25)); }
@media (max-width: 599px) { .yl-kontakt__beweis { gap: 12px; } .yl-kontakt__beweis .yl-bewertung__wert { padding: 12px 14px; gap: 10px; } .yl-kontakt__siegel { width: 84px; } }
.yl-eignung__knoepfe { justify-content: flex-start; margin-top: 32px; }
/* ---------- So läuft's ab als Zeitleiste (23.10., Vorbild rexheprexhepi.com/collections) ---------- */
.yl-zeitleiste { padding-bottom: 0; overflow: clip; }
.yl-zeitleiste .yl-abschnitt__kopf { margin-bottom: 40px; }
.yl-zeitleiste__rahmen { position: relative; }
.yl-zeitleiste__spur { display: flex; gap: 6vw; margin: 0; padding: 0 var(--zl-rand, 24px) 40px; list-style: none;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yl-zeitleiste__spur::-webkit-scrollbar { display: none; }
.yl-zeitleiste__punkt { flex: none; display: flex; flex-direction: column; gap: 24px; width: 84vw; scroll-snap-align: start; }
.yl-zeitleiste__bild { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--yl-hell); }
.yl-zeitleiste__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yl-zeitleiste__nr { margin: 0 0 18px; font: 400 .8125rem/1 var(--yl-font-kopf); letter-spacing: .14em; color: var(--yl-orange-dunkel); }
.yl-zeitleiste__nr span { color: var(--yl-grau); }
.yl-zeitleiste__text h3 { margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2.5rem)/1.15 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-zeitleiste__unter { margin: 8px 0 0; font: 400 clamp(.875rem, 1.1vw, 1.0625rem)/1.4 var(--yl-font-kopf); text-transform: uppercase; letter-spacing: .04em; color: var(--yl-grau); }
.yl-zeitleiste__text > p:not([class]) { max-width: 34ch; margin: 24px 0 0; font-size: 1rem; line-height: 1.65; color: var(--yl-text, var(--yl-navy)); }
.yl-zeitleiste__knopf { margin-top: 32px; }
/* Lineal: Striche + Marke, die mit dem Fortschritt wandert (JS) */
.yl-zeitleiste__lineal { display: none; position: relative; height: 64px; margin: 0; }
.yl-zeitleiste.an .yl-zeitleiste__lineal { display: block; }
.yl-zeitleiste__striche { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; }
.yl-zeitleiste__striche i { position: absolute; bottom: 0; width: 1px; height: var(--h, 6px); background: var(--yl-navy); opacity: .45; transition: height .25s ease-out; }
.yl-zeitleiste__striche i.lang { opacity: .8; }
.yl-zeitleiste__marke { position: absolute; top: 0; left: 0; translate: var(--x, 0) 0; white-space: nowrap; font: 400 .9375rem/1 var(--yl-font-kopf); letter-spacing: .06em; text-transform: uppercase; color: var(--yl-navy); }
/* Desktop: Bühne steht, Spur fährt waagerecht (nur mit JS und ohne reduzierte Bewegung) */
@media (min-width: 900px) {
.yl-zeitleiste__punkt { flex-direction: row; align-items: center; gap: 7vw; width: auto; }
.yl-zeitleiste__punkt:nth-child(even) { flex-direction: row-reverse; }
.yl-zeitleiste__bild { width: min(44vw, calc(100vh - 300px), 640px); min-width: 320px; }
.yl-zeitleiste__text { width: min(30vw, 420px); }
.yl-zeitleiste.faehrt .yl-zeitleiste__rahmen { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; }
.yl-zeitleiste.faehrt .yl-zeitleiste__spur { overflow: visible; scroll-snap-type: none; padding-bottom: 32px; will-change: transform; translate: var(--spur-x, 0) 0; }
}
@media (max-width: 899px) { .yl-zeitleiste__lineal { margin: 0 var(--zl-rand, 24px); } .yl-zeitleiste__spur { padding-bottom: 24px; } }
.yl-zeitleiste__spur { scroll-padding-inline: var(--zl-rand, 24px); }
.yl-zeitleiste__spur::after { content: ""; flex: none; width: 1px; margin-left: calc(var(--zl-rand, 24px) - 6vw - 1px); } /* Rand auch am Ende */
.yl-zeitleiste__lineal { margin: 0 var(--zl-rand, 24px); }
@media (min-width: 900px) { .yl-zeitleiste__punkt:nth-child(even) { flex-direction: row; } } /* Bild immer links vom Text (Ilia 23.10.) */
/* Weniger Abstand Rand → Überschrift → Schritte (Ilia 23.10.): Überschrift sitzt in der Bühne, oben bündig statt mittig */
.yl-zeitleiste { padding-top: 48px; }
.yl-zeitleiste .yl-abschnitt__kopf { margin-bottom: 24px; }
.yl-zeitleiste__rahmen > .yl-wrap { width: 100%; }
@media (min-width: 900px) {
.yl-zeitleiste.faehrt { padding-top: 0; }
.yl-zeitleiste.faehrt .yl-zeitleiste__rahmen { justify-content: flex-start; padding-top: 48px; }
}
@media (max-width: 599px) { .yl-zeitleiste { padding-top: 32px; } .yl-zeitleiste .yl-abschnitt__kopf { margin-bottom: 20px; } }
/* Hero-Knöpfe wie Startseite Variante 1 (Ilia 23.10.): Termin-Knopf groß und allein, Telefon als ruhiger Textlink daneben.
Knopf bleibt Navy, weil Orange auf dem orangen Hero verschwinden würde. */
@media (min-width: 1024px) {
.yl-wpbreit .yl-lkopf__knoepfe { align-items: center; gap: 24px; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--sekundaer { --h: 68px; font-size: 1.125rem; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--sekundaer .yl-knopf__text { padding: 0 40px; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--sekundaer .yl-knopf__icon svg { width: 22px; height: 22px; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--kontur { --rahmen: transparent; --kreis: transparent; --t: var(--yl-navy); font-weight: 500; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--kontur .yl-knopf__text { padding: 0 8px 0 0; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--kontur .yl-knopf__icon { width: 32px; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--kontur:hover { --t: #fff; }
.yl-wpbreit .yl-lkopf__knoepfe .yl-knopf--kontur:hover .yl-knopf__icon { translate: none; }
}
/* Mehr Abstand Brotkrumen → H1 (Ilia 23.10.): Brotkrumen bleiben stehen, nur Überschrift & Rest rutschen nach unten
(Inhalt ist senkrecht mittig, +20 px Abstand würden ihn sonst 20 px nach oben schieben). */
@media (min-width: 900px) { .yl-wpbreit__inhalt { top: 20px; } }
/* Orts-Links: immer 2 nebeneinander, gleich breit (Ilia 23.10.); Handy: untereinander */
.yl-orte .yl-gebiet__orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-orte .yl-gebiet__orte a { width: 100%; height: 100%; }
@media (max-width: 599px) { .yl-orte .yl-gebiet__orte { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .yl-orte .yl-gebiet__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } } /* Textspalte breiter, damit 2 Links pro Zeile einzeilig bleiben */
.yl-orte .yl-gebiet__orte a { padding: 10px 14px; }
/* Handy: lange Wörter („Heizungsmodernisierung in …“) sprengten die Spalte (Überlauf 390 px, 29.10.) →
Spalte darf schrumpfen, Wörter trennen (Seite hat lang="de"), Notfalls umbrechen */
@media (max-width: 1023px) { .yl-orte .yl-gebiet__raster { grid-template-columns: minmax(0, 1fr); } }
.yl-orte .yl-gebiet__text h2, .yl-orte .yl-gebiet__orte a { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.yl-orte .yl-gebiet__orte a { min-width: 0; }
.yl-orte .yl-gebiet__orte a span { flex-shrink: 0; overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; }
/* Einbau: Zettel-Platzhalter für ein Monteur-Foto auf der Bildecke (Ilia 23.10.) – später echtes Foto statt Kamera-Rahmen */
.yl-zeitleiste__bild--zettel { position: relative; overflow: visible; }
.yl-zeitleiste__platzhalter { position: absolute; right: -6%; bottom: -5%; z-index: 1; width: 42%; aspect-ratio: 1; display: flex; flex-direction: column; gap: 10px;
padding: 12px 12px 14px; rotate: 4deg; box-shadow: 0 18px 34px -18px rgba(29, 53, 87, .55); }
.yl-zeitleiste__platzhalter::before { content: ""; position: absolute; left: 50%; top: -12px; width: 40%; height: 24px; translate: -50% 0; rotate: -5deg; background: rgba(168, 218, 220, .7); }
.yl-zeitleiste__rahmenfoto { flex: 1; display: grid; place-items: center; border: 1.5px dashed rgba(29, 53, 87, .35); color: rgba(29, 53, 87, .45); }
.yl-zeitleiste__rahmenfoto svg { width: 30%; height: auto; }
.yl-zeitleiste__platzhalter .yl-hand { font-size: clamp(1.125rem, 1.9vw, 1.75rem); line-height: 1.05; color: var(--yl-blau); text-align: center; }
.yl-zeitleiste__striche i.schritt { opacity: .9; } /* Lineal: Schritt-Anfänge */
/* ---------- Leistungsumfang: Frontansicht-Skizze hinter den Karten, Ventilator links; Überfahren = Nachzeichnen wie im Header (Ilia 23.10.) ---------- */
.yl-umfang__flaeche { position: relative; }
.yl-umfang__flaeche::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(29, 53, 87, .32); pointer-events: none; }
.yl-umfang__liste { position: relative; z-index: 1; border-color: transparent; }
.yl-umfang__liste li, .yl-umfang__liste li:hover { background: transparent; }
.yl-umfang__geraet { position: absolute; inset: 0; pointer-events: none; color: var(--yl-navy); opacity: .08; }
.yl-umfang__geraet svg { position: absolute; overflow: visible; }
.yl-umfang__geraet path { stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.yl-umfang__gehaeuse { inset: 0; width: 100%; height: 100%; } /* Gehäuse = genau so breit/hoch wie die Karten (gestreckt) */
.yl-umfang__luefter { left: var(--fx, 33.333%); top: var(--fy, 50%); width: var(--fd, 440px); height: var(--fd, 440px); translate: -50% -50%; } /* rund, auf der Kreuzung 1/2/4/5 */
@media (max-width: 599px) { .yl-umfang__geraet { overflow: clip; } }
.yl-umfang__geraet { clip-path: inset(-60px 0 -60px 0); } /* Boden nicht über die Kartenbreite hinaus */
@media (max-width: 599px) { .yl-umfang__gehaeuse { display: none; } } /* Handy: Karten untereinander → nur Ventilator, Gehäuse wäre zu verzerrt */
/* Leistungsumfang: Nummer + Titel als Schild im Knopf-Aufbau (Quadrat mit Zahl auf Kreis | Fuge | Rechteck mit Titel), Navy, nicht klickbar (Ilia 23.10.) */
.yl-umfang__liste li::before { content: none; }
.yl-umfang h3.yl-umfang__tag { display: inline-flex; align-items: stretch; gap: 4px; height: 44px; max-width: 100%; margin: 0 0 18px; font: 600 .9375rem/1 var(--yl-font-text); text-transform: none; letter-spacing: 0; color: #fff; }
.yl-umfang__tag > span { display: flex; align-items: center; background: var(--yl-navy); }
.yl-umfang__nr { position: relative; flex: none; justify-content: center; width: 44px; font: 400 .8125rem/1 var(--yl-font-kopf); letter-spacing: .04em; }
.yl-umfang__nr::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); } /* Kreis wie beim Knopf-Icon */
.yl-umfang__nr { isolation: isolate; } .yl-umfang__nr::before { z-index: -1; }
.yl-umfang__titel { padding: 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .yl-umfang__titel { white-space: normal; line-height: 1.2; } .yl-umfang h3.yl-umfang__tag { height: auto; min-height: 44px; } }
.yl-umfang__nr::before { content: none; } /* ohne Kreis (Ilia 23.10.) */
.yl-umfang__nr { color: var(--yl-orange); } /* Zahl orange */
/* Zeitleiste: Schrittnummer als Navy-Schild (wie „Förderung“), Zahl orange (Ilia 23.10.) */
.yl-zeitleiste__nr { display: inline-block; padding: 6px 10px; background: var(--yl-navy); color: var(--yl-orange); font-size: .8125rem; line-height: 1; letter-spacing: .1em; }
.yl-zeitleiste__nr span { color: #fff; }
/* ---------- Leistungsumfang als Bento-Raster (Ilia 23.10., Vorlage „Features 8“ in Yalili-Optik) ---------- */
/* Je Karte: Schild oben links, Text, Icon groß unten rechts als Hintergrund (unten deckend, nach oben ausgeblendet). */
.yl-umfang { background: var(--yl-papier); }
.yl-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yl-bento__karte { position: relative; overflow: hidden; isolation: isolate; grid-column: span 2; display: flex; flex-direction: column; min-height: 300px; padding: 32px 28px 30px; background: var(--yl-karte); border: 1px solid var(--yl-linie); }
.yl-bento__karte--breit { grid-column: span 3; min-height: 260px; }
.yl-bento__karte p { position: relative; max-width: 30ch; margin: 0; color: var(--yl-grau); }
.yl-bento .yl-umfang__tag { position: relative; align-self: flex-start; margin: 0 0 18px; }
.yl-bento .yl-umfang__titel { white-space: normal; line-height: 1.25; padding: 8px 18px; }
.yl-bento h3.yl-umfang__tag { height: auto; min-height: 44px; }
.yl-bento__icon { position: absolute; right: -14px; bottom: -14px; z-index: -1; width: 190px; height: 190px; color: var(--yl-navy); opacity: .25;
-webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); }
.yl-bento__karte--breit .yl-bento__icon { width: 210px; height: 210px; }
.yl-bento__icon path { stroke-width: 1px; vector-effect: non-scaling-stroke; } .yl-bento__icon path.k { stroke-width: 1.6px; }
@media (max-width: 1023px) { .yl-bento__karte, .yl-bento__karte--breit { grid-column: span 3; } .yl-bento__karte:first-child { grid-column: 1 / -1; } }
@media (max-width: 599px) { .yl-bento__karte, .yl-bento__karte--breit { grid-column: 1 / -1; min-height: 240px; padding: 26px 22px; } .yl-bento__icon, .yl-bento__karte--breit .yl-bento__icon { width: 150px; height: 150px; } }
/* H2 Leistungsumfang: „von der Beratung bis zur Wartung“ geschlossen in Zeile 2 (Ilia 23.10.) */
.yl-umfang .yl-abschnitt__kopf h2 { max-width: none; }
@media (min-width: 1024px) { .yl-umfang__zeile { white-space: nowrap; } }
@media (max-width: 1023px) { .yl-umfang .yl-abschnitt__kopf h2 br { display: none; } } /* Handy/Tablet: normaler Umbruch */
/* Hero „breit“ auf Navy (23.10., alle Leistungen außer Wärmepumpe/Notdienst): Grundfarbe kommt per style aus inhalte.py (= Farbe oben links im Bild) */
.yl-wpbreit--navy { color: #fff; }
.yl-wpbreit--navy h1 { color: #fff; }
.yl-wpbreit--navy h1 em { color: var(--yl-orange); }
.yl-wpbreit--navy .yl-wpbreit__lead { color: rgba(255, 255, 255, .85); }
.yl-wpbreit--navy .yl-pfad ol, .yl-wpbreit--navy .yl-pfad a { color: rgba(255, 255, 255, .7); }
.yl-wpbreit--navy .yl-pfad li + li::before { color: rgba(255, 255, 255, .4); }
@media (min-width: 1024px) {
.yl-wpbreit--navy .yl-lkopf__knoepfe .yl-knopf--primaer { --h: 68px; font-size: 1.125rem; }
.yl-wpbreit--navy .yl-lkopf__knoepfe .yl-knopf--primaer .yl-knopf__text { padding: 0 40px; }
.yl-wpbreit--navy .yl-lkopf__knoepfe .yl-knopf--primaer .yl-knopf__icon svg { width: 22px; height: 22px; }
.yl-wpbreit--navy .yl-lkopf__knoepfe .yl-knopf--kontur { --t: #fff; }
.yl-wpbreit--navy .yl-lkopf__knoepfe .yl-knopf--kontur:hover { --t: var(--yl-orange); }
}
.yl-wpbreit h1 { hyphens: manual; } /* lange Titel nur an trennen */
.yl-wpbreit--navy .yl-pfad [aria-current] { color: #fff; }
.yl-wpbreit--navy .yl-knopf--kontur { --t: #fff; --rahmen: rgba(255, 255, 255, .45); --kreis: rgba(255, 255, 255, .12); } /* Handy: Telefon-Knopf auf Navy */
.yl-wpbreit--navy .yl-knopf--kontur:hover { --f: transparent; --f-hover: rgba(255, 255, 255, .08); }
/* Hero „voll“ (Ilia 23.10., Heizung + Gas/Öl): Bild ohne Verlauf oben, läuft über die volle Höhe durch; Titel fest zweizeilig (
), etwas kleiner */
.yl-wpbreit--voll .yl-wpbreit__bild { -webkit-mask-image: none; mask-image: none; }
.yl-wpbreit--voll h1 { white-space: nowrap; font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
@media (min-width: 900px) { .yl-wpbreit--voll .yl-wpbreit__bild { top: 0; height: 100%; } }
@media (max-width: 599px) { .yl-wpbreit--voll h1 { font-size: min(1.875rem, 6vw); } }
/* Weitere Leistungen: Sanitär-Bild etwas nach links (Becken ragt sonst rechts heraus), Ilia 28.10. */
.yl-weitere__bild img[src*="wp-studio-sanitaer"] { object-position: 100% 50%; }
/* FAQ-Überschrift: lange Wörter nur an trennen, nie über die Fragen laufen (28.10.) */
.yl-faq__seite h2 { hyphens: manual; overflow-wrap: break-word; }
/* Sanitär-Hero (Ilia 28.10.): Becken etwas nach links und unten – Bild größer, oben rechts verankert (so wandert der Inhalt nach links unten, ohne Lücke) */
@media (min-width: 900px) { .yl-wpbreit--sanitaer .yl-wpbreit__bild { height: 108%; } } /* 28.10.: etwas herausgezoomt (vorher 118 %) */
/* Titel fest zweizeilig ohne Trennung (Notdienst 28.10.): Handy etwas kleiner, damit „Störungsdienst“ passt */
.yl-wpbreit--zweizeilig h1 { white-space: nowrap; }
@media (max-width: 599px) { .yl-wpbreit--zweizeilig h1 { font-size: min(1.875rem, 6.2vw); } }
/* Notdienst-Hero (Ilia 28.10.): Bild nach rechts, damit „Störungsdienst“ nicht über die Rundumleuchte läuft */
@media (min-width: 900px) { .yl-wpbreit--notdienst .yl-wpbreit__bild { right: -7vw; } }
/* ===== Übersicht /leistungen/ (28.10.): Hero = Startseiten-Hero + Brotkrumen, Wegweiser-Chips, Bereiche, Notdienst-Band ===== */
.yl-hero--vollbild .yl-pfad ol { margin-bottom: 20px; color: rgba(255, 255, 255, .7); }
.yl-hero--vollbild .yl-pfad a { color: rgba(255, 255, 255, .75); }
.yl-hero--vollbild .yl-pfad a:hover { color: #fff; }
.yl-hero--vollbild .yl-pfad [aria-current] { color: #fff; }
.yl-hero--vollbild .yl-pfad li + li::before { color: rgba(255, 255, 255, .4); }
.yl-wegweiser { padding: 56px 0; border-bottom: 1px solid var(--yl-linie); }
.yl-wegweiser__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
.yl-wegweiser h2 { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; }
.yl-wegweiser__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yl-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 18px; border: 1px solid rgba(29, 53, 87, .22); background: #fff; color: var(--yl-navy); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.yl-chip svg { width: 16px; height: 16px; flex: none; color: var(--yl-orange); transition: translate .3s cubic-bezier(.22, 1, .36, 1), color .2s; }
.yl-chip:hover { background: var(--yl-navy); border-color: var(--yl-navy); color: #fff; }
.yl-chip:hover svg { translate: 0 3px; }
.yl-chip:focus-visible { outline: 2px solid var(--yl-orange); outline-offset: 2px; }
.yl-bereich + .yl-bereich { padding-top: 0; }
.yl-bereich__kopf { margin-bottom: 40px; }
.yl-bereich__kopf h2 { margin: 0; }
.yl-bereich__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.yl-ueb-karte { display: flex; flex-direction: column; scroll-margin-top: 130px; background: #fff; border: 1px solid var(--yl-linie); }
.yl-ueb-karte .yl-studio { aspect-ratio: 16 / 9; }
/* Titel unten links, senkrecht mittig zum Knopf (wie Startseite V2); kleiner als dort, weil 3 Karten nebeneinander */
.yl-ueb-karte .yl-studio--seite .yl-studio__wort { top: auto; bottom: calc(5cqw + 26px - 2.42cqw); font-size: 4.6cqw; }
.yl-ueb-karte .yl-studio__fuss { justify-content: flex-end; }
.yl-ueb-karte .yl-studio__fuss { justify-content: flex-end; }
.yl-ueb-karte__text { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 26px; }
.yl-ueb-karte__text p { margin: 0 0 14px; color: var(--yl-grau); }
.yl-ueb-karte__text ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; font-weight: 500; color: var(--yl-navy); }
.yl-ueb-karte__text li { display: flex; align-items: center; gap: 10px; }
.yl-ueb-karte__text li::before { content: ""; width: 14px; height: 2px; flex: none; background: var(--yl-orange); }
.yl-ueb-karte__text .yl-textlink { margin-top: auto; align-self: flex-start; }
/* Sprung per Chip: Karte kurz hervorheben */
.yl-ueb-karte.markiert, .yl-notband__text.markiert { animation: yl-markiert 1.6s ease-out; }
@keyframes yl-markiert { 0%, 30% { box-shadow: 0 0 0 4px var(--yl-orange); } 100% { box-shadow: 0 0 0 4px rgba(255, 113, 36, 0); } }
.yl-notband { position: relative; overflow: hidden; background: var(--yl-navy); color: #fff; }
.yl-notband > .yl-wrap { position: relative; }
/* Notdienst-Skizze aus dem Mega-Menü als Hintergrund (wie 02-notdienst auf der Startseite) */
.yl-notband > .skizze { position: absolute; left: -60px; bottom: -150px; width: 820px; height: auto; color: #fff; opacity: .13; pointer-events: none; rotate: -6deg; }
.yl-notband__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.yl-notband__text { scroll-margin-top: 130px; }
.yl-abschnitt.yl-notband p.yl-marke { background: var(--yl-orange); color: var(--yl-navy); }
.yl-notband h2 { margin: 0 0 32px; color: #fff; }
.yl-notband .yl-studio { aspect-ratio: 16 / 9; }
@media (max-width: 1023px) {
.yl-wegweiser__raster, .yl-bereich__kopf, .yl-notband__raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.yl-notband > .skizze { left: auto; right: -120px; bottom: auto; top: 20px; width: 460px; }
.yl-bereich__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
.yl-notband__raster { gap: 36px; }
}
@media (max-width: 599px) {
.yl-wegweiser { padding: 40px 0; }
.yl-wegweiser h2 br { display: none; }
.yl-wegweiser__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.yl-chip { width: 100%; height: 100%; min-height: 56px; justify-content: space-between; padding: 8px 12px 8px 14px; font-size: .875rem; line-height: 1.3; }
.yl-notband .yl-studio__punkte { display: none; } .yl-notband .yl-studio__fuss { justify-content: flex-end; } /* steht schon im Text daneben; auf 16:9 zu eng */
.yl-bereich__karten { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
}
/* ===== Einsatzgebiete /einsatzgebiete// (28.10., Layout an Fürth) ===== */
/* Platzhalter, bis Lale bestätigt (nur Entwurf, im Theme weg) */
mark.yl-offen { background: rgba(255, 113, 36, .16); color: inherit; padding: 0 .15em; box-shadow: inset 0 -2px 0 var(--yl-orange); cursor: help; }
.yl-dunkel mark.yl-offen { background: rgba(255, 113, 36, .28); }
.yl-orthero { --kopf: 98px; position: relative; isolation: isolate; overflow: hidden; margin-top: calc(var(--kopf) * -1); padding: calc(var(--kopf) + 64px) 0 88px; background: #111; color: #fff; }
/* Stadtfoto + schwarzes Overlay (links dichter, damit der Text gut lesbar ist) */
.yl-orthero__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.yl-orthero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .45) 100%); }
.yl-orthero h1 { color: #fff; }
.yl-orthero .yl-pfad ol, .yl-orthero .yl-pfad a { color: rgba(255, 255, 255, .75); }
.yl-orthero .yl-pfad a:hover, .yl-orthero .yl-pfad [aria-current] { color: #fff; }
.yl-orthero .yl-pfad li + li::before { color: rgba(255, 255, 255, .4); }
.yl-orthero__quelle { position: absolute; right: 16px; bottom: 50px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .6); }
.yl-orthero__quelle a { color: inherit; }
.yl-orthero__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.yl-orthero .yl-pfad ol { margin-bottom: 28px; }
.yl-orthero h1 { margin: 0; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.12; }
.yl-orthero h1 em { font-style: normal; color: var(--yl-orange); }
.yl-orthero__lead { max-width: 540px; margin: 24px 0 0; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.yl-orthero__beweis { display: flex; align-items: center; gap: 20px; margin-top: 36px; }
.yl-orthero__siegel { flex: none; width: 104px; margin: 0; rotate: 8deg; filter: drop-shadow(0 8px 16px rgba(29, 53, 87, .25)); }
.yl-fakten { position: relative; margin-top: -40px; padding: 0 0 8px; } /* Fakten-Leiste ragt in den Hero */
.yl-fakten__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: #fff; border: 1px solid var(--yl-linie); }
.yl-fakten__liste > div { padding: 24px 28px; }
.yl-fakten__liste > div + div { border-left: 1px solid var(--yl-linie); }
.yl-fakten dt { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--yl-grau); }
.yl-fakten dd { margin: 0; display: grid; gap: 4px; }
.yl-fakten dd b { font: 400 clamp(1.125rem, 1.7vw, 1.5rem)/1.2 var(--yl-font-kopf); color: var(--yl-navy); }
.yl-fakten dd span { font-size: .875rem; color: var(--yl-grau); }
.yl-orthero h1 { font-size: clamp(1.625rem, 3.6vw, 3.25rem); }
.yl-orthero__zeile { display: block; white-space: nowrap; } /* Zeile 1 „Heizung, Bad &“, Zeile 2 „Sanitär in “ (Ilia 28.10.) */
/* Stadtteil-Karte im Hero: Flächen hell und durchscheinend, Überfahren/Gewählt in Orange */
.yl-orthero__karte .gebiet { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.gebiet--stadtteile .st { fill: #fff; fill-opacity: .16; stroke: rgba(255, 255, 255, .8); stroke-width: .7; stroke-linejoin: round; cursor: pointer; transition: fill .2s, fill-opacity .2s; outline: none; }
.gebiet--stadtteile .st:hover, .gebiet--stadtteile .st.an { fill: var(--yl-orange); fill-opacity: .95; }
.gebiet--stadtteile text { font: 600 7px var(--yl-font-text); fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6px; stroke-linejoin: round; }
.gebiet--stadtteile .quelle { font-size: 5px; font-weight: 400; text-anchor: end; stroke: none; fill: rgba(255, 255, 255, .55); }
.gebiet--stadtteile .pin path { fill: var(--yl-orange); stroke: #fff; stroke-width: .8; pointer-events: none; }
.gebiet--stadtteile .pin circle { fill: #fff; pointer-events: none; }
.gebiet--stadtteile .st:focus-visible { stroke: var(--yl-orange); stroke-width: 2; }
.yl-stadtteile { position: relative; overflow: hidden; }
.yl-stadtteile > .skizze { position: absolute; right: -60px; top: 20px; width: 560px; height: auto; color: var(--yl-navy); opacity: .07; pointer-events: none; }
.yl-stadtteile__kopf { position: relative; max-width: 720px; margin-bottom: 40px; }
.yl-stadtteile__kopf h2 { margin: 0 0 16px; }
.yl-stadtteile__kopf p:last-child { margin: 0; color: var(--yl-grau); }
.yl-stadtteile__liste { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.yl-stadtteil { display: flex; flex-direction: column; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--yl-linie); scroll-margin-top: 130px; transition: border-color .2s, box-shadow .2s; }
.yl-stadtteil.an { border-color: var(--yl-orange); box-shadow: 0 0 0 1px var(--yl-orange); }
.yl-stadtteil.markiert { animation: yl-markiert 1.6s ease-out; }
.yl-stadtteil h3 { margin: 0 0 8px; font-size: .9375rem; line-height: 1.3; }
.yl-stadtteil p { margin: 0 0 12px; font-size: .875rem; line-height: 1.55; color: var(--yl-grau); }
.yl-stadtteil__weg { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--yl-navy) !important; }
.yl-stadtteil__weg svg { width: 15px; height: 15px; flex: none; color: var(--yl-orange); }
.yl-stadtteil__suche { margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid var(--yl-linie); display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .75rem !important; }
.yl-stadtteil__suche span:first-child { width: 100%; font-weight: 600; color: var(--yl-navy); }
.yl-stadtteil__suche { display: block !important; line-height: 1.6 !important; }
.yl-stadtteil__suche span:first-child { display: block; }
.yl-stadtteil__suche span + span + span::before { content: " · "; color: var(--yl-orange); }
.yl-betrieb__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.yl-betrieb__bild { margin: 0; }
.yl-betrieb__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.yl-betrieb h2 { margin: 0 0 16px; }
.yl-betrieb__text > p:not(.yl-marke) { margin: 0 0 28px; max-width: 460px; color: var(--yl-grau); }
.yl-betrieb .yl-kontakt__daten { margin: 0 0 28px; }
.yl-ortweitere { background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-ortweitere__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.yl-ortweitere__liste > li { min-width: 0; }
.yl-ortweitere__karte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: end; height: 100%; padding: 20px; background: #fff; border: 1px solid var(--yl-linie); color: var(--yl-navy); text-decoration: none; }
.yl-ortweitere__bild { grid-column: 1 / -1; display: block; margin: -20px -20px 16px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yl-navy); }
.yl-ortweitere__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.yl-ortweitere__karte:hover .yl-ortweitere__bild img { scale: 1.04; }
.yl-ortweitere__nachweis { margin: 20px 0 0; font-size: 11px; line-height: 1.6; color: var(--yl-grau); }
.yl-ortweitere__nachweis a { color: inherit; }
.yl-ortweitere__name { grid-column: 1 / -1; font: 400 .9375rem/1.2 var(--yl-font-kopf); text-transform: uppercase; }
.yl-ortweitere__weg { grid-column: 1; grid-row: 3; align-self: center; font-size: .8125rem; color: var(--yl-grau); }
.yl-ortweitere__name { margin-bottom: 10px; }
.yl-ortweitere__pfeil { grid-column: 2; grid-row: 3; display: grid; place-items: center; width: 40px; height: 40px; background: var(--yl-orange); color: #fff; transition: translate .3s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.yl-ortweitere__pfeil svg { width: 18px; height: 18px; }
.yl-ortweitere__karte:hover .yl-ortweitere__pfeil { translate: 5px 0; background: var(--yl-orange-dunkel); }
@media (max-width: 1023px) {
.yl-orthero__raster, .yl-betrieb__raster { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.yl-stadtteile__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-orthero__karte .gebiet { max-width: 380px; }
.yl-fakten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-fakten__liste > div:nth-child(3) { border-left: 0; }
.yl-fakten__liste > div:nth-child(n+3) { border-top: 1px solid var(--yl-linie); }
.yl-ortweitere__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.yl-orthero { --kopf: 94px; padding: calc(var(--kopf) + 28px) 0 92px; }
.yl-orthero__karte .gebiet { max-width: 320px; }
.yl-fakten__liste > div { padding: 18px 16px; }
.yl-stadtteile > .skizze { width: 340px; right: -100px; top: 0; }
.yl-stadtteile__liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.yl-ortweitere__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yl-ortweitere__karte { padding: 14px; }
.yl-ortweitere__bild { margin: -14px -14px 12px; }
.yl-ortweitere__name { font-size: .8125rem; }
.yl-fakten dd b { font-size: 1rem; white-space: nowrap; }
.yl-fakten dd span { font-size: .8125rem; }
}
.yl-orthero .yl-bewertung { margin: 0; box-shadow: 0 16px 36px -18px rgba(29, 53, 87, .45); }
.yl-anfrage[data-ort] [data-schritt="ort"] .yl-schritt__weiter { display: grid; } /* Ortsseiten: Ort schon gewählt → einfach weiter (28.10.) */
/* Weitere Leistungen (Ilia 28.10.): steht die letzte Karte (Notdienst) allein in der Reihe, läuft sie über die volle Breite */
@media (min-width: 600px) {
.yl-weitere__liste > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.yl-weitere__liste > li:last-child:nth-child(3n+1) .yl-weitere__bild { aspect-ratio: 4 / 1; }
}
@media (max-width: 599px) {
.yl-weitere__liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.yl-weitere__liste > li:last-child:nth-child(odd) .yl-weitere__bild { aspect-ratio: 2 / 1; }
}
/* Notdienst-Karte (Ilia 28.10. „rauszoomen“): Bild = links nahtlos verlängertes Studiofoto (notdienst-breit, wie Hero) → ganzer Koffer sichtbar, Motiv rechts */
.yl-weitere__img--breit { object-position: 100% 50%; }
.yl-weitere__liste > li:last-child:nth-child(3n+1) .yl-weitere__bild { aspect-ratio: 3.1 / 1; }
/* Ortsseiten-H1 am Handy: beide Zeilen ohne Umbruch, „in Fürth“ bleibt zusammen */
@media (max-width: 599px) { .yl-orthero h1 { font-size: 6.2vw; } }
/* Ortsseiten-Hero: Knöpfe wie Wärmepumpe/Startseite Variante 1 (Ilia 28.10.): Termin-Knopf groß, Telefon als ruhiger Textlink daneben */
@media (min-width: 1024px) {
.yl-orthero .yl-lkopf__knoepfe { align-items: center; gap: 24px; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--primaer { --h: 68px; font-size: 1.125rem; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--primaer .yl-knopf__text { padding: 0 40px; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--primaer .yl-knopf__icon svg { width: 22px; height: 22px; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--kontur { --rahmen: transparent; --kreis: transparent; --t: #fff; font-weight: 500; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--kontur .yl-knopf__text { padding: 0 8px 0 0; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--kontur .yl-knopf__icon { width: 32px; }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--kontur:hover { --t: var(--yl-orange); }
.yl-orthero .yl-lkopf__knoepfe .yl-knopf--kontur:hover .yl-knopf__icon { translate: none; }
}
@media (max-width: 599px) {
.yl-ortweitere__liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.yl-ortweitere__liste > li:last-child:nth-child(odd) .yl-ortweitere__bild { aspect-ratio: 2 / 1; }
}
/* Ortsseiten (Ilia 28.10.): Fakten-Leiste ohne eigenen Farbstreifen, gleiche Fläche wie die Leistungen darunter, weniger Abstand */
.yl-fakten { background: linear-gradient(transparent 40px, var(--yl-karte) 40px); padding-bottom: 0; } /* obere 40 px durchsichtig: Leiste ragt in den Hero */
.yl-fakten + .yl-weitere { border-top: 0; padding-top: 56px; }
@media (max-width: 599px) { .yl-fakten + .yl-weitere { padding-top: 40px; } }
/* Ortsseiten: Stadtskizze rechts oben auch in den Leistungen (wie Stadtteile) */
.yl-weitere:has(> .skizze) { position: relative; overflow: hidden; }
.yl-weitere > .skizze { position: absolute; right: -60px; top: 20px; width: 560px; height: auto; color: var(--yl-navy); opacity: .07; pointer-events: none; }
.yl-weitere:has(> .skizze) > .yl-wrap { position: relative; }
@media (max-width: 599px) { .yl-weitere > .skizze { width: 340px; right: -100px; top: 0; } }
/* Ortsseiten-H1 (28.10.): Schrift nach der längsten Zeile („Sanitär in Oberasbach“), damit sie nie in die Karte läuft. Michroma ≈ 0,84 em je Zeichen */
.yl-orthero__text { container-type: inline-size; }
.yl-orthero h1 { font-size: min(3.25rem, calc(100cqi / var(--zeichen, 16) / .86)); }
@media (max-width: 599px) { .yl-orthero h1 { font-size: min(7vw, calc(100cqi / var(--zeichen, 16) / .86)); } }
/* Ortsseiten (Ilia 28.10.): mehr Luft zwischen H1 und Knöpfen (Einleitung steht nicht mehr im Hero) */
.yl-orthero .yl-lkopf__knoepfe { margin-top: 88px; }
@media (max-width: 599px) { .yl-orthero .yl-lkopf__knoepfe { margin-top: 48px; } }
/* Stadtteile: CTA-Karte am Ende (Ilia 28.10.), füllt die letzte Reihe */
.yl-stadtteil--cta { grid-column: span var(--rest4); justify-content: space-between; gap: 20px; background: var(--yl-navy); border-color: var(--yl-navy); color: #fff; }
.yl-stadtteil--cta h3 { margin: 0 0 8px; font-size: 1.0625rem; color: #fff; }
.yl-stadtteil--cta p { margin: 0; color: rgba(255, 255, 255, .8); }
.yl-stadtteil__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.yl-stadtteil--cta[style*="--rest4: 4"], .yl-stadtteil--cta[style*="--rest4: 3"] { flex-direction: row; align-items: center; padding: 28px 32px; }
.yl-stadtteil--cta[style*="--rest4: 4"] > div:first-child, .yl-stadtteil--cta[style*="--rest4: 3"] > div:first-child { max-width: 520px; }
@media (max-width: 1023px) {
.yl-stadtteil--cta { grid-column: span var(--rest2); flex-direction: column !important; align-items: stretch !important; padding: 22px !important; }
}
@media (max-width: 599px) { .yl-stadtteil--cta { grid-column: auto; } .yl-stadtteil__knoepfe .yl-knopf--primaer { width: 100%; } }
/* ===== Übersicht /einsatzgebiete/ (28.10.) ===== */
/* Einsatzgebiet-Karte im Hero: wie Stadtteil-Karte hell auf dem Foto, Orte klickbar (abschnitte.js), Sitz Fürth mit Pin */
.yl-gebiete__karte .gebiet { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 0 0 auto; }
.yl-gebiete__karte .umland, .yl-gebiete__karte .fluss { display: none; }
.yl-gebiete__karte .ort { fill: #fff; fill-opacity: .16; stroke: rgba(255, 255, 255, .8); stroke-width: .8; stroke-linejoin: round; cursor: pointer; transition: fill .2s, fill-opacity .2s; outline: none; }
.yl-gebiete__karte .ort:hover, .yl-gebiete__karte .ort.an { fill: var(--yl-orange); fill-opacity: .95; }
.yl-gebiete__karte .ort:focus-visible { stroke: var(--yl-orange); stroke-width: 2; }
.yl-gebiete__karte text { font: 600 9px var(--yl-font-text); fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2px; stroke-linejoin: round; }
.yl-gebiete__karte text.klein { font-size: 7.5px; }
.yl-gebiete__karte .quelle { font-size: 6px; font-weight: 400; text-anchor: end; stroke: none; fill: rgba(255, 255, 255, .55); }
.yl-gebiete__karte .pin path { fill: var(--yl-orange); stroke: #fff; stroke-width: .8; pointer-events: none; }
.yl-gebiete__karte .pin circle { fill: #fff; pointer-events: none; }
/* Ortskarten 3×2 */
.yl-gebiete__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.yl-gebiet-karte { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--yl-linie); color: var(--yl-navy); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.yl-gebiet-karte:hover, .yl-gebiet-karte.an { border-color: var(--yl-orange); box-shadow: 0 0 0 1px var(--yl-orange); }
.yl-gebiet-karte__bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--yl-navy); }
.yl-gebiet-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.yl-gebiet-karte:hover .yl-gebiet-karte__bild img { scale: 1.04; }
.yl-gebiet-karte__schild { position: absolute; left: 14px; top: 14px; padding: 3px 10px; background: var(--yl-orange); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yl-gebiet-karte__text { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.yl-gebiet-karte__name { font: 400 1.25rem/1.2 var(--yl-font-kopf); text-transform: uppercase; }
.yl-gebiet-karte__weg { font-size: .875rem; font-weight: 600; }
.yl-gebiet-karte__teile { font-size: .875rem; line-height: 1.55; color: var(--yl-grau); }
.yl-gebiet-karte__teile b { color: var(--yl-navy); font-weight: 600; }
.yl-gebiet-karte__mehr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--yl-linie); font-weight: 600; font-size: .9375rem; }
.yl-gebiet-karte__pfeil { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--yl-orange); color: #fff; transition: translate .3s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.yl-gebiet-karte__pfeil svg { width: 18px; height: 18px; }
.yl-gebiet-karte:hover .yl-gebiet-karte__pfeil { translate: 5px 0; background: var(--yl-orange-dunkel); }
/* „Ihr Ort ist nicht dabei?“ – Navy-Band mit Fürth-Skizze (wie Notfall-Band der Leistungsübersicht) */
.yl-fehlt__raster { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 40px; align-items: center; }
.yl-fehlt h2 { margin: 0 0 14px; color: #fff; }
.yl-fehlt p:not(.yl-marke) { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .8); }
.yl-fehlt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.yl-fehlt > .skizze { right: -40px; left: auto; bottom: -140px; width: 620px; }
@media (max-width: 1023px) {
.yl-gebiete__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-fehlt__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
.yl-gebiete__liste { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.yl-gebiete__karte .gebiet { max-width: 300px; }
.yl-fehlt__knoepfe .yl-knopf { width: 100%; }
.yl-fehlt > .skizze { width: 360px; right: -120px; bottom: auto; top: 0; }
}
.yl-fakten:has(+ .yl-gebiete) { background: transparent; }
.yl-fakten + .yl-gebiete { padding-top: 56px; }
@media (max-width: 599px) { .yl-fakten + .yl-gebiete { padding-top: 40px; } }
/* Einsatzgebiete: Hero = Startseite → Fakten ohne Überlappung, Karte neben der Überschrift „Wählen Sie Ihren Ort“ (dunkel auf hell) */
.yl-hero + .yl-fakten { margin-top: 0; padding-top: 48px; background: transparent; }
.yl-gebiete__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.yl-gebiete__kopf .yl-abschnitt__kopf { margin-bottom: 0; }
.yl-gebiete__karte .ort { fill: var(--yl-navy); fill-opacity: .85; stroke: var(--yl-papier); }
.yl-gebiete__karte .ort:hover, .yl-gebiete__karte .ort.an { fill: var(--yl-orange); fill-opacity: 1; }
.yl-gebiete__karte text { stroke: var(--yl-navy); }
.yl-gebiete__karte .quelle { fill: var(--yl-grau); }
.yl-gebiete__karte .pin path { stroke: var(--yl-navy); }
@media (max-width: 1023px) { .yl-gebiete__kopf { grid-template-columns: minmax(0, 1fr); gap: 24px; } .yl-gebiete__karte .gebiet { margin: 0 auto; } }
/* Einsatzgebiete-Hero (Ilia 28.10.): Startseiten-Hero mit Fürth-Foto + Einsatzgebiet-Karte über der Bewertung (hell auf dunkel) */
.yl-hero--karte .yl-orthero__quelle { bottom: 10px; }
.yl-hero--karte .yl-gebiete__karte { margin-bottom: 24px; }
.yl-hero--karte .yl-gebiete__karte .gebiet { max-width: 340px; margin: 0 auto; }
.yl-hero--karte .yl-gebiete__karte .ort { fill: #fff; fill-opacity: .16; stroke: rgba(255, 255, 255, .8); }
.yl-hero--karte .yl-gebiete__karte .ort:hover, .yl-hero--karte .yl-gebiete__karte .ort.an { fill: var(--yl-orange); fill-opacity: .95; }
.yl-hero--karte .yl-gebiete__karte text { stroke: rgba(0, 0, 0, .55); }
.yl-hero--karte .yl-gebiete__karte .quelle { fill: rgba(255, 255, 255, .55); }
.yl-hero--karte .yl-gebiete__karte .pin path { stroke: #fff; }
@media (min-width: 1024px) { .yl-hero--karte .yl-hero__text { grid-column: 1; } .yl-hero--karte h1 { font-size: clamp(1.75rem, 3.4vw, 3.25rem); } }
@media (max-width: 599px) { .yl-hero--karte .yl-gebiete__karte .gebiet { max-width: 280px; } }
/* Siegel bleibt an der Bewertungskarte, nicht über der Karte: Bewertung + Siegel in eigenem Rahmen (bauen.py) */
.yl-hero--karte .yl-hero__bewertung-rahmen { position: relative; }
/* Stadtteil per Karte gewählt → CTA unter „Häufig gesucht“ */
.yl-stadtteil__cta { margin-top: 16px; width: 100%; }
.yl-stadtteil__cta[hidden] { display: none; }
.yl-stadtteil__cta .yl-knopf__text { padding: 0 14px; font-size: .875rem; }
/* ===== Über uns /ueber-uns/ (28.10.) ===== */
.yl-hero + .yl-fakten:has(+ .yl-ueberbetrieb) { background: transparent; }
.yl-ueberbetrieb { position: relative; overflow: hidden; scroll-margin-top: 100px; }
.yl-ueberbetrieb > .skizze { position: absolute; right: -60px; top: 20px; width: 560px; height: auto; color: var(--yl-navy); opacity: .07; pointer-events: none; }
.yl-ueberbetrieb > .yl-wrap { position: relative; }
.yl-ueberbetrieb .yl-betrieb__text > p:not(.yl-marke) { margin: 0 0 18px; max-width: 540px; color: var(--yl-grau); }
.yl-ueberbetrieb .yl-kontakt__daten { margin: 28px 0; }
.yl-werte__titel { margin: 72px 0 24px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.yl-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.yl-werte li { padding: 24px 22px; background: #fff; border: 1px solid var(--yl-linie); }
.yl-werte__nr { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; background: var(--yl-navy); color: #fff; font: 400 14px/1 var(--yl-font-kopf); }
.yl-werte li:last-child .yl-werte__nr { background: var(--yl-orange); }
.yl-werte h4 { margin: 0 0 8px; font-size: 1rem; line-height: 1.35; }
.yl-werte p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--yl-grau); }
.yl-ueberteam { scroll-margin-top: 0; background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-ueberteam__platzhalter { margin: 0; padding: 48px; border: 2px dashed var(--yl-linie); text-align: center; color: var(--yl-grau); }
@media (max-width: 1023px) { .yl-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .yl-werte { grid-template-columns: minmax(0, 1fr); } .yl-werte__titel { margin-top: 48px; } }
.yl-stadtteil[data-st] { cursor: pointer; }
.yl-stadtteil.gewaehlt { border-color: var(--yl-orange); box-shadow: 0 0 0 1px var(--yl-orange); }
.yl-ueber-seite .yl-galerie { padding-top: 120px; } /* mehr Luft über „Frisch fertig geworden“ (Ilia 28.10.) */
@media (max-width: 599px) { .yl-ueber-seite .yl-galerie { padding-top: 80px; } }
/* „Die Menschen hinter “ (Ilia 28.10.): Zeichen + Wortmarke aus dem Header in der H2 */
.yl-h2logo { display: inline-flex; align-items: center; gap: .3em; vertical-align: middle; white-space: nowrap; margin-left: .15em; }
.yl-h2logo .zeichen { width: 1.25em; height: 1.25em; }
.yl-h2logo .wort { height: .48em; width: auto; }
.yl-ueberteam .yl-abschnitt__kopf { max-width: none; } /* H2 mit Logo am Desktop in einer Zeile */
/* ===== Über uns · Team als Lineal-Zeitleiste (Ilia 28.10.) ===== */
.yl-team__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.yl-team__kopf .yl-abschnitt__kopf { margin-bottom: 0; }
.yl-team__reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.yl-team__reiter button { min-height: 40px; padding: 0 16px; border: 1px solid rgba(29, 53, 87, .2); background: #fff; color: var(--yl-navy); font: 600 .875rem/1 var(--yl-font-text); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.yl-team__reiter button:hover { border-color: var(--yl-navy); }
.yl-team__reiter button[aria-pressed="true"] { background: var(--yl-navy); border-color: var(--yl-navy); color: #fff; }
.yl-team__reiter button:focus-visible { outline: 2px solid var(--yl-orange); outline-offset: 2px; }
.yl-zeitleiste--team .yl-zeitleiste__spur { gap: 20px; }
.yl-zeitleiste--team .yl-zeitleiste__punkt { flex-direction: column !important; align-items: stretch; gap: 0; width: min(78vw, 320px); background: #fff; border: 1px solid var(--yl-linie); }
.yl-zeitleiste--team .yl-zeitleiste__punkt[hidden] { display: none; }
.yl-person__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yl-hell, #E9EEF2); }
.yl-person__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.yl-person:hover .yl-person__foto img { scale: 1.05; }
.yl-person__platzhalter { position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed rgba(29, 53, 87, .3); color: rgba(29, 53, 87, .5); font-size: .8125rem; font-weight: 600; }
.yl-person__platzhalter svg { width: 44px; height: 44px; }
.yl-person__schild { position: absolute; right: 12px; top: 12px; padding: 3px 9px; background: var(--yl-navy); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yl-person__text { display: flex; flex-direction: column; padding: 20px 22px 24px; flex: 1; }
.yl-zeitleiste--team .yl-zeitleiste__nr { align-self: flex-start; margin-bottom: 14px; }
.yl-person__text h3 { margin: 0; font: 400 1.125rem/1.25 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-person__rolle { margin: 6px 0 14px; font-size: .875rem; font-weight: 600; color: var(--yl-grau); }
.yl-person__schwerpunkte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.yl-person__schwerpunkte li { padding: 3px 8px; background: var(--yl-papier); font-size: .75rem; font-weight: 600; color: var(--yl-navy); }
.yl-person__satz { margin: auto 0 0; font-size: .9375rem; line-height: 1.55; color: var(--yl-grau); }
@media (min-width: 900px) {
.yl-zeitleiste--team .yl-zeitleiste__punkt { width: 300px; }
.yl-zeitleiste--team.faehrt .yl-zeitleiste__rahmen { justify-content: center; padding-top: 96px; }
}
@media (max-width: 599px) { .yl-team__kopf { margin-bottom: 20px; } .yl-team__reiter { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .yl-team__reiter button { flex: none; } }
/* Über uns · Ein Tag mit unseren Monteuren als Lineal-Zeitleiste (dunkel) */
.yl-zeitleiste--tag .yl-zeitleiste__spur { gap: 24px; }
.yl-zeitleiste--tag .yl-zeitleiste__punkt { flex-direction: column !important; align-items: stretch; gap: 0; width: min(78vw, 360px); }
.yl-zeitleiste--tag .yl-kapitel__bild { aspect-ratio: 4 / 5; }
.yl-zeitleiste--tag .yl-zeitleiste__nr { order: -1; align-self: flex-start; margin: 0 0 14px; background: var(--yl-orange); color: var(--yl-navy); }
.yl-zeitleiste--tag .yl-zeitleiste__nr span { color: var(--yl-navy); }
.yl-zeitleiste--tag .yl-zeitleiste__striche i { background: #fff; }
.yl-zeitleiste--tag .yl-zeitleiste__marke { color: #fff; }
.yl-zeitleiste--tag { padding-bottom: 0; }
@media (min-width: 900px) {
.yl-zeitleiste--tag .yl-zeitleiste__punkt { width: min(30vw, 400px); min-width: 280px; }
.yl-zeitleiste--tag .yl-kapitel__bild { aspect-ratio: auto; height: max(180px, calc(100vh - 640px)); }
.yl-zeitleiste--tag .yl-abschnitt__kopf { margin-bottom: 28px; }
.yl-zeitleiste--tag.faehrt .yl-zeitleiste__rahmen { padding-top: 96px; }
}
/* Team: Abteilungen auf dem Lineal (statt Filter-Reitern) */
.yl-zeitleiste__abteilungen { position: relative; height: 34px; margin: 6px var(--zl-rand, 24px) 0; }
.yl-zeitleiste__abteilungen button { position: absolute; top: 0; translate: -1px 0; padding: 6px 10px 6px 8px; border: 0; border-left: 2px solid var(--yl-navy); background: none; color: var(--yl-grau); font: 600 .8125rem/1 var(--yl-font-text); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s; }
.yl-zeitleiste__abteilungen button:hover { color: var(--yl-navy); }
.yl-zeitleiste__abteilungen button.an { background: var(--yl-navy); color: #fff; }
.yl-zeitleiste__abteilungen button:last-child { translate: calc(-100% + 2px) 0; border-left: 0; border-right: 2px solid var(--yl-navy); }
.yl-zeitleiste__abteilungen button:focus-visible { outline: 2px solid var(--yl-orange); outline-offset: 2px; }
.yl-zeitleiste--team .yl-zeitleiste__lineal { height: 52px; }
@media (max-width: 599px) { .yl-zeitleiste__abteilungen { height: 52px; } .yl-zeitleiste__abteilungen button { padding: 5px 6px; font-size: .6875rem; } .yl-zeitleiste__abteilungen button:nth-child(even) { top: 24px; } } /* Handy: abwechselnd zwei Reihen, damit nichts überlappt */
/* Team-Karten größer (Ilia 28.10.); Foto-Höhe am Desktop an den Bildschirm gekoppelt, damit Lineal sichtbar bleibt */
.yl-zeitleiste--team .yl-zeitleiste__punkt { width: min(86vw, 360px); }
.yl-zeitleiste--team .yl-person__text h3 { font-size: 1.3125rem; }
.yl-zeitleiste--team .yl-person__satz, .yl-zeitleiste--team .yl-person__rolle { font-size: 1rem; }
@media (min-width: 900px) {
.yl-zeitleiste--team .yl-zeitleiste__punkt { width: min(30vw, 400px); }
.yl-zeitleiste--team .yl-person__foto { aspect-ratio: auto; height: clamp(200px, calc(100vh - 620px), 340px); }
.yl-zeitleiste--team.faehrt .yl-zeitleiste__rahmen { padding-top: 88px; }
.yl-zeitleiste--team .yl-team__kopf { margin-bottom: 24px; }
}
/* Team: weicher Verlauf an den Rändern, Fokus auf die Mitte (Ilia 28.10.) – Overlay liegt über der fahrenden Spur, nicht über Kopf/Lineal */
.yl-team__band { position: relative; }
.yl-team__band::before, .yl-team__band::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(48px, 16vw, 280px); pointer-events: none; }
.yl-team__band::before { left: 0; background: linear-gradient(90deg, var(--yl-karte) 0%, color-mix(in srgb, var(--yl-karte) 70%, transparent) 35%, transparent 100%); }
.yl-team__band::after { right: 0; background: linear-gradient(270deg, var(--yl-karte) 0%, color-mix(in srgb, var(--yl-karte) 70%, transparent) 35%, transparent 100%); }
@media (max-width: 599px) { .yl-team__band::before, .yl-team__band::after { width: 28px; } }
/* ===== Karriere /karriere/ (28.10.) ===== */
.yl-stellen__liste { display: grid; gap: 14px; }
.yl-stelle { background: #fff; border: 1px solid var(--yl-linie); scroll-margin-top: 110px; }
.yl-stelle[open] { border-color: var(--yl-navy); }
.yl-stelle summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; cursor: pointer; list-style: none; }
.yl-stelle summary::-webkit-details-marker { display: none; }
.yl-stelle__kopf { display: grid; gap: 8px; }
.yl-stelle h3 { margin: 0; font: 400 clamp(1.0625rem, 1.6vw, 1.375rem)/1.25 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-stelle__daten { display: flex; flex-wrap: wrap; gap: 6px; }
.yl-stelle__daten > span { padding: 3px 9px; background: var(--yl-papier); font-size: .75rem; font-weight: 600; color: var(--yl-navy); }
.yl-stelle__kurz { max-width: 720px; color: var(--yl-grau); font-size: .9375rem; }
.yl-stelle__inhalt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 4px 28px 28px; }
.yl-stelle__inhalt h4 { margin: 0 0 10px; font-size: .9375rem; }
.yl-stelle__inhalt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .9375rem; color: var(--yl-grau); }
.yl-stelle__inhalt li { display: flex; gap: 10px; }
.yl-stelle__inhalt li::before { content: ""; flex: none; width: 12px; height: 2px; margin-top: .7em; background: var(--yl-orange); }
.yl-stelle__knopf { grid-column: 1 / -1; justify-self: start; }
.yl-stellen__initiativ { margin: 24px 0 0; color: var(--yl-grau); }
.yl-vorteile { position: relative; overflow: hidden; background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-vorteile > .skizze { position: absolute; right: -60px; top: 20px; width: 520px; height: auto; color: var(--yl-navy); opacity: .07; pointer-events: none; }
.yl-vorteile > .yl-wrap { position: relative; }
.yl-werte--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yl-zeitleiste--schritte .yl-zeitleiste__spur { gap: 20px; }
.yl-zeitleiste--schritte .yl-zeitleiste__punkt { flex-direction: column !important; align-items: flex-start; gap: 0; width: min(80vw, 300px); padding: 26px 24px; background: #fff; border: 1px solid var(--yl-linie); }
.yl-zeitleiste--schritte h3 { margin: 0 0 10px; font: 400 1.125rem/1.25 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-zeitleiste--schritte .yl-zeitleiste__punkt p:not(.yl-zeitleiste__nr) { margin: 0; color: var(--yl-grau); font-size: .9375rem; line-height: 1.55; }
.yl-zeitleiste--schritte .yl-zeitleiste__nr { margin-bottom: 16px; }
.yl-zeitleiste--schritte { padding-bottom: 72px; }
.yl-teamzitat { background: var(--yl-navy); }
.yl-teamzitat__zitat { max-width: 900px; margin: 0 auto; text-align: center; }
.yl-teamzitat__zitat p { margin: 0; font: 400 clamp(1.25rem, 2.6vw, 2.125rem)/1.35 var(--yl-font-kopf); color: #fff; }
.yl-teamzitat__zitat footer { margin-top: 20px; color: var(--yl-aqua); font-size: .9375rem; }
.yl-bewerbungsform { display: grid; gap: 22px; }
.yl-bfeld { margin: 0; padding: 0; border: 0; }
.yl-bfeld legend { margin-bottom: 10px; font-weight: 600; color: var(--yl-navy); }
.yl-kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-datei input { padding: 10px; background: #fff; border: 1px dashed rgba(29, 53, 87, .35); }
.yl-datei__hinweis { margin: 6px 0 0; font-size: .8125rem; color: var(--yl-orange-dunkel); }
.yl-honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.yl-bewerbung__danke { margin: 0; padding: 14px 16px; background: #EEF6F6; border-left: 3px solid var(--yl-aqua); font-weight: 600; color: var(--yl-navy); }
@media (max-width: 1023px) { .yl-stelle__inhalt { grid-template-columns: minmax(0, 1fr); } .yl-werte--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .yl-stelle summary { padding: 18px; } .yl-stelle__inhalt { padding: 0 18px 22px; } .yl-werte--6 { grid-template-columns: minmax(0, 1fr); } }
.yl-stelle__kopf { min-width: 0; } .yl-stelle h3 { hyphens: auto; overflow-wrap: break-word; } .yl-stelle { min-width: 0; }
.yl-kontakt__formular.yl-bewerbungsform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.yl-bewerbungsform .yl-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yl-bewerbungsform .yl-kachel span { hyphens: auto; }
.yl-bewerbungsform .yl-schritt__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yl-bewerbungsform > .yl-knopf { justify-self: start; }
@media (max-width: 599px) { .yl-bewerbungsform .yl-schritt__felder { grid-template-columns: minmax(0, 1fr); } }
/* Karriere „In 4 Schritten“ (Ilia 28.10.): jeder Schritt einzeln, groß, eine Karte pro Bildschirmbreite */
.yl-zeitleiste--schritte .yl-zeitleiste__spur { gap: 6vw; }
.yl-zeitleiste--schritte .yl-zeitleiste__punkt { width: calc(100vw - 2 * var(--zl-rand, 24px)); max-width: none; min-height: 46vh; justify-content: center; padding: clamp(28px, 5vw, 72px); }
.yl-zeitleiste--schritte .yl-zeitleiste__nr { font-size: 1rem; padding: 8px 12px; }
.yl-zeitleiste--schritte h3 { font-size: clamp(1.375rem, 2.6vw, 2.5rem); line-height: 1.1; margin-bottom: 14px; }
.yl-zeitleiste--schritte .yl-zeitleiste__punkt p:not(.yl-zeitleiste__nr) { max-width: 42ch; font-size: clamp(.9375rem, 1.05vw, 1.0625rem); }
@media (max-width: 899px) { .yl-zeitleiste--schritte .yl-zeitleiste__punkt { min-height: 0; } }
/* Karriere: kein Leerraum unter dem Lineal vor dem Zitat (Ilia 28.10.) – Inhalt in der stehenden Bühne mittig, kein Extra-Abstand unten */
.yl-zeitleiste--schritte { padding-bottom: 0; }
@media (min-width: 900px) { .yl-zeitleiste--schritte.faehrt .yl-zeitleiste__rahmen { justify-content: center; padding-top: 72px; } }
@media (max-width: 899px) { .yl-zeitleiste--schritte { padding-bottom: 48px; } }
/* Karriere „Warum Yalili“: Strich-Skizze unten rechts je Karte (28.10., wie Bento-Icons im Leistungsumfang: Magnific → nachziehen.py → bilder/wp-umfang-kar-.svg) */
/* 28.10. neu (kar2-*): fein im Bento-Stil, ganze Skizze (nicht zugeschnitten), groß, ragt über die Kartenecke wie .yl-bento__icon */
.yl-werte--6 li { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 168px; }
.yl-werte__skizze { position: absolute; right: -14px; bottom: -14px; z-index: -1; width: 190px; height: 190px; color: var(--yl-navy); opacity: .25; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); }
.yl-werte__skizze path { stroke-width: 1px; vector-effect: non-scaling-stroke; } .yl-werte__skizze path.k { stroke-width: 1.6px; }
@media (max-width: 599px) { .yl-werte--6 li { padding-bottom: 136px; } .yl-werte__skizze { width: 156px; height: 156px; } }
/* Karriere „In 4 Schritten“: Strich-Skizze je Schritt rechts groß (28.10., Magnific → nachziehen.py → bilder/wp-umfang-kar-schritt-.svg), Darstellung wie .yl-bento__icon */
.yl-zeitleiste--schritte .yl-schrittkarte { position: relative; isolation: isolate; overflow: hidden; }
.yl-schrittkarte__skizze { position: absolute; right: -24px; bottom: -24px; z-index: -1; width: clamp(280px, 26vw, 380px); height: clamp(280px, 26vw, 380px); color: var(--yl-navy); opacity: .25; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); mask-image: linear-gradient(to bottom, #000 15%, transparent 95%); }
.yl-schrittkarte__skizze path { stroke-width: 1px; vector-effect: non-scaling-stroke; } .yl-schrittkarte__skizze path.k { stroke-width: 1.6px; }
@media (max-width: 899px) { .yl-zeitleiste--schritte .yl-schrittkarte { padding-bottom: 170px; } .yl-schrittkarte__skizze { width: 190px; height: 190px; right: -14px; bottom: -14px; } }
/* Karriere-Formular Schritt für Schritt (Ilia 28.10.) – ohne JS alle Schritte untereinander */
.yl-bschritte__kopf { display: none; }
.yl-bewerbungsform.schritte .yl-bschritte__kopf { display: grid; gap: 10px; font-size: .8125rem; font-weight: 600; color: var(--yl-grau); }
.yl-bschritte__balken { display: block; height: 4px; background: var(--yl-linie); }
.yl-bschritte__balken span { display: block; height: 100%; width: var(--fortschritt, 20%); background: var(--yl-orange); transition: width .4s ease; }
.yl-bschritt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.yl-bschritt input:not([type=checkbox]):not([type=radio]) { width: 100%; min-width: 0; box-sizing: border-box; }
.yl-bschritt[hidden] { display: none; }
.yl-bewerbungsform:not(.schritte) .yl-bschritt__aktion { display: none; }
.yl-bfrage, .yl-bfeld legend { margin: 0 0 6px; font: 400 clamp(1.125rem, 1.8vw, 1.5rem)/1.25 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); outline: none; }
.yl-bschritt__aktion { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.yl-bschritt__aktion .yl-knopf { margin-left: 4px; }
.yl-bschritt__fehler { margin: 0; color: var(--yl-orange-dunkel); font-weight: 600; font-size: .875rem; }
@media (max-width: 599px) { .yl-bschritt__aktion { flex-wrap: wrap; } .yl-bschritt__aktion .yl-knopf { margin-left: 0; } }
/* Bewerbung: alle Schritte gleich hoch (Ilia 28.10.), --bschritt-hoehe misst abschnitte.js; Pfeile immer unten */
.yl-bewerbungsform.schritte .yl-bschritt:not([hidden]) { display: flex; flex-direction: column; min-height: var(--bschritt-hoehe, 0px); }
.yl-bewerbungsform.schritte .yl-bschritt__aktion { margin-top: auto; }
@media (max-width: 479px) { .yl-bewerbungsform .yl-bschritt[data-n="1"] .yl-kacheln { grid-template-columns: minmax(0, 1fr); } }
/* Offene Stellen: Plus wird zu Minus + weiches Auf-/Zuklappen (Ilia 28.10.; Höhe animiert abschnitte.js) */
.yl-stelle .yl-frage__plus { transition: background .25s; }
.yl-stelle[open] .yl-frage__plus { background: var(--yl-navy); }
.yl-stelle[open] .yl-frage__plus::before, .yl-stelle[open] .yl-frage__plus::after { background: #fff; }
.yl-stelle[open] .yl-frage__plus::after { rotate: 0deg; }
.yl-stelle summary:hover h3 { color: var(--yl-blau); }
.yl-stelle__inhalt { overflow: hidden; }
/* ===== Kontakt (28.10.) ===== */
/* Hero: E-Mail-Knopf mit langer Adresse – am Handy kleinere Schrift, damit nichts überläuft */
@media (max-width: 599px) {
.yl-kontakt-seite .yl-hero__knoepfe { flex-wrap: wrap; }
.yl-knopf--mail .yl-knopf__text { font-size: .875rem; letter-spacing: 0; }
}
/* Anfahrt: Text links, selbst gezeichnete Karte (OSM) rechts */
.yl-anfahrt { background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-anfahrt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.yl-anfahrt__text h2 { margin: 0 0 20px; }
.yl-anfahrt__text > p:not(.yl-marke) { margin: 0; max-width: 480px; color: var(--yl-grau); }
.yl-anfahrt .yl-kontakt__daten { margin: 28px 0; }
.yl-anfahrt__karte { margin: 0; }
.yl-anfahrt__karte figcaption { margin-top: 10px; font-size: .75rem; color: var(--yl-grau); }
.yl-anfahrt__karte figcaption a { color: inherit; }
.gebiet--anfahrt { display: block; width: 100%; height: auto; border: 1px solid var(--yl-linie); }
.gebiet--anfahrt .grund { fill: var(--yl-papier); }
.gebiet--anfahrt .gruen { fill: var(--yl-aqua); fill-opacity: .32; }
.gebiet--anfahrt .haus { fill: var(--yl-linie); }
.gebiet--anfahrt .parken { fill: var(--yl-blau); fill-opacity: .12; }
.gebiet--anfahrt .weg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gebiet--anfahrt .weg--neben { stroke: #fff; stroke-width: 4.5; }
.gebiet--anfahrt .weg--haupt { stroke: #fff; stroke-width: 8; }
.gebiet--anfahrt .weg--auffahrt { stroke: var(--yl-navy); stroke-opacity: .35; stroke-width: 4; }
.gebiet--anfahrt .weg--autobahn { stroke: var(--yl-navy); stroke-opacity: .55; stroke-width: 9; }
.gebiet--anfahrt .weg--ziel { stroke: var(--yl-orange); stroke-width: 5; }
.gebiet--anfahrt text { font-family: var(--yl-font-text); font-size: 10px; font-weight: 600; fill: var(--yl-navy); text-anchor: middle; paint-order: stroke; stroke: var(--yl-papier); stroke-width: 3px; stroke-linejoin: round; }
.gebiet--anfahrt text.klein { font-size: 8.5px; font-weight: 500; fill: var(--yl-grau); }
.gebiet--anfahrt text.ziel { font-size: 11px; fill: var(--yl-orange-dunkel); }
.gebiet--anfahrt text.flaeche { font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; fill: var(--yl-grau); stroke: none; }
.gebiet--anfahrt .halt circle { fill: var(--yl-navy); stroke: #fff; stroke-width: 1.5; }
.gebiet--anfahrt .halt__h { font-size: 7px; fill: #fff; stroke: none; }
.gebiet--anfahrt .halt__name { font-size: 9px; font-weight: 500; }
.gebiet--anfahrt .pin path { fill: var(--yl-orange); stroke: var(--yl-navy); stroke-width: .8; }
.gebiet--anfahrt .pin circle { fill: #fff; }
.gebiet--anfahrt .pin__name { font-size: 12px; font-weight: 700; text-anchor: start; }
.gebiet--anfahrt .quelle { font-size: 8px; font-weight: 400; fill: var(--yl-grau); text-anchor: end; }
@media (max-width: 1023px) { .yl-anfahrt__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.yl-stelle.schliesst .yl-frage__plus { background: transparent; }
.yl-stelle.schliesst .yl-frage__plus::before, .yl-stelle.schliesst .yl-frage__plus::after { background: var(--yl-navy); }
.yl-stelle.schliesst .yl-frage__plus::after { rotate: 90deg; }
/* Kontakt ohne Hero (Ilia 28.10.): erster Abschnitt rückt unter dem schwebenden Header ein, H1 im Stil der H2 */
.yl-kontakt-seite > .yl-kontakt:first-of-type { padding-top: clamp(120px, 9vw, 140px); }
.yl-kontakt-seite .yl-kontakt h1 { margin: 0; font: 400 clamp(1.375rem, 2.6vw, 2.25rem)/1.2 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); overflow-wrap: break-word; }
.yl-kontakt-seite .yl-pfad { margin-bottom: 18px; }
/* ===== Galerie (28.10.) – /galerie/ ohne Hero, Filter, Schieber, Projekt-Zeitleiste, Großansicht ===== */
/* Kopf wie Kontakt ohne Hero: rückt unter den schwebenden Header ein, H1 in Größe der Kontakt-H1 */
.yl-galerie-seite > .yl-gkopf { padding-top: clamp(120px, 9vw, 140px); padding-bottom: 8px; }
.yl-gkopf h1 { margin: 0; font: 400 clamp(1.375rem, 2.6vw, 2.25rem)/1.2 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); overflow-wrap: break-word; }
.yl-gkopf .yl-pfad { margin-bottom: 18px; }
.yl-gkopf .yl-abschnitt__lead { max-width: 640px; margin: 16px 0 0; }
.yl-gkopf__hinweis { margin: 12px 0 0; font-size: .8125rem; color: var(--yl-grau); }
/* Filter-Leiste: Reiter im Stil des Galerie-Schiebers (08b) */
.yl-gfilter { display: grid; gap: 10px; margin-top: 32px; padding: 16px 20px; background: #fff; border: 1px solid var(--yl-linie); }
.yl-gfilter__reihe { display: flex; align-items: center; gap: 16px; min-width: 0; }
.yl-gfilter__name { flex: none; width: 84px; font: 400 11px/1.4 var(--yl-font-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--yl-grau); }
.yl-gfilter .yl-schieber__reiter { min-width: 0; }
.yl-gfilter__zahl { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--yl-linie); font-size: .8125rem; font-weight: 600; color: var(--yl-grau); }
.yl-gleer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; padding: 24px 28px; background: var(--yl-karte); border: 1px dashed rgba(29, 53, 87, .3); }
.yl-gleer[hidden] { display: none; }
.yl-gleer p { margin: 0; max-width: 620px; color: var(--yl-grau); }
.yl-gleer b { color: var(--yl-navy); }
@media (max-width: 599px) {
.yl-gfilter { padding: 14px 16px; }
.yl-gfilter__reihe { flex-direction: column; align-items: stretch; gap: 6px; }
.yl-gfilter .yl-schieber__reiter { margin-inline: -16px; padding-inline: 16px; }
.yl-gleer { padding: 20px; }
}
/* „Frisch fertig geworden“ = Schieber 08b; ausgeblendet, wenn der Filter nichts findet */
.yl-galerie-seite .yl-gfrisch { padding-top: 56px; }
.yl-gfrisch[hidden], .yl-zeitleiste--projekte[hidden] { display: none; }
/* Projekt-Zeitleiste: Karten wie #team (Foto, Titel, „Leistung · Ort · Monat“), Monate als Marken auf dem Lineal */
.yl-zeitleiste--projekte { background: var(--yl-karte); border-block: 1px solid var(--yl-linie); }
.yl-gzeit__kopf .yl-abschnitt__kopf { margin-bottom: 32px; }
.yl-zeitleiste--projekte .yl-zeitleiste__spur { gap: 20px; }
.yl-zeitleiste--projekte .yl-zeitleiste__punkt { position: relative; flex-direction: column !important; align-items: stretch; gap: 0; width: min(86vw, 360px); background: #fff; border: 1px solid var(--yl-linie); transition: border-color .2s; }
.yl-zeitleiste--projekte .yl-zeitleiste__punkt[hidden] { display: none; }
.yl-gkarte:hover { border-color: var(--yl-navy); }
.yl-gkarte__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yl-hell, #E9EEF2); }
.yl-gkarte__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.yl-gkarte:hover .yl-gkarte__foto img { scale: 1.05; }
.yl-gkarte__schild { position: absolute; left: 12px; top: 12px; padding: 3px 9px; background: var(--yl-orange); color: var(--yl-navy); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yl-gkarte__zahl { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; background: rgba(29, 53, 87, .85); color: #fff; font-size: 11px; font-weight: 600; }
.yl-gkarte__text { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }
.yl-gkarte h3 { margin: 0; font: 400 1.125rem/1.3 var(--yl-font-kopf); text-transform: uppercase; color: var(--yl-navy); }
.yl-gkarte__knopf { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.yl-gkarte__knopf::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ganze Karte klickbar */
.yl-gkarte__knopf:focus-visible { outline: none; }
.yl-gkarte__knopf:focus-visible::after { outline: 2px solid var(--yl-orange); outline-offset: 2px; }
.yl-gkarte__meta { margin: 8px 0 0; font-size: .875rem; font-weight: 600; color: var(--yl-grau); }
.yl-gkarte__mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: .875rem; font-weight: 600; color: var(--yl-blau); }
.yl-gkarte__mehr svg { width: 16px; height: 16px; transition: translate .2s; }
.yl-gkarte:hover .yl-gkarte__mehr svg { translate: 4px 0; }
@media (min-width: 900px) {
.yl-zeitleiste--projekte .yl-zeitleiste__punkt { width: min(30vw, 400px); }
.yl-zeitleiste--projekte .yl-gkarte__foto { aspect-ratio: auto; height: clamp(200px, calc(100vh - 560px), 340px); }
.yl-zeitleiste--projekte.faehrt .yl-zeitleiste__rahmen { justify-content: center; padding-top: 88px; }
.yl-gzeit__kopf .yl-abschnitt__kopf { margin-bottom: 24px; }
}
.yl-zeitleiste--projekte .yl-zeitleiste__lineal { height: 52px; }
/* Rand-Verlauf wie beim Team: Fokus auf die Mitte, nur über der Karten-Spur */
.yl-gzeit__band { position: relative; }
.yl-gzeit__band::before, .yl-gzeit__band::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(48px, 16vw, 280px); pointer-events: none; }
.yl-gzeit__band::before { left: 0; background: linear-gradient(90deg, var(--yl-karte) 0%, color-mix(in srgb, var(--yl-karte) 70%, transparent) 35%, transparent 100%); }
.yl-gzeit__band::after { right: 0; background: linear-gradient(270deg, var(--yl-karte) 0%, color-mix(in srgb, var(--yl-karte) 70%, transparent) 35%, transparent 100%); }
@media (max-width: 599px) { .yl-gzeit__band::before, .yl-gzeit__band::after { width: 28px; } }
/* „Ähnliches Projekt geplant?“ – Navy-Karte vor dem Formular */
.yl-gplan { padding-bottom: clamp(56px, 7vw, 104px); } /* mehr Luft zur Anfrage (Ilia 28.10.) */
.yl-gplan__karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: clamp(28px, 4vw, 56px); background: var(--yl-navy); color: #fff; }
.yl-gplan__text { max-width: 620px; }
.yl-gplan h2 { margin: 0 0 14px; color: #fff; }
.yl-gplan__text > p:not(.yl-marke) { margin: 0; color: rgba(255, 255, 255, .8); }
.yl-gplan .yl-marke { background: var(--yl-orange); color: var(--yl-navy); }
.yl-gplan__knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.yl-gplan + .yl-kontakt { border-top: 0; }
/* Großansicht (