/* ===== Seite Leistungen (Übersicht) ===== */
.le-hero > .bs-hero-bild { object-position: 50% 45%; }
.bs-tag { display: inline-block; font: 600 .7rem/1 var(--text-font); letter-spacing: .12em; text-transform: uppercase; color: #a42423; }
.giebel--dunkel .bs-tag { color: #ef6a60; }
.fk-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: #a42423; color: #fff; box-shadow: 0 4px 0 #6b1412; }
.fk-ic svg { width: 24px; height: 24px; }
.sn-mehr { margin: 28px auto 0; max-width: 46rem; text-align: center; color: var(--text-2); }
.sn-mehr a { color: #a42423; }

/* Haus-Finder */
.le-finder { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(24px,4vw,48px); align-items: center; margin-top: 40px; }
.le-foto { position: relative; margin: 0; min-width: 0; }
.le-foto img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 34px 60px -40px rgba(40,30,20,.75); }
.le-foto figcaption { margin-top: 10px; font-size: .82rem; color: #6f7a80; }
.le-punkt { position: absolute; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 .78rem/1 var(--text-font); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.le-punkt::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #a42423; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.35); animation: le-puls 2.2s infinite; }
.le-punkt span { padding: 6px 10px; border-radius: 999px; background: rgba(14,20,24,.78); backdrop-filter: blur(4px); transition: background .2s; }
.le-punkt:hover span, .le-punkt[aria-pressed="true"] span { background: #a42423; }
.le-punkt[aria-pressed="true"]::before { background: #fff; border-color: #a42423; }
.le-punkt:focus-visible { outline: 3px solid #ef6a60; outline-offset: 4px; border-radius: 999px; }
@keyframes le-puls { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75), 0 4px 10px rgba(0,0,0,.35); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0), 0 4px 10px rgba(0,0,0,.35); } }
.le-tafel { min-width: 0; }
.le-info { padding: 26px 26px 24px; border-radius: 20px; background: #fff; border: 1px solid #e3dccf; box-shadow: 0 24px 40px -32px rgba(40,30,20,.6); animation: le-rein .35s ease; }
@keyframes le-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.le-info h3 { margin: 8px 0 8px; font-size: 1.8rem; line-height: 1.02; text-transform: uppercase; color: #1b2227; }
.le-info p { margin: 0; font-size: .95rem; color: #3c4a52; }
.le-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.le-chips li { padding: 6px 12px; border-radius: 999px; background: #f3efe8; font-size: .8rem; font-weight: 600; color: #1b2227; }
.le-wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.le-link { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 12px; background: #a42423; color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 4px 0 #6b1412; transition: transform .15s, box-shadow .15s; }
.le-link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #6b1412; }
.le-link + .le-link { background: #1b2227; box-shadow: 0 4px 0 #000; }
.le-mehr { margin: 16px 0 0; font-size: .9rem; color: #4d5960; }
.le-mehr a { color: #a42423; font-weight: 600; }

/* Erst reinigen, dann beschichten */
.le-weg { display: grid; grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); align-items: stretch; max-width: 980px; margin: 40px auto 0; }
.le-stufe { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 28px 26px; border-radius: 20px; background: #172128; border: 1px solid rgba(255,255,255,.09); color: #a8b3b9; text-decoration: none; transition: transform .25s, border-color .25s; }
.le-stufe:hover { transform: translateY(-4px); border-color: rgba(229,87,78,.6); }
.le-stufe--ziel { border-color: #a42423; box-shadow: 0 30px 50px -36px rgba(229,87,78,.7); }
.le-nr { font: 700 .7rem/1 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: #ef6a60; }
.le-stufe b { font-size: 2rem; line-height: 1; text-transform: uppercase; color: #fff; }
.le-stufe > span:not(.le-nr) { font-size: .95rem; flex: 1; }
.le-stufe strong { font: 700 1.5rem/1.1 var(--titel); color: #fff; }
.le-stufe em { font-style: normal; font-weight: 700; font-size: .9rem; color: #ef6a60; }
.le-pfeil { position: relative; display: grid; place-items: center; }
.le-pfeil::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #e5574e 0 8px, transparent 8px 14px); animation: le-fluss .8s linear infinite; }
.le-pfeil i { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #a42423; box-shadow: 0 0 0 6px rgba(164,36,35,.25); }
.le-pfeil i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -8px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); }
@keyframes le-fluss { from { background-position: 0 0; } to { background-position: 14px 0; } }
.le-zusammen { max-width: 46rem; margin: 22px auto 0; text-align: center; color: #c3ccd1; }
.le-zusammen a { color: #ef6a60; }
.le-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 760px; margin: 22px auto 0; }

/* Alle Leistungen */
.le-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.le-filter button { padding: 10px 18px; border-radius: 999px; border: 1px solid #d8ccb9; background: #fff; font: 600 .9rem/1 var(--text-font); color: #1b2227; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.le-filter button[aria-pressed="true"] { background: #1b2227; border-color: #1b2227; color: #fff; }
.le-filter button:focus-visible { outline: 3px solid #ef6a60; outline-offset: 2px; }
.le-karten { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.le-karte { min-width: 0; display: flex; transition: opacity .3s, filter .3s, transform .3s; }
.le-karte a { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e3dccf; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.le-karte a:hover { transform: translateY(-5px); border-color: #a42423; box-shadow: 0 26px 40px -30px rgba(40,30,20,.7); }
.le-karte img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .5s; }
.le-karte a:hover img { transform: scale(1.04); }
.le-k-text { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; position: relative; background: #fff; }
.le-k-text h3 { margin: 0; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; color: #1b2227; }
.le-k-text p { margin: 0; font-size: .88rem; color: #3c4a52; flex: 1; }
.le-k-text em { font-style: normal; font-weight: 700; font-size: .85rem; color: #a42423; }
.le-karten.gefiltert .le-karte.aus { opacity: .32; filter: grayscale(1); }
.le-karten.gefiltert .le-karte:not(.aus) a { border-color: #a42423; }

/* Gut zu wissen */
.le-wissen { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.le-wissen li { min-width: 0; display: flex; }
.le-wissen a { flex: 1; min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #e3dccf; text-decoration: none; transition: transform .2s, border-color .2s; }
.le-wissen a:hover { transform: translateY(-3px); border-color: #a42423; }
.le-wissen .fk-ic { grid-row: 1 / 3; }
.le-wissen b { font-size: 1.35rem; line-height: 1; text-transform: uppercase; color: #1b2227; }
.le-wissen b::after { content: " →"; color: #a42423; }
.le-wissen a > span:last-child { font-size: .86rem; color: #4d5960; }

@media (max-width: 960px) {
  .le-finder { grid-template-columns: 1fr; }
  .le-karten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .le-wissen { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .le-punkt span { display: none; }
  .le-punkt::before { width: 26px; height: 26px; }
  .le-info { padding: 20px 18px; }
  .le-weg { grid-template-columns: 1fr; grid-template-rows: auto 56px auto; }
  .le-pfeil::before { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0 0 0 -1.5px; background: repeating-linear-gradient(180deg, #e5574e 0 8px, transparent 8px 14px); }
  .le-pfeil i { transform: rotate(90deg); }
  .le-knoepfe { grid-template-columns: 1fr; }
  .le-karten { grid-template-columns: 1fr; }
  .le-wissen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .le-punkt::before, .le-pfeil::before, .le-info { animation: none; }
  .le-karte, .le-karte a, .le-karte img, .le-stufe, .le-wissen a { transition: none; }
}
/* Farben gegen die allgemeinen Link-Stile der Unterseiten absichern */
.le-info a.le-link, .le-info a.le-link:hover { color: #fff; text-decoration: none; }
a.le-stufe > span:not(.le-nr) { color: #c3ccd1; }
a.le-stufe b, a.le-stufe strong { color: #fff; }