Komplette Vollbreit-Unterseite: Hero mit Akzent-Glow, Eyebrow, grosser Headline, Lead und zwei Buttons, darunter ein 3er-Raster mit Dienstleistungs-Karten das am Handy einspaltig wird.
Unsere Leistung
Kuechenmontage vom Fachbetrieb
Von der Anlieferung bis zum letzten Griff: Wir montieren Ihre Kueche sauber, termintreu und mit Blick fuers Detail. Auf Wunsch inklusive Elektro- und Wasseranschluss.
Kuechenmontage
Fachgerechter Aufbau nach Plan, praezise ausgerichtet und millimetergenau eingepasst.
Mehr erfahrenElektroanschluss
Sicherer Anschluss aller Geraete durch den Fachbetrieb, gepruefte Ausfuehrung und Uebergabe.
Mehr erfahrenBeratung vor Ort
Unverbindliches Aufmass und Empfehlung direkt bei Ihnen, mit klarem Festpreis-Angebot.
Mehr erfahren<style>
/* --- Leistungs-Unterseite: Hero + 3er-Karten-Raster --- */
.nl1-page{width:100%;max-width:940px;display:flex;flex-direction:column;gap:0;
border-radius:20px;overflow:hidden;border:1px solid #26262c;background:#16161a}
/* (a) HERO */
.nl1-hero{position:relative;isolation:isolate;padding:64px 44px 60px;overflow:hidden;
background:linear-gradient(160deg,#1c1c22 0%,#16161a 60%,#131317 100%)}
.nl1-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 90% at 22% 8%,rgba(124,135,255,.20),transparent 60%),
radial-gradient(45% 70% at 92% 100%,rgba(124,135,255,.10),transparent 65%)}
.nl1-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,#26262c 20%,#26262c 80%,transparent)}
.nl1-ey{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--akzent,#7c87ff)}
.nl1-ey::before{content:"";width:22px;height:1px;background:var(--akzent,#7c87ff);opacity:.7}
.nl1-hero h1{margin:0 0 18px;font-size:clamp(2rem,5vw,3.1rem);line-height:1.06;
letter-spacing:-.025em;font-weight:700;color:#f4f4f5;max-width:16ch}
.nl1-lead{margin:0 0 34px;font-size:clamp(1rem,2.2vw,1.16rem);line-height:1.65;
color:#a1a1aa;max-width:52ch}
.nl1-cta{display:flex;flex-wrap:wrap;gap:14px}
.nl1-btn{display:inline-flex;align-items:center;gap:9px;padding:.85rem 1.55rem;
border-radius:12px;font-size:.94rem;font-weight:600;text-decoration:none;cursor:pointer;
border:1px solid transparent;
transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,
background-color .25s ease,border-color .25s ease,color .25s ease}
.nl1-btn svg{flex:0 0 auto;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.nl1-btn--fill{color:#0d0d10;background:var(--akzent,#7c87ff);
box-shadow:0 10px 26px rgba(124,135,255,.28)}
.nl1-btn--ghost{color:#e9e9ee;background:transparent;border-color:#26262c}
@media (hover:hover){
.nl1-btn--fill:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,135,255,.42)}
.nl1-btn--fill:hover svg{transform:translateX(3px)}
.nl1-btn--ghost:hover{border-color:var(--akzent,#7c87ff);color:#f4f4f5;transform:translateY(-2px)}
}
.nl1-btn:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
/* (b) 3er-KARTEN-RASTER */
.nl1-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:#26262c;border-top:1px solid #26262c}
.nl1-card{position:relative;display:flex;flex-direction:column;gap:14px;
padding:38px 32px 34px;background:#16161a;
transition:background-color .25s ease}
.nl1-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
background:var(--akzent,#7c87ff);transform:scaleX(0);transform-origin:left;
transition:transform .3s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.nl1-card:hover{background:#1c1c22}
.nl1-card:hover::after{transform:scaleX(1)}
}
.nl1-card:focus-within{background:#1c1c22}
.nl1-card:focus-within::after{transform:scaleX(1)}
.nl1-badge{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
color:var(--akzent,#7c87ff);background:rgba(124,135,255,.12);
border:1px solid rgba(124,135,255,.26)}
.nl1-card h3{margin:0;font-size:1.16rem;letter-spacing:-.01em;color:#f4f4f5}
.nl1-card p{margin:0;flex:1;font-size:.9rem;line-height:1.65;color:#a1a1aa}
.nl1-more{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
font-size:.86rem;font-weight:600;text-decoration:none;color:var(--akzent,#7c87ff)}
.nl1-more svg{transition:transform .25s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.nl1-more:hover svg{transform:translateX(4px)}}
.nl1-more:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px;border-radius:4px}
@media (max-width:720px){
.nl1-hero{padding:48px 28px 44px}
.nl1-grid{grid-template-columns:1fr}
.nl1-card{padding:32px 28px}
}
@media (prefers-reduced-motion:reduce){
.nl1-btn,.nl1-btn svg,.nl1-card,.nl1-card::after,.nl1-more svg{transition:none}
.nl1-btn--fill:hover,.nl1-btn--ghost:hover{transform:none}
.nl1-btn--fill:hover svg,.nl1-more:hover svg{transform:none}
.nl1-card:hover::after,.nl1-card:focus-within::after{transform:scaleX(1)}
}
</style>
<div class="nl1-page">
<!-- (a) HERO -->
<section class="nl1-hero">
<p class="nl1-ey">Unsere Leistung</p>
<h1>Kuechenmontage vom Fachbetrieb</h1>
<p class="nl1-lead">Von der Anlieferung bis zum letzten Griff: Wir montieren Ihre Kueche sauber, termintreu und mit Blick fuers Detail. Auf Wunsch inklusive Elektro- und Wasseranschluss.</p>
<div class="nl1-cta">
<a href="#" class="nl1-btn nl1-btn--fill">
Termin anfragen
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<a href="#" class="nl1-btn nl1-btn--ghost">Leistungen ansehen</a>
</div>
</section>
<!-- (b) 3er-KARTEN-RASTER -->
<div class="nl1-grid">
<article class="nl1-card">
<span class="nl1-badge" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
</span>
<h3>Kuechenmontage</h3>
<p>Fachgerechter Aufbau nach Plan, praezise ausgerichtet und millimetergenau eingepasst.</p>
<a href="#" class="nl1-more">
Mehr erfahren
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</article>
<!-- weitere Karten identisch (Icon-Badge + h3 + p + Mehr-Link) -->
</div>
</div>