/* Eternity-Elements · Luft-Kollektion — gemeinsames Stylesheet
   Design-Tokens konsistent mit landing-scroll.html */
:root{
  --neutral-950:#0d0c0a; --neutral-900:#141210; --neutral-800:#1d1a16;
  --line:rgba(231,206,160,0.16);
  --hairline:rgba(231,183,101,.32);
  --gold:#e7b765; --gold-soft:#f0d6a6; --fg:#efe7d8; --muted:#a99c86;
  --serif:'Spectral','Cormorant Garamond',serif;
  --sans:'Jost',sans-serif;
  --r-card:6px; --r-btn:3px;
  --luft:#8bb8d5; --luft-soft:#d5e6f0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans); color:var(--fg); background:var(--neutral-950); -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px; width:100%;}
.serif{font-family:var(--serif);}

/* ---------- nav (konsistent zur Landing) ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(13,12,10,.9), rgba(13,12,10,0));}
.nav .by{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); flex:1;}
.brand{text-align:center; line-height:1;}
.brand .l1{font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase;}
.brand .rule{height:1px; background:var(--gold); opacity:.55; margin:5px auto; width:88%;}
.brand .l2{font-family:var(--serif); font-weight:400; font-size:10px; letter-spacing:.5em; color:var(--gold-soft); text-transform:uppercase;}
.nav .menu{display:flex; gap:24px; justify-content:flex-end; flex:1; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.nav .menu a{color:var(--muted); transition:color .3s;}
.nav .menu a:hover, .nav .menu a.active{color:var(--luft);}

/* ---------- Kollektions-Header ---------- */
.collhead{position:relative; min-height:62svh; display:flex; align-items:flex-end; overflow:hidden; padding:120px 0 54px;}
.collhead .bg{position:absolute; inset:0; z-index:0; background:url("luft-header.jpg") center/cover; filter:saturate(.78) brightness(.48);}
.collhead .veil{position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(8,7,5,.55), rgba(8,7,5,.2) 45%, var(--neutral-950) 100%);}
.collhead .inner{position:relative; z-index:2;}
.collhead .kicker{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--luft); margin-bottom:14px;}
.collhead h1{font-family:var(--serif); font-weight:600; font-size:clamp(56px,11vw,128px); line-height:.92; letter-spacing:.03em; text-transform:uppercase; color:var(--fg);}
.collhead .lead{margin-top:18px; max-width:54ch; font-weight:300; font-size:15px; line-height:1.7; color:var(--fg); opacity:.85;}
.collhead .hrule{height:2px; width:min(60%,360px); margin-top:24px; background:linear-gradient(90deg,var(--luft),transparent);}

/* ---------- Wesen des Elements ---------- */
.wesen-sec{padding:60px 0 8px;}
.wesen-grid{display:grid; grid-template-columns:1.45fr .85fr; gap:52px; align-items:start;}
.wesen-text .label{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--luft); margin-bottom:18px;}
.wesen-text p{font-weight:300; font-size:16px; line-height:1.85; color:var(--fg); opacity:.88; max-width:54ch;}
.wesen-text p + p{margin-top:18px;}
.wesen-tags{display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start;}
.wesen-tags .wlabel{flex-basis:100%; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.wesen-tags span:not(.wlabel){font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--hairline); border-radius:var(--r-btn); padding:8px 15px; transition:border-color .3s, color .3s;}
.wesen-tags span:not(.wlabel):hover{border-color:var(--luft); color:var(--luft);}
@media (max-width:880px){ .wesen-grid{grid-template-columns:1fr; gap:28px;} }

/* ---------- 8er-Grid der Motive ---------- */
.grid-sec{padding:70px 0 90px;}
.grid-sec .label{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:26px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.tile{position:relative; display:block; aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg,#1a120c,#0f0b08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;}
.tile:hover{transform:translateY(-4px); border-color:var(--hairline); box-shadow:0 26px 60px -30px rgba(139,184,213,.55);}
/* echtes Motiv-Bild (Model-Mockup) füllt die Kachel */
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.05);}
/* Platzhalter-Fläche (Fallback / leere Kacheln) */
.tile .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(139,184,213,.22), rgba(13,12,10,.0) 70%);}
.tile .code{font-family:var(--serif); font-weight:600; font-size:clamp(34px,4vw,52px); letter-spacing:.06em; color:var(--luft-soft); opacity:.85; text-shadow:0 2px 30px rgba(0,0,0,.6);}
.tile .meta{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  background:linear-gradient(to top, rgba(8,7,5,.92), transparent); display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.tile .name{font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.04em; color:var(--fg);}
.tile .name small{display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.tile .price{font-family:var(--sans); font-size:13px; color:var(--gold-soft); white-space:nowrap;}

/* ---------- Produktseite ---------- */
.product{padding:120px 0 60px; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:start;}
.pmedia{position:relative; aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 38%, rgba(139,184,213,.20), #101820 72%);}
.pmedia img{width:100%; height:100%; object-fit:cover; display:block;}
/* Galerie-Thumbnails (m/w-Variante umschalten) */
.pthumbs{display:flex; gap:12px; margin-top:14px;}
.pthumb{width:80px; aspect-ratio:4/5; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:#0f0b08; cursor:pointer; padding:0; transition:border-color .25s;}
.pthumb img{width:100%; height:100%; object-fit:cover; display:block;}
.pthumb.sel, .pthumb:hover{border-color:var(--luft);}
/* Fallback für leere Produktseiten */
.pmedia .code{font-family:var(--serif); font-weight:600; font-size:clamp(60px,9vw,120px); color:var(--luft-soft); opacity:.85; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.pmedia .phnote{position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.pinfo .kicker{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--luft); margin-bottom:14px;}
.pinfo h1{font-family:var(--serif); font-weight:600; font-size:clamp(40px,6vw,72px); line-height:1; letter-spacing:.03em; text-transform:uppercase;}
.pinfo .price{margin-top:18px; font-family:var(--serif); font-size:26px; color:var(--gold-soft);}
.pinfo .desc{margin-top:22px; font-weight:300; font-size:15px; line-height:1.8; color:var(--fg); opacity:.85; max-width:48ch;}
.pinfo .opt{margin-top:30px;}
.pinfo .opt .ol{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.sizes{display:flex; gap:10px; flex-wrap:wrap;}
.sizes button{font-family:var(--sans); font-size:12px; letter-spacing:.1em; padding:11px 18px; border-radius:var(--r-btn);
  background:transparent; color:var(--fg); border:1px solid var(--line); cursor:pointer; transition:border-color .25s, color .25s, background .25s;}
.sizes button:hover, .sizes button.sel{border-color:var(--luft); color:var(--luft);}
.sizes button:disabled{opacity:.32; cursor:not-allowed; text-decoration:line-through;}
.sizes button:disabled:hover{border-color:var(--line); color:var(--fg);}
.size-status{width:100%; margin:10px 0 0; min-height:1.4em; color:var(--muted); font-size:12px; letter-spacing:.04em;}
.buybar{margin-top:34px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:9px; padding:15px 30px; border-radius:var(--r-btn);
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:transform .25s, filter .25s;}
.btn-primary{background:linear-gradient(90deg,var(--luft),var(--luft-soft)); color:#111d28; font-weight:600;}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 8px 26px -10px rgba(139,184,213,.7);}
.btn-primary.is-disabled{opacity:.45; filter:saturate(.25); cursor:not-allowed;}
.btn-primary.is-disabled:hover{filter:saturate(.25); transform:none; box-shadow:none;}
.pinfo .details{margin-top:30px; border-top:1px solid var(--line); padding-top:22px; font-size:13px; line-height:1.9; color:var(--muted);}
.pnav{margin-top:50px; display:flex; justify-content:space-between; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.pnav a:hover{color:var(--luft);}
.back{display:inline-flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); border-bottom:1px solid var(--hairline); padding-bottom:4px;}
.back:hover{color:var(--luft); border-color:var(--luft);}

/* ---------- Footer ---------- */
footer{background:var(--neutral-950); border-top:1px solid var(--line); padding:54px 32px 64px; text-align:center;}
footer .fbrand{font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase;}
footer p{margin-top:12px; color:var(--muted); font-size:12px; letter-spacing:.1em;}
footer .flinks{margin-top:16px; display:flex; gap:20px; justify-content:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
footer .flinks a{color:var(--muted);} footer .flinks a:hover{color:var(--gold);}

/* ---------- mobile ---------- */
@media (max-width:880px){ .product{grid-template-columns:1fr; gap:34px;} }
@media (max-width:680px){
  .wrap{padding:0 18px;} .nav{padding:12px 18px;} .nav .by{display:none;} .nav .menu{gap:14px; font-size:11px;}
  .grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .collhead h1{font-size:clamp(48px,16vw,72px);}
  .pinfo h1{font-size:clamp(30px,10.5vw,44px); overflow-wrap:anywhere;}
}

/* Product imagery remains uncropped; labels sit below the mockup. */
.tile{aspect-ratio:auto;background:var(--neutral-900)}
.tile img{position:static;display:block;height:auto;aspect-ratio:1;object-fit:contain}
.tile .meta{position:static;min-height:78px;background:var(--neutral-900)}
.pmedia{aspect-ratio:1;background:var(--neutral-900)}
.pmedia img,.pthumb img{object-fit:contain}
.pthumbs{flex-wrap:wrap;gap:8px}.pthumb{width:calc((100% - 32px)/5);aspect-ratio:1}
.sizes{flex-wrap:wrap}.sizes button{min-width:44px;min-height:44px}
:focus-visible{outline:2px solid var(--luft-soft);outline-offset:4px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:12px;background:var(--neutral-900)}
.skip-link:focus{top:12px}.shipping-note{font-size:12px;color:var(--muted);margin:8px 0 20px}
@media(max-width:480px){.nav{flex-wrap:wrap;justify-content:center;gap:16px;background:var(--neutral-950)}.nav .menu{flex-basis:100%;justify-content:center;gap:20px}.product{padding-top:150px}.tile .meta{padding:12px;gap:6px}.pnav{letter-spacing:.06em}.collhead{padding-top:165px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}