<%- include('partials/stitch-head') %>
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary">
<%- include('partials/stitch-nav') %>
<main class="pt-[calc(4.5rem+env(safe-area-inset-top,0px))] md:pt-32 pb-20 md:pb-24 overflow-x-hidden">
<%- include('partials/stitch-breadcrumbs') %>
<header class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12 mb-12 sm:mb-16 md:mb-20 anim-page-head">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-8">
<div class="max-w-3xl">
<span class="font-label uppercase tracking-[0.3em] text-[10px] text-primary mb-4 block">Team</span>
<h1 class="font-headline text-4xl sm:text-5xl md:text-7xl lg:text-8xl text-on-surface leading-[0.95] sm:leading-[0.9] tracking-tighter mb-6 md:mb-8">
Unser <br/><span class="italic text-primary">Salon</span>
</h1>
</div>
<div class="max-w-sm pb-2">
<p class="text-on-surface-variant font-light leading-relaxed text-sm md:text-base">
<%= site.brand %> in Hilden — persönliche Beratung, handwerkliche Präzision und entspannte Atmosphäre.
</p>
</div>
</div>
</header>

<section class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12" data-reveal>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-8 items-start justify-center">
<div class="group relative flex flex-col max-w-md mx-auto lg:max-w-none lg:mx-0 md:col-span-2 lg:col-span-1 lg:col-start-2">
<div class="aspect-[4/5] overflow-hidden rounded-lg bg-surface-container-low mb-[-60px]">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale hover:grayscale-0" src="<%= site.owner.image.src %>" alt="<%= site.owner.image.alt %>" width="800" height="1000" loading="lazy" decoding="async">
</div>
<div class="glass-reveal p-8 mx-4 md:mx-6 relative z-10 rounded-xl shadow-2xl motion-lift">
<span class="font-label uppercase tracking-[0.2em] text-[9px] text-primary mb-2 block font-extrabold"><%= site.owner.role %></span>
<h2 class="font-headline text-2xl text-on-surface mb-3 tracking-wide"><%= site.owner.name %></h2>
<p class="text-on-surface-variant text-sm font-light leading-relaxed mb-6"><%= site.owner.bio %></p>
<ul class="space-y-2 text-xs text-secondary uppercase tracking-widest">
<% site.owner.highlights.forEach(function (h) { %>
<li class="flex items-center gap-2"><span class="text-primary">✦</span> <%= h %></li>
<% }); %>
</ul>
<div class="mt-8">
<a href="/buchung" class="inline-flex bg-gradient-to-r from-primary to-on-primary-container text-on-primary px-6 py-3 rounded-md font-label uppercase tracking-widest text-[10px] font-extrabold hover:shadow-[0_0_20px_rgba(233,193,118,0.2)] transition-all">Termin anfragen</a>
</div>
</div>
</div>
</div>
</section>
</main>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: [] }) %>
