// Real products from the supplier catalogues (EVIDENT, Beauty Sleep, Luvina, AVERTO);
// photos live in assets/photos/produkte/. Notes describe material/size — never prices.
const PP='../../assets/photos/produkte/';
const IKKON_PRODUCTS=[
{name:'Sofa New Lotus',cat:'Sofas',note:'Sofagarnitur, geschwungene Form',badge:'Neu',image:PP+'sofa-newlotus.jpg',tone:'var(--cloud)'},
{name:'Sofa Oslo',cat:'Sofas',note:'Sofagarnitur mit Zierkissen',image:PP+'sofa-oslo.jpg',tone:'var(--stone-1)'},
{name:'Ecksofa Premium',cat:'Sofas',note:'Ecksofa mit Longchair',image:PP+'sofa-premium.jpg',tone:'var(--stone-2)'},

{name:'Bett Moon',cat:'Betten',note:'Polsterbett, Breiten 90–200 cm',badge:'Neu',image:PP+'bett-moon.jpg',tone:'var(--stone-1)'},
{name:'Bett Anka',cat:'Betten',note:'Polsterbett, gestepptes Kopfteil',image:PP+'bett-anka.jpg',tone:'var(--cloud)'},
{name:'Bett Asya',cat:'Betten',note:'Polsterbett, vertikal gesteppt',image:PP+'bett-asya.jpg',tone:'var(--stone-2)'},

{name:'Esstisch Ocean',cat:'Tische',note:'Rund, ausziehbar — ø 130 auf 230 cm',badge:'Neu',image:PP+'tisch-ocean.jpg',tone:'var(--cloud)'},
{name:'Couchtisch Monaco',cat:'Tische',note:'2er-Set, 140 × 70 und 82 × 52 cm',image:PP+'tisch-monaco.jpg',tone:'var(--stone-1)'},
{name:'Couchtisch Mercedes',cat:'Tische',note:'Couchtisch-Set, Metallgestell',image:PP+'tisch-mercedes.jpg',tone:'var(--stone-2)'},

{name:'Lowboard Beliz',cat:'TV-Möbel',note:'200 × 45 cm, Nussbaum-Dekor',image:PP+'tv-beliz.jpg',tone:'var(--stone-1)'},
{name:'Sideboard Catt',cat:'TV-Möbel',note:'200 × 45 cm, farbige Fronten',image:PP+'tv-catt.jpg',tone:'var(--cloud)'},

{name:'Sessel Intense',cat:'Sessel',note:'Sessel, Bouclé-Bezug',badge:'Neu',image:PP+'sessel-intense.jpg',tone:'var(--stone-3)'},
{name:'Stuhl Alaçatı',cat:'Sessel',note:'Stuhl, Holzgestell mit Geflecht',image:PP+'stuhl-alacati.jpg',tone:'var(--cloud)'},
{name:'Stuhl Patra',cat:'Sessel',note:'Stuhl, Metallkufe, Lederoptik',image:PP+'stuhl-patra.jpg',tone:'var(--stone-1)'},

{name:'Küche Alpin',cat:'Küchen',note:'Landhaus, matt lackiert',tone:'var(--cloud)'},
{name:'Küche Urban',cat:'Küchen',note:'Grifflos, Insel mit Sitzbank',badge:'Ausstellungsstück',tone:'var(--stone-2)'},
{name:'Küche Landhaus',cat:'Küchen',note:'Massivholzfronten',tone:'var(--stone-1)'},
];
// accent/deep drive the energetic category-page template; pdf feeds its download CTA.
const IKKON_CATS=[
{name:'Sofas',href:'sofas.html',tone:'var(--stone-1)',accent:'#D96A45',deep:'#A94F2F',pdf:'../../assets/kataloge/sofas-evident-2025.pdf',image:'../../assets/photos/kategorien/sofas.jpg',desc:'Sofas mit ruhigen Linien — bequem, robust bezogen, in vielen Stoffen und Größen.'},
{name:'Betten',href:'betten.html',tone:'var(--stone-2)',accent:'#5D89BA',deep:'#41668F',pdf:'../../assets/kataloge/betten-beautysleep-2025.pdf',image:'../../assets/photos/kategorien/betten.jpg',desc:'Betten und Boxspringbetten für erholsamen Schlaf — Massivholz, Polster, Lattenrost und Matratze aus einer Hand.'},
{name:'Tische',href:'tische.html',tone:'var(--stone-1)',accent:'#C98F2F',deep:'#9E6F1F',pdf:'../../assets/kataloge/tische-luvina-2026.pdf',image:'../../assets/photos/kategorien/tische.jpg',desc:'Esstische und Couchtische aus massiver Eiche und Nussbaum — geölt, langlebig, auf Wunsch nach Maß.'},
{name:'TV-Möbel',href:'tv-moebel.html',tone:'var(--stone-2)',accent:'#3F7E8C',deep:'#2C606C',pdf:null,image:'../../assets/photos/kategorien/tv-moebel.jpg',desc:'TV-Boards, Lowboards und Wohnwände — Kabel geführt, Fächer offen oder geschlossen.'},
{name:'Sessel',href:'sessel.html',tone:'var(--stone-3)',accent:'#7D9B58',deep:'#5F7A40',pdf:'../../assets/kataloge/sessel-averto.pdf',image:'../../assets/photos/kategorien/sessel.jpg',desc:'Sessel und Relaxsessel als ruhiger Platz für sich — einzeln oder als Ergänzung zur Sofagruppe.'},
{name:'Küchen',href:'kuechen.html',tone:'var(--cloud)',accent:'#B08968',deep:'#8F6C4E',pdf:null,image:'../../assets/photos/kategorien/kuechen.jpg',desc:'Küchen planen wir individuell mit Ihnen — vom Aufmaß über die Geräteauswahl bis zur Montage.'},
];
const Eyebrow=({children})=>(<div style={{font:'500 12px var(--font-body)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--ink-3)',marginBottom:10}}>{children}</div>);
// Kitchen brands Ikkon sells. `logo` is optional: drop an SVG/PNG into assets/brands/
// and set it here, and the strip shows the real mark instead of the name in type.
// whiteLogo: the source file is white artwork — it must be darkened on light surfaces
// even in the coloured (mono=false) strip, or it disappears.
const IKKON_KUECHENMARKEN=[
  {name:'next125',logo:'../../assets/brands/next125.svg'},
  {name:'DanKüchen',logo:'../../assets/brands/dankuechen.png',whiteLogo:true},
  {name:'nobilia',logo:'../../assets/brands/nobilia.png'},
  {name:'Schüller',logo:'../../assets/brands/schueller.svg'},
  {name:'Impuls Küchen',logo:'../../assets/brands/impuls.svg',whiteLogo:true},
  {name:'Bosch',logo:'../../assets/brands/bosch.svg'},
  {name:'Siemens',logo:'../../assets/brands/siemens.svg'},
];
const BrandStrip=({items=IKKON_KUECHENMARKEN,label='Unsere Küchenmarken',onDark=false,mono=true,style})=>{
  const fg=onDark?'#FFFFFF':'var(--ink)';
  const line=onDark?'rgba(255,255,255,.28)':'var(--border)';
  return <div style={{...style}}>
    <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:18}}>
      <span style={{height:1,flex:1,background:line}}/>
      <span style={{font:'500 11px var(--font-body)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:fg,opacity:onDark?.85:.55,whiteSpace:'nowrap'}}>{label}</span>
      <span style={{height:1,flex:1,background:line}}/>
    </div>
    <style>{'@media(max-width:680px){.ikkon-brand-sep{display:none!important}}@media(min-width:681px){.ikkon-brand-row{flex-wrap:nowrap!important}}'}</style>
    <div className="ikkon-brand-row" style={{display:'flex',flexWrap:'wrap',justifyContent:'center',alignItems:'center',gap:'14px 16px'}}>
      {items.map((b,i)=>(<React.Fragment key={b.name}>
        {i>0&&<span className="ikkon-brand-sep" style={{width:1,height:16,background:line,flexShrink:0}}/>}
        {b.logo
          ? <img src={b.logo} alt={b.name} loading="lazy"
              style={{height:'clamp(14px,1.6vw,20px)',width:'auto',maxWidth:'clamp(60px,7.5vw,94px)',objectFit:'contain',display:'block',flexShrink:1,minWidth:0,
              // mono forces every mark to one ink value — white on dark, black on light
              filter:mono?(onDark?'brightness(0) invert(1)':'brightness(0)'):(b.whiteLogo&&!onDark?'brightness(0)':'none'),opacity:mono?(onDark?.95:.75):1}}/>
          : <span style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(14px,1.7vw,19px)',letterSpacing:'.02em',color:fg,opacity:onDark?.95:.8,whiteSpace:'nowrap'}}>{b.name}</span>}
      </React.Fragment>))}
    </div>
  </div>;
};
// Calm scroll reveal: fade + 14px rise once, 300ms ease-out. Respects reduced-motion.
const Reveal=({children,delay=0,style})=>{
  const ref=React.useRef(null);
  const [shown,setShown]=React.useState(false);
  React.useEffect(()=>{
    const el=ref.current; if(!el) return;
    if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){setShown(true);return}
    const io=new IntersectionObserver(([e])=>{if(e.isIntersecting){setShown(true);io.disconnect()}},{rootMargin:'0px 0px -8% 0px'});
    io.observe(el); return ()=>io.disconnect();
  },[]);
  return <div ref={ref} style={{opacity:shown?1:0,transform:shown?'none':'translateY(14px)',
    transition:`opacity var(--dur-med) var(--ease-out) ${delay}ms, transform var(--dur-med) var(--ease-out) ${delay}ms`,...style}}>{children}</div>;
};
const Section=({eyebrow,title,titleAs='h2',children,style})=>(<section style={{maxWidth:'var(--container)',margin:'0 auto',padding:'clamp(40px,7vw,80px) var(--gutter)',...style}}>
  {eyebrow&&<Eyebrow>{eyebrow}</Eyebrow>}
  {title&&React.createElement(titleAs,{style:{fontSize:'var(--text-h1)',fontWeight:600,letterSpacing:'var(--tracking-tight)',marginBottom:28}},title)}
  {children}
</section>);
// Full-bleed video hero. The film carries the brand itself, so no slogan is laid over it.
// Muted + playsInline are required for autoplay on iOS/Android.
// Phones get the lighter 720p cut; the switch also follows a resize/rotation.
const HERO_MOBILE_MQ='(max-width: 768px)';
// Desktop plays the silent 16:9 film, phones get their own 9:16 story cut with sound.
// On phones we try to autoplay WITH audio; browsers usually veto that, so the catch
// falls back to muted playback and the speaker button lets the visitor unmute.
const HeroVideo=({src,srcMobile,poster,posterMobile,height='clamp(460px,80vh,860px)'})=>{
  const mq=()=>window.matchMedia(HERO_MOBILE_MQ).matches;
  const [mobile,setMobile]=React.useState(mq);
  const [muted,setMuted]=React.useState(true);
  const vref=React.useRef(null);
  React.useEffect(()=>{
    const m=window.matchMedia(HERO_MOBILE_MQ);
    const sync=()=>setMobile(m.matches);
    sync(); // the viewport can change between first render and mount
    m.addEventListener('change',sync);
    window.addEventListener('resize',sync);
    return ()=>{m.removeEventListener('change',sync);window.removeEventListener('resize',sync)};
  },[]);
  const file=(mobile&&srcMobile)?srcMobile:src;
  const still=(mobile&&posterMobile)?posterMobile:poster;
  React.useEffect(()=>{
    const v=vref.current; if(!v) return;
    if(!mobile){v.muted=true;setMuted(true);v.play&&v.play().catch(()=>{});return}
    v.muted=false;
    const p=v.play&&v.play();
    if(p&&p.then){p.then(()=>setMuted(false)).catch(()=>{v.muted=true;setMuted(true);v.play().catch(()=>{})})}
  },[file,mobile]);
  const toggle=()=>{const v=vref.current;if(!v)return;const next=!muted;v.muted=next;setMuted(next);if(!next)v.play().catch(()=>{})};
  return <section style={{position:'relative',height,overflow:'hidden',background:'var(--ink)'}}>
    <video ref={vref} key={file} src={file} poster={still} autoPlay muted loop playsInline preload="metadata"
      aria-label="IKKON Home Concept — Möbelfilm"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
    {mobile&&srcMobile?<button onClick={toggle} aria-label={muted?'Ton einschalten':'Ton ausschalten'}
      style={{position:'absolute',right:14,bottom:14,zIndex:2,width:44,height:44,borderRadius:999,border:'1px solid rgba(255,255,255,.35)',background:'rgba(20,20,20,.55)',color:'#fff',display:'grid',placeItems:'center',cursor:'pointer',backdropFilter:'blur(6px)'}}>
      <window.IkkonNS.Icon name={muted?'volume-x':'volume'} size={19}/>
    </button>:null}
  </section>;
};
// Full-bleed hero slider: cross-fading photos with a single slogan. No UI copy on the image.
const HeroSlider=({slides,slogan})=>{
  const [i,setI]=React.useState(0);
  React.useEffect(()=>{const t=setInterval(()=>setI(v=>(v+1)%slides.length),6500);return ()=>clearInterval(t)},[slides.length]);
  const {Icon}=window.IkkonNS;
  const arrow=(dir)=>(<button aria-label={dir==='prev'?'Vorheriges Bild':'Nächstes Bild'}
    onClick={()=>setI(v=>(v+(dir==='prev'?slides.length-1:1))%slides.length)}
    style={{position:'absolute',top:'50%',[dir==='prev'?'left':'right']:'clamp(12px,3vw,32px)',transform:'translateY(-50%)',width:52,height:52,borderRadius:999,border:0,background:'rgba(255,255,255,.85)',color:'var(--ink)',display:'grid',placeItems:'center',cursor:'pointer',backdropFilter:'blur(4px)',transition:'background var(--dur-fast)'}}>
    <Icon name={dir==='prev'?'chevron-left':'chevron-right'} size={22}/></button>);
  return <section style={{position:'relative',height:'clamp(460px,80vh,860px)',overflow:'hidden',background:'var(--cloud)'}}>
    {slides.map((s,n)=><div key={s} style={{position:'absolute',inset:0,backgroundImage:'url('+s+')',backgroundSize:'cover',backgroundPosition:'center',opacity:n===i?1:0,transform:n===i?'scale(1)':'scale(1.03)',transition:'opacity 1s var(--ease-out),transform 6s var(--ease-out)'}}/>)}
    <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(20,20,20,.18),rgba(20,20,20,.34))'}}/>
    <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',padding:'0 var(--gutter)'}}>
      <h1 style={{fontSize:'clamp(30px,5.2vw,66px)',fontWeight:600,letterSpacing:'var(--tracking-display)',lineHeight:1.12,color:'#FFFFFF',textAlign:'center',maxWidth:16+'ch',textShadow:'0 2px 24px rgba(20,20,20,.35)'}}>{slogan}</h1>
    </div>
    {slides.length>1?arrow('prev'):null}{slides.length>1?arrow('next'):null}
    {slides.length>1?<div style={{position:'absolute',bottom:26,left:0,right:0,display:'flex',justifyContent:'center',gap:10}}>
      {slides.map((s,n)=><button key={s} aria-label={'Bild '+(n+1)} onClick={()=>setI(n)}
        style={{width:n===i?28:9,height:9,borderRadius:999,border:0,padding:0,background:n===i?'#FFFFFF':'rgba(255,255,255,.55)',cursor:'pointer',transition:'width var(--dur-med) var(--ease-out),background var(--dur-fast)'}}/>)}
    </div>:null}
  </section>;
};
// Energetic shared template for the category pages (sofas/betten/tische/tv-moebel/sessel).
// Each page is tinted by its category accent; Küchen keeps its own bespoke page.
const catCss=(A,D)=>`
.kp-hero{background:${A};color:#fff;position:relative;overflow:hidden}
.kp-hero-in{position:relative;max-width:var(--container);margin:0 auto;padding:clamp(44px,6vw,84px) var(--gutter) clamp(20px,3vw,36px);display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;z-index:1}
.kp-eyebrow{font:500 12px var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:14px}
.kp-title{font-family:var(--font-display);font-weight:600;font-size:clamp(52px,9vw,110px);line-height:.98;letter-spacing:var(--tracking-display);color:#fff;margin:0 0 18px}
.kp-desc{font:400 var(--text-body-lg)/1.65 var(--font-body);color:rgba(255,255,255,.92);max-width:480px;margin:0 0 26px}
.kp-photo{justify-self:center;width:min(100%,460px);transform:rotate(-2deg)}
.kp-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius-lg);border:8px solid #fff;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.kp-marquee{position:relative;overflow:hidden;white-space:nowrap;pointer-events:none;margin-top:clamp(-6px,-1vw,-14px)}
.kp-marquee-track{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:clamp(64px,11vw,150px);line-height:1.05;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.38);animation:kp-scroll 28s linear infinite;padding-bottom:.08em}
@keyframes kp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kp-marquee-track{animation:none}}
.kp-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.kp-card{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med)}
.kp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:${A};transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);z-index:2}
.kp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-float)}
.kp-card:hover::before{transform:scaleX(1)}
.kp-card-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.kp-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.kp-card:hover .kp-card-img img{transform:scale(1.05)}
.kp-noimg{position:absolute;inset:0;display:grid;place-items:center;font:500 12px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:rgba(20,20,20,.4)}
.kp-badge{position:absolute;top:12px;left:12px;background:${A};color:#fff;border-radius:var(--radius-pill);padding:5px 12px;font:600 11px var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.kp-card-body{display:flex;align-items:center;gap:14px;padding:16px 18px}
.kp-num{font:600 13px var(--font-body);color:${A}}
.kp-name{font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--ink)}
.kp-note{font:400 14px var(--font-body);color:var(--ink-2);margin-top:3px}
.kp-band{background:${D};color:#fff}
/* Product lightbox: photo left, details right; chevrons cycle within the category. */
.kp-lb{position:fixed;inset:0;z-index:120;background:rgba(20,20,20,.78);backdrop-filter:blur(4px);display:grid;place-items:center;padding:clamp(12px,3vw,40px);animation:kp-fade .22s var(--ease-out)}
@keyframes kp-fade{from{opacity:0}to{opacity:1}}
.kp-lb-box{position:relative;width:min(100%,960px);max-height:92vh;background:var(--paper);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);animation:kp-pop .3s var(--ease-out)}
@keyframes kp-pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.kp-lb,.kp-lb-box{animation:none}}
.kp-lb-img{position:relative;background:var(--cloud);min-height:340px}
.kp-lb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kp-lb-side{padding:clamp(20px,3vw,34px);display:grid;gap:12px;align-content:center}
.kp-lb-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:999px;border:0;background:rgba(20,20,20,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast)}
.kp-lb-x:hover{background:rgba(20,20,20,.8)}
.kp-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-card);transition:background var(--dur-fast)}
.kp-lb-nav:hover{background:#fff}
@media (max-width:760px){.kp-lb-box{grid-template-columns:1fr;overflow:auto}.kp-lb-img{aspect-ratio:4/3;min-height:0}.kp-lb-side{align-content:start}}
@media (max-width:768px){
.kp-actions,.kp-pillrow{justify-content:center}
.kp-desc{margin-left:auto;margin-right:auto}
.kp-card-body{justify-content:center;text-align:center}
.kp-footnote{margin-left:auto;margin-right:auto}
.kp-lb-side{text-align:center}
.kp-lb-side a{align-self:center}
}
.kp-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:12px 20px;font:500 14px var(--font-body);color:var(--ink);transition:border var(--dur-fast),transform var(--dur-fast)}
.kp-pill:hover{transform:translateY(-2px)}
.kp-dot{width:10px;height:10px;border-radius:999px;flex-shrink:0}
`;
function CategoryPage({cat}){
  const {Button,Icon}=window.IkkonNS;
  const c=IKKON_CATS.find(x=>x.name===cat);
  const items=IKKON_PRODUCTS.filter(p=>p.cat===cat);
  const others=IKKON_CATS.filter(x=>x.name!==cat);
  const [lb,setLb]=React.useState(-1);
  const lbOpen=lb>=0;
  React.useEffect(()=>{
    if(!lbOpen) return;
    const onKey=e=>{
      if(e.key==='Escape')setLb(-1);
      if(e.key==='ArrowRight')setLb(v=>(v+1)%items.length);
      if(e.key==='ArrowLeft')setLb(v=>(v+items.length-1)%items.length);
    };
    document.addEventListener('keydown',onKey);
    document.documentElement.style.overflow='hidden';
    return ()=>{document.removeEventListener('keydown',onKey);document.documentElement.style.overflow=''};
  },[lbOpen,items.length]);
  const marq=(c.name+' · ').repeat(10);
  return <main>
    <style>{catCss(c.accent,c.deep)}</style>
    <section className="kp-hero">
      <div className="kp-hero-in">
        <Reveal>
          <div className="kp-eyebrow">Kategorie</div>
          <h1 className="kp-title">{c.name}</h1>
          <p className="kp-desc">{c.desc}</p>
          <div className="kp-actions" style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            {c.pdf&&<Button style={{background:'#fff',color:c.deep}} icon="arrow-right" onClick={()=>{window.open(c.pdf,'_blank')}}>Katalog als PDF</Button>}
            <Button variant="secondary" style={{borderColor:'rgba(255,255,255,.55)',color:'#fff'}} onClick={()=>{window.location.href='kontakt.html'}}>Termin vereinbaren</Button>
          </div>
        </Reveal>
        <Reveal delay={130}><div className="kp-photo"><img src={c.image} alt={c.name}/></div></Reveal>
      </div>
      <div className="kp-marquee" aria-hidden="true"><span className="kp-marquee-track">{marq}</span></div>
    </section>
    <Section eyebrow="Sortiment" title={'Unsere '+c.name}>
      <div className="kp-grid">
        {items.map((p,i)=>(
          <Reveal key={p.name} delay={i*70}>
            <article className="kp-card" role="button" tabIndex={0} aria-label={p.name+' ansehen'}
              onClick={()=>setLb(i)}
              onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();setLb(i)}}}>
              <div className="kp-card-img" style={{background:p.tone}}>
                {p.image?<img src={p.image} alt={p.name} loading="lazy"/>:<span className="kp-noimg">Foto folgt</span>}
                {p.badge&&<span className="kp-badge">{p.badge}</span>}
              </div>
              <div className="kp-card-body">
                <span className="kp-num">{String(i+1).padStart(2,'0')}</span>
                <div>
                  <div className="kp-name">{p.name}</div>
                  <div className="kp-note">{p.note}</div>
                </div>
              </div>
            </article>
          </Reveal>))}
      </div>
      <p className="kp-footnote" style={{font:'400 14px/1.65 var(--font-body)',color:'var(--ink-3)',marginTop:30,maxWidth:560}}>Ausschnitt aus unserem Sortiment. Weitere Modelle, Stoffe und Maße zeigen wir Ihnen im Schauraum.</p>
    </Section>
    <div className="kp-band">
      <Section style={{textAlign:'center'}}>
        <Reveal>
          <h2 style={{fontSize:'var(--text-h1)',fontWeight:600,color:'#fff',maxWidth:620,margin:'0 auto 16px'}}>Probesitzen, anfassen, vergleichen — im Schauraum.</h2>
          <p style={{font:'400 var(--text-body-md)/1.65 var(--font-body)',color:'rgba(255,255,255,.85)',maxWidth:480,margin:'0 auto 24px'}}>Laimäckergasse 36/4/EG/L1, 1100 Wien — Montag bis Freitag 09:30–19:00, Samstag 09:00–18:00 Uhr.</p>
          <Button style={{background:'#fff',color:c.deep}} icon="arrow-right" onClick={()=>{window.location.href='kontakt.html'}}>Termin vereinbaren</Button>
        </Reveal>
      </Section>
    </div>
    <Section eyebrow="Weitere Kategorien" title="Was suchen Sie noch?">
      <div className="kp-pillrow" style={{display:'flex',gap:12,flexWrap:'wrap'}}>
        {others.map(o=>(
          <a key={o.name} className="kp-pill" href={o.href}>
            <span className="kp-dot" style={{background:o.accent}}/>{o.name}
            <Icon name="arrow-right" size={15}/>
          </a>))}
      </div>
    </Section>
    {lbOpen&&(()=>{const p=items[lb];return (
      <div className="kp-lb" role="dialog" aria-modal="true" aria-label={p.name}
        onClick={e=>{if(e.target===e.currentTarget)setLb(-1)}}>
        <div className="kp-lb-box">
          <button className="kp-lb-x" aria-label="Schließen" onClick={()=>setLb(-1)}><Icon name="x" size={17}/></button>
          <div className="kp-lb-img" style={{background:p.tone}}>
            {p.image?<img src={p.image} alt={p.name}/>:<span className="kp-noimg">Foto folgt</span>}
            {p.badge&&<span className="kp-badge">{p.badge}</span>}
            {items.length>1&&<React.Fragment>
              <button className="kp-lb-nav" style={{left:12}} aria-label="Vorheriges Modell"
                onClick={()=>setLb((lb+items.length-1)%items.length)}><Icon name="chevron-left" size={18}/></button>
              <button className="kp-lb-nav" style={{right:12}} aria-label="Nächstes Modell"
                onClick={()=>setLb((lb+1)%items.length)}><Icon name="chevron-right" size={18}/></button>
            </React.Fragment>}
          </div>
          <div className="kp-lb-side">
            <div style={{font:'600 13px var(--font-body)',color:c.accent,letterSpacing:'.06em'}}>{String(lb+1).padStart(2,'0')} · {c.name}</div>
            <h3 style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(22px,2.6vw,30px)',letterSpacing:'var(--tracking-tight)',margin:0}}>{p.name}</h3>
            <p style={{font:'400 15px/1.7 var(--font-body)',color:'var(--ink-2)',margin:0}}>{p.note}</p>
            <p style={{font:'400 13.5px/1.65 var(--font-body)',color:'var(--ink-3)',margin:'2px 0 6px'}}>Weitere Stoffe, Farben und Maße zeigen wir Ihnen gerne im Schauraum.</p>
            <Button style={{background:c.accent,color:'#fff'}} icon="arrow-right" onClick={()=>{window.location.href='kontakt.html'}}>Termin vereinbaren</Button>
            {c.pdf&&<a href={c.pdf} target="_blank" rel="noopener" style={{font:'500 13.5px var(--font-body)',color:c.deep,textAlign:'center'}}>Katalog als PDF öffnen</a>}
          </div>
        </div>
      </div>)})()}
  </main>;
}
Object.assign(window,{IKKON_PRODUCTS,IKKON_CATS,IKKON_KUECHENMARKEN,Section,Eyebrow,BrandStrip,Reveal,HeroVideo,HeroSlider,CategoryPage});