/* ==========================================================================
   Startseiten-Kacheln (23.10.2026)
   Die vier Kacheln unter dem Slider (Inhalt 6313, Set 115) sind Code-Widgets.
   Ihr HTML trägt nur noch Klassen, die Bilder kommen aus dem Theme, damit die
   Adressen nicht an der Plugin-Set-Nummer hängen.
       <a class="hover-teaser kfm-kachel kfm-kachel--backofen" href="…">
         <span class="kfm-kachel__bild" role="img" aria-label="…"></span>
         <span class="kfm-kachel__titel">Backöfen &amp; Herde</span>
         <span class="teaserButton">» weiter</span>
       </a>
   ========================================================================== */
a.kfm-kachel { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #113946; text-decoration: none; }
a.kfm-kachel .kfm-kachel__bild { position: absolute; inset: 0; background-position: center; background-size: cover; transition: transform .5s ease; }
a.kfm-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 57, 70, .88) 0%, rgba(17, 57, 70, .35) 38%, rgba(17, 57, 70, 0) 60%); pointer-events: none; }
a.kfm-kachel:hover .kfm-kachel__bild,
a.kfm-kachel:focus-visible .kfm-kachel__bild { transform: scale(1.05); }
a.kfm-kachel .kfm-kachel__titel { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 58px; color: #fff; font-family: MontserratBold, Montserrat, sans-serif; font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; }
a.kfm-kachel .kfm-kachel__titel::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; background: #bed630; }
a.kfm-kachel .teaserButton { z-index: 1; }

a.kfm-kachel--backofen .kfm-kachel__bild { background-image: url("../images/kachel/backofen.jpg"); }
a.kfm-kachel--kochfeld .kfm-kachel__bild { background-image: url("../images/kachel/kochfeld.jpg"); }
a.kfm-kachel--dunstabzug .kfm-kachel__bild { background-image: url("../images/kachel/dunstabzug.jpg"); }
a.kfm-kachel--geschirrspueler .kfm-kachel__bild { background-image: url("../images/kachel/geschirrspueler.jpg"); }